fix: media not displaying with local backend (#324)

packages/core/dev-test/backends/proxy/config.yml

@@ -1,17 +1,18 @@
 backend:
   name: github
   branch: main
-  repo: owner/repo
-
-media_folder: static/media
-public_folder: /media
+  repo: staticjscms/static-cms-github
 
 local_backend: true
 
+media_folder: assets/upload
+public_folder: /assets/upload
 collections:
   - name: posts
     label: Posts
     label_singular: Post
+    media_folder: /assets/posts
+    public_folder: /assets/posts
     description: >
       The description is a great place for tone setting, high level information,
       and editing guidelines that are specific to a collection.
@@ -94,8 +95,6 @@ collections:
   - name: settings
     label: Settings
     delete: false
-    editor:
-      preview: false
     files:
       - name: general
         label: Site Settings

packages/core/dev-test/index.js

@@ -11,29 +11,12 @@ const PostPreview = ({ entry, widgetFor, widgetsFor }) => {
   );
 };
 
-const GeneralPreview = ({ widgetsFor, getAsset, entry }) => {
+const GeneralPreview = ({ widgetsFor, entry, collection }) => {
   const title = entry.data.site_title;
   const posts = entry.data.posts;
   const thumb = posts && posts.thumb;
 
-  const [thumbUrl, setThumbUrl] = useState('');
-
-  useEffect(() => {
-    let alive = true;
-
-    const loadThumb = async () => {
-      const thumbAsset = await getAsset(thumb);
-      if (alive) {
-        setThumbUrl(thumbAsset.toString());
-      }
-    };
-
-    loadThumb();
-
-    return () => {
-      alive = false;
-    };
-  }, [thumb]);
+  const thumbUrl = useMediaAsset(thumb, collection, undefined, entry);
 
   return h(
     'div',
@@ -96,7 +79,6 @@ const CustomPage = () => {
   return h('div', {}, 'I am a custom page!');
 };
 
-CMS.registerPreviewStyle('.toastui-editor-contents h1 { color: blue }', { raw: true });
 CMS.registerPreviewTemplate('posts', PostPreview);
 CMS.registerPreviewTemplate('general', GeneralPreview);
 CMS.registerPreviewTemplate('authors', AuthorsPreview);