Add markdown renderer

frontend/package-lock.json

@@ -11,6 +11,7 @@
 				"axios": "^1.6.4",
 				"axios-cache-interceptor": "^1.4.1",
 				"less": "^4.2.0",
+				"svelte-markdown": "^0.4.1",
 				"svelte-multiselect": "^10.2.0"
 			},
 			"devDependencies": {
@@ -1119,6 +1120,11 @@
 			"integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
 			"dev": true
 		},
+		"node_modules/@types/marked": {
+			"version": "5.0.2",
+			"resolved": "https://registry.npmjs.org/@types/marked/-/marked-5.0.2.tgz",
+			"integrity": "sha512-OucS4KMHhFzhz27KxmWg7J+kIYqyqoW5kdIEI319hqARQQUTqhao3M/F+uFnDXD0Rg72iDDZxZNxq5gvctmLlg=="
+		},
 		"node_modules/@types/pug": {
 			"version": "2.0.10",
 			"resolved": "https://registry.npmjs.org/@types/pug/-/pug-2.0.10.tgz",
@@ -2695,6 +2701,17 @@
 				"semver": "bin/semver"
 			}
 		},
+		"node_modules/marked": {
+			"version": "5.1.2",
+			"resolved": "https://registry.npmjs.org/marked/-/marked-5.1.2.tgz",
+			"integrity": "sha512-ahRPGXJpjMjwSOlBoTMZAK7ATXkli5qCPxZ21TG44rx1KEo44bii4ekgTDQPNRQ4Kh7JMb9Ub1PVk1NxRSsorg==",
+			"bin": {
+				"marked": "bin/marked.js"
+			},
+			"engines": {
+				"node": ">= 16"
+			}
+		},
 		"node_modules/mdn-data": {
 			"version": "2.0.30",
 			"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
@@ -3616,6 +3633,18 @@
 				"svelte": "^3.19.0 || ^4.0.0"
 			}
 		},
+		"node_modules/svelte-markdown": {
+			"version": "0.4.1",
+			"resolved": "https://registry.npmjs.org/svelte-markdown/-/svelte-markdown-0.4.1.tgz",
+			"integrity": "sha512-pOlLY6EruKJaWI9my/2bKX8PdTeP5CM0s4VMmwmC2prlOkjAf+AOmTM4wW/l19Y6WZ87YmP8+ZCJCCwBChWjYw==",
+			"dependencies": {
+				"@types/marked": "^5.0.1",
+				"marked": "^5.1.2"
+			},
+			"peerDependencies": {
+				"svelte": "^4.0.0"
+			}
+		},
 		"node_modules/svelte-multiselect": {
 			"version": "10.2.0",
 			"resolved": "https://registry.npmjs.org/svelte-multiselect/-/svelte-multiselect-10.2.0.tgz",

frontend/package.json

@@ -40,6 +40,7 @@
 		"axios": "^1.6.4",
 		"axios-cache-interceptor": "^1.4.1",
 		"less": "^4.2.0",
+		"svelte-markdown": "^0.4.1",
 		"svelte-multiselect": "^10.2.0"
 	}
 }

frontend/src/lib/components/card/Card.svelte

@@ -12,10 +12,10 @@
 	tabindex="0"
 	draggable={true}
 	on:dragstart={() => currentDraggedCard.set(card)}
-	on:click={() => (showModal = true)}
+	on:click={() => (card.showModal = true)}
 	role="button"
 	on:keydown={(e) => {
-		if (e.key === 'Enter') showModal = true;
+		if (e.key === 'Enter') card.showModal = true;
 	}}
 >
 	<div class="header">

frontend/src/lib/components/card/ModalCard.svelte

@@ -4,11 +4,13 @@
 	import ModalTags from '$lib/components/tags/ModalTags.svelte';
 	import type Card from '$lib/types/Card';
 	import { cards } from '$lib/types/Card';
+	import SvelteMarkdown from 'svelte-markdown';
 
 	export let card: Card;
 
 	let newTitle: string = card.title;
 	let newContent: string = card.content;
+	let editDescription: boolean = false;
 
 	async function save(closeModal: boolean = true) {
 		if (card.title !== newTitle || card.content !== newContent) {
@@ -41,7 +43,12 @@
 				>
 					<TrashIcon />
 				</button>
-				<button on:click|once={() => (card.showModal = false)}>
+				<button
+					on:click|once={() => {
+						card.showModal = false;
+						cards.reload();
+					}}
+				>
 					<CloseIcon />
 				</button>
 			</div>
@@ -50,11 +57,18 @@
 			<ModalTags {card} />
 		</div>
 		<div class="body">
-			<textarea
-				bind:value={newContent}
-				placeholder="Add a description"
-				on:blur={() => save(false)}
-			/>
+			<div class="toggleEdit" on:click|preventDefault={() => (editDescription = !editDescription)}>
+				👁
+			</div>
+			{#if editDescription}
+				<textarea
+					bind:value={newContent}
+					placeholder="Add a description"
+					on:blur={() => save(false)}
+				/>
+			{:else}
+				<SvelteMarkdown source={card.content} />
+			{/if}
 		</div>
 	</div>
 </div>
@@ -131,17 +145,37 @@
 
 	.modal .body {
 		margin-bottom: 20px;
+		// border: 1px solid red;
+		font-size: 1.5rem;
+
+		border: 1px solid #444;
+		min-height: 300px;
+		border-radius: 5px;
+		padding: 5px;
+		position: relative;
+
+		&:before {
+			transition: color 0.2s ease-in-out;
+		}
+
+		&:before:hover {
+			color: #333;
+		}
+	}
+
+	.toggleEdit {
+		position: absolute;
+		top: 10px;
+		right: 10px;
+		cursor: pointer;
 	}
 
 	.modal textarea {
 		width: 100%;
-		min-height: 200px;
-		resize: vertical;
+		min-height: 300px;
+		height: fit-content;
+		border: 0;
+		resize: none;
 		font-family: inherit;
 	}
-
-	.modal td button {
-		width: 30px;
-		height: 30px;
-	}
 </style>

frontend/static/css/global.css

@@ -32,5 +32,5 @@ button:not(.real) {
 }
 
 button:not(.real):hover {
-   background-color: #fff2; 
+    background-color: #fff2;
 }