Add markdown renderer

This commit is contained in:
Brieuc Dubois 2024-01-17 22:15:41 +01:00
parent 089bde27fd
commit 9ca6c413ba
5 changed files with 80 additions and 16 deletions

View File

@ -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",

View File

@ -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"
}
}

View File

@ -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">

View File

@ -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>

View File

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