From 4f4bbd701911b4260a2670e634b344926bbd5467 Mon Sep 17 00:00:00 2001
From: Maxime Cannoodt <Maxime.Cannoodt@UGent.be>
Date: Fri, 24 Jun 2022 10:37:22 +0200
Subject: [PATCH] internel embeds

---
 .../lib/components/MarkdownRenderer.svelte    |  2 ++
 webapp/src/lib/marked/extensions.ts           | 21 ++++++++++++++++++-
 .../lib/marked/renderers/InternalEmbed.svelte | 21 +++++++++++++++++++
 3 files changed, 43 insertions(+), 1 deletion(-)
 create mode 100644 webapp/src/lib/marked/renderers/InternalEmbed.svelte

diff --git a/webapp/src/lib/components/MarkdownRenderer.svelte b/webapp/src/lib/components/MarkdownRenderer.svelte
index e882189..376f9b9 100644
--- a/webapp/src/lib/components/MarkdownRenderer.svelte
+++ b/webapp/src/lib/components/MarkdownRenderer.svelte
@@ -8,6 +8,7 @@
 	import Link from '$lib/marked/renderers/Link.svelte';
 	import Tag from '$lib/marked/renderers/Tag.svelte';
 	import Highlight from '$lib/marked/renderers/Highlight.svelte';
+	import InternalEmbed from '$lib/marked/renderers/InternalEmbed.svelte';
 
 	export let plaintext: string;
 
@@ -29,6 +30,7 @@ prose-blockquote:first:before:content-['']"
 			list: List,
 			link: Link,
 			'internal-link': InternalLink,
+			'internal-embed': InternalEmbed,
 			tag: Tag,
 			highlight: Highlight
 		}}
diff --git a/webapp/src/lib/marked/extensions.ts b/webapp/src/lib/marked/extensions.ts
index 5b439c7..55620a9 100644
--- a/webapp/src/lib/marked/extensions.ts
+++ b/webapp/src/lib/marked/extensions.ts
@@ -17,6 +17,25 @@ const InternalLinkExtension = {
 	}
 };
 
+const InternalEmbedExtension = {
+	name: 'internal-embed',
+	level: 'inline',
+	start(src: string) {
+		return src.match(/^!\[\[/)?.index;
+	},
+	tokenizer(src: string) {
+		const match = src.match(/^!\[\[([^\n]+?)]\]/);
+		if (match) {
+			return {
+				type: 'internal-embed',
+				raw: match[0].trim(),
+				text: match[1].trim()
+			};
+		}
+		return false;
+	}
+};
+
 const TagExtension = {
 	name: 'tag',
 	level: 'inline',
@@ -55,6 +74,6 @@ const HighlightExtension = {
 	}
 };
 
-export default [InternalLinkExtension, TagExtension, HighlightExtension];
+export default [InternalLinkExtension, InternalEmbedExtension, TagExtension, HighlightExtension];
 
 // ^\#([\w\/]+)\W*
diff --git a/webapp/src/lib/marked/renderers/InternalEmbed.svelte b/webapp/src/lib/marked/renderers/InternalEmbed.svelte
new file mode 100644
index 0000000..e261710
--- /dev/null
+++ b/webapp/src/lib/marked/renderers/InternalEmbed.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import EmbedIcon from 'svelte-icons/md/MdAttachment.svelte';
+	import FaRegQuestionCircle from 'svelte-icons/fa/FaRegQuestionCircle.svelte';
+
+	export let text: string;
+</script>
+
+<dfn class="not-italic" title="Interal embeds are not shared currently.">
+	<div
+		class="px-4 py-12 border border-neutral-300 inline-flex flex-col items-center justify-center"
+	>
+		<span class="h-8 text-neutral-400 ml-0.5 inline-flex items-center whitespace-nowrap gap-1"
+			><EmbedIcon />
+			<span>Internal embed</span>
+		</span>
+		<span class="underline cursor-not-allowed inline-flex items-center">
+			<span class="text-[#705dcf] opacity-50">{text}</span>
+			<span class="h-3 mb-2 text-neutral-400 ml-0.5"><FaRegQuestionCircle /></span>
+		</span>
+	</div>
+</dfn>