refactor(frontend): remove link parsing and use backend links
This commit is contained in:
parent
8a42bea740
commit
6f1626b3b8
GPG key ID:
43C1470D890F23ED
3 changed files with 87 additions and 120 deletions
|
|
@ -4,6 +4,8 @@ export interface Note {
|
||||||
content: string;
|
content: string;
|
||||||
createdAt: Date;
|
createdAt: Date;
|
||||||
updatedAt: Date;
|
updatedAt: Date;
|
||||||
|
linksTo?: Note[];
|
||||||
|
linkedBy?: Note[];
|
||||||
}
|
}
|
||||||
|
|
||||||
import { writable } from 'svelte/store';
|
import { writable } from 'svelte/store';
|
||||||
|
|
|
||||||
|
|
@ -14,11 +14,17 @@ export function stripMarkdown(text: string): string {
|
||||||
.trim();
|
.trim();
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function renderMarkdown(text: string): Promise<string> {
|
export async function renderMarkdown(
|
||||||
// Replace [[link]] with anchor tags having data-title attribute
|
text: string,
|
||||||
const linkedText = text.replace(
|
linksTo: { id: string; title: string }[] = []
|
||||||
/\[\[([^\]]+)\]\]/g,
|
): Promise<string> {
|
||||||
'<a href="#" class="note-link" data-title="$1">$1</a>'
|
// Replace [[link]] with anchor tags using the backend-provided links
|
||||||
);
|
const linkedText = text.replace(/\[\[([^\]]+)\]\]/g, (match, title) => {
|
||||||
|
const link = linksTo.find((l) => l.title === title);
|
||||||
|
if (link) {
|
||||||
|
return `<a href="/notes/${link.id}" class="note-link">${title}</a>`;
|
||||||
|
}
|
||||||
|
return `<a href="/notes/new?title=${encodeURIComponent(title)}" class="note-link">${title}</a>`;
|
||||||
|
});
|
||||||
return marked(linkedText);
|
return marked(linkedText);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { run, preventDefault } from 'svelte/legacy';
|
import { run } from 'svelte/legacy';
|
||||||
import { notes } from '$lib';
|
import { notes } from '$lib';
|
||||||
import { page } from '$app/stores';
|
import { page } from '$app/stores';
|
||||||
import { goto } from '$app/navigation';
|
import { goto } from '$app/navigation';
|
||||||
|
|
@ -11,6 +11,8 @@
|
||||||
content: string;
|
content: string;
|
||||||
createdAt: Date;
|
createdAt: Date;
|
||||||
updatedAt: Date;
|
updatedAt: Date;
|
||||||
|
linksTo?: Note[];
|
||||||
|
linkedBy?: Note[];
|
||||||
}
|
}
|
||||||
|
|
||||||
let note: Note | undefined = $state();
|
let note: Note | undefined = $state();
|
||||||
|
|
@ -46,123 +48,80 @@
|
||||||
console.error('Failed to update note:', error);
|
console.error('Failed to update note:', error);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async function handleLinkClick(event: MouseEvent | KeyboardEvent) {
|
|
||||||
const target = event.target as HTMLElement;
|
|
||||||
if (target.tagName === 'A' && target.classList.contains('note-link')) {
|
|
||||||
event.preventDefault();
|
|
||||||
const title = target.getAttribute('data-title');
|
|
||||||
if (!title) return;
|
|
||||||
|
|
||||||
// Check if a note with this title exists
|
|
||||||
const existingNote = $notes.find((n) => n.title === title);
|
|
||||||
if (existingNote) {
|
|
||||||
// Navigate to the existing note
|
|
||||||
goto(`/notes/${existingNote.id}`);
|
|
||||||
} else {
|
|
||||||
// Navigate to the new note page with the title pre-filled
|
|
||||||
goto(`/notes/new?title=${encodeURIComponent(title)}`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div
|
{#if note}
|
||||||
class="container"
|
<div class="container">
|
||||||
onclick={handleLinkClick}
|
{#if isEditing}
|
||||||
onkeydown={(event) => {
|
<div class="field">
|
||||||
if (event.key === 'Enter' || event.key === ' ') {
|
<div class="control">
|
||||||
handleLinkClick(event);
|
<input
|
||||||
}
|
class="input is-large"
|
||||||
}}
|
type="text"
|
||||||
role="button"
|
placeholder="Note Title"
|
||||||
tabindex="0"
|
bind:value={editedTitle}
|
||||||
>
|
/>
|
||||||
<section class="section">
|
|
||||||
{#if note}
|
|
||||||
{#if isEditing}
|
|
||||||
<form onsubmit={preventDefault(handleSave)}>
|
|
||||||
<div class="field">
|
|
||||||
<label class="label" for="title">Title</label>
|
|
||||||
<div class="control">
|
|
||||||
<input id="title" class="input" type="text" bind:value={editedTitle} required />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="field">
|
|
||||||
<label class="label" for="content">Content</label>
|
|
||||||
<div class="control">
|
|
||||||
<textarea id="content" class="textarea" bind:value={editedContent} rows="10" required
|
|
||||||
></textarea>
|
|
||||||
</div>
|
|
||||||
<div class="mt-4 box">
|
|
||||||
<label class="label" for="preview">Preview</label>
|
|
||||||
<div id="preview" class="content" aria-live="polite">
|
|
||||||
{#await renderMarkdown(note.content)}
|
|
||||||
<p>Rendering markdown...</p>
|
|
||||||
{:then markdownContent}
|
|
||||||
<!-- eslint-disable-next-line svelte/no-at-html-tags -->
|
|
||||||
{@html markdownContent}
|
|
||||||
{:catch err}
|
|
||||||
<p>Error rendering the markdown content!i {err.message}</p>
|
|
||||||
{/await}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="field is-grouped">
|
|
||||||
<div class="control">
|
|
||||||
<button type="submit" class="button is-primary">Save</button>
|
|
||||||
</div>
|
|
||||||
<div class="control">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
class="button is-light"
|
|
||||||
onclick={() => {
|
|
||||||
isEditing = false;
|
|
||||||
goto(`/notes/${id}`);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Cancel
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
{:else}
|
|
||||||
<div class="level">
|
|
||||||
<div class="level-left">
|
|
||||||
<div class="level-item">
|
|
||||||
<h1 class="title">{note.title}</h1>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="level-right">
|
|
||||||
<div class="level-item">
|
|
||||||
<button class="button is-primary" onclick={() => (isEditing = true)}> Edit </button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<div class="content">
|
<div class="field">
|
||||||
{#await renderMarkdown(note.content)}
|
<div class="control">
|
||||||
<p>Rendering markdown...</p>
|
<textarea class="textarea" placeholder="Note Content" rows="20" bind:value={editedContent}
|
||||||
{:then markdownContent}
|
></textarea>
|
||||||
<!-- eslint-disable-next-line svelte/no-at-html-tags -->
|
|
||||||
{@html markdownContent}
|
|
||||||
{:catch err}
|
|
||||||
<p>Error rendering the markdown content!i {err.message}</p>
|
|
||||||
{/await}
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<p class="has-text-grey is-size-7">
|
<div class="field is-grouped">
|
||||||
Last updated: {note.updatedAt.toLocaleString()}
|
<div class="control">
|
||||||
</p>
|
<button class="button is-primary" onclick={handleSave}>Save</button>
|
||||||
{/if}
|
</div>
|
||||||
|
<div class="control">
|
||||||
|
<button class="button" onclick={() => (isEditing = false)}>Cancel</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
{:else}
|
{:else}
|
||||||
<div class="notification is-danger">Note not found</div>
|
<div class="content">
|
||||||
|
<h1 class="title">{note.title}</h1>
|
||||||
|
{#await renderMarkdown(note.content, note.linksTo || [])}
|
||||||
|
<p>Loading...</p>
|
||||||
|
{:then html}
|
||||||
|
<!-- eslint-disable-next-line svelte/no-at-html-tags -->
|
||||||
|
{@html html}
|
||||||
|
{/await}
|
||||||
|
<div class="field is-grouped mt-4">
|
||||||
|
<div class="control">
|
||||||
|
<button class="button is-primary" onclick={() => (isEditing = true)}>Edit</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<div class="mt-4">
|
{#if (note.linksTo || []).length > 0}
|
||||||
<a href="/" class="button is-light">Back to Notes</a>
|
<div class="box mt-4">
|
||||||
</div>
|
<h2 class="title is-5">Links to:</h2>
|
||||||
</section>
|
<div class="tags">
|
||||||
</div>
|
{#each note.linksTo || [] as link}
|
||||||
|
<a href="/notes/{link.id}" class="tag is-link">{link.title}</a>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if (note.linkedBy || []).length > 0}
|
||||||
|
<div class="box mt-4">
|
||||||
|
<h2 class="title is-5">Referenced by:</h2>
|
||||||
|
<div class="tags">
|
||||||
|
{#each note.linkedBy || [] as link}
|
||||||
|
<a href="/notes/{link.id}" class="tag is-info">{link.title}</a>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.container {
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue