better serialize assets -> markdown

Author: gordielachance

admin/src/components/ReactMdEditor.tsx

@@ -11,6 +11,7 @@ import "@uiw/react-markdown-preview/markdown.css";
 import {PLUGIN_ID} from '../utils/pluginId';
 import MediaLib from "./MediaLib";
 import { useField } from "@strapi/strapi/admin";
+import assetsToMarkdown from '../utils/assetsToMarkdown';
 
 const Wrapper = styled.div`
   flex-basis: 100%;
@@ -100,28 +101,10 @@ const Editor: FunctionComponent<EditorProps> = ({
   const handleToggleMediaLib = () => setMediaLibVisible((prev) => !prev);
 
   const handleChangeAssets = (assets: Schema.Attribute.MediaValue<true>) => {
-    let newValue = value ? value : "";
-
-    assets.map((asset) => {
-      if (asset.mime.includes("image")) {
-        const imgTag = `![${asset.alt}](${asset.url})`;
-        if (mediaLibSelection > -1) {
-          const preValue = value?.substring(0, mediaLibSelection) ?? "";
-          const postValue = value?.substring(mediaLibSelection) ?? "";
-          newValue = `${
-            preValue && !preValue.endsWith(" ") ? preValue + " " : preValue
-          }${imgTag}${
-            postValue && !postValue.startsWith(" ")
-              ? " " + postValue
-              : postValue
-          }`;
-        } else {
-          newValue = `${newValue}${imgTag}`;
-        }
-      }
-      // Handle videos and other type of files by adding some code
-    });
-    onChange({ target: { name, value: newValue ?? "" } });
+
+    const output = value + assetsToMarkdown(assets);
+
+    onChange({ target: { name, value: output} });
     handleToggleMediaLib();
   };
 

admin/src/utils/assetsToMarkdown.ts

@@ -0,0 +1,40 @@
+import type { Schema } from "@strapi/types";
+import typeFromMime from '../utils/typeFromMime';
+
+function arrayToMarkdownList(lines: string[]): string {
+  if (lines.length === 1) {
+    return lines[0];
+  }
+  return '\n' + lines.map(line => `* ${line}`).join('\n');
+}
+
+
+function singleAssetToMarkdown(asset:Schema.Attribute.MediaValue): string {
+  const type = typeFromMime(asset.mime);
+  let output = '';
+
+  switch(type){
+    //media
+    case 'image':
+    case 'video':
+    case 'audio':
+      output = `![${asset.alt}](${asset.url})`;
+    break;
+    break;
+    //doc
+    default:
+      output = `[${asset.alt}](${asset.url})`;
+    break;
+  }
+  return output;
+}
+
+export default function assetsToMarkdown(assets: Schema.Attribute.MediaValue<true>): string {
+
+  const lines = assets.map((asset) => {
+    return singleAssetToMarkdown(asset);
+  });
+
+  return arrayToMarkdownList(lines);
+
+};

admin/src/utils/typeFromMime.ts

@@ -0,0 +1,17 @@
+//strapi/packages/core/upload/admin/src/utils/typeFromMime.ts
+
+const typeFromMime = (mime: string) => {
+  if (mime.includes('image')) {
+    return 'image';
+  }
+  if (mime.includes('video')) {
+    return 'video';
+  }
+  if (mime.includes('audio')) {
+    return'audio';
+  }
+
+  return 'doc'
+};
+
+export default typeFromMime;