internel embeds

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
 		}}

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*

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>