mirror of
https://github.com/temetro/temetro.git
synced 2026-08-12 11:36:52 +00:00
Add Notes page: Tiptap rich-text editor backed by the notes API
- lib/notes.ts: list/get/create/update/delete via the API client. - New /notes route + nav item (and shared lib/nav.ts entry, i18n key) so it shows in the sidebar and command palette. - components/notes/notes-view.tsx: a note list + "New note", with save/delete and toasts. - components/notes/notes-editor.tsx: a Word-like COSS Toolbar driving Tiptap (StarterKit + Placeholder) — bold/italic/underline, H1–H2, bullet/numbered lists, undo/redo — plus a title field and Save. Installed @coss/toolbar and @coss/toggle-group and the Tiptap packages. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Khalid Abdi
@@ -0,0 +1,225 @@
|
||||
"use client";
|
||||
|
||||
import Placeholder from "@tiptap/extension-placeholder";
|
||||
import { EditorContent, useEditor } from "@tiptap/react";
|
||||
import StarterKit from "@tiptap/starter-kit";
|
||||
import {
|
||||
Bold,
|
||||
Heading1,
|
||||
Heading2,
|
||||
Italic,
|
||||
List,
|
||||
ListOrdered,
|
||||
Redo2,
|
||||
Save,
|
||||
Trash2,
|
||||
Underline as UnderlineIcon,
|
||||
Undo2,
|
||||
} from "lucide-react";
|
||||
import { type ReactNode, useReducer, useState } from "react";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import {
|
||||
Toolbar,
|
||||
ToolbarButton,
|
||||
ToolbarGroup,
|
||||
ToolbarSeparator,
|
||||
} from "@/components/ui/toolbar";
|
||||
import type { Note } from "@/lib/notes";
|
||||
|
||||
function FormatButton({
|
||||
active,
|
||||
disabled,
|
||||
label,
|
||||
onClick,
|
||||
children,
|
||||
}: {
|
||||
active?: boolean;
|
||||
disabled?: boolean;
|
||||
label: string;
|
||||
onClick: () => void;
|
||||
children: ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<ToolbarButton
|
||||
// Keep the editor selection while clicking the toolbar.
|
||||
onMouseDown={(e) => e.preventDefault()}
|
||||
render={
|
||||
<Button
|
||||
aria-label={label}
|
||||
aria-pressed={active}
|
||||
disabled={disabled}
|
||||
onClick={onClick}
|
||||
size="icon-sm"
|
||||
type="button"
|
||||
variant={active ? "secondary" : "ghost"}
|
||||
/>
|
||||
}
|
||||
>
|
||||
{children}
|
||||
</ToolbarButton>
|
||||
);
|
||||
}
|
||||
|
||||
// Word-like rich-text editor for a single note: a COSS Toolbar driving Tiptap
|
||||
// commands, a title field, and Save / Delete. Remount (via a `key` on the
|
||||
// parent) to load a different note.
|
||||
export function NotesEditor({
|
||||
note,
|
||||
saving,
|
||||
onSave,
|
||||
onDelete,
|
||||
}: {
|
||||
note: Note;
|
||||
saving: boolean;
|
||||
onSave: (data: { title: string; content: string }) => void;
|
||||
onDelete?: () => void;
|
||||
}) {
|
||||
const [title, setTitle] = useState(note.title);
|
||||
// Force a re-render on every editor transaction so the toolbar reflects the
|
||||
// current formatting/undo state.
|
||||
const [, bump] = useReducer((n: number) => n + 1, 0);
|
||||
|
||||
const editor = useEditor({
|
||||
content: note.content,
|
||||
extensions: [
|
||||
StarterKit,
|
||||
Placeholder.configure({ placeholder: "Write your note…" }),
|
||||
],
|
||||
// Required under Next's SSR to avoid a hydration mismatch.
|
||||
immediatelyRender: false,
|
||||
editorProps: {
|
||||
attributes: {
|
||||
class:
|
||||
"prose prose-sm dark:prose-invert max-w-none min-h-full focus:outline-none",
|
||||
},
|
||||
},
|
||||
onTransaction: bump,
|
||||
});
|
||||
|
||||
if (!editor) return null;
|
||||
|
||||
const save = () =>
|
||||
onSave({
|
||||
title: title.trim() || "Untitled note",
|
||||
content: editor.getHTML(),
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col gap-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<Input
|
||||
className="font-medium text-base"
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
placeholder="Note title"
|
||||
value={title}
|
||||
/>
|
||||
{onDelete && (
|
||||
<Button
|
||||
aria-label="Delete note"
|
||||
onClick={onDelete}
|
||||
size="icon"
|
||||
type="button"
|
||||
variant="ghost"
|
||||
>
|
||||
<Trash2 />
|
||||
</Button>
|
||||
)}
|
||||
<Button disabled={saving} onClick={save} type="button">
|
||||
<Save className="size-4" />
|
||||
{saving ? "Saving…" : "Save"}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Toolbar className="flex-wrap">
|
||||
<ToolbarGroup>
|
||||
<FormatButton
|
||||
active={editor.isActive("bold")}
|
||||
label="Bold"
|
||||
onClick={() => editor.chain().focus().toggleBold().run()}
|
||||
>
|
||||
<Bold />
|
||||
</FormatButton>
|
||||
<FormatButton
|
||||
active={editor.isActive("italic")}
|
||||
label="Italic"
|
||||
onClick={() => editor.chain().focus().toggleItalic().run()}
|
||||
>
|
||||
<Italic />
|
||||
</FormatButton>
|
||||
<FormatButton
|
||||
active={editor.isActive("underline")}
|
||||
label="Underline"
|
||||
onClick={() => editor.chain().focus().toggleUnderline().run()}
|
||||
>
|
||||
<UnderlineIcon />
|
||||
</FormatButton>
|
||||
</ToolbarGroup>
|
||||
<ToolbarSeparator orientation="vertical" />
|
||||
<ToolbarGroup>
|
||||
<FormatButton
|
||||
active={editor.isActive("heading", { level: 1 })}
|
||||
label="Heading 1"
|
||||
onClick={() =>
|
||||
editor.chain().focus().toggleHeading({ level: 1 }).run()
|
||||
}
|
||||
>
|
||||
<Heading1 />
|
||||
</FormatButton>
|
||||
<FormatButton
|
||||
active={editor.isActive("heading", { level: 2 })}
|
||||
label="Heading 2"
|
||||
onClick={() =>
|
||||
editor.chain().focus().toggleHeading({ level: 2 }).run()
|
||||
}
|
||||
>
|
||||
<Heading2 />
|
||||
</FormatButton>
|
||||
</ToolbarGroup>
|
||||
<ToolbarSeparator orientation="vertical" />
|
||||
<ToolbarGroup>
|
||||
<FormatButton
|
||||
active={editor.isActive("bulletList")}
|
||||
label="Bullet list"
|
||||
onClick={() => editor.chain().focus().toggleBulletList().run()}
|
||||
>
|
||||
<List />
|
||||
</FormatButton>
|
||||
<FormatButton
|
||||
active={editor.isActive("orderedList")}
|
||||
label="Numbered list"
|
||||
onClick={() => editor.chain().focus().toggleOrderedList().run()}
|
||||
>
|
||||
<ListOrdered />
|
||||
</FormatButton>
|
||||
</ToolbarGroup>
|
||||
<ToolbarSeparator orientation="vertical" />
|
||||
<ToolbarGroup>
|
||||
<FormatButton
|
||||
disabled={!editor.can().undo()}
|
||||
label="Undo"
|
||||
onClick={() => editor.chain().focus().undo().run()}
|
||||
>
|
||||
<Undo2 />
|
||||
</FormatButton>
|
||||
<FormatButton
|
||||
disabled={!editor.can().redo()}
|
||||
label="Redo"
|
||||
onClick={() => editor.chain().focus().redo().run()}
|
||||
>
|
||||
<Redo2 />
|
||||
</FormatButton>
|
||||
</ToolbarGroup>
|
||||
</Toolbar>
|
||||
|
||||
<button
|
||||
className="min-h-0 flex-1 cursor-text overflow-y-auto rounded-xl border bg-card p-4 text-left"
|
||||
onClick={() => editor.chain().focus().run()}
|
||||
type="button"
|
||||
>
|
||||
<EditorContent editor={editor} />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,155 @@
|
||||
"use client";
|
||||
|
||||
import { FileText, Plus } from "lucide-react";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
import { NotesEditor } from "@/components/notes/notes-editor";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
createNote,
|
||||
deleteNote,
|
||||
listNotes,
|
||||
type Note,
|
||||
updateNote,
|
||||
} from "@/lib/notes";
|
||||
import { notify } from "@/lib/toast";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const newDraft = (): Note => ({
|
||||
id: "",
|
||||
title: "",
|
||||
content: "",
|
||||
createdAt: "",
|
||||
updatedAt: "",
|
||||
});
|
||||
|
||||
export function NotesView() {
|
||||
const [notes, setNotes] = useState<Note[]>([]);
|
||||
const [selected, setSelected] = useState<Note | null>(null);
|
||||
const [draftKey, setDraftKey] = useState(0);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
let active = true;
|
||||
listNotes()
|
||||
.then((data) => {
|
||||
if (!active) return;
|
||||
setNotes(data);
|
||||
setSelected((current) => current ?? data[0] ?? null);
|
||||
})
|
||||
.catch((err) => {
|
||||
if (active) {
|
||||
notify.error(
|
||||
"Couldn't load notes",
|
||||
err instanceof Error ? err.message : "Please try again.",
|
||||
);
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
if (active) setLoading(false);
|
||||
});
|
||||
return () => {
|
||||
active = false;
|
||||
};
|
||||
}, []);
|
||||
|
||||
const startNew = () => {
|
||||
setSelected(newDraft());
|
||||
setDraftKey((k) => k + 1);
|
||||
};
|
||||
|
||||
const save = async (data: { title: string; content: string }) => {
|
||||
setSaving(true);
|
||||
try {
|
||||
const saved = selected?.id
|
||||
? await updateNote(selected.id, data)
|
||||
: await createNote(data);
|
||||
const list = await listNotes();
|
||||
setNotes(list);
|
||||
setSelected(list.find((n) => n.id === saved.id) ?? saved);
|
||||
notify.success("Note saved");
|
||||
} catch (err) {
|
||||
notify.error(
|
||||
"Couldn't save note",
|
||||
err instanceof Error ? err.message : "Please try again.",
|
||||
);
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const remove = async (id: string) => {
|
||||
try {
|
||||
await deleteNote(id);
|
||||
const list = await listNotes();
|
||||
setNotes(list);
|
||||
setSelected(list[0] ?? null);
|
||||
notify.success("Note deleted");
|
||||
} catch (err) {
|
||||
notify.error(
|
||||
"Couldn't delete note",
|
||||
err instanceof Error ? err.message : "Please try again.",
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="mx-auto flex h-full w-full max-w-5xl gap-6 px-6 py-8">
|
||||
<aside className="flex w-60 shrink-0 flex-col gap-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<h1 className="font-semibold text-lg tracking-tight">Notes</h1>
|
||||
<Button onClick={startNew} size="sm" type="button">
|
||||
<Plus className="size-4" />
|
||||
New
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex min-h-0 flex-1 flex-col gap-1 overflow-y-auto">
|
||||
{loading ? (
|
||||
<p className="px-2 py-1.5 text-muted-foreground text-sm">Loading…</p>
|
||||
) : notes.length === 0 ? (
|
||||
<p className="px-2 py-1.5 text-muted-foreground text-sm">
|
||||
No notes yet.
|
||||
</p>
|
||||
) : (
|
||||
notes.map((n) => (
|
||||
<button
|
||||
className={cn(
|
||||
"flex w-full flex-col items-start gap-0.5 rounded-lg px-2 py-1.5 text-left transition-colors hover:bg-accent",
|
||||
selected?.id === n.id && "bg-accent",
|
||||
)}
|
||||
key={n.id}
|
||||
onClick={() => setSelected(n)}
|
||||
type="button"
|
||||
>
|
||||
<span className="w-full truncate font-medium text-foreground text-sm">
|
||||
{n.title || "Untitled note"}
|
||||
</span>
|
||||
<span className="text-muted-foreground text-xs">
|
||||
{new Date(n.updatedAt).toLocaleDateString()}
|
||||
</span>
|
||||
</button>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div className="min-w-0 flex-1">
|
||||
{selected ? (
|
||||
<NotesEditor
|
||||
key={selected.id || `draft-${draftKey}`}
|
||||
note={selected}
|
||||
onDelete={selected.id ? () => remove(selected.id) : undefined}
|
||||
onSave={save}
|
||||
saving={saving}
|
||||
/>
|
||||
) : (
|
||||
<div className="flex h-full flex-col items-center justify-center gap-2 text-muted-foreground">
|
||||
<FileText className="size-8" />
|
||||
<p className="text-sm">Select a note or create a new one.</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user