internal link rendering

webapp/package-lock.json

@@ -9,6 +9,7 @@
 			"version": "0.0.1",
 			"dependencies": {
 				"crypto-js": "^4.1.1",
+				"marked": "^4.0.17",
 				"svelte-icons": "^2.1.0",
 				"svelte-markdown": "^0.2.2"
 			},
@@ -17,6 +18,7 @@
 				"@sveltejs/kit": "^1.0.0-next.350",
 				"@tailwindcss/typography": "^0.5.2",
 				"@types/crypto-js": "^4.1.1",
+				"@types/marked": "^4.0.3",
 				"@typescript-eslint/eslint-plugin": "^5.27.0",
 				"@typescript-eslint/parser": "^5.27.0",
 				"autoprefixer": "^10.4.7",

webapp/package.json

@@ -17,6 +17,7 @@
 		"@sveltejs/kit": "^1.0.0-next.350",
 		"@tailwindcss/typography": "^0.5.2",
 		"@types/crypto-js": "^4.1.1",
+		"@types/marked": "^4.0.3",
 		"@typescript-eslint/eslint-plugin": "^5.27.0",
 		"@typescript-eslint/parser": "^5.27.0",
 		"autoprefixer": "^10.4.7",
@@ -36,6 +37,7 @@
 	"type": "module",
 	"dependencies": {
 		"crypto-js": "^4.1.1",
+		"marked": "^4.0.17",
 		"svelte-icons": "^2.1.0",
 		"svelte-markdown": "^0.2.2"
 	}

webapp/src/lib/components/MarkdownRenderer.svelte

@@ -1,9 +1,18 @@
 <script lang="ts">
 	import SvelteMarkdown from 'svelte-markdown';
-	import Heading from '$lib/renderers/Heading.svelte';
-	import List from '$lib/renderers/List.svelte';
+	import Heading from '$lib/marked/renderers/Heading.svelte';
+	import List from '$lib/marked/renderers/List.svelte';
+	import InternalLink from '$lib/marked/renderers/InternalLink.svelte';
+	import tokenizer from '$lib/marked/tokenizer';
+	import { marked } from 'marked';
+	import extensions from '$lib/marked/extensions';
 
 	export let plaintext: string;
+
+	// @ts-ignore: typing mismatch
+	marked.use({ extensions: extensions });
+
+	const options = marked.defaults;
 </script>
 
 <div
@@ -11,5 +20,9 @@
 	class="prose max-w-none prose-li:my-0 prose-ul:mt-0 prose-ol:mt-0 leading-7
 prose-strong:font-bold"
 >
-	<SvelteMarkdown renderers={{ heading: Heading, list: List }} source={plaintext} />
+	<SvelteMarkdown
+		renderers={{ heading: Heading, list: List, 'internal-link': InternalLink }}
+		source={plaintext}
+		{options}
+	/>
 </div>

webapp/src/lib/marked/extensions.ts

@@ -0,0 +1,21 @@
+const InternalLinkExtension = {
+	name: 'internal-link',
+	level: 'inline',
+	start(src: string) {
+		return src.match(/^\[\[/)?.index;
+	},
+	tokenizer(src: string) {
+		const match = src.match(/^\[\[([^\n]+?)]\]/);
+		if (match) {
+			console.log(match);
+			return {
+				type: 'internal-link',
+				raw: match[0],
+				text: match[1].trim()
+			};
+		}
+		return false;
+	}
+};
+
+export default [InternalLinkExtension];

webapp/src/lib/marked/renderers/Heading.svelte

@@ -3,7 +3,6 @@
 	// import {  } from 'svelte-markdown';
 	export let depth: number;
 	export let raw: string;
-	export let text: string;
 
 	// const { slug, getOptions } = getContext(key);
 	// const options = getOptions();

webapp/src/lib/marked/renderers/InternalLink.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import Link from 'svelte-icons/io/IoIosLink.svelte';
+
+	export let text: string;
+</script>
+
+<span class="text-blue-400 underline cursor-not-allowed">
+	<dfn class="not-italic" title="Internal links are not shared."> {text}</dfn></span
+>

webapp/src/lib/marked/tokenizer.ts

@@ -0,0 +1,17 @@
+// Override function
+const tokenizer = {
+	// Obsidian [[internal links]]
+	link(src: string) {
+		const match = src.match(/\[\[([^\n]+?)]\]/);
+		if (match) {
+			return {
+				type: 'internal-link',
+				raw: match[0],
+				text: match[1].trim()
+			};
+		}
+		return false;
+	}
+};
+
+export default tokenizer;

webapp/src/routes/note/[id].svelte

@@ -30,11 +30,8 @@
 		if (browser) {
 			// Decrypt note
 			const key = location.hash.slice(1);
-			const start = performance.now();
 			plaintext = decrypt({ ...note, key });
-			console.log(performance.now() - start);
 		}
-		console.log(note.insert_time);
 	});
 </script>