removed bytemd and made custom codemirror markdown editor, comments w…

…ork but the response is 500, needs to be fixed in backend

package.json

@@ -25,6 +25,7 @@
 		"@sveltejs/vite-plugin-svelte": "^3.1.1",
 		"@tailwindcss/typography": "^0.5.13",
 		"@types/nprogress": "^0.2.3",
+		"@types/simplemde": "^1.11.11",
 		"@typescript-eslint/eslint-plugin": "^7.16.1",
 		"@typescript-eslint/parser": "^7.16.1",
 		"autoprefixer": "^10.4.19",
@@ -44,6 +45,7 @@
 		"sass": "^1.77.8",
 		"svelte": "^4.2.18",
 		"svelte-check": "^3.8.4",
+		"tailwind-merge": "^2.4.0",
 		"tailwindcss": "^3.4.6",
 		"tslib": "^2.6.3",
 		"typescript": "^5.5.3",
@@ -52,11 +54,23 @@
 		"wrangler": "^3.65.1"
 	},
 	"dependencies": {
+		"@codemirror/commands": "^6.6.0",
+		"@codemirror/lang-markdown": "^6.2.5",
+		"@codemirror/language": "^6.10.2",
+		"@codemirror/state": "^6.4.1",
+		"@codemirror/view": "^6.28.6",
 		"axios": "^1.7.2",
 		"bigger-picture": "^1.1.17",
-		"bytemd": "^1.21.0",
+		"carta-md": "^4.3.6",
+		"codemirror": "^6.0.1",
 		"github-markdown-css": "^5.6.1",
 		"nprogress": "^0.2.0",
-		"svelte-markdown": "^0.4.1"
+		"remark-gfm": "^4.0.0",
+		"remark-html": "^16.0.1",
+		"remark-parse": "^11.0.0",
+		"simplemde": "^1.11.2",
+		"svelte-codemirror-editor": "^1.4.0",
+		"svelte-markdown": "^0.4.1",
+		"unified": "^11.0.5"
 	}
 }

src/app.css

@@ -51,10 +51,6 @@ a.link:not([href='']) {
 	@apply prose;
 }
 
-.bytemd-fullscreen {
-	@apply z-50;
-}
-
 .table-border {
 	@apply w-full overflow-hidden rounded-xl border border-gray-200;
 

src/lib/components/cards/comments/CommentCard.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
 	import type { Saferwall } from '$lib/types';
 	import { getMemberSince } from '$lib/utils';
-	import { Viewer } from 'bytemd';
 
 	import Avatar from '$lib/components/Avatar.svelte';
 	import DateTime from '$lib/components/DateTime.svelte';
 	import Icon from '$lib/components/Icon.svelte';
 	import Button from '$lib/components/form/Button.svelte';
 	import Card from '../../Card.svelte';
+	import Viewer from './Viewer.svelte';
 
 	export let author: Saferwall.Author;
 	export let comment: string;

src/lib/components/cards/comments/Viewer.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import remarkHtml from 'remark-html';
+	import remarkParse from 'remark-parse';
+	import remarkGfm from 'remark-gfm';
+	import { unified } from 'unified';
+	import "github-markdown-css/github-markdown-light.css";
+
+	let processor = unified()
+		.use(remarkParse)
+		.use(remarkGfm)
+		.use(remarkHtml);
+
+	$: mdToHtml = processor.processSync(value).toString();
+
+	export let value: string;
+</script>
+
+<div class="markdown-body md-to-html p-2">
+	{@html mdToHtml}
+</div>
+
+<style lang="postcss">
+</style>