Fix content editor performances issue by debouncing and removing the link search

components/Markdown.vue

@@ -1,7 +1,7 @@
 <template>
     <template v-if="content && content.length > 0">
       <Suspense :timeout="0">
-        <MarkdownRenderer #default :key="key" v-if="node" :node="node"></MarkdownRenderer>
+        <MarkdownRenderer #default :key="key" v-if="node" :node="node" :proses="proses"></MarkdownRenderer>
         <template #fallback><Loading /></template>
       </Suspense>
     </template>
@@ -14,6 +14,9 @@
     content: {
       type: String,
       required: true,
+    },
+    proses: {
+      type: Object
     }
   })
   

components/prose/FakeA.vue

@@ -0,0 +1,3 @@
+<template>
+    <span class="text-accent-blue inline-flex items-center cursor-pointer hover:text-opacity-85"><slot v-bind="$attrs"></slot></span>
+</template>

pages/explore/edit/[...path].vue

@@ -19,7 +19,7 @@
                     </SplitterPanel>
                     <SplitterResizeHandle class="bg-light-35 dark:bg-dark-35 w-px xl!mx-4 mx-2" />
                     <SplitterPanel asChild>
-                        <div class="flex-1 max-h-full !overflow-y-auto px-8"><Markdown :content="page.content" /></div>
+                        <div class="flex-1 max-h-full !overflow-y-auto px-8"><Markdown :content="debounced" :proses="{ 'a': FakeA }" /></div>
                     </SplitterPanel>
                 </SplitterGroup>
             </template>
@@ -41,6 +41,8 @@
 </template>
 
 <script setup lang="ts">
+import FakeA from '~/components/prose/FakeA.vue';
+
 const route = useRouter().currentRoute;
 const path = computed(() => Array.isArray(route.value.params.path) ? route.value.params.path[0] : route.value.params.path);
 const { user, loggedIn } = useUserSession();
@@ -49,6 +51,8 @@ const toaster = useToast();
 const saveStatus = ref<'idle' | 'pending' | 'success' | 'error'>('idle');
 
 const { data: page, status, error } = await useLazyFetch(`/api/file/${encodeURIComponent(path.value)}`, { watch: [ route, path ]});
+const content = computed(() => page.value?.content);
+const debounced = useDebounce(content, 250);
 
 if(!loggedIn || (page.value && page.value.owner !== user.value?.id))
 {