Add markdown renderer
This commit is contained in:
parent
089bde27fd
commit
9ca6c413ba
|
@ -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",
|
||||
|
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -32,5 +32,5 @@ button:not(.real) {
|
|||
}
|
||||
|
||||
button:not(.real):hover {
|
||||
background-color: #fff2;
|
||||
background-color: #fff2;
|
||||
}
|
Loading…
Reference in New Issue