From 66d269566bbc84de91008c3e6c3f09b17f3da2db Mon Sep 17 00:00:00 2001
From: Michael Wedl <michael@syslifters.com>
Date: Tue, 7 Jan 2025 08:50:49 +0100
Subject: [PATCH 1/4] Render MD preview in web worker

---
 .../src/components/Markdown/Preview.vue       |  8 +++---
 packages/frontend/src/composables/markdown.ts | 25 +++++++++++++++++++
 .../frontend/src/workers/markdownWorker.ts    | 10 ++++++++
 packages/frontend/src/workers/regexWorker.ts  |  5 ++--
 4 files changed, 42 insertions(+), 6 deletions(-)
 create mode 100644 packages/frontend/src/workers/markdownWorker.ts

diff --git a/packages/frontend/src/components/Markdown/Preview.vue b/packages/frontend/src/components/Markdown/Preview.vue
index 6dea5578e..d388eabe0 100644
--- a/packages/frontend/src/components/Markdown/Preview.vue
+++ b/packages/frontend/src/components/Markdown/Preview.vue
@@ -8,9 +8,10 @@
 </template>
 
 <script lang="ts">
-import { renderMarkdownToHtml, mermaid } from '@sysreptor/markdown';
+import { mermaid } from '@sysreptor/markdown';
 import { uuidv4 } from "@base/utils/helpers";
 import { absoluteApiUrl } from '#imports';
+import { renderMarkdownToHtmlInWorker, type ReferenceItem } from '~/composables/markdown';
 
 mermaid.initialize({
   startOnLoad: false,
@@ -31,9 +32,10 @@ const cacheBusterFallback = uuidv4();
 const cacheBuster = computed(() => props.cacheBuster || cacheBusterFallback);
 const renderedMarkdown = ref('');
 const renderedMarkdownText = ref('');
-watchThrottled(() => props.value, () => {
+watchThrottled(() => props.value, async () => {
   const mdText = props.value || '';
-  renderedMarkdown.value = renderMarkdownToHtml(mdText, {
+  renderedMarkdown.value = await renderMarkdownToHtmlInWorker({
+    text: mdText,
     preview: true,
     rewriteFileSource,
     rewriteReferenceLink: props.rewriteReferenceLink,
diff --git a/packages/frontend/src/composables/markdown.ts b/packages/frontend/src/composables/markdown.ts
index d01cac845..06d28b3a0 100644
--- a/packages/frontend/src/composables/markdown.ts
+++ b/packages/frontend/src/composables/markdown.ts
@@ -24,6 +24,9 @@ import {
 } from "@sysreptor/markdown/editor/index";
 import { uuidv4 } from "@base/utils/helpers";
 import { MarkdownEditorMode } from '#imports';
+import type { renderMarkdownToHtml } from "@sysreptor/markdown";
+import { workerUrlPolicy } from "~/plugins/trustedtypes";
+import markdownWorkerUrl from "~/workers/markdownWorker?worker&url"
 
 export type ReferenceItem = {
   id: string;
@@ -598,3 +601,25 @@ export function markdownEditorPageExtensions() {
     scrollPastEnd(),
   ] as Extension[];
 }
+
+
+export async function renderMarkdownToHtmlInWorker(options: Parameters<typeof renderMarkdownToHtml>[0]): Promise<string> {
+  // Global worker instance reused for all components
+  const worker = useState('markdownWorker', () => new Worker(workerUrlPolicy.createScriptURL!(markdownWorkerUrl) as string, { type: 'module' }));
+  // Render markdown in worker
+  return new Promise((resolve, reject) => {
+    const messageId = uuidv4();
+    function onMessage(e: MessageEvent<{ messageId: string, status: 'success'|'error', error?: any, result?: string }>) {
+      if (e.data.messageId === messageId) {
+        worker.value.removeEventListener('message', onMessage);
+        if (e.data.status === 'success') {
+          resolve(e.data.result!);
+        } else {
+          reject(e.data.error);
+        }
+      }
+    }
+    worker.value.addEventListener('message', onMessage);
+    worker.value.postMessage({ messageId, options });
+  });
+}
diff --git a/packages/frontend/src/workers/markdownWorker.ts b/packages/frontend/src/workers/markdownWorker.ts
new file mode 100644
index 000000000..f41b12677
--- /dev/null
+++ b/packages/frontend/src/workers/markdownWorker.ts
@@ -0,0 +1,10 @@
+import { renderMarkdownToHtml } from "@sysreptor/markdown";
+
+onmessage = (e: MessageEvent<{ messageId: string, options: Parameters<typeof renderMarkdownToHtml>[0] }>) => {
+  try {
+    const result = renderMarkdownToHtml(e.data.options);
+    postMessage({ messageId: e.data.messageId, status: 'success', result })
+  } catch (error) {
+    postMessage({ messageId: e.data.messageId, status: 'error', error });
+  }
+};
diff --git a/packages/frontend/src/workers/regexWorker.ts b/packages/frontend/src/workers/regexWorker.ts
index a2f0a5c7b..b35c97ea4 100644
--- a/packages/frontend/src/workers/regexWorker.ts
+++ b/packages/frontend/src/workers/regexWorker.ts
@@ -1,5 +1,4 @@
-onmessage = (e: MessageEvent) => {
-  const { pattern, value }: { pattern: RegExp, value: string } = e.data;
-  const res = pattern.test(value);
+onmessage = (e: MessageEvent<{ pattern: RegExp, value: string }>) => {
+  const res = e.data.pattern.test(e.data.value);
   postMessage(res);
 };

From 35e088a87e899a8e01560b918f6a08e6ec446f12 Mon Sep 17 00:00:00 2001
From: Michael Wedl <michael@syslifters.com>
Date: Tue, 7 Jan 2025 08:51:38 +0100
Subject: [PATCH 2/4] Refactor MD rewriteReferenceLink

---
 .../components/Design/LayoutComponentForm.vue  |  2 +-
 .../src/components/Design/LayoutEditor.vue     |  2 +-
 .../src/components/Design/LayoutTree.vue       |  2 +-
 .../src/components/DynamicInputField.vue       |  2 +-
 .../src/components/DynamicInputFieldDiff.vue   |  2 +-
 .../src/components/Markdown/Preview.vue        |  4 ++--
 packages/frontend/src/composables/history.ts   |  4 ++--
 packages/frontend/src/composables/lockedit.ts  | 18 +++++-------------
 packages/frontend/src/composables/markdown.ts  |  9 +++------
 .../frontend/test/markdownExtensions.test.ts   |  2 +-
 packages/markdown/mdext/index.js               | 10 +++++-----
 packages/markdown/mdext/reference.js           |  7 ++++---
 packages/rendering/src/components/Markdown.vue |  2 +-
 13 files changed, 28 insertions(+), 38 deletions(-)

diff --git a/packages/frontend/src/components/Design/LayoutComponentForm.vue b/packages/frontend/src/components/Design/LayoutComponentForm.vue
index e1677da68..71ea17c5c 100644
--- a/packages/frontend/src/components/Design/LayoutComponentForm.vue
+++ b/packages/frontend/src/components/Design/LayoutComponentForm.vue
@@ -199,7 +199,7 @@ const emit = defineEmits<{
 const localSettings = useLocalSettings();
 
 const markdownProps = computed(() => ({
-  ...pick(props, ['disabled', 'lang', 'uploadFile', 'rewriteFileUrl', 'rewriteReferenceLink']),
+  ...pick(props, ['disabled', 'lang', 'uploadFile', 'rewriteFileUrl', 'referenceItems']),
   spellcheckEnabled: localSettings.designSpellcheckEnabled,
   'onUpdate:spellcheckEnabled': (value: boolean) => { localSettings.designSpellcheckEnabled = value },
   markdownEditorMode: localSettings.designMarkdownEditorMode,
diff --git a/packages/frontend/src/components/Design/LayoutEditor.vue b/packages/frontend/src/components/Design/LayoutEditor.vue
index 1b81f1784..a49431956 100644
--- a/packages/frontend/src/components/Design/LayoutEditor.vue
+++ b/packages/frontend/src/components/Design/LayoutEditor.vue
@@ -86,7 +86,7 @@ const markdownProps = computed(() => ({
   lang: props.lang || props.projectType.language,
   uploadFile: props.uploadFile,
   rewriteFileUrl: props.rewriteFileUrl,
-  rewriteReferenceLink: props.rewriteReferenceLink,
+  referenceItems: props.referenceItems,
 }));
 
 const isVisible = ref(true);
diff --git a/packages/frontend/src/components/Design/LayoutTree.vue b/packages/frontend/src/components/Design/LayoutTree.vue
index 8df6fcc14..9367df7fb 100644
--- a/packages/frontend/src/components/Design/LayoutTree.vue
+++ b/packages/frontend/src/components/Design/LayoutTree.vue
@@ -85,7 +85,7 @@ const emit = defineEmits<{
   jumpToCode: [{ tab: PdfDesignerTab, position: DocumentSelectionPosition }];
 }>();
 
-const markdownProps = computed(() => pick(props, ['disabled', 'lang', 'uploadFile', 'rewriteFileUrl', 'rewriteReferenceLink']));
+const markdownProps = computed(() => pick(props, ['disabled', 'lang', 'uploadFile', 'rewriteFileUrl', 'referenceItems']));
 
 function onChange(e: any) {
   if (e.moved) {
diff --git a/packages/frontend/src/components/DynamicInputField.vue b/packages/frontend/src/components/DynamicInputField.vue
index 3347077a9..7d6ce82ee 100644
--- a/packages/frontend/src/components/DynamicInputField.vue
+++ b/packages/frontend/src/components/DynamicInputField.vue
@@ -527,7 +527,7 @@ const fieldAttrs = computed(() => ({
   label: label.value,
   ...pick(props, [
     'disabled', 'readonly', 'autofocus', 'lang', 'spellcheckEnabled', 'markdownEditorMode', 
-    'referenceItems', 'uploadFile', 'rewriteFileUrl', 'rewriteReferenceLink'
+    'referenceItems', 'uploadFile', 'rewriteFileUrl',
   ]),
   onCollab: (v: any) => emit('collab', v),
   onComment: (v: any) => emit('comment', v),
diff --git a/packages/frontend/src/components/DynamicInputFieldDiff.vue b/packages/frontend/src/components/DynamicInputFieldDiff.vue
index e6a7b8e4f..07d546cce 100644
--- a/packages/frontend/src/components/DynamicInputFieldDiff.vue
+++ b/packages/frontend/src/components/DynamicInputFieldDiff.vue
@@ -98,7 +98,7 @@ const attrs = useAttrs();
 const inheritedDiffAttrs = computed(() => {
   const copyFields = [
     'disabled', 'readonly', 'lang', 'spellcheckEnabled', 'markdownEditorMode', 
-    'uploadFile', 'rewriteFileUrl', 'rewriteReferenceLink', 
+    'uploadFile', 'rewriteFileUrl',
     'selectableUsers', 'referenceItems',
     'fieldValueSuggestions',
     'onUpdate:markdownEditorMode', 'onUpdate:spellcheckEnabled', 
diff --git a/packages/frontend/src/components/Markdown/Preview.vue b/packages/frontend/src/components/Markdown/Preview.vue
index d388eabe0..8761ad805 100644
--- a/packages/frontend/src/components/Markdown/Preview.vue
+++ b/packages/frontend/src/components/Markdown/Preview.vue
@@ -24,7 +24,7 @@ mermaid.initialize({
 const props = defineProps<{
   value?: string|null;
   rewriteFileUrl?: (fileSrc: string) => string;
-  rewriteReferenceLink?: (src: string) => {href: string, title: string}|null;
+  referenceItems?: ReferenceItem[];
   cacheBuster?: string;
 }>();
 
@@ -38,7 +38,7 @@ watchThrottled(() => props.value, async () => {
     text: mdText,
     preview: true,
     rewriteFileSource,
-    rewriteReferenceLink: props.rewriteReferenceLink,
+    referenceItems: props.referenceItems,
   });
   renderedMarkdownText.value = mdText;
 }, { throttle: 500, leading: true, immediate: true });
diff --git a/packages/frontend/src/composables/history.ts b/packages/frontend/src/composables/history.ts
index c0c03b936..1a330b5bd 100644
--- a/packages/frontend/src/composables/history.ts
+++ b/packages/frontend/src/composables/history.ts
@@ -44,7 +44,7 @@ export function useMarkdownDiff(options: {
       modelValue: options.props.value.current.value,
       ...pick(options.props.value.current, [
         'collab', 'lang', 'readonly', 'disabled', 'markdownEditorMode', 'spellcheckSupported', 'spellcheckEnabled', 
-        'referenceItems', 'uploadFile', 'rewriteFileUrl', 'rewriteReferenceLink',
+        'referenceItems', 'uploadFile', 'rewriteFileUrl',
       ]),
     })),
     emit: (name: string, value: any) => {
@@ -61,7 +61,7 @@ export function useMarkdownDiff(options: {
     props: computed(() => ({
       modelValue: options.props.value.historic.value,
       readonly: true,
-      ...pick(options.props.value.historic, ['lang', 'markdownEditorMode', 'rewriteFileUrl', 'rewriteReferenceLink']),
+      ...pick(options.props.value.historic, ['lang', 'markdownEditorMode', 'rewriteFileUrl', 'referenceItems']),
     })),
     emit: (name: string, value: any) => {
       const emit = (options.props.value.historic as any)['on' + name.charAt(0).toUpperCase() + name.slice(1)];
diff --git a/packages/frontend/src/composables/lockedit.ts b/packages/frontend/src/composables/lockedit.ts
index dee99cf81..ef5b5c826 100644
--- a/packages/frontend/src/composables/lockedit.ts
+++ b/packages/frontend/src/composables/lockedit.ts
@@ -7,6 +7,7 @@ import {
   type MarkdownEditorMode,
   type PentestProject,
   type ProjectType,
+  type ReferenceItem,
   type UploadedFileInfo,
 } from "#imports";
 
@@ -142,26 +143,18 @@ export function useProjectEditBase(options: {
     }
   }
 
-  const referenceItems = computed(() => {
+  const referenceItems = computed<ReferenceItem[]>(() => {
     return projectStore.findings(options.project.value?.id || '', { projectType: options.projectType?.value })
       .map(f => ({
         id: f.id, 
         title: f.data.title,
+        label: `[Finding ${f.data.title}]`,
+        href: `/projects/${options.project.value!.id}/reporting/findings/${f.data.id}/`,
         severity: options.projectType?.value ? 
-        levelNameFromLevelNumber(getFindingRiskLevel({ finding: f, projectType: options.projectType?.value }) as any)?.toLowerCase() : 
+          levelNameFromLevelNumber(getFindingRiskLevel({ finding: f, projectType: options.projectType?.value }) as any)?.toLowerCase() : 
           undefined,
       }))
   });
-  function rewriteReferenceLink(refId: string) {
-    const findingRef = referenceItems.value.find(f => f.id === refId);
-    if (findingRef) {
-      return {
-        href: `/projects/${options.project.value!.id}/reporting/findings/${findingRef.id}/`,
-        title: `[Finding ${findingRef.title}]`,
-      };
-    }
-    return null;
-  }
 
   const spellcheckEnabled = options.spellcheckEnabled || computed({ 
     get: () => localSettings.reportingSpellcheckEnabled && !options.historyDate,
@@ -181,7 +174,6 @@ export function useProjectEditBase(options: {
     'onUpdate:markdownEditorMode': (val: MarkdownEditorMode) => { markdownEditorMode.value = val; },
     uploadFile,
     rewriteFileUrl,
-    rewriteReferenceLink,
   }));
 
   return {
diff --git a/packages/frontend/src/composables/markdown.ts b/packages/frontend/src/composables/markdown.ts
index 06d28b3a0..f6b53044c 100644
--- a/packages/frontend/src/composables/markdown.ts
+++ b/packages/frontend/src/composables/markdown.ts
@@ -31,6 +31,8 @@ import markdownWorkerUrl from "~/workers/markdownWorker?worker&url"
 export type ReferenceItem = {
   id: string;
   title: string;
+  href: string;
+  label?: string;
   severity?: string;
 }
 
@@ -42,7 +44,6 @@ export type MarkdownProps = {
   collab?: CollabPropType;
   uploadFile?: (file: File) => Promise<string>;
   rewriteFileUrl?: (fileSrc: string) => string;
-  rewriteReferenceLink?: (src: string) => {href: string, title: string}|null;
 }
 
 export function makeMarkdownProps(options: { spellcheckSupportedDefault: boolean } = { spellcheckSupportedDefault: true }) {
@@ -91,10 +92,6 @@ export function makeMarkdownProps(options: { spellcheckSupportedDefault: boolean
       type: Function as PropType<MarkdownProps['rewriteFileUrl']>,
       default: undefined,
     },
-    rewriteReferenceLink: {
-      type: Function as PropType<MarkdownProps['rewriteReferenceLink']>,
-      default: undefined,
-    },
   }
 }
 export function makeMarkdownEmits() {
@@ -498,7 +495,7 @@ export function useMarkdownEditorBase(options: {
   const markdownPreviewAttrs = computed(() => ({
     value: editorState.value?.doc.toString() ?? options.props.value.modelValue,
     rewriteFileUrl: options.props.value.rewriteFileUrl,
-    rewriteReferenceLink: options.props.value.rewriteReferenceLink,
+    referenceItems: options.props.value.referenceItems,
     cacheBuster: previewCacheBuster,
   }));
 
diff --git a/packages/frontend/test/markdownExtensions.test.ts b/packages/frontend/test/markdownExtensions.test.ts
index dda0a5971..eb1a910f6 100644
--- a/packages/frontend/test/markdownExtensions.test.ts
+++ b/packages/frontend/test/markdownExtensions.test.ts
@@ -87,7 +87,7 @@ describe('Markdown extensions', () => {
     '```\n\\# \\{\\{ text \\}\\}\n```': codeBlock('\\# \\&#x7B;\\&#x7B; text \\&#x7D;\\&#x7D;'),
   }).map(([md, expected]) => [md, typeof expected === 'string' ? { html: expected, formatted: md } : expected]) as [string, { html: string, formatted: string }][]) {
     test(md, () => {
-      const html = renderMarkdownToHtml(md).replaceAll(/ data-position=".*?"/g, '').trim()
+      const html = renderMarkdownToHtml({ text: md }).replaceAll(/ data-position=".*?"/g, '').trim()
       expect(html).toBe(expected.html);
       const formattedMd = formatMarkdown(md).trim();
       expect(formattedMd).toBe(expected.formatted);
diff --git a/packages/markdown/mdext/index.js b/packages/markdown/mdext/index.js
index b2d7b1b94..e736c90d5 100644
--- a/packages/markdown/mdext/index.js
+++ b/packages/markdown/mdext/index.js
@@ -83,12 +83,12 @@ export function formatMarkdown(text) {
 }
 
 /**
- * 
- * @param {string} text 
- * @param {*} options 
+ * Render markdown text to HTML
+ * @param {{text: string, preview?: boolean, rewriteFileSource?, referenceItems?: {id: string, href: string, label: string}[]}} options 
  * @returns {string}
  */
-export function renderMarkdownToHtml(text, {preview = false, rewriteFileSource = null, rewriteReferenceLink = null} = {}) {
+export function renderMarkdownToHtml({ text = '', preview = false, rewriteFileSource = undefined, referenceItems = undefined} = {}) {
+  // TODO: rewriteFileSource: dict instead of function, cache buster (optional)
   let md = markdownParser()
       .use(remarkParse)
       .use(remarkRehype, { 
@@ -111,7 +111,7 @@ export function renderMarkdownToHtml(text, {preview = false, rewriteFileSource =
       .use(rehypeTemplateVariables, { preview })
       .use(rehypeConvertAttrsToStyle)
       .use(preview ? rehypeFootnoteSeparatorPreview : rehypeFootnoteSeparator)
-      .use(preview ? rehypeReferenceLinkPreview : rehypeReferenceLink, { rewriteReferenceLink })
+      .use(preview ? rehypeReferenceLinkPreview : rehypeReferenceLink, { referenceItems })
       .use(rehypeRewriteImageSources, {rewriteImageSource: rewriteFileSource})
       .use(rehypeRewriteFileLinks, {rewriteFileUrl: rewriteFileSource})
       .use(rehypeLinkTargetBlank);
diff --git a/packages/markdown/mdext/reference.js b/packages/markdown/mdext/reference.js
index 6cdb339ac..c3016b179 100644
--- a/packages/markdown/mdext/reference.js
+++ b/packages/markdown/mdext/reference.js
@@ -13,7 +13,7 @@ export function rehypeReferenceLink() {
 }
 
 
-export function rehypeReferenceLinkPreview({ rewriteReferenceLink = null }) {
+export function rehypeReferenceLinkPreview({ referenceItems = undefined }) {
   return tree => {
     let refNodes = [];
     let refTargets = {};
@@ -35,8 +35,9 @@ export function rehypeReferenceLinkPreview({ rewriteReferenceLink = null }) {
 
         let refPreview = null;
         // Known reference target (e.g. other finding)
-        if (!refPreview && rewriteReferenceLink) {
-          refPreview = rewriteReferenceLink(refId);
+        // TODO: refactor
+        if (!refPreview && referenceItems) {
+          refPreview = referenceItems.find(item => item.id === refId);
         }
 
         // Local reference target (e.g. figure in same markdown field)
diff --git a/packages/rendering/src/components/Markdown.vue b/packages/rendering/src/components/Markdown.vue
index 2fb15811b..53c7fb999 100644
--- a/packages/rendering/src/components/Markdown.vue
+++ b/packages/rendering/src/components/Markdown.vue
@@ -12,7 +12,7 @@ export default {
   },
   methods: {
     compileMarkdown(text: string) {
-      return renderMarkdownToHtml(text, { preview: false });
+      return renderMarkdownToHtml({ text, preview: false });
     },
   },
   render() {

From fcd4e6a1ffd7655c1ee6ad8316eecc610a181f18 Mon Sep 17 00:00:00 2001
From: Michael Wedl <michael@syslifters.com>
Date: Tue, 7 Jan 2025 10:07:29 +0100
Subject: [PATCH 3/4] Refactor MD rewriteFileUrl

---
 .../src/components/Comment/Sidebar.vue        |  7 -----
 .../Design/LayoutComponentEditDialog.vue      |  4 +--
 .../components/Design/LayoutComponentForm.vue |  2 +-
 .../src/components/Design/LayoutEditor.vue    |  2 +-
 .../src/components/Design/LayoutTree.vue      |  2 +-
 .../src/components/Design/PreviewDataForm.vue |  4 +--
 .../src/components/DynamicInputField.vue      |  2 +-
 .../src/components/DynamicInputFieldDiff.vue  |  3 +--
 .../src/components/Markdown/Preview.vue       | 15 +++--------
 .../src/components/Template/Editor.vue        |  6 ++---
 .../src/components/Template/EditorDiff.vue    |  8 +++---
 packages/frontend/src/composables/history.ts  |  4 +--
 packages/frontend/src/composables/lockedit.ts | 14 +++++-----
 packages/frontend/src/composables/markdown.ts | 12 ++++-----
 .../designs/[projectTypeId]/pdfdesigner.vue   |  9 +++----
 .../src/pages/notes/personal/[noteId].vue     |  9 ++++---
 .../shared/[shareInfoId]/notes/[noteId].vue   |  9 ++++---
 .../[templateId]/history/[historyDate].vue    | 18 +++++++------
 .../pages/templates/[templateId]/index.vue    |  8 +++---
 .../src/pages/templates/fromfinding.vue       |  9 ++++---
 packages/markdown/mdext/index.js              | 14 +++++-----
 packages/markdown/mdext/reference.js          | 11 ++++----
 packages/markdown/mdext/rehypePlugins.js      | 26 ++++++++++++-------
 23 files changed, 95 insertions(+), 103 deletions(-)

diff --git a/packages/frontend/src/components/Comment/Sidebar.vue b/packages/frontend/src/components/Comment/Sidebar.vue
index 41ffb26d2..d04d7488c 100644
--- a/packages/frontend/src/components/Comment/Sidebar.vue
+++ b/packages/frontend/src/components/Comment/Sidebar.vue
@@ -257,10 +257,3 @@ defineExpose({
   min-height: 0;
 }
 </style>
-
-<!-- TODO: comment improvements
-* [x] change icon for resolve: mdi-check-marked-circle
-* [x] allow un-resolving comments
-* [x] save comment/answer with Ctrl+Enter
-* [x] add comment in markdown for selected text with Ctrl+Alt+M 
--->
diff --git a/packages/frontend/src/components/Design/LayoutComponentEditDialog.vue b/packages/frontend/src/components/Design/LayoutComponentEditDialog.vue
index cd6185715..b87948a5e 100644
--- a/packages/frontend/src/components/Design/LayoutComponentEditDialog.vue
+++ b/packages/frontend/src/components/Design/LayoutComponentEditDialog.vue
@@ -19,8 +19,8 @@
           v-model="form"
           :lang="item.context.projectType.language"
           :upload-file="uploadFile"
-          :rewrite-file-url="rewriteFileUrl"
-          :disabled="disabled"
+          :rewrite-file-url-map="props.rewriteFileUrlMap"
+          :disabled="props.disabled"
         />
       </v-card-text>
       <v-card-actions>
diff --git a/packages/frontend/src/components/Design/LayoutComponentForm.vue b/packages/frontend/src/components/Design/LayoutComponentForm.vue
index 71ea17c5c..c481be2d7 100644
--- a/packages/frontend/src/components/Design/LayoutComponentForm.vue
+++ b/packages/frontend/src/components/Design/LayoutComponentForm.vue
@@ -199,7 +199,7 @@ const emit = defineEmits<{
 const localSettings = useLocalSettings();
 
 const markdownProps = computed(() => ({
-  ...pick(props, ['disabled', 'lang', 'uploadFile', 'rewriteFileUrl', 'referenceItems']),
+  ...pick(props, ['disabled', 'lang', 'uploadFile', 'rewriteFileUrlMap', 'referenceItems']),
   spellcheckEnabled: localSettings.designSpellcheckEnabled,
   'onUpdate:spellcheckEnabled': (value: boolean) => { localSettings.designSpellcheckEnabled = value },
   markdownEditorMode: localSettings.designMarkdownEditorMode,
diff --git a/packages/frontend/src/components/Design/LayoutEditor.vue b/packages/frontend/src/components/Design/LayoutEditor.vue
index a49431956..6a9c435ba 100644
--- a/packages/frontend/src/components/Design/LayoutEditor.vue
+++ b/packages/frontend/src/components/Design/LayoutEditor.vue
@@ -85,7 +85,7 @@ const markdownProps = computed(() => ({
   disabled: props.disabled,
   lang: props.lang || props.projectType.language,
   uploadFile: props.uploadFile,
-  rewriteFileUrl: props.rewriteFileUrl,
+  rewriteFileUrlMap: props.rewriteFileUrlMap,
   referenceItems: props.referenceItems,
 }));
 
diff --git a/packages/frontend/src/components/Design/LayoutTree.vue b/packages/frontend/src/components/Design/LayoutTree.vue
index 9367df7fb..f771c9c7c 100644
--- a/packages/frontend/src/components/Design/LayoutTree.vue
+++ b/packages/frontend/src/components/Design/LayoutTree.vue
@@ -85,7 +85,7 @@ const emit = defineEmits<{
   jumpToCode: [{ tab: PdfDesignerTab, position: DocumentSelectionPosition }];
 }>();
 
-const markdownProps = computed(() => pick(props, ['disabled', 'lang', 'uploadFile', 'rewriteFileUrl', 'referenceItems']));
+const markdownProps = computed(() => pick(props, ['disabled', 'lang', 'uploadFile', 'rewriteFileUrlMap', 'referenceItems']));
 
 function onChange(e: any) {
   if (e.moved) {
diff --git a/packages/frontend/src/components/Design/PreviewDataForm.vue b/packages/frontend/src/components/Design/PreviewDataForm.vue
index 717517bf5..157639787 100644
--- a/packages/frontend/src/components/Design/PreviewDataForm.vue
+++ b/packages/frontend/src/components/Design/PreviewDataForm.vue
@@ -153,7 +153,7 @@ const props = defineProps<{
   projectType: ProjectType;
   readonly?: boolean;
   uploadFile?: (file: File) => Promise<string>;
-  rewriteFileUrl?: (fileSrc: string) => string;
+  rewriteFileUrlMap?: Record<string, string>;
 }>();
 const emit = defineEmits<{
   'update:modelValue': [any];
@@ -260,7 +260,7 @@ function riskLevel(finding: any) {
 const fieldAttrs = computed(() => ({
   showFieldIds: true,
   uploadFile: props.uploadFile,
-  rewriteFileUrl: props.rewriteFileUrl,
+  rewriteFileUrlMap: props.rewriteFileUrlMap,
   selectableUsers: [auth.user.value!],
   lang: props.projectType.language,
   readonly: props.readonly,
diff --git a/packages/frontend/src/components/DynamicInputField.vue b/packages/frontend/src/components/DynamicInputField.vue
index 7d6ce82ee..db3923b0c 100644
--- a/packages/frontend/src/components/DynamicInputField.vue
+++ b/packages/frontend/src/components/DynamicInputField.vue
@@ -527,7 +527,7 @@ const fieldAttrs = computed(() => ({
   label: label.value,
   ...pick(props, [
     'disabled', 'readonly', 'autofocus', 'lang', 'spellcheckEnabled', 'markdownEditorMode', 
-    'referenceItems', 'uploadFile', 'rewriteFileUrl',
+    'referenceItems', 'rewriteFileUrlMap', 'uploadFile',
   ]),
   onCollab: (v: any) => emit('collab', v),
   onComment: (v: any) => emit('comment', v),
diff --git a/packages/frontend/src/components/DynamicInputFieldDiff.vue b/packages/frontend/src/components/DynamicInputFieldDiff.vue
index 07d546cce..0c783cd4f 100644
--- a/packages/frontend/src/components/DynamicInputFieldDiff.vue
+++ b/packages/frontend/src/components/DynamicInputFieldDiff.vue
@@ -98,8 +98,7 @@ const attrs = useAttrs();
 const inheritedDiffAttrs = computed(() => {
   const copyFields = [
     'disabled', 'readonly', 'lang', 'spellcheckEnabled', 'markdownEditorMode', 
-    'uploadFile', 'rewriteFileUrl',
-    'selectableUsers', 'referenceItems',
+    'uploadFile', 'selectableUsers', 'referenceItems', 'rewriteFileUrlMap',
     'fieldValueSuggestions',
     'onUpdate:markdownEditorMode', 'onUpdate:spellcheckEnabled', 
     'collab', 'onCollab', 'onComment',
diff --git a/packages/frontend/src/components/Markdown/Preview.vue b/packages/frontend/src/components/Markdown/Preview.vue
index 8761ad805..1f41a6941 100644
--- a/packages/frontend/src/components/Markdown/Preview.vue
+++ b/packages/frontend/src/components/Markdown/Preview.vue
@@ -23,7 +23,7 @@ mermaid.initialize({
 <script setup lang="ts">
 const props = defineProps<{
   value?: string|null;
-  rewriteFileUrl?: (fileSrc: string) => string;
+  rewriteFileUrlMap?: Record<string, string>;
   referenceItems?: ReferenceItem[];
   cacheBuster?: string;
 }>();
@@ -37,22 +37,13 @@ watchThrottled(() => props.value, async () => {
   renderedMarkdown.value = await renderMarkdownToHtmlInWorker({
     text: mdText,
     preview: true,
-    rewriteFileSource,
     referenceItems: props.referenceItems,
+    rewriteFileUrlMap: props.rewriteFileUrlMap,
+    cacheBuster: cacheBuster.value,
   });
   renderedMarkdownText.value = mdText;
 }, { throttle: 500, leading: true, immediate: true });
 
-function rewriteFileSource(imgSrc: string) {
-  // Rewrite image source to handle image fetching from markdown.
-  // Images in markdown are referenced with a URL relative to the parent resource (e.g. "/images/name/image.png").
-  if (!props.rewriteFileUrl || !imgSrc.startsWith('/')) {
-    return imgSrc;
-  }
-
-  return absoluteApiUrl(props.rewriteFileUrl(`${imgSrc}?c=${cacheBuster.value}`));
-}
-
 const previewRef = ref<HTMLDivElement>();
 async function postProcessRenderedHtml() {
   // Prevent navigation when clicking on anchor links in preview
diff --git a/packages/frontend/src/components/Template/Editor.vue b/packages/frontend/src/components/Template/Editor.vue
index 83620a90c..89b8c5985 100644
--- a/packages/frontend/src/components/Template/Editor.vue
+++ b/packages/frontend/src/components/Template/Editor.vue
@@ -135,7 +135,7 @@ const props = withDefaults(defineProps<{
   readonly?: boolean;
   toolbarAttrs?: object;
   uploadFile?: (file: File) => Promise<string>;
-  rewriteFileUrl?: (fileSrc: string) => string;
+  rewriteFileUrlMap?: Record<string, string>;
   history?: boolean;
   
 }>(), {
@@ -143,7 +143,7 @@ const props = withDefaults(defineProps<{
   fieldDefinitionList: undefined,
   toolbarAttrs: () => ({}),
   uploadFile: undefined,
-  rewriteFileUrl: undefined,
+  rewriteFileUrlMap: undefined,
   readonly: false,
   history: false,
 });
@@ -253,7 +253,7 @@ const fieldAttrs = computed(() => (translation: FindingTemplateTranslation, defi
   markdownEditorMode: localSettings.templateMarkdownEditorMode,
   'onUpdate:markdownEditorMode': (value: MarkdownEditorMode) => { localSettings.templateMarkdownEditorMode = value },
   uploadFile: props.uploadFile,
-  rewriteFileUrl: props.rewriteFileUrl,
+  rewriteFileUrlMap: props.rewriteFileUrlMap,
 }))
 
 defineExpose({
diff --git a/packages/frontend/src/components/Template/EditorDiff.vue b/packages/frontend/src/components/Template/EditorDiff.vue
index 10ea7355c..88d5b9849 100644
--- a/packages/frontend/src/components/Template/EditorDiff.vue
+++ b/packages/frontend/src/components/Template/EditorDiff.vue
@@ -106,11 +106,11 @@ import { MarkdownEditorMode } from "#imports";
 const props = defineProps<{
   historic: {
     value: FindingTemplate;
-    rewriteFileUrl?: (fileSrc: string) => string;
+    rewriteFileUrlMap?: Record<string, string>;
   },
   current: {
     value: FindingTemplate;
-    rewriteFileUrl?: (fileSrc: string) => string;
+    rewriteFileUrlMap?: Record<string, string>;
   }
   initialLanguage?: string|null;
   toolbarAttrs?: object;
@@ -182,7 +182,7 @@ const diffFieldAttrs = computed(() => (translationInfo: TranslationDiffInfo, def
           mainTranslation.value.data[definition.id]) :
         null,
       lang: translationInfo.historic?.language,
-      rewriteFileUrl: props.historic.rewriteFileUrl,
+      rewriteFileUrlMap: props.historic.rewriteFileUrlMap,
       ...commonProps
     },
     current: {
@@ -192,7 +192,7 @@ const diffFieldAttrs = computed(() => (translationInfo: TranslationDiffInfo, def
           mainTranslationCurrent!.data[definition.id]) :
         null,
       lang: translationInfo.current?.language,
-      rewriteFileUrl: props.current.rewriteFileUrl,
+      rewriteFileUrlMap: props.current.rewriteFileUrlMap,
       ...commonProps,
     },
   };
diff --git a/packages/frontend/src/composables/history.ts b/packages/frontend/src/composables/history.ts
index 1a330b5bd..3e0561a29 100644
--- a/packages/frontend/src/composables/history.ts
+++ b/packages/frontend/src/composables/history.ts
@@ -44,7 +44,7 @@ export function useMarkdownDiff(options: {
       modelValue: options.props.value.current.value,
       ...pick(options.props.value.current, [
         'collab', 'lang', 'readonly', 'disabled', 'markdownEditorMode', 'spellcheckSupported', 'spellcheckEnabled', 
-        'referenceItems', 'uploadFile', 'rewriteFileUrl',
+        'referenceItems', 'rewriteFileUrlMap', 'uploadFile',
       ]),
     })),
     emit: (name: string, value: any) => {
@@ -61,7 +61,7 @@ export function useMarkdownDiff(options: {
     props: computed(() => ({
       modelValue: options.props.value.historic.value,
       readonly: true,
-      ...pick(options.props.value.historic, ['lang', 'markdownEditorMode', 'rewriteFileUrl', 'referenceItems']),
+      ...pick(options.props.value.historic, ['lang', 'markdownEditorMode', 'referenceItems', 'rewriteFileUrlMap']),
     })),
     emit: (name: string, value: any) => {
       const emit = (options.props.value.historic as any)['on' + name.charAt(0).toUpperCase() + name.slice(1)];
diff --git a/packages/frontend/src/composables/lockedit.ts b/packages/frontend/src/composables/lockedit.ts
index ef5b5c826..b29a6549e 100644
--- a/packages/frontend/src/composables/lockedit.ts
+++ b/packages/frontend/src/composables/lockedit.ts
@@ -135,14 +135,12 @@ export function useProjectEditBase(options: {
       return `[${res.name}](/files/name/${res.name})`;
     }
   }
-  function rewriteFileUrl(fileSrc: string) {
-    if (fileSrc.startsWith('/assets/')) {
-      return urlJoin(projectTypeUrl.value || '', fileSrc)
-    } else {
-      return urlJoin(projectUrl.value, fileSrc);
-    }
-  }
 
+  const rewriteFileUrlMap = computed(() => ({
+    '/assets/': urlJoin(projectTypeUrl.value || '', '/assets/'),
+    '/images/': urlJoin(projectUrl.value, '/images/'),
+    '/files/': urlJoin(projectUrl.value, '/files/'),
+  }));
   const referenceItems = computed<ReferenceItem[]>(() => {
     return projectStore.findings(options.project.value?.id || '', { projectType: options.projectType?.value })
       .map(f => ({
@@ -168,12 +166,12 @@ export function useProjectEditBase(options: {
     lang: options.project.value?.language || 'en-US',
     selectableUsers: [...(options.project.value?.members || []), ...(options.project.value?.imported_members || [])],
     referenceItems: referenceItems.value,
+    rewriteFileUrlMap: rewriteFileUrlMap.value,
     spellcheckEnabled: spellcheckEnabled.value,
     'onUpdate:spellcheckEnabled': (val: boolean) => { spellcheckEnabled.value = val; },
     markdownEditorMode: markdownEditorMode.value,
     'onUpdate:markdownEditorMode': (val: MarkdownEditorMode) => { markdownEditorMode.value = val; },
     uploadFile,
-    rewriteFileUrl,
   }));
 
   return {
diff --git a/packages/frontend/src/composables/markdown.ts b/packages/frontend/src/composables/markdown.ts
index f6b53044c..48beb40e3 100644
--- a/packages/frontend/src/composables/markdown.ts
+++ b/packages/frontend/src/composables/markdown.ts
@@ -43,7 +43,7 @@ export type MarkdownProps = {
   referenceItems?: ReferenceItem[];
   collab?: CollabPropType;
   uploadFile?: (file: File) => Promise<string>;
-  rewriteFileUrl?: (fileSrc: string) => string;
+  rewriteFileUrlMap?: Record<string, string>;
 }
 
 export function makeMarkdownProps(options: { spellcheckSupportedDefault: boolean } = { spellcheckSupportedDefault: true }) {
@@ -80,6 +80,10 @@ export function makeMarkdownProps(options: { spellcheckSupportedDefault: boolean
       type: Array as PropType<ReferenceItem[]>,
       default: undefined,
     },
+    rewriteFileUrlMap: {
+      type: Object as PropType<MarkdownProps['rewriteFileUrlMap']>,
+      default: undefined,
+    },
     collab: {
       type: Object as PropType<CollabPropType>,
       default: undefined,
@@ -88,10 +92,6 @@ export function makeMarkdownProps(options: { spellcheckSupportedDefault: boolean
       type: Function as PropType<MarkdownProps['uploadFile']>,
       default: undefined,
     },
-    rewriteFileUrl: {
-      type: Function as PropType<MarkdownProps['rewriteFileUrl']>,
-      default: undefined,
-    },
   }
 }
 export function makeMarkdownEmits() {
@@ -494,8 +494,8 @@ export function useMarkdownEditorBase(options: {
   }));
   const markdownPreviewAttrs = computed(() => ({
     value: editorState.value?.doc.toString() ?? options.props.value.modelValue,
-    rewriteFileUrl: options.props.value.rewriteFileUrl,
     referenceItems: options.props.value.referenceItems,
+    rewriteFileUrlMap: options.props.value.rewriteFileUrlMap,
     cacheBuster: previewCacheBuster,
   }));
 
diff --git a/packages/frontend/src/pages/designs/[projectTypeId]/pdfdesigner.vue b/packages/frontend/src/pages/designs/[projectTypeId]/pdfdesigner.vue
index ff0165ded..0e1f656b9 100644
--- a/packages/frontend/src/pages/designs/[projectTypeId]/pdfdesigner.vue
+++ b/packages/frontend/src/pages/designs/[projectTypeId]/pdfdesigner.vue
@@ -67,7 +67,7 @@
                 v-model="projectType.report_preview_data"
                 :project-type="projectType"
                 :upload-file="uploadFile"
-                :rewrite-file-url="rewriteFileUrl"
+                :rewrite-file-url-map="rewriteFileUrlMap"
                 :readonly="readonly"
               />
             </v-window-item>
@@ -115,7 +115,6 @@
 </template>
 
 <script setup lang="ts">
-import { urlJoin } from "@base/utils/helpers";
 import { initialCss } from '~/components/Design/designer-components';
 import { formatProjectTypeTitle, uploadFileHelper, PdfDesignerTab } from "#imports";
 
@@ -153,9 +152,9 @@ async function uploadFile(file: File) {
   const img = await uploadFileHelper<UploadedFileInfo>(`/api/v1/projecttypes/${projectType.value.id}/assets/`, file);
   return `![](/assets/name/${img.name}){width="auto"}`;
 }
-function rewriteFileUrl(imgSrc: string) {
-  return urlJoin(`/api/v1/projecttypes/${projectType.value.id}/`, imgSrc);
-}
+const rewriteFileUrlMap = computed(() => ({
+  '/assets/': `/api/v1/projecttypes/${projectType.value.id}/assets/`,
+}));
 
 const showStartDialog = ref(!projectType.value.report_template && !projectType.value.report_styles && !readonly.value);
 function startDesigning() {
diff --git a/packages/frontend/src/pages/notes/personal/[noteId].vue b/packages/frontend/src/pages/notes/personal/[noteId].vue
index 45115c4a7..30667b482 100644
--- a/packages/frontend/src/pages/notes/personal/[noteId].vue
+++ b/packages/frontend/src/pages/notes/personal/[noteId].vue
@@ -103,9 +103,10 @@ async function uploadFile(file: File) {
     return `![${obj.name}](/images/name/${obj.name}){width="auto"}`;
   }
 }
-function rewriteFileUrl(imgSrc: string) {
-  return urlJoin('/api/v1/pentestusers/self/notes/', imgSrc);
-}
+const rewriteFileUrlMap = computed(() => ({
+  '/images/': '/api/v1/pentestusers/self/notes/images/',
+  '/files/': '/api/v1/pentestusers/self/notes/files/',
+}))
 const inputFieldAttrs = computed(() => ({
   readonly: notesCollab.readonly.value,
   lang: 'auto',
@@ -115,7 +116,7 @@ const inputFieldAttrs = computed(() => ({
   markdownEditorMode: localSettings.userNoteMarkdownEditorMode,
   'onUpdate:markdownEditorMode': (val: MarkdownEditorMode) => { localSettings.userNoteMarkdownEditorMode = val },
   uploadFile,
-  rewriteFileUrl,
+  rewriteFileUrlMap: rewriteFileUrlMap.value,
 }));
 
 // Autofocus input
diff --git a/packages/frontend/src/pages/shared/[shareInfoId]/notes/[noteId].vue b/packages/frontend/src/pages/shared/[shareInfoId]/notes/[noteId].vue
index 975d57429..3bd90f4b6 100644
--- a/packages/frontend/src/pages/shared/[shareInfoId]/notes/[noteId].vue
+++ b/packages/frontend/src/pages/shared/[shareInfoId]/notes/[noteId].vue
@@ -71,9 +71,10 @@ async function uploadFile(file: File) {
     return `![${obj.name}](/images/name/${obj.name}){width="auto"}`;
   }
 }
-function rewriteFileUrl(imgSrc: string) {
-  return urlJoin(`/api/public/shareinfos/${shareInfo.value!.id}/notes/`, imgSrc);
-}
+const rewriteFileUrlMap = computed(() => ({
+  '/images/': `/api/public/shareinfos/${shareInfo.value!.id}/notes/images/`,
+  '/files/': `/api/public/shareinfos/${shareInfo.value!.id}/notes/files/`,
+}))
 const inputFieldAttrs = computed(() => ({
   readonly: readonly.value,
   lang: 'auto',
@@ -81,7 +82,7 @@ const inputFieldAttrs = computed(() => ({
   markdownEditorMode: localSettings.sharedNoteMarkdownEditorMode,
   'onUpdate:markdownEditorMode': (val: MarkdownEditorMode) => { localSettings.sharedNoteMarkdownEditorMode = val },
   uploadFile,
-  rewriteFileUrl,
+  rewriteFileUrlMap: rewriteFileUrlMap.value,
 }));
 const toolbarAttrs = computed(() => ({
   data: note.value,
diff --git a/packages/frontend/src/pages/templates/[templateId]/history/[historyDate].vue b/packages/frontend/src/pages/templates/[templateId]/history/[historyDate].vue
index 5e916933c..9a8018721 100644
--- a/packages/frontend/src/pages/templates/[templateId]/history/[historyDate].vue
+++ b/packages/frontend/src/pages/templates/[templateId]/history/[historyDate].vue
@@ -56,12 +56,14 @@ const fieldDefinitionList = computed(() => {
   return sortBy(fieldDefinitionList, [d => d.visible ? 0 : 1]);
 });
 
-function rewriteFileUrlHistoric(imgSrc: string) {
-  return urlJoin(baseUrlHistoric.value, imgSrc);
-}
-function rewriteFileUrlCurrent(imgSrc: string) {
-  return urlJoin(baseUrlCurrent.value, imgSrc);
-}
+const rewriteFileUrlMapHistoric = computed(() => ({
+  '/images/': urlJoin(baseUrlHistoric.value, '/images/'),
+  '/files/': urlJoin(baseUrlHistoric.value, '/files/'),
+}))
+const rewriteFileUrlMapCurrent = computed(() => ({
+  '/images/': urlJoin(baseUrlCurrent.value, '/images/'),
+  '/files/': urlJoin(baseUrlCurrent.value, '/files/'),
+}))
 
 const fetchLoaderAttrs = computed(() => ({
   fetchState: {
@@ -73,11 +75,11 @@ const fetchLoaderAttrs = computed(() => ({
 const editorDiffAttrs = computed(() => ({
   historic: {
     value: fetchState.data.value?.templateHistoric as FindingTemplate,
-    rewriteFileUrl: rewriteFileUrlHistoric,
+    rewriteFileUrlMapHistoric: rewriteFileUrlMapHistoric.value,
   },
   current: {
     value: fetchState.data.value?.templateCurrent as FindingTemplate,
-    rewriteFileUrl: rewriteFileUrlCurrent,
+    rewriteFileUrlMapCurrent: rewriteFileUrlMapCurrent.value,
   },
   initialLanguage: route.query?.language as string,
   toolbarAttrs: {
diff --git a/packages/frontend/src/pages/templates/[templateId]/index.vue b/packages/frontend/src/pages/templates/[templateId]/index.vue
index 371e67ca8..f39ffa771 100644
--- a/packages/frontend/src/pages/templates/[templateId]/index.vue
+++ b/packages/frontend/src/pages/templates/[templateId]/index.vue
@@ -12,7 +12,7 @@
           v-model="template"
           :toolbar-attrs="{...toolbarAttrs, canAutoSave: true}"
           :upload-file="uploadFile"
-          :rewrite-file-url="rewriteFileUrl"
+          :rewrite-file-url-map="rewriteFileUrlMap"
           :readonly="readonly"
           :initial-language="template!.translations.find(tr => tr.id === route.query?.translation_id)?.language || (route.query?.language as string|undefined)"
           :history="true"
@@ -97,9 +97,9 @@ async function uploadFile(file: File) {
   const img = await uploadFileHelper<UploadedFileInfo>(urlJoin(baseUrl.value, '/images/'), file);
   return `![](/images/name/${img.name}){width="auto"}`;
 }
-function rewriteFileUrl(imgSrc: string) {
-  return urlJoin(baseUrl.value, imgSrc);
-}
+const rewriteFileUrlMap = computed(() => ({
+  '/images/': urlJoin(baseUrl.value, '/images/'),
+}));
 
 async function performCopy() {
   if (!template.value) {
diff --git a/packages/frontend/src/pages/templates/fromfinding.vue b/packages/frontend/src/pages/templates/fromfinding.vue
index c59643072..63a7d5167 100644
--- a/packages/frontend/src/pages/templates/fromfinding.vue
+++ b/packages/frontend/src/pages/templates/fromfinding.vue
@@ -10,7 +10,7 @@
           v-if="template"
           v-model="template"
           :toolbar-attrs="toolbarAttrs"
-          :rewrite-file-url="rewriteFileUrl"
+          :rewrite-file-url-map="rewriteFileUrlMap"
         />
 
         <s-dialog v-model="saveWarningDialogVisible">
@@ -128,8 +128,9 @@ async function performCreate() {
   await navigateTo(`/templates/${obj.id}/`);
 }
 
-function rewriteFileUrl(imgSrc: string) {
-  return urlJoin(`/api/v1/pentestprojects/${project.value!.id}/`, imgSrc);
-}
+const rewriteFileUrlMap = computed(() => ({
+  '/images/': `/api/v1/pentestprojects/${project.value!.id}/images/`,
+  '/files/': `/api/v1/pentestprojects/${project.value!.id}/files/`,
+}));
 
 </script>
diff --git a/packages/markdown/mdext/index.js b/packages/markdown/mdext/index.js
index e736c90d5..40f29b727 100644
--- a/packages/markdown/mdext/index.js
+++ b/packages/markdown/mdext/index.js
@@ -9,7 +9,7 @@ import 'highlight.js/styles/default.css';
 
 import { remarkFootnotes, remarkToRehypeHandlersFootnotes, remarkToRehypeHandersFootnotesPreview, rehypeFootnoteSeparator, rehypeFootnoteSeparatorPreview } from './footnotes';
 import { remarkStrikethrough, remarkTaskListItem } from './gfm';
-import { rehypeConvertAttrsToStyle, rehypeLinkTargetBlank, rehypeRewriteImageSources, rehypeRewriteFileLinks, rehypeTemplates, rehypeRawFixSelfClosingTags, rehypeRawFixPassthroughStitches } from './rehypePlugins';
+import { rehypeConvertAttrsToStyle, rehypeLinkTargetBlank, rehypeRewriteFileUrls, rehypeTemplates, rehypeRawFixSelfClosingTags, rehypeRawFixPassthroughStitches } from './rehypePlugins';
 import { remarkAttrs, remarkToRehypeAttrs } from './attrs';
 import { remarkFigure, remarkToRehypeHandlersFigure } from './image';
 import { remarkTables, remarkTableCaptions, remarkToRehypeHandlersTableCaptions, rehypeTableCaptions } from './tables';
@@ -84,11 +84,10 @@ export function formatMarkdown(text) {
 
 /**
  * Render markdown text to HTML
- * @param {{text: string, preview?: boolean, rewriteFileSource?, referenceItems?: {id: string, href: string, label: string}[]}} options 
+ * @param {{text: string, preview?: boolean, referenceItems?: {id: string, href?: string, label?: string}[], rewriteFileUrlMap?: Record<string, string>, cacheBuster?: string}} options 
  * @returns {string}
  */
-export function renderMarkdownToHtml({ text = '', preview = false, rewriteFileSource = undefined, referenceItems = undefined} = {}) {
-  // TODO: rewriteFileSource: dict instead of function, cache buster (optional)
+export function renderMarkdownToHtml({ text = '', preview = false, referenceItems = undefined, rewriteFileUrlMap = undefined, cacheBuster = undefined} = {}) {
   let md = markdownParser()
       .use(remarkParse)
       .use(remarkRehype, { 
@@ -112,9 +111,10 @@ export function renderMarkdownToHtml({ text = '', preview = false, rewriteFileSo
       .use(rehypeConvertAttrsToStyle)
       .use(preview ? rehypeFootnoteSeparatorPreview : rehypeFootnoteSeparator)
       .use(preview ? rehypeReferenceLinkPreview : rehypeReferenceLink, { referenceItems })
-      .use(rehypeRewriteImageSources, {rewriteImageSource: rewriteFileSource})
-      .use(rehypeRewriteFileLinks, {rewriteFileUrl: rewriteFileSource})
-      .use(rehypeLinkTargetBlank);
+    if (rewriteFileUrlMap) {
+      md = md.use(rehypeRewriteFileUrls, { rewriteFileUrlMap, cacheBuster });
+    }
+    md = md.use(rehypeLinkTargetBlank)
     if (preview) {
       md = md.use(rehypeSanitize, rehypeSanitizeSchema);
     }
diff --git a/packages/markdown/mdext/reference.js b/packages/markdown/mdext/reference.js
index c3016b179..2a548f8a8 100644
--- a/packages/markdown/mdext/reference.js
+++ b/packages/markdown/mdext/reference.js
@@ -35,7 +35,6 @@ export function rehypeReferenceLinkPreview({ referenceItems = undefined }) {
 
         let refPreview = null;
         // Known reference target (e.g. other finding)
-        // TODO: refactor
         if (!refPreview && referenceItems) {
           refPreview = referenceItems.find(item => item.id === refId);
         }
@@ -46,12 +45,12 @@ export function rehypeReferenceLinkPreview({ referenceItems = undefined }) {
               refTargets[refId].parent.tagName === 'figure' && 
               refTargets[refId].parent.children.some(cn => cn.tagName === 'figcaption')) {
             refPreview = {
-              title: `[Figure #${refId}]`,
+              label: `[Figure #${refId}]`,
             };
           }
           if (refTargets[refId].node.tagName === 'caption') {
             refPreview = {
-              title: `[Table #${refId}]`,
+              label: `[Table #${refId}]`,
             };
           }
         }
@@ -59,7 +58,7 @@ export function rehypeReferenceLinkPreview({ referenceItems = undefined }) {
         // Unknown reference target
         if (!refPreview) {
           refPreview = {
-            title: `[Reference to #${refId}]`,
+            label: `[Reference to #${refId}]`,
           };
         }
 
@@ -68,8 +67,8 @@ export function rehypeReferenceLinkPreview({ referenceItems = undefined }) {
         if (refPreview.href) {
           node.properties.href = refPreview.href;
         }
-        if (refPreview.title && node.children.length === 0) {
-          node.children.push({type: 'text', value: refPreview.title});
+        if (refPreview.label && node.children.length === 0) {
+          node.children.push({type: 'text', value: refPreview.label});
         }
       }
     }
diff --git a/packages/markdown/mdext/rehypePlugins.js b/packages/markdown/mdext/rehypePlugins.js
index a67efdbd6..285d79b95 100644
--- a/packages/markdown/mdext/rehypePlugins.js
+++ b/packages/markdown/mdext/rehypePlugins.js
@@ -67,19 +67,27 @@ export function removeClass(node, className) {
 }
 
 
-export function rehypeRewriteImageSources({ rewriteImageSource }) {
+/**
+ * Rewrite image source to handle image fetching from markdown.
+ * Images in markdown are referenced with a URL relative to the parent resource (e.g. "/images/name/image.png").
+ */
+export function rehypeRewriteFileUrls({ rewriteFileUrlMap, cacheBuster }) {
+  function rewriteFileUrl(src) {
+    for (const [oldPrefix, newPrefix] of Object.entries(rewriteFileUrlMap)) {
+      if (src.startsWith(oldPrefix)) {
+        return newPrefix + src.slice(oldPrefix.length) + (cacheBuster ? '?c=' + cacheBuster : '');
+      }
+    }
+    return src;
+  }
+
   return tree => visit(tree, 'element', node => {
-    if (node.tagName === 'img' && node.properties.src && rewriteImageSource) {
-      node.properties.src = rewriteImageSource(node.properties.src);
+    if (node.tagName === 'img' && node.properties.src) {
+      node.properties.src = rewriteFileUrl(node.properties.src);
       node.properties.loading = 'lazy';
     }
-  });
-}
 
-
-export function rehypeRewriteFileLinks({ rewriteFileUrl }) {
-  return tree => visit(tree, 'element', node => {
-    if (node.tagName === 'a' && node.properties?.href?.startsWith('/files/') && rewriteFileUrl) {
+    if (node.tagName === 'a' && node.properties.href) {
       node.properties.href = rewriteFileUrl(node.properties.href);
       node.properties.download = true;
       addClass(node, ['file-download-preview']);

From 61486357246dfd0b969f296fd7c79dff06d41dfd Mon Sep 17 00:00:00 2001
From: Michael Wedl <michael@syslifters.com>
Date: Tue, 7 Jan 2025 13:23:26 +0100
Subject: [PATCH 4/4] Bugfixes

---
 packages/frontend/nuxt.config.ts                               | 3 +++
 packages/frontend/src/components/Markdown/Preview.vue          | 2 +-
 packages/frontend/src/composables/markdown.ts                  | 1 +
 .../frontend/src/pages/shared/[shareInfoId]/notes/[noteId].vue | 1 -
 packages/frontend/src/pages/templates/fromfinding.vue          | 2 --
 packages/frontend/test/e2e/global-setup.ts                     | 2 +-
 packages/markdown/mdext/index.js                               | 1 -
 packages/markdown/mdext/rehypePlugins.js                       | 2 +-
 packages/rendering/src/components/Markdown.vue                 | 1 +
 9 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/packages/frontend/nuxt.config.ts b/packages/frontend/nuxt.config.ts
index ebec66158..0c4009fe3 100644
--- a/packages/frontend/nuxt.config.ts
+++ b/packages/frontend/nuxt.config.ts
@@ -44,6 +44,9 @@ export default defineNuxtConfig({
     port: 3000,
   },
   vite: {
+    resolve: {
+      conditions: ['module', 'worker', 'browser', 'development|production'],
+    },
     optimizeDeps: {
       include: ['vuedraggable', 'monaco-editor', '@github/webauthn-json/browser-ponyfill'],
     },
diff --git a/packages/frontend/src/components/Markdown/Preview.vue b/packages/frontend/src/components/Markdown/Preview.vue
index 1f41a6941..669487e97 100644
--- a/packages/frontend/src/components/Markdown/Preview.vue
+++ b/packages/frontend/src/components/Markdown/Preview.vue
@@ -10,8 +10,8 @@
 <script lang="ts">
 import { mermaid } from '@sysreptor/markdown';
 import { uuidv4 } from "@base/utils/helpers";
-import { absoluteApiUrl } from '#imports';
 import { renderMarkdownToHtmlInWorker, type ReferenceItem } from '~/composables/markdown';
+import 'highlight.js/styles/default.css';
 
 mermaid.initialize({
   startOnLoad: false,
diff --git a/packages/frontend/src/composables/markdown.ts b/packages/frontend/src/composables/markdown.ts
index 48beb40e3..51c4e2b3d 100644
--- a/packages/frontend/src/composables/markdown.ts
+++ b/packages/frontend/src/composables/markdown.ts
@@ -603,6 +603,7 @@ export function markdownEditorPageExtensions() {
 export async function renderMarkdownToHtmlInWorker(options: Parameters<typeof renderMarkdownToHtml>[0]): Promise<string> {
   // Global worker instance reused for all components
   const worker = useState('markdownWorker', () => new Worker(workerUrlPolicy.createScriptURL!(markdownWorkerUrl) as string, { type: 'module' }));
+
   // Render markdown in worker
   return new Promise((resolve, reject) => {
     const messageId = uuidv4();
diff --git a/packages/frontend/src/pages/shared/[shareInfoId]/notes/[noteId].vue b/packages/frontend/src/pages/shared/[shareInfoId]/notes/[noteId].vue
index 3bd90f4b6..4001f53e2 100644
--- a/packages/frontend/src/pages/shared/[shareInfoId]/notes/[noteId].vue
+++ b/packages/frontend/src/pages/shared/[shareInfoId]/notes/[noteId].vue
@@ -46,7 +46,6 @@
 </template>
 
 <script setup lang="ts">
-import { urlJoin } from "@base/utils/helpers";
 import { collabSubpath, type MarkdownEditorMode } from '#imports';
 
 definePageMeta({
diff --git a/packages/frontend/src/pages/templates/fromfinding.vue b/packages/frontend/src/pages/templates/fromfinding.vue
index 63a7d5167..5ac6f6213 100644
--- a/packages/frontend/src/pages/templates/fromfinding.vue
+++ b/packages/frontend/src/pages/templates/fromfinding.vue
@@ -55,8 +55,6 @@
 </template>
 
 <script setup lang="ts">
-import { urlJoin, uuidv4 } from "@base/utils/helpers";
-
 const route = useRoute();
 const localSettings = useLocalSettings();
 const projectStore = useProjectStore();
diff --git a/packages/frontend/test/e2e/global-setup.ts b/packages/frontend/test/e2e/global-setup.ts
index 764825461..dcbe86708 100644
--- a/packages/frontend/test/e2e/global-setup.ts
+++ b/packages/frontend/test/e2e/global-setup.ts
@@ -13,7 +13,7 @@ async function globalSetup(config: FullConfig) {
   await integrationLogin(page, baseURL);
   await integrationSuperuser(page);
   await selfPromotion(page);
-  await downloadDemoData(page);
+  await downloadDemoData();
   await importDemoData(page);
   // Let the demo data import...
   await page.context().storageState({ path: storageState as string });
diff --git a/packages/markdown/mdext/index.js b/packages/markdown/mdext/index.js
index 40f29b727..3596b70b1 100644
--- a/packages/markdown/mdext/index.js
+++ b/packages/markdown/mdext/index.js
@@ -5,7 +5,6 @@ import remarkStringify from 'remark-stringify';
 import rehypeRaw from 'rehype-raw';
 import rehypeSanitize, { defaultSchema } from 'rehype-sanitize';
 import { merge } from 'lodash-es';
-import 'highlight.js/styles/default.css';
 
 import { remarkFootnotes, remarkToRehypeHandlersFootnotes, remarkToRehypeHandersFootnotesPreview, rehypeFootnoteSeparator, rehypeFootnoteSeparatorPreview } from './footnotes';
 import { remarkStrikethrough, remarkTaskListItem } from './gfm';
diff --git a/packages/markdown/mdext/rehypePlugins.js b/packages/markdown/mdext/rehypePlugins.js
index 285d79b95..025fa1202 100644
--- a/packages/markdown/mdext/rehypePlugins.js
+++ b/packages/markdown/mdext/rehypePlugins.js
@@ -87,7 +87,7 @@ export function rehypeRewriteFileUrls({ rewriteFileUrlMap, cacheBuster }) {
       node.properties.loading = 'lazy';
     }
 
-    if (node.tagName === 'a' && node.properties.href) {
+    if (node.tagName === 'a' && node.properties.href && node.properties.href.startsWith('/files/')) {
       node.properties.href = rewriteFileUrl(node.properties.href);
       node.properties.download = true;
       addClass(node, ['file-download-preview']);
diff --git a/packages/rendering/src/components/Markdown.vue b/packages/rendering/src/components/Markdown.vue
index 53c7fb999..f7b947d7e 100644
--- a/packages/rendering/src/components/Markdown.vue
+++ b/packages/rendering/src/components/Markdown.vue
@@ -1,6 +1,7 @@
 <script lang="ts">
 import { defineComponent, h } from 'vue';
 import { renderMarkdownToHtml } from '@sysreptor/markdown';
+import 'highlight.js/styles/default.css';
 
 export default {
   name: 'markdown',