127 lines
2.9 KiB
Svelte
127 lines
2.9 KiB
Svelte
<script lang="ts">
|
|
import { run } from 'svelte/legacy';
|
|
import { notes } from '$lib';
|
|
import { page } from '$app/stores';
|
|
import { goto } from '$app/navigation';
|
|
import { renderMarkdown } from '$lib/markdown';
|
|
|
|
interface Note {
|
|
id: string;
|
|
title: string;
|
|
content: string;
|
|
createdAt: Date;
|
|
updatedAt: Date;
|
|
linksTo?: Note[];
|
|
linkedBy?: Note[];
|
|
}
|
|
|
|
let note: Note | undefined = $state();
|
|
let isEditing = $state($page.url.searchParams.get('edit') === 'true');
|
|
let editedTitle = $state('');
|
|
let editedContent = $state('');
|
|
|
|
let id = $derived($page.params.id);
|
|
|
|
run(() => {
|
|
if ($notes && id) {
|
|
note = $notes.find((n) => n.id === id);
|
|
if (note) {
|
|
editedTitle = note.title;
|
|
editedContent = note.content;
|
|
} else if ($notes.length > 0) {
|
|
// Only redirect if we have loaded notes and didn't find this one
|
|
goto('/');
|
|
}
|
|
}
|
|
});
|
|
|
|
async function handleSave() {
|
|
if (!editedTitle || !editedContent) return;
|
|
|
|
try {
|
|
await notes.update(id, {
|
|
title: editedTitle,
|
|
content: editedContent
|
|
});
|
|
isEditing = false;
|
|
} catch (error) {
|
|
console.error('Failed to update note:', error);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
{#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>
|
|
<div class="field">
|
|
<div class="control">
|
|
<textarea class="textarea" placeholder="Note Content" rows="20" bind:value={editedContent}
|
|
></textarea>
|
|
</div>
|
|
</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="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 (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>
|