From c48a54efe76bd0b05e7bf9f94e0ffb6be654ab01 Mon Sep 17 00:00:00 2001
From: Maxime Cannoodt <Maxime.Cannoodt@UGent.be>
Date: Thu, 23 Jun 2022 22:03:25 +0200
Subject: [PATCH] internal link rendering

---
 webapp/package-lock.json                      |  2 ++
 webapp/package.json                           |  2 ++
 .../lib/components/MarkdownRenderer.svelte    | 19 ++++++++++++++---
 webapp/src/lib/marked/extensions.ts           | 21 +++++++++++++++++++
 .../lib/{ => marked}/renderers/Heading.svelte |  1 -
 .../lib/marked/renderers/InternalLink.svelte  |  9 ++++++++
 .../lib/{ => marked}/renderers/List.svelte    |  0
 webapp/src/lib/marked/tokenizer.ts            | 17 +++++++++++++++
 webapp/src/routes/note/[id].svelte            |  3 ---
 9 files changed, 67 insertions(+), 7 deletions(-)
 create mode 100644 webapp/src/lib/marked/extensions.ts
 rename webapp/src/lib/{ => marked}/renderers/Heading.svelte (96%)
 create mode 100644 webapp/src/lib/marked/renderers/InternalLink.svelte
 rename webapp/src/lib/{ => marked}/renderers/List.svelte (100%)
 create mode 100644 webapp/src/lib/marked/tokenizer.ts

diff --git a/webapp/package-lock.json b/webapp/package-lock.json
index 128216b..afd23de 100644
--- a/webapp/package-lock.json
+++ b/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",
diff --git a/webapp/package.json b/webapp/package.json
index 7d00230..d959866 100644
--- a/webapp/package.json
+++ b/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"
 	}
diff --git a/webapp/src/lib/components/MarkdownRenderer.svelte b/webapp/src/lib/components/MarkdownRenderer.svelte
index 93bca72..07bf8fc 100644
--- a/webapp/src/lib/components/MarkdownRenderer.svelte
+++ b/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>
diff --git a/webapp/src/lib/marked/extensions.ts b/webapp/src/lib/marked/extensions.ts
new file mode 100644
index 0000000..8b4738c
--- /dev/null
+++ b/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];
diff --git a/webapp/src/lib/renderers/Heading.svelte b/webapp/src/lib/marked/renderers/Heading.svelte
similarity index 96%
rename from webapp/src/lib/renderers/Heading.svelte
rename to webapp/src/lib/marked/renderers/Heading.svelte
index 2b1eb50..48aa600 100644
--- a/webapp/src/lib/renderers/Heading.svelte
+++ b/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();
diff --git a/webapp/src/lib/marked/renderers/InternalLink.svelte b/webapp/src/lib/marked/renderers/InternalLink.svelte
new file mode 100644
index 0000000..f9caba1
--- /dev/null
+++ b/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
+>
diff --git a/webapp/src/lib/renderers/List.svelte b/webapp/src/lib/marked/renderers/List.svelte
similarity index 100%
rename from webapp/src/lib/renderers/List.svelte
rename to webapp/src/lib/marked/renderers/List.svelte
diff --git a/webapp/src/lib/marked/tokenizer.ts b/webapp/src/lib/marked/tokenizer.ts
new file mode 100644
index 0000000..4968082
--- /dev/null
+++ b/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;
diff --git a/webapp/src/routes/note/[id].svelte b/webapp/src/routes/note/[id].svelte
index 3dc1f93..b226ec1 100644
--- a/webapp/src/routes/note/[id].svelte
+++ b/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>