Add markdown editor component

package.json

@@ -62,6 +62,7 @@
     "sharp": "^0.32.6",
     "svelte-easy-crop": "^2.0.1",
     "tailwind-merge": "^2.0.0",
-    "theme-change": "^2.5.0"
+    "theme-change": "^2.5.0",
+    "tiptap-markdown": "^0.8.4"
   }
 }

src/lib/components/MarkdownEditor.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+  import { onMount, onDestroy } from "svelte";
+  import { Editor } from "@tiptap/core";
+  import StarterKit from "@tiptap/starter-kit";
+  import { Markdown } from "tiptap-markdown";
+  export let value = "";
+
+  let element: Element | undefined = undefined;
+  let editor: Editor | undefined = undefined;
+
+  onMount(() => {
+    editor = new Editor({
+      element: element,
+      extensions: [StarterKit, Markdown],
+      content: value,
+      onTransaction: () => {
+        editor = editor;
+      },
+      onUpdate: () => {
+        value = editor?.storage.markdown.getMarkdown();
+      },
+    });
+  });
+
+  onDestroy(() => {
+    if (editor) {
+      editor.destroy();
+    }
+  });
+</script>
+
+<div class="join">
+  <button
+    type="button"
+    class="btn join-item"
+    on:click={() => {
+      editor?.chain().focus().toggleBold().run();
+    }}><b>B</b></button
+  >
+  <button
+    type="button"
+    class="btn join-item"
+    on:click={() => {
+      editor?.chain().focus().toggleHeading({ level: 1 }).run();
+    }}>H</button
+  >
+  <button
+    type="button"
+    class="btn join-item"
+    on:click={() => {
+      editor?.chain().focus().toggleItalic().run();
+    }}><it>I</it></button
+  >
+  <button
+    type="button"
+    class="btn join-item"
+    on:click={() => {
+      editor?.chain().focus().toggleStrike().run();
+    }}><s>S</s></button
+  >
+</div>
+<!--
+  The ignores below allows are neccessary since we create a "fake" Daisy UI textbox.
+  So when a user presses a part of the screen that is part of the fake one, we have to
+  send the event to the real one.
+-->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+  on:click={() => {
+    editor?.view.dom.focus();
+  }}
+  class="textarea textarea-bordered min-h-[10rem]"
+  bind:this={element}
+/>

src/routes/news/ArticleEditor.svelte

@@ -8,6 +8,7 @@
   import type { AuthorOption } from "./articles.js";
   import TagSelector from "$lib/components/TagSelector.svelte";
   import TagChip from "$lib/components/TagChip.svelte";
+  import MarkdownEditor from "$lib/components/MarkdownEditor.svelte";
 
   export let authorOptions: AuthorOption[];
   export let selectedAuthorOption: AuthorOption = authorOptions[0]!;
@@ -56,13 +57,8 @@
       <slot name="form-start" />
       <Input name="header" label="Header" required bind:value={article.header} />
       <Labeled label="Description" id="body">
-        <textarea
-          id="body"
-          name="body"
-          class="textarea textarea-bordered min-h-[10rem]"
-          placeholder="Body"
-          bind:value={article.body}
-        />
+        <MarkdownEditor bind:value={article.body} />
+        <input type="hidden" name="body" value={article.body} />
       </Labeled>
       <Labeled label="Author" id="author">
         <select