From f8030c69c22cc2e8879037b73b9fb960dc2c431c Mon Sep 17 00:00:00 2001
From: Alex Ackermann <abackermann91@gmail.com>
Date: Wed, 25 Jun 2025 18:09:47 +0200
Subject: [PATCH] fix: markdown editor, render images from external source

---
 .../src/components/TextEditor/TextEditor.vue      | 11 ++++++++---
 .../components/TextEditor/plugins/RenderPlugin.ts | 15 +++++++++++++++
 .../src/components/TextEditor/plugins/index.ts    |  1 +
 3 files changed, 24 insertions(+), 3 deletions(-)
 create mode 100644 packages/web-pkg/src/components/TextEditor/plugins/RenderPlugin.ts
 create mode 100644 packages/web-pkg/src/components/TextEditor/plugins/index.ts

diff --git a/packages/web-pkg/src/components/TextEditor/TextEditor.vue b/packages/web-pkg/src/components/TextEditor/TextEditor.vue
index 189032e31a..f5f64cc2d7 100644
--- a/packages/web-pkg/src/components/TextEditor/TextEditor.vue
+++ b/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,
diff --git a/packages/web-pkg/src/components/TextEditor/plugins/RenderPlugin.ts b/packages/web-pkg/src/components/TextEditor/plugins/RenderPlugin.ts
new file mode 100644
index 0000000000..f21f944942
--- /dev/null
+++ b/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)
+  }
+}
diff --git a/packages/web-pkg/src/components/TextEditor/plugins/index.ts b/packages/web-pkg/src/components/TextEditor/plugins/index.ts
new file mode 100644
index 0000000000..b4079e63ed
--- /dev/null
+++ b/packages/web-pkg/src/components/TextEditor/plugins/index.ts
@@ -0,0 +1 @@
+export * from './RenderPlugin'