Filter ProseA hover cards with the provided hash

components/Markdown.vue

@@ -1,26 +1,49 @@
 <template>
 	<template v-if="content && content.length > 0">
-      <Suspense :timeout="0">
-        <MarkdownRenderer #default :key="key" v-if="node" :node="node" :proses="proses"></MarkdownRenderer>
-        <template #fallback><Loading /></template>
-      </Suspense>
-    </template>
+		<div><MarkdownRenderer #default v-if="data" :node="data" :proses="proses"></MarkdownRenderer></div>
 	</template>
+</template>
 
-  <script setup lang="ts">
-  import { hash } from 'ohash'
+<script setup lang="ts">
+import type { Component } from 'vue';
+import { heading } from 'hast-util-heading';
+import { headingRank } from 'hast-util-heading-rank';
+import { parseId } from '~/shared/general.utils';
+import type { Root } from 'hast';
 
-  const { content } = defineProps({
-    content: {
-      type: String,
-      required: true,
-    },
-    proses: {
-      type: Object
+const { content, proses, filter } = defineProps<{
+	content: string
+	proses?: Array<string | Component>
+	filter?: string
+}>();
+
+const parser = useMarkdown(), data = ref<Root>();
+const node = computed(() => content ? parser(content) : undefined);
+watch([node], () => {
+	if(!node.value)
+		data.value = undefined;
+	else if(!filter)
+	{
+		data.value = node.value;
 	}
-  })
+	else
+	{
+		const start = node.value?.children.findIndex(e => heading(e) && parseId(e.properties.id as string | undefined) === filter) ?? -1;
 
-  const parser = useMarkdown();
-  const key = computed(() => hash(content));
-  const node = computed(() => content ? parser(content) : undefined);
-  </script>
+		if(start === -1)
+			data.value = node.value;
+		else
+		{
+			let end = start;
+			const rank = headingRank(node.value.children[start])!;
+			while(end < node.value.children.length)
+			{
+				end++;
+				if(heading(node.value.children[end]) && headingRank(node.value.children[end])! >= rank)
+					break;
+			}
+			data.value = { ...node.value, children: node.value.children.slice(start, end) };
+		}
+	}
+}, { immediate: true, });
+</script>

components/canvas/Canvas.vue

@@ -154,26 +154,22 @@ const pinchHandler = usePinch(({ event, offset: [z] }: { event: Event, offset: n
     zoom.value = clamp(z / 2048, minZoom.value, 3);
 }, {
     domTarget: canvas,
-    eventOptions: { passive: false, }
 })
 const dragHandler = useDrag(({ event, delta: [x, y] }: { event: Event, delta: number[] }) => { 
     dispX.value += x / zoom.value;
     dispY.value += y / zoom.value;
 }, {
     domTarget: canvas,
-    eventOptions: { passive: false, }
 })
 const wheelHandler = useWheel(({ event, delta: [x, y] }: { event: Event, delta: number[] }) => { 
     zoom.value = clamp(zoom.value + y * -0.001, minZoom.value, 3);
 }, {
     domTarget: canvas,
-    eventOptions: { passive: false, }
 })
 </script>
 
 <template>
-    <Suspense>
-        <template #default>
+    <div>
         <div id="canvas" ref="canvas" class="absolute top-0 left-0 overflow-hidden w-full h-full touch-none"
             :style="{ '--zoom-multiplier': (1 / Math.pow(zoom, 0.7)) }">
             <div class="border border-light-35 dark:border-dark-35 bg-light-10 dark:bg-dark-10 absolute sm:top-2 top-10 left-2 z-[35] overflow-hidden">
@@ -216,9 +212,5 @@ const wheelHandler = useWheel(({ event, delta: [x, y] }: { event: Event, delta:
                 </svg>
             </div>
         </div>
-        </template>
-        <template #fallback>
-            <div class="loading"></div>
-        </template>
-    </Suspense>
+    </div>
 </template>

components/prose/ProseA.vue

@@ -1,21 +1,11 @@
 <template>
-    <NuxtLink class="text-accent-blue inline-flex items-center" v-if="overview"
-    :to="{ name: 'explore-path', params: { path: overview.path }, hash: hash }" :class="class">
-        <HoverCard class="max-w-[600px] max-h-[600px] w-full overflow-auto z-[45]" :class="{'overflow-hidden !p-0': overview.type === 'canvas'}" @open="load">
+	<NuxtLink class="text-accent-blue inline-flex items-center"
+	:to="overview ? { name: 'explore-path', params: { path: overview.path }, hash: hash } : href" :class="class">
+		<HoverCard class="max-w-[600px] max-h-[600px] w-full overflow-auto z-[45]" :class="{'overflow-hidden !p-0': overview?.type === 'canvas'}" @open="load" :disabled="!overview">
 			<template #content>
-                <template v-if="loading">
-                    <Loading />
-                </template>
-                <template v-else-if="overview.type === 'markdown'">
-                    <div class="px-10">
-                        <Markdown :content="content!.content" />
-                    </div>
-                </template>
-                <template v-else-if="overview.type === 'canvas'">
-                    <div class="w-[600px] h-[600px] relative">
-                        <Canvas :canvas="JSON.parse(content!.content)" />
-                    </div>
-                </template>
+				<Loading v-if="loading" />
+				<Markdown v-else-if="overview?.type === 'markdown'" class="px-10" :content="content!.content" :filter="hash.substring(1)" />
+				<Canvas v-else-if="overview?.type === 'canvas'" class="w-[600px] h-[600px] relative" :canvas="JSON.parse(content!.content)" />
 			</template>
 			<template #default>
 				<slot v-bind="$attrs"></slot>
@@ -23,11 +13,6 @@
 			</template>
 		</HoverCard>
 	</NuxtLink>
-    <NuxtLink v-else-if="href" :to="href" :class="class" class="text-accent-blue inline-flex items-center">
-        <slot v-bind="$attrs"></slot>
-        <Icon class="w-4 h-4 inline-block" v-if="overview && overview.type !== 'markdown'" :height="20" :width="20" :icon="iconByType[overview.type]" />
-    </NuxtLink>
-    <slot :class="class" v-else v-bind="$attrs"></slot>
 </template>
 
 <script setup lang="ts">

package.json

@@ -19,6 +19,8 @@
     "codemirror": "^6.0.1",
     "drizzle-orm": "^0.35.3",
     "hast": "^1.0.0",
+    "hast-util-heading": "^3.0.0",
+    "hast-util-heading-rank": "^3.0.0",
     "lodash.capitalize": "^4.2.1",
     "mdast-util-find-and-replace": "^3.0.1",
     "nodemailer": "^6.9.16",

todo.md

@@ -1,8 +1,8 @@
 - [x] Mot de passe oublié
 - [x] Rename auto des liens au changement de path
-- [ ] Autocomplete des liens dans l'editeur
-- [ ] Editeur de graphe
 - [ ] Filtrage de lien avec le header id
+- [ ] Editeur de graphe
+- [ ] Autocomplete des liens dans l'editeur
 - [ ] Embed de lien (le ![[]] de Obsidian)
 - [ ] Rework la structure projet
 - [ ] Limite de taille par projet (100 Mo ?)