Add markdown editor to card modal

src/lib/components/AddCardModal.svelte

@@ -1,29 +1,32 @@
 <script>
 	import { addCard } from '$lib/ndk';
+	import MarkdownEditor from '$lib/components/MarkdownEditor.svelte';
 
 	export let modalRef;
 
-	let title;
+	let title = '';
+	let content = 'Write something awesome here 🌱';
 	function handleAddCard() {
 		const card = {
-			title
+			title,
+			content
 		};
 		addCard(card);
 	}
 </script>
 
 <dialog id="add-card" class="modal" bind:this={modalRef}>
-	<div class="modal-box">
-		<h3 class="text-lg font-bold">Add Card</h3>
-		<label class="input input-bordered"
+	<div class="modal-box flex w-3/4 max-w-5xl flex-col gap-1">
+		<h3 class="flex justify-center text-lg font-bold">Add Card</h3>
+		<label class="input input-bordered w-full"
 			>Titel
 			<input type="text" bind:value={title} />
 		</label>
-		<p class="py-4">Press ESC key or click the button below to close</p>
+		<MarkdownEditor bind:value={content} />
 		<div class="modal-action">
 			<form method="dialog">
-				<button class="btn">Close</button>
-				<button on:click={handleAddCard}>Add card</button>
+				<button class="btn btn-warning">Close</button>
+				<button class="btn btn-success" on:click={handleAddCard}>Add card</button>
 			</form>
 		</div>
 	</div>

src/lib/components/Board.svelte

@@ -111,8 +111,8 @@
 						<!-- {@debug column} -->
 						{#each column.items as item (item?.id ?? item)}
 							<div class="card" animate:flip={{ duration: flipDurationMs }}>
+								{eventTitle(item)}
 								{item.content}
-								{item.dTag}
 								<button on:click={() => deleteCard(column, item.id)}>Delete</button>
 							</div>
 						{/each}

src/lib/components/MarkdownEditor.svelte

@@ -0,0 +1,40 @@
+<script>
+	import { Carta, MarkdownEditor } from 'carta-md';
+	// Component default theme
+	import 'carta-md/default.css';
+
+	const carta = new Carta();
+
+	export let value = '';
+</script>
+
+<MarkdownEditor bind:value {carta} />
+
+<style>
+	/* Or in global stylesheet */
+	/* Set your monospace font */
+	/* Required to have the editor working correctly! */
+	:global(.carta-font-code) {
+		font-family: '...', monospace;
+		font-size: 1.1rem;
+		line-height: 1.1rem;
+		letter-spacing: normal;
+	}
+	/* Editor dark mode */
+	/* Only if you are using the default theme */
+	html.dark .carta-theme__default {
+		--border-color: var(--border-color-dark);
+		--selection-color: var(--selection-color-dark);
+		--focus-outline: var(--focus-outline-dark);
+		--hover-color: var(--hover-color-dark);
+		--caret-color: var(--caret-color-dark);
+		--text-color: var(--text-color-dark);
+	}
+
+	/* Code dark mode */
+	/* Only if you didn't specify a custom code theme */
+	html.dark .shiki,
+	html.dark .shiki span {
+		color: var(--shiki-dark) !important;
+	}
+</style>

src/lib/ndk.js

@@ -66,7 +66,9 @@ export async function addColumn(column) {
 
 export async function addCard(card) {
 	const ndk = getNdk();
-	const cardEvent = new NDKEvent(ndk, { kind: 30045, content: card.title });
+	const cardEvent = new NDKEvent(ndk, { kind: 30045, content: card.content });
+	cardEvent.tags.push(['title', card.title]);
+	console.log('card event', cardEvent);
 	await cardEvent.publish();
 
 	const columnEvent = await ndk.fetchEvent({
@@ -112,11 +114,13 @@ async function eventTagToColumn(eventTag) {
 }
 
 /**
+ * Gets the title tag of an event
  * @param {NDKEvent} event
+ * @returns {string}
  */
 export function eventTitle(event) {
 	if (event === undefined) return '';
-	const title = event.tags.find((e) => e[0] === 'title')[1] ?? '';
+	const title = event.tags?.find((e) => e[0] === 'title')?.[1] ?? '';
 	return title;
 }