Add bytemd gfm plugin

package-lock.json

@@ -9,6 +9,7 @@
 			"version": "0.0.1",
 			"hasInstallScript": true,
 			"dependencies": {
+				"@bytemd/plugin-gfm": "^1.21.0",
 				"bytemd": "1.21.0",
 				"kysely": "^0.26.3",
 				"sqlocal": "^0.6.1"
@@ -41,6 +42,17 @@
 				"node": ">=6.0.0"
 			}
 		},
+		"node_modules/@bytemd/plugin-gfm": {
+			"version": "1.21.0",
+			"resolved": "https://registry.npmjs.org/@bytemd/plugin-gfm/-/plugin-gfm-1.21.0.tgz",
+			"integrity": "sha512-ZlrLa+Nl80gUDeC1hTnyRDfgJU3DGQVjQvX9rIIitUCler+KsAiagEnng6S/W2SZNpv+f8eWpVNL8KA8X3d7Tg==",
+			"dependencies": {
+				"remark-gfm": "^3.0.1"
+			},
+			"peerDependencies": {
+				"bytemd": "^1.5.0"
+			}
+		},
 		"node_modules/@esbuild/android-arm": {
 			"version": "0.18.20",
 			"resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.20.tgz",
@@ -1148,6 +1160,17 @@
 				"@esbuild/win32-x64": "0.18.20"
 			}
 		},
+		"node_modules/escape-string-regexp": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
+			"integrity": "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==",
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
 		"node_modules/esm-env": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.0.0.tgz",
@@ -1669,6 +1692,15 @@
 			"resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
 			"integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
 		},
+		"node_modules/longest-streak": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/longest-streak/-/longest-streak-3.1.0.tgz",
+			"integrity": "sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
 		"node_modules/lru-cache": {
 			"version": "6.0.0",
 			"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
@@ -1693,6 +1725,15 @@
 				"node": ">=12"
 			}
 		},
+		"node_modules/markdown-table": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-3.0.3.tgz",
+			"integrity": "sha512-Z1NL3Tb1M9wH4XESsCDEksWoKTdlUafKc4pt0GRwjUyXaCFZ+dc3g2erqB6zm3szA2IUSi7VnPI+o/9jnxh9hw==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
 		"node_modules/mdast-util-definitions": {
 			"version": "5.1.2",
 			"resolved": "https://registry.npmjs.org/mdast-util-definitions/-/mdast-util-definitions-5.1.2.tgz",
@@ -1707,6 +1748,21 @@
 				"url": "https://opencollective.com/unified"
 			}
 		},
+		"node_modules/mdast-util-find-and-replace": {
+			"version": "2.2.2",
+			"resolved": "https://registry.npmjs.org/mdast-util-find-and-replace/-/mdast-util-find-and-replace-2.2.2.tgz",
+			"integrity": "sha512-MTtdFRz/eMDHXzeK6W3dO7mXUlF82Gom4y0oOgvHhh/HXZAGvIQDUvQ0SuUx+j2tv44b8xTHOm8K/9OoRFnXKw==",
+			"dependencies": {
+				"@types/mdast": "^3.0.0",
+				"escape-string-regexp": "^5.0.0",
+				"unist-util-is": "^5.0.0",
+				"unist-util-visit-parents": "^5.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
 		"node_modules/mdast-util-from-markdown": {
 			"version": "1.3.1",
 			"resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-1.3.1.tgz",
@@ -1730,6 +1786,107 @@
 				"url": "https://opencollective.com/unified"
 			}
 		},
+		"node_modules/mdast-util-gfm": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/mdast-util-gfm/-/mdast-util-gfm-2.0.2.tgz",
+			"integrity": "sha512-qvZ608nBppZ4icQlhQQIAdc6S3Ffj9RGmzwUKUWuEICFnd1LVkN3EktF7ZHAgfcEdvZB5owU9tQgt99e2TlLjg==",
+			"dependencies": {
+				"mdast-util-from-markdown": "^1.0.0",
+				"mdast-util-gfm-autolink-literal": "^1.0.0",
+				"mdast-util-gfm-footnote": "^1.0.0",
+				"mdast-util-gfm-strikethrough": "^1.0.0",
+				"mdast-util-gfm-table": "^1.0.0",
+				"mdast-util-gfm-task-list-item": "^1.0.0",
+				"mdast-util-to-markdown": "^1.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/mdast-util-gfm-autolink-literal": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/mdast-util-gfm-autolink-literal/-/mdast-util-gfm-autolink-literal-1.0.3.tgz",
+			"integrity": "sha512-My8KJ57FYEy2W2LyNom4n3E7hKTuQk/0SES0u16tjA9Z3oFkF4RrC/hPAPgjlSpezsOvI8ObcXcElo92wn5IGA==",
+			"dependencies": {
+				"@types/mdast": "^3.0.0",
+				"ccount": "^2.0.0",
+				"mdast-util-find-and-replace": "^2.0.0",
+				"micromark-util-character": "^1.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/mdast-util-gfm-footnote": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/mdast-util-gfm-footnote/-/mdast-util-gfm-footnote-1.0.2.tgz",
+			"integrity": "sha512-56D19KOGbE00uKVj3sgIykpwKL179QsVFwx/DCW0u/0+URsryacI4MAdNJl0dh+u2PSsD9FtxPFbHCzJ78qJFQ==",
+			"dependencies": {
+				"@types/mdast": "^3.0.0",
+				"mdast-util-to-markdown": "^1.3.0",
+				"micromark-util-normalize-identifier": "^1.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/mdast-util-gfm-strikethrough": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/mdast-util-gfm-strikethrough/-/mdast-util-gfm-strikethrough-1.0.3.tgz",
+			"integrity": "sha512-DAPhYzTYrRcXdMjUtUjKvW9z/FNAMTdU0ORyMcbmkwYNbKocDpdk+PX1L1dQgOID/+vVs1uBQ7ElrBQfZ0cuiQ==",
+			"dependencies": {
+				"@types/mdast": "^3.0.0",
+				"mdast-util-to-markdown": "^1.3.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/mdast-util-gfm-table": {
+			"version": "1.0.7",
+			"resolved": "https://registry.npmjs.org/mdast-util-gfm-table/-/mdast-util-gfm-table-1.0.7.tgz",
+			"integrity": "sha512-jjcpmNnQvrmN5Vx7y7lEc2iIOEytYv7rTvu+MeyAsSHTASGCCRA79Igg2uKssgOs1i1po8s3plW0sTu1wkkLGg==",
+			"dependencies": {
+				"@types/mdast": "^3.0.0",
+				"markdown-table": "^3.0.0",
+				"mdast-util-from-markdown": "^1.0.0",
+				"mdast-util-to-markdown": "^1.3.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/mdast-util-gfm-task-list-item": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/mdast-util-gfm-task-list-item/-/mdast-util-gfm-task-list-item-1.0.2.tgz",
+			"integrity": "sha512-PFTA1gzfp1B1UaiJVyhJZA1rm0+Tzn690frc/L8vNX1Jop4STZgOE6bxUhnzdVSB+vm2GU1tIsuQcA9bxTQpMQ==",
+			"dependencies": {
+				"@types/mdast": "^3.0.0",
+				"mdast-util-to-markdown": "^1.3.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/mdast-util-phrasing": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/mdast-util-phrasing/-/mdast-util-phrasing-3.0.1.tgz",
+			"integrity": "sha512-WmI1gTXUBJo4/ZmSk79Wcb2HcjPJBzM1nlI/OUWA8yk2X9ik3ffNbBGsU+09BFmXaL1IBb9fiuvq6/KMiNycSg==",
+			"dependencies": {
+				"@types/mdast": "^3.0.0",
+				"unist-util-is": "^5.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
 		"node_modules/mdast-util-to-hast": {
 			"version": "12.3.0",
 			"resolved": "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-12.3.0.tgz",
@@ -1749,6 +1906,25 @@
 				"url": "https://opencollective.com/unified"
 			}
 		},
+		"node_modules/mdast-util-to-markdown": {
+			"version": "1.5.0",
+			"resolved": "https://registry.npmjs.org/mdast-util-to-markdown/-/mdast-util-to-markdown-1.5.0.tgz",
+			"integrity": "sha512-bbv7TPv/WC49thZPg3jXuqzuvI45IL2EVAr/KxF0BSdHsU0ceFHOmwQn6evxAh1GaoK/6GQ1wp4R4oW2+LFL/A==",
+			"dependencies": {
+				"@types/mdast": "^3.0.0",
+				"@types/unist": "^2.0.0",
+				"longest-streak": "^3.0.0",
+				"mdast-util-phrasing": "^3.0.0",
+				"mdast-util-to-string": "^3.0.0",
+				"micromark-util-decode-string": "^1.0.0",
+				"unist-util-visit": "^4.0.0",
+				"zwitch": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
 		"node_modules/mdast-util-to-string": {
 			"version": "3.2.0",
 			"resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-3.2.0.tgz",
@@ -1843,6 +2019,120 @@
 				"uvu": "^0.5.0"
 			}
 		},
+		"node_modules/micromark-extension-gfm": {
+			"version": "2.0.3",
+			"resolved": "https://registry.npmjs.org/micromark-extension-gfm/-/micromark-extension-gfm-2.0.3.tgz",
+			"integrity": "sha512-vb9OoHqrhCmbRidQv/2+Bc6pkP0FrtlhurxZofvOEy5o8RtuuvTq+RQ1Vw5ZDNrVraQZu3HixESqbG+0iKk/MQ==",
+			"dependencies": {
+				"micromark-extension-gfm-autolink-literal": "^1.0.0",
+				"micromark-extension-gfm-footnote": "^1.0.0",
+				"micromark-extension-gfm-strikethrough": "^1.0.0",
+				"micromark-extension-gfm-table": "^1.0.0",
+				"micromark-extension-gfm-tagfilter": "^1.0.0",
+				"micromark-extension-gfm-task-list-item": "^1.0.0",
+				"micromark-util-combine-extensions": "^1.0.0",
+				"micromark-util-types": "^1.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/micromark-extension-gfm-autolink-literal": {
+			"version": "1.0.5",
+			"resolved": "https://registry.npmjs.org/micromark-extension-gfm-autolink-literal/-/micromark-extension-gfm-autolink-literal-1.0.5.tgz",
+			"integrity": "sha512-z3wJSLrDf8kRDOh2qBtoTRD53vJ+CWIyo7uyZuxf/JAbNJjiHsOpG1y5wxk8drtv3ETAHutCu6N3thkOOgueWg==",
+			"dependencies": {
+				"micromark-util-character": "^1.0.0",
+				"micromark-util-sanitize-uri": "^1.0.0",
+				"micromark-util-symbol": "^1.0.0",
+				"micromark-util-types": "^1.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/micromark-extension-gfm-footnote": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/micromark-extension-gfm-footnote/-/micromark-extension-gfm-footnote-1.1.2.tgz",
+			"integrity": "sha512-Yxn7z7SxgyGWRNa4wzf8AhYYWNrwl5q1Z8ii+CSTTIqVkmGZF1CElX2JI8g5yGoM3GAman9/PVCUFUSJ0kB/8Q==",
+			"dependencies": {
+				"micromark-core-commonmark": "^1.0.0",
+				"micromark-factory-space": "^1.0.0",
+				"micromark-util-character": "^1.0.0",
+				"micromark-util-normalize-identifier": "^1.0.0",
+				"micromark-util-sanitize-uri": "^1.0.0",
+				"micromark-util-symbol": "^1.0.0",
+				"micromark-util-types": "^1.0.0",
+				"uvu": "^0.5.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/micromark-extension-gfm-strikethrough": {
+			"version": "1.0.7",
+			"resolved": "https://registry.npmjs.org/micromark-extension-gfm-strikethrough/-/micromark-extension-gfm-strikethrough-1.0.7.tgz",
+			"integrity": "sha512-sX0FawVE1o3abGk3vRjOH50L5TTLr3b5XMqnP9YDRb34M0v5OoZhG+OHFz1OffZ9dlwgpTBKaT4XW/AsUVnSDw==",
+			"dependencies": {
+				"micromark-util-chunked": "^1.0.0",
+				"micromark-util-classify-character": "^1.0.0",
+				"micromark-util-resolve-all": "^1.0.0",
+				"micromark-util-symbol": "^1.0.0",
+				"micromark-util-types": "^1.0.0",
+				"uvu": "^0.5.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/micromark-extension-gfm-table": {
+			"version": "1.0.7",
+			"resolved": "https://registry.npmjs.org/micromark-extension-gfm-table/-/micromark-extension-gfm-table-1.0.7.tgz",
+			"integrity": "sha512-3ZORTHtcSnMQEKtAOsBQ9/oHp9096pI/UvdPtN7ehKvrmZZ2+bbWhi0ln+I9drmwXMt5boocn6OlwQzNXeVeqw==",
+			"dependencies": {
+				"micromark-factory-space": "^1.0.0",
+				"micromark-util-character": "^1.0.0",
+				"micromark-util-symbol": "^1.0.0",
+				"micromark-util-types": "^1.0.0",
+				"uvu": "^0.5.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/micromark-extension-gfm-tagfilter": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/micromark-extension-gfm-tagfilter/-/micromark-extension-gfm-tagfilter-1.0.2.tgz",
+			"integrity": "sha512-5XWB9GbAUSHTn8VPU8/1DBXMuKYT5uOgEjJb8gN3mW0PNW5OPHpSdojoqf+iq1xo7vWzw/P8bAHY0n6ijpXF7g==",
+			"dependencies": {
+				"micromark-util-types": "^1.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/micromark-extension-gfm-task-list-item": {
+			"version": "1.0.5",
+			"resolved": "https://registry.npmjs.org/micromark-extension-gfm-task-list-item/-/micromark-extension-gfm-task-list-item-1.0.5.tgz",
+			"integrity": "sha512-RMFXl2uQ0pNQy6Lun2YBYT9g9INXtWJULgbt01D/x8/6yJ2qpKyzdZD3pi6UIkzF++Da49xAelVKUeUMqd5eIQ==",
+			"dependencies": {
+				"micromark-factory-space": "^1.0.0",
+				"micromark-util-character": "^1.0.0",
+				"micromark-util-symbol": "^1.0.0",
+				"micromark-util-types": "^1.0.0",
+				"uvu": "^0.5.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
 		"node_modules/micromark-factory-destination": {
 			"version": "1.1.0",
 			"resolved": "https://registry.npmjs.org/micromark-factory-destination/-/micromark-factory-destination-1.1.0.tgz",
@@ -2594,6 +2884,21 @@
 				"url": "https://opencollective.com/unified"
 			}
 		},
+		"node_modules/remark-gfm": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/remark-gfm/-/remark-gfm-3.0.1.tgz",
+			"integrity": "sha512-lEFDoi2PICJyNrACFOfDD3JlLkuSbOa5Wd8EPt06HUdptv8Gn0bxYTdbU/XXQ3swAPkEaGxxPN9cbnMHvVu1Ig==",
+			"dependencies": {
+				"@types/mdast": "^3.0.0",
+				"mdast-util-gfm": "^2.0.0",
+				"micromark-extension-gfm": "^2.0.0",
+				"unified": "^10.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
 		"node_modules/remark-parse": {
 			"version": "10.0.2",
 			"resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-10.0.2.tgz",

package.json

@@ -15,6 +15,7 @@
 		"postinstall": "patch-package"
 	},
 	"dependencies": {
+		"@bytemd/plugin-gfm": "^1.21.0",
 		"bytemd": "1.21.0",
 		"kysely": "^0.26.3",
 		"sqlocal": "^0.6.1"

src/lib/components/notes/note-content.svelte

@@ -1,21 +1,24 @@
 <script lang="ts">
 	import { Editor, Viewer } from 'bytemd';
+	import gfmPlugin from '@bytemd/plugin-gfm';
 	import type { Note } from '$lib/stores/notes';
 	import type { NoteEditorStore } from '$lib/stores/note-editor';
 
 	export let note: Note;
 	export let noteEditorStore: NoteEditorStore;
 	const { editing, draftContent, draftChange } = noteEditorStore;
+
+	const plugins = [gfmPlugin()];
 </script>
 
 <div class="note-content" data-theme="light">
 	{#if $editing}
 		<div class="note-content__editor">
-			<Editor value={$draftContent} on:change={draftChange} />
+			<Editor value={$draftContent} {plugins} on:change={draftChange} />
 		</div>
 	{:else}
 		<div class="note-content__viewer">
-			<Viewer value={note.content} />
+			<Viewer value={note.content} {plugins} />
 		</div>
 	{/if}
 </div>

src/styles/_bytemd.scss

@@ -52,8 +52,24 @@
 }
 
 .markdown-body {
-	pre {
+	--table-border-color: hsl(0 0% 0% / 0.4);
-		background-color: hsl(0 0% 100% / 0.3);
+	--blockquote-border-color: hsl(0 0% 0% / 0.4);
+	--code-background-color: hsl(0 0% 100% / 0.4);
+
+	hr {
+		border-color: hsl(0 0% 0% / 0.4);
+	}
+
+	del {
+		color: inherit;
+	}
+
+	p:last-child {
+		margin-bottom: 0;
+	}
+
+	.task-list-item {
+		list-style-type: none;
 	}
 }