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;
|
||||
createdAt: Date;
|
||||
updatedAt: Date;
|
||||
linksTo?: Note[];
|
||||
linkedBy?: Note[];
|
||||
}
|
||||
|
||||
import { writable } from 'svelte/store';
|
||||
|
|
|
|||
|
|
@ -14,11 +14,17 @@ export function stripMarkdown(text: string): string {
|
|||
.trim();
|
||||
}
|
||||
|
||||
export async function renderMarkdown(text: string): Promise<string> {
|
||||
// Replace [[link]] with anchor tags having data-title attribute
|
||||
const linkedText = text.replace(
|
||||
/\[\[([^\]]+)\]\]/g,
|
||||
'<a href="#" class="note-link" data-title="$1">$1</a>'
|
||||
);
|
||||
export async function renderMarkdown(
|
||||
text: string,
|
||||
linksTo: { id: string; title: string }[] = []
|
||||
): Promise<string> {
|
||||
// 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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script lang="ts">
|
||||
import { run, preventDefault } from 'svelte/legacy';
|
||||
import { run } from 'svelte/legacy';
|
||||
import { notes } from '$lib';
|
||||
import { page } from '$app/stores';
|
||||
import { goto } from '$app/navigation';
|
||||
|
|
@ -11,6 +11,8 @@
|
|||
content: string;
|
||||
createdAt: Date;
|
||||
updatedAt: Date;
|
||||
linksTo?: Note[];
|
||||
linkedBy?: Note[];
|
||||
}
|
||||
|
||||
let note: Note | undefined = $state();
|
||||
|
|
@ -46,123 +48,80 @@
|
|||
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>
|
||||
|
||||
<div
|
||||
class="container"
|
||||
onclick={handleLinkClick}
|
||||
onkeydown={(event) => {
|
||||
if (event.key === 'Enter' || event.key === ' ') {
|
||||
handleLinkClick(event);
|
||||
}
|
||||
}}
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<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>
|
||||
{#if note}
|
||||
<div class="container">
|
||||
{#if isEditing}
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<input
|
||||
class="input is-large"
|
||||
type="text"
|
||||
placeholder="Note Title"
|
||||
bind:value={editedTitle}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
{#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 class="field">
|
||||
<div class="control">
|
||||
<textarea class="textarea" placeholder="Note Content" rows="20" bind:value={editedContent}
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<p class="has-text-grey is-size-7">
|
||||
Last updated: {note.updatedAt.toLocaleString()}
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="field is-grouped">
|
||||
<div class="control">
|
||||
<button class="button is-primary" onclick={handleSave}>Save</button>
|
||||
</div>
|
||||
<div class="control">
|
||||
<button class="button" onclick={() => (isEditing = false)}>Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
{: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}
|
||||
|
||||
<div class="mt-4">
|
||||
<a href="/" class="button is-light">Back to Notes</a>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
{#if (note.linksTo || []).length > 0}
|
||||
<div class="box mt-4">
|
||||
<h2 class="title is-5">Links to:</h2>
|
||||
<div class="tags">
|
||||
{#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