checklists

webapp/src/lib/components/MarkdownRenderer.svelte

@@ -12,6 +12,7 @@
 	import Blockquote from '$lib/marked/renderers/Blockquote.svelte';
 	import MathInline from '$lib/marked/renderers/MathInline.svelte';
 	import MathBlock from '$lib/marked/renderers/MathBlock.svelte';
+	import ListItem from '$lib/marked/renderers/ListItem.svelte';
 
 	export let plaintext: string;
 
@@ -31,6 +32,7 @@ prose-blockquote:first:before:content-['']"
 		renderers={{
 			heading: Heading,
 			list: List,
+			listitem: ListItem,
 			link: Link,
 			'internal-link': InternalLink,
 			'internal-embed': InternalEmbed,

webapp/src/lib/marked/extensions.ts

@@ -85,7 +85,6 @@ const MathInline = {
 	tokenizer(src: string) {
 		const match = src.match(/^(\${1})((?:\\.|[^$])+)\1/);
 		if (match) {
-			console.log(src, match);
 			return {
 				type: 'math-inline',
 				raw: match[0],
@@ -106,7 +105,6 @@ const MathBlock = {
 	tokenizer(src: string) {
 		const match = src.match(/^(\${2})((?:\\.|[^$]|\n)+)\1/);
 		if (match) {
-			console.log(src, match);
 			return {
 				type: 'math-block',
 				raw: match[0],
@@ -117,39 +115,6 @@ const MathBlock = {
 	}
 };
 
-// const MathInline = {
-// 	name: 'math-block',
-// 	level: 'inline',
-// 	start(src: string) {
-// 		return src.indexOf('$');
-// 	},
-
-// 	tokenizer(src: string) {
-// 		// console.log(src);
-// 		const match = src.match(/^(\${1,2})((?:\\.|[^$]|\n)+)\1/m);
-// 		if (match) {
-// 			console.log(src, match);
-// 			if (match[1] == '$') {
-// 				console.log('inline');
-// 				return {
-// 					type: 'math-inline',
-// 					raw: match[0],
-// 					text: match[2].trim()
-// 				};
-// 			} else if (match[1] == '$$') {
-// 				console.log('block');
-
-// 				return {
-// 					type: 'math-block',
-// 					raw: match[0],
-// 					text: match[2].trim()
-// 				};
-// 			}
-// 		}
-// 		return false;
-// 	}
-// };
-
 export default [
 	InternalLinkExtension,
 	InternalEmbedExtension,
@@ -158,5 +123,3 @@ export default [
 	MathBlock,
 	MathInline
 ];
-
-// ^\#([\w\/]+)\W*

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

@@ -1,11 +1,14 @@
 <script lang="ts">
 	export let ordered: boolean;
 	export let start: number;
+
+	export let items: any;
+	console.log(items);
 </script>
 
 <!-- Styling is taken care of by Tailwind Typography plugin -->
 {#if ordered}
-	<ol><slot /></ol>
+	<ol {start}><slot /></ol>
 {:else}
 	<ul><slot /></ul>
 {/if}

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

@@ -0,0 +1,23 @@
+<script lang="ts">
+	export let task: boolean;
+	export let checked: boolean;
+</script>
+
+{#if task || checked}
+	<li class="list-none translate-x-[-1.625em]">
+		<div class="inline-flex items-center gap-2">
+			<input
+				type="checkbox"
+				bind:checked
+				value=""
+				class="w-4 h-4 accent-[#7b6cd9] text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
+			/>
+			<!-- <label for="default-checkbox" class="ml-2 text-sm text-gray-900 dark:text-gray-300"
+				><slot /></label
+			> -->
+			<slot />
+		</div>
+	</li>
+{:else}
+	<li><slot /></li>
+{/if}