POC fix: markdown editor, render images from external source

packages/web-pkg/src/components/TextEditor/TextEditor.vue

@@ -47,13 +47,12 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, unref, PropType } from 'vue'
+import { computed, defineComponent, PropType, unref } from 'vue'
 import { Resource } from '@opencloud-eu/web-client'
 
 import { config, MdEditor, MdPreview, XSSPlugin } from 'md-editor-v3'
 import 'md-editor-v3/lib/style.css'
-
-import { languageUserDefined, languages } from './l18n'
+import { languages, languageUserDefined } from './l18n'
 
 import { useGettext } from 'vue3-gettext'
 import { useThemeStore } from '../../composables'
@@ -63,6 +62,7 @@ import screenfull from 'screenfull'
 
 import Cropper from 'cropperjs'
 import 'cropperjs/dist/cropper.css'
+import { RenderPlugin } from './plugins'
 
 export default defineComponent({
   name: 'TextEditor',
@@ -114,6 +114,11 @@ export default defineComponent({
       markdownItPlugins(plugins) {
         return [
           ...plugins,
+          {
+            type: 'render',
+            plugin: RenderPlugin,
+            options: {}
+          },
           {
             type: 'xss',
             plugin: XSSPlugin,

packages/web-pkg/src/components/TextEditor/plugins/RenderPlugin.ts

@@ -0,0 +1,15 @@
+export function RenderPlugin(md, options = {}) {
+  const defaultImage = md.renderer.rules.image
+
+  md.renderer.rules.image = (tokens, idx, options, env, self) => {
+    const src = tokens[idx].attrGet('src')
+
+    if (!src.startsWith('data')) {
+      tokens[idx].attrSet('src', 'https://host.docker.internal:9200/images/default-space-icon.png')
+    }
+
+    return defaultImage
+      ? defaultImage(tokens, idx, options, env, self)
+      : self.renderToken(tokens, idx, options)
+  }
+}

packages/web-pkg/src/components/TextEditor/plugins/index.ts

@@ -0,0 +1 @@
+export * from './RenderPlugin'