// notes.jsx — Notion-style block-based personal notes, private to the
// signed-in user. Each note is a small "page" that holds an ordered
// list of blocks (paragraph / H1-H3 / bulleted / numbered / todo /
// quote / divider / code).
//
// Privacy contract unchanged: every API call goes through api.notes.*,
// which hard-filters by req.user.id. Workspace owners cannot see
// another user's notes via the API.
//
// What's new (vs the old textarea + separate To-do tab):
// • Block editor with type-specific affordances (heading sizes,
// bullet glyph, todo checkbox, code mono-font, etc.)
// • Slash menu — type "/" inside an empty block (or after some
// filter text) to switch the block's type via keyboard.
// • Markdown shortcuts on Enter — typing "# ", "## ", "### ",
// "- ", "1. ", "[] ", "> ", "``` " converts the current block
// in place. Keeps hands on the keyboard.
// • Enter at the end of a block creates a new paragraph below.
// Enter on an empty list/todo/heading converts back to paragraph
// (Notion convention — feels natural after a year of using it).
// • Backspace at the start of an empty block deletes it and moves
// focus to the previous block.
// • Auto-save with a 600 ms debounce — no Save button.
//
// Todos are now a block type, not a separate tab. The old dedicated
// "To-do" view is removed; existing todo notes still load (the API
// still accepts kind=todo) but new ones are encouraged to be a Todo
// block inside a regular note. Migration of existing kind="todo"
// rows happens lazily — they show up in the list with their text
// rendered as a single todo block.
const NOTE_COLORS = [
{ id: null, swatch: "#f3f4f7", label: "Default" },
{ id: "amber", swatch: "#fde68a", label: "Amber" },
{ id: "blue", swatch: "#bfdbfe", label: "Blue" },
{ id: "green", swatch: "#bbf7d0", label: "Green" },
{ id: "pink", swatch: "#fbcfe8", label: "Pink" },
{ id: "purple", swatch: "#ddd6fe", label: "Purple" },
];
// Block types that the Slash menu offers. Order matters — keyboard
// nav uses this order, and the most common ones go to the top.
const BLOCK_TYPES = [
{ id: "paragraph", label: "Text", icon: "¶", hint: "Start writing with plain text" },
{ id: "h1", label: "Heading 1", icon: "H₁", hint: "Big section heading" },
{ id: "h2", label: "Heading 2", icon: "H₂", hint: "Medium section heading" },
{ id: "h3", label: "Heading 3", icon: "H₃", hint: "Small section heading" },
{ id: "todo", label: "To-do", icon: "☑", hint: "Checkable task with a checkbox" },
{ id: "bulleted", label: "Bulleted list", icon: "•", hint: "Unordered list" },
{ id: "numbered", label: "Numbered list", icon: "1.", hint: "Ordered list" },
{ id: "quote", label: "Quote", icon: "❝", hint: "Pull-quote / callout" },
{ id: "code", label: "Code", icon: "",hint: "Monospace code block" },
{ id: "divider", label: "Divider", icon: "—", hint: "Horizontal rule between sections" },
];
// Generate a stable-ish id for new blocks. Used as the React key so
// re-typing in a block doesn't unmount/remount the contentEditable
// (which would lose caret position).
let _blkSeq = 0;
function blockId() {
_blkSeq = (_blkSeq + 1) | 0;
return "b_" + Date.now().toString(36) + "_" + _blkSeq.toString(36);
}
function makeBlock(type = "paragraph", text = "") {
const b = { id: blockId(), type, text };
if (type === "todo") b.done = false;
return b;
}
// Best-effort upgrade: a note with a body but no blocks gets one
// paragraph block per non-empty line. Lossy by design — if it had
// real structure we'd already have stored it as blocks. Keeps old
// notes from rendering as a single mushed paragraph.
function bodyToBlocks(body) {
if (!body) return [makeBlock("paragraph", "")];
const lines = String(body).split(/\r?\n/);
const out = [];
for (const raw of lines) {
const line = raw.trimEnd();
if (!line && out.length === 0) continue;
// Cheap markdown-ish recognition for the most common shapes so
// the upgrade isn't a wall of paragraph blocks.
const h1 = /^# (.*)$/.exec(line);
const h2 = /^## (.*)$/.exec(line);
const h3 = /^### (.*)$/.exec(line);
const bul = /^[-•] (.*)$/.exec(line);
const num = /^\d+\.\s+(.*)$/.exec(line);
const todoChk = /^\[([ xX])\]\s+(.*)$/.exec(line);
const quote = /^>\s+(.*)$/.exec(line);
if (h1) out.push(makeBlock("h1", h1[1]));
else if (h2) out.push(makeBlock("h2", h2[1]));
else if (h3) out.push(makeBlock("h3", h3[1]));
else if (todoChk) {
const b = makeBlock("todo", todoChk[2]);
b.done = todoChk[1].toLowerCase() === "x";
out.push(b);
}
else if (bul) out.push(makeBlock("bulleted", bul[1]));
else if (num) out.push(makeBlock("numbered", num[1]));
else if (quote) out.push(makeBlock("quote", quote[1]));
else if (line === "---" || line === "***") out.push(makeBlock("divider", ""));
else out.push(makeBlock("paragraph", line));
}
if (!out.length) out.push(makeBlock("paragraph", ""));
return out;
}
// Convert a saved blocks array into the small preview shown on
// collapsed note cards. We bail after a few blocks worth of content
// so the card doesn't grow with the document.
function blocksPreview(blocks, body) {
const arr = Array.isArray(blocks) && blocks.length ? blocks : bodyToBlocks(body);
const lines = [];
for (const b of arr) {
if (b.type === "divider") { lines.push("———"); continue; }
const t = (b.text || "").trim();
if (!t && b.type !== "todo") continue;
if (b.type === "h1") lines.push(t);
else if (b.type === "h2") lines.push(t);
else if (b.type === "h3") lines.push(t);
else if (b.type === "bulleted") lines.push("• " + t);
else if (b.type === "numbered") lines.push("1. " + t);
else if (b.type === "todo") lines.push((b.done ? "☑ " : "☐ ") + t);
else if (b.type === "quote") lines.push("❝ " + t);
else if (b.type === "code") lines.push(t);
else lines.push(t);
if (lines.length >= 6) { lines.push("…"); break; }
}
return lines.join("\n").slice(0, 320);
}
// ── NotesView ──────────────────────────────────────────────────────
// Personal = two sections side by side:
// 1. "To-do" — quick-capture checklist (kind='todo' rows). Designed
// for typing tasks fast, ticking them off, optional due dates.
// 2. "Notes" — the Notion-style block editor (kind='note' rows).
// Long-form thinking with headings, lists, todos-inside-notes.
// On wide screens they sit side by side; on narrow screens they
// stack with the To-do list first (mobile users tend to need quick
// checklist capture more than long notes).
function NotesView() {
const [todos, setTodos] = React.useState([]);
const [notes, setNotes] = React.useState([]);
const [loading, setLoading] = React.useState(true);
const [error, setError] = React.useState("");
// Tab state — Personal switches between two focused views instead
// of cramming both into a side-by-side body. Persisted in
// localStorage so the user lands back on whichever tab they last
// used (typically To-do for quick capture).
const [activeTab, setActiveTab] = React.useState(() => {
try {
const v = window.localStorage.getItem("fb.personal.activeTab");
if (v === "todo" || v === "notes" || v === "coach") return v;
} catch {}
return "todo";
});
React.useEffect(() => {
try { window.localStorage.setItem("fb.personal.activeTab", activeTab); } catch {}
}, [activeTab]);
async function load() {
setLoading(true); setError("");
try {
// Two parallel calls — splitting by kind keeps the section UIs
// simple and the Todo composer doesn't need to filter the full
// mixed list on every render.
const [t, n] = await Promise.all([
api.notes.list("todo"),
api.notes.list("note"),
]);
setTodos(Array.isArray(t) ? t : []);
setNotes(Array.isArray(n) ? n : []);
} catch (e) {
setError((e && e.message) || "Couldn't load your notes.");
} finally {
setLoading(false);
}
}
React.useEffect(() => { load(); }, []);
// Re-uses the Home page's CSS shell (.home-root, .home-hero,
// .home-body, .home-card, .home-card-head) so the Personal page
// visually matches the rest of the app instead of feeling like an
// island. Section-specific styling (todo rows, notes grid) lives
// in the .personal-* classes injected below.
// Status semantics: prefer task_status when present; fall back to
// the legacy `done` boolean for older rows.
const _isDone = (t) => (t.task_status || (t.done ? "done" : "todo")) === "done";
const openCount = todos.filter(t => !_isDone(t)).length;
const doneCount = todos.filter(t => _isDone(t)).length;
// Compute open-task tone counts so the hero stats can flag overdue
// / due-today work. Mirrors the bucket logic used inside the table
// below; we keep it simple here (date-only, no time-of-day parsing)
// since we just need a coarse banner-level count.
function _ord(t) {
const raw = t && t.due_at;
if (!raw) return null;
const head = String(raw).split(" @ ")[0].trim();
const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(head);
if (!m) return null;
return Number(m[1]) * 10000 + Number(m[2]) * 100 + Number(m[3]);
}
const _today = new Date();
const _todayOrd = _today.getFullYear() * 10000 + (_today.getMonth() + 1) * 100 + _today.getDate();
const overdueCount = todos.filter(t => !_isDone(t) && _ord(t) != null && _ord(t) < _todayOrd).length;
const todayCount = todos.filter(t => !_isDone(t) && _ord(t) === _todayOrd).length;
return (
{/* Hero — Personal gets a warm peach-to-coral gradient instead of
the cool blue/purple Home uses. Same shell + dimensions, but
the colour treatment makes "this is your private space"
obvious at a glance. */}
✦
Personal
Your private workspace — only you can see this. To-do for quick task tracking, Notes for longer thinking. Type / inside a note for the block menu.
{/* Right-side stat chips mirror the Home pattern. Open / Overdue
/ Due-today / Notes — all read-only summaries; clicking the
table below is the actual interaction. */}
}
{/* Tab strip — sits between the hero and the active panel.
Underline-style tabs in the Personal warm palette, with a
live subtitle on each tab so the user sees counts at a
glance without clicking. */}
{loading ? (
);
}
// ── TodoSection — Personal task table ────────────────────────────
// Each personal todo is now a full task: name + status + priority +
// due date. Status / priority pills reuse the same enum (and CSS
// classes) as project tasks (STATUSES, PRIORITIES from data.jsx) so
// the visual language stays consistent. Composer at the top still
// supports rapid-fire Enter capture; the new fields are filled in
// inline by clicking the pills.
function TodoSection({ todos, setTodos }) {
const [text, setText] = React.useState("");
const [busy, setBusy] = React.useState(false);
const [hideDone, setHideDone] = React.useState(() => {
try { return localStorage.getItem("fb.personal.todos.hideDone") === "1"; }
catch { return false; }
});
React.useEffect(() => {
try { localStorage.setItem("fb.personal.todos.hideDone", hideDone ? "1" : "0"); } catch {}
}, [hideDone]);
// Filters — match the project task table's BoardToolbar set:
// · Search — substring match on title
// · Status — single-pick from STATUSES
// · Priority — single-pick from PRIORITIES
// · Sort — default | priority | due | name | created
// Each one persists in localStorage so power users land on their
// last view. "all" / "default" / "" disable the filter.
const [searchQ, setSearchQ] = React.useState(() => {
try { return localStorage.getItem("fb.personal.todos.q") || ""; }
catch { return ""; }
});
const [statusFilter, setStatusFilter] = React.useState(() => {
try { return localStorage.getItem("fb.personal.todos.statusFilter") || "all"; }
catch { return "all"; }
});
const [priorityFilter, setPriorityFilter] = React.useState(() => {
try { return localStorage.getItem("fb.personal.todos.priorityFilter") || "all"; }
catch { return "all"; }
});
const [sortBy, setSortBy] = React.useState(() => {
try { return localStorage.getItem("fb.personal.todos.sort") || "default"; }
catch { return "default"; }
});
React.useEffect(() => { try { localStorage.setItem("fb.personal.todos.q", searchQ); } catch {} }, [searchQ]);
React.useEffect(() => { try { localStorage.setItem("fb.personal.todos.statusFilter", statusFilter); } catch {} }, [statusFilter]);
React.useEffect(() => { try { localStorage.setItem("fb.personal.todos.priorityFilter", priorityFilter); } catch {} }, [priorityFilter]);
React.useEffect(() => { try { localStorage.setItem("fb.personal.todos.sort", sortBy); } catch {} }, [sortBy]);
async function add() {
const t = text.trim();
if (!t || busy) return;
setBusy(true);
const tempId = "tmp_" + Date.now();
const optimistic = {
id: tempId, kind: "todo",
title: t, body: "",
done: false, task_status: "todo", task_priority: "none",
color: null, pinned: false, due_at: null, position: 9999,
};
setTodos(ts => [...ts, optimistic]);
setText("");
try {
const r = await api.notes.create({ kind: "todo", title: t });
setTodos(ts => ts.map(x => x.id === tempId ? r : x));
} catch (e) {
setTodos(ts => ts.filter(x => x.id !== tempId));
alert("Couldn't add: " + ((e && e.message) || "network error"));
} finally {
setBusy(false);
}
}
// Generic patch helper — applies optimistic UI then syncs server.
async function patchTodo(id, patch) {
setTodos(ts => ts.map(x => x.id === id ? { ...x, ...patch } : x));
try { await api.notes.patch(id, patch); } catch {}
}
async function setStatus(t, status) {
// Setting status='done' also sets the legacy `done` boolean for
// the count badge in the header. The server already aligns the
// two — we just mirror it locally for instant UI.
patchTodo(t.id, { task_status: status, done: status === "done" });
}
async function setPriority(t, priority) { patchTodo(t.id, { task_priority: priority }); }
async function setDue(t, due_at) { patchTodo(t.id, { due_at }); }
async function rename(t, newTitle) {
const v = (newTitle || "").trim();
if (!v || v === t.title) return;
patchTodo(t.id, { title: v });
}
async function remove(t) {
setTodos(ts => ts.filter(x => x.id !== t.id));
try { await api.notes.remove(t.id); } catch {}
}
// Status helper used by the checkbox: one-click toggle between
// todo and done. Other statuses still reachable via the pill.
function quickToggle(t) {
const isDone = (t.task_status || (t.done ? "done" : "todo")) === "done";
setStatus(t, isDone ? "todo" : "done");
}
// Sort + bucket. Open tasks first (overdue → due-today → no-date),
// done at the bottom (newest-first). Priority breaks ties so a
// critical-priority "no due date" still floats above a low-priority one.
const PRIO_ORDER = { critical: 0, high: 1, medium: 2, low: 3, none: 4 };
function dueOrdinal(t) {
const raw = t && t.due_at;
if (!raw) return null;
const head = String(raw).split(" @ ")[0].trim();
const iso = /^(\d{4})-(\d{2})-(\d{2})$/.exec(head);
if (iso) return Number(iso[1]) * 10000 + Number(iso[2]) * 100 + Number(iso[3]);
const m = /^([A-Za-z]{3})\s+(\d{1,2})$/.exec(head);
if (m) {
const moMap = { Jan:1,Feb:2,Mar:3,Apr:4,May:5,Jun:6,Jul:7,Aug:8,Sep:9,Oct:10,Nov:11,Dec:12 };
const year = new Date().getFullYear();
return year * 10000 + (moMap[m[1]] || 0) * 100 + Number(m[2]);
}
return null;
}
const todayOrd = (() => {
const t = new Date();
return t.getFullYear() * 10000 + (t.getMonth() + 1) * 100 + t.getDate();
})();
// Apply search + status + priority filters before bucketing into
// open/done. The Open / Done bucket counts reflect the filtered
// subset so the table header stays consistent with what's rendered.
const _q = searchQ.trim().toLowerCase();
function _matchesFilters(t) {
if (_q) {
const title = String(t.title || "").toLowerCase();
if (!title.includes(_q)) return false;
}
if (statusFilter !== "all") {
const st = t.task_status || (t.done ? "done" : "todo");
if (st !== statusFilter) return false;
}
if (priorityFilter !== "all") {
const pr = t.task_priority || "none";
if (pr !== priorityFilter) return false;
}
return true;
}
function _sortFn(a, b) {
if (sortBy === "priority") {
const ap = PRIO_ORDER[a.task_priority || "none"] ?? 4;
const bp = PRIO_ORDER[b.task_priority || "none"] ?? 4;
if (ap !== bp) return ap - bp;
}
if (sortBy === "due") {
const ao = dueOrdinal(a), bo = dueOrdinal(b);
if ((ao == null) !== (bo == null)) return ao == null ? 1 : -1;
if (ao != null && bo != null && ao !== bo) return ao - bo;
}
if (sortBy === "name") {
const an = String(a.title || "").toLowerCase();
const bn = String(b.title || "").toLowerCase();
const c = an.localeCompare(bn);
if (c !== 0) return c;
}
if (sortBy === "created") {
return new Date(b.created_at || 0) - new Date(a.created_at || 0);
}
// "default" — due asc → priority → created asc (the original ordering)
const ao = dueOrdinal(a), bo = dueOrdinal(b);
if ((ao == null) !== (bo == null)) return ao == null ? 1 : -1;
if (ao != null && bo != null && ao !== bo) return ao - bo;
const ap = PRIO_ORDER[a.task_priority || "none"] ?? 4;
const bp = PRIO_ORDER[b.task_priority || "none"] ?? 4;
if (ap !== bp) return ap - bp;
return new Date(a.created_at || 0) - new Date(b.created_at || 0);
}
const filtered = todos.filter(_matchesFilters);
const open = filtered
.filter(t => (t.task_status || (t.done ? "done" : "todo")) !== "done")
.sort(_sortFn);
const done = filtered
.filter(t => (t.task_status || (t.done ? "done" : "todo")) === "done")
.sort((a, b) => new Date(b.updated_at || 0) - new Date(a.updated_at || 0));
const filterActive = !!_q || statusFilter !== "all" || priorityFilter !== "all" || sortBy !== "default";
return (
setText(e.target.value)}
onKeyDown={(e) => { if (e.key === "Enter") { e.preventDefault(); add(); } }}
placeholder="Add a task — press Enter, then click pills to set status / priority / due"
/>
{done.length > 0 && (
)}
{/* Filter toolbar — Search · Status · Priority · Sort · Clear ·
Count. Mirrors the project task table's BoardToolbar set so
the personal todo flow has the same filtering power as a
project view. All five controls persist in localStorage. */}
)}
{/* Project-style task — same HTML structure as the
workspace TableView in table.jsx so the visual language
matches. Real thead with column labels, tbody with cell-
name + cell-center cells. The Open/Done buckets are header
rows (full-width
) so the table layout flows
continuously. */}
{(open.length > 0 || (done.length > 0 && !hideDone)) && (
// NOTE: deliberately NOT using `.table-wrap` from table.css —
// that class sets `overflow: hidden` to support the project
// view's epic-collapse animation, which the personal page
// doesn't have. Inheriting it clipped every popover (status,
// priority, date picker) so they rendered but were invisible.
)}
);
}
function TodoRow({ todo, todayOrd, onQuickToggle, onSetStatus, onSetPriority, onSetDue, onRename, onDelete }) {
const ref = React.useRef(null);
const [original, setOriginal] = React.useState(todo.title || "");
React.useEffect(() => {
if (ref.current && ref.current.textContent !== (todo.title || "")) {
ref.current.textContent = todo.title || "";
setOriginal(todo.title || "");
}
}, [todo.id, todo.title]);
const status = todo.task_status || (todo.done ? "done" : "todo");
const priority = todo.task_priority || "none";
const isDone = status === "done";
const stMeta = (typeof STATUSES !== "undefined" ? STATUSES : []).find(x => x.id === status)
|| { id: status, label: status, cls: "pill-todo" };
const prMeta = (typeof PRIORITIES !== "undefined" ? PRIORITIES : []).find(x => x.id === priority)
|| { id: priority, label: priority, cls: "pill-prio-none" };
// Due chip — green-ish neutral, amber if today, red if overdue.
const ord = (() => {
const raw = todo.due_at;
if (!raw) return null;
const head = String(raw).split(" @ ")[0].trim();
const iso = /^(\d{4})-(\d{2})-(\d{2})$/.exec(head);
if (iso) return Number(iso[1]) * 10000 + Number(iso[2]) * 100 + Number(iso[3]);
const m = /^([A-Za-z]{3})\s+(\d{1,2})$/.exec(head);
if (m) {
const moMap = { Jan:1,Feb:2,Mar:3,Apr:4,May:5,Jun:6,Jul:7,Aug:8,Sep:9,Oct:10,Nov:11,Dec:12 };
return new Date().getFullYear() * 10000 + (moMap[m[1]] || 0) * 100 + Number(m[2]);
}
return null;
})();
const overdue = ord != null && !isDone && ord < todayOrd;
const dueToday = ord != null && !isDone && ord === todayOrd;
const dueLabel = (() => {
if (!todo.due_at) return null;
const head = String(todo.due_at).split(" @ ")[0].trim();
const iso = /^(\d{4})-(\d{2})-(\d{2})$/.exec(head);
if (iso) {
const months = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
return months[Number(iso[2]) - 1] + " " + Number(iso[3]);
}
return head;
})();
const dueIsoForInput = (() => {
if (!todo.due_at) return "";
const head = String(todo.due_at).split(" @ ")[0].trim();
const iso = /^(\d{4})-(\d{2})-(\d{2})$/.exec(head);
if (iso) return head;
return "";
})();
// Render as a project-style table row. Same .cell-name + .cell-
// center class semantics as TableView so styling matches without a
// bespoke ruleset. The coloured left rail comes from the .t
// tbody td.cell-name border-left rule, scoped here via
// --epic-color to the personal coral.
return (
onRename(e.currentTarget.textContent || "")}
onKeyDown={(e) => {
if (e.key === "Enter") { e.preventDefault(); e.currentTarget.blur(); }
if (e.key === "Escape") {
e.preventDefault();
if (ref.current) ref.current.textContent = original;
e.currentTarget.blur();
}
}}/>
{/* Status + Priority — use the same `pill pill-cell` shape as
the project task table so the personal row visually matches
the project rows pixel-for-pixel. The PillPicker handles its
own click-to-edit popover. */}
);
}
// Pill picker — click the pill → options open below it, click one →
// applied. Uses the workspace's portal-based from ui.jsx so
// it renders at document.body level and never gets clipped or
// z-index-trapped by table / wrapper overflow. Same component the
// project task table uses for its status/priority pickers.
function PillPicker({ className, label, options, value, onPick }) {
const [anchor, setAnchor] = React.useState(null);
return (
{anchor && typeof Popover !== "undefined" && (
setAnchor(null)}>
{options.map(o => (
))}
)}
);
}
// Date + time picker — uses the project's MiniCalendar component
// (defined in table.jsx, exposed as window.MiniCalendar) so the
// Personal page gets the same calendar grid + optional time picker
// as the project task table. The chip itself is the trigger; the
// calendar opens in a popover anchored below it.
//
// MiniCalendar's value/onChange contract uses the human-readable
// format "MMM D" or "MMM D @ h:mm AM/PM" (parseDateLoose accepts
// ISO too, so legacy YYYY-MM-DD rows in user_notes still parse).
// We pass the raw stored value through; the server stores whatever
// string the picker emits.
function DueChip({ rawValue, displayLabel, overdue, dueToday, onChange }) {
const [anchor, setAnchor] = React.useState(null);
const Mini = (typeof window !== "undefined" && window.MiniCalendar) ? window.MiniCalendar : null;
const className = "todo-due-chip"
+ (overdue ? " is-overdue" : dueToday ? " is-today" : "")
+ (displayLabel ? "" : " is-empty");
return (
{anchor && typeof Popover !== "undefined" && (
setAnchor(null)}>
{Mini ? (
{ onChange(v || null); setAnchor(null); }}
onClear={() => { onChange(null); setAnchor(null); }}/>
) : (
// Fallback if table.jsx hasn't loaded yet — keep the
// native input so the user can still set a due date.
);
}
// ── NoteEditor — the full Notion-style editing surface ─────────────
function NoteEditor({ note, isNew, onSave, onCancel, onClose, onDelete }) {
// Title is its own input (not a block). Cover image / icon could
// live up here later — keeping it simple for now.
const [title, setTitle] = React.useState(note.title || "");
const [color, setColor] = React.useState(note.color || null);
const [pinned, setPinned] = React.useState(!!note.pinned);
const [colorOpen, setColorOpen] = React.useState(false);
const colorAnchorRef = React.useRef(null);
// Block document. Always at least one block so the user has
// something to click into. On mount we hydrate from `note.blocks`
// when available, otherwise upgrade the legacy `body` string.
const [blocks, setBlocks] = React.useState(() => {
if (Array.isArray(note.blocks) && note.blocks.length) {
// Re-key in case the server returned blocks without ids.
return note.blocks.map(b => ({ ...b, id: b.id || blockId() }));
}
return bodyToBlocks(note.body || "");
});
// Caret routing — when an action (Enter creates new, slash menu
// inserts, backspace merges, etc.) needs the next/previous block
// to take focus, we set this to the target id and a useEffect on
// the block component picks it up.
const [focusReq, setFocusReq] = React.useState(null); // { id, at: "start"|"end" }
// Slash menu state — anchored to the block currently being typed
// into. `q` is the filter text after the slash; null = closed.
const [slash, setSlash] = React.useState(null); // { blockId, q, anchorRect }
// Auto-save: debounce 600 ms after the last edit. This is the
// single source of truth for persistence — the only Save buttons
// are in the new-note composer (because we don't want to POST an
// empty stub on every keystroke).
const dirtyRef = React.useRef(false);
React.useEffect(() => {
if (isNew) return;
if (!dirtyRef.current) return;
const t = setTimeout(() => {
dirtyRef.current = false;
onSave && onSave({
title: title.trim().slice(0, 255),
blocks,
color: color || null,
pinned: !!pinned,
});
}, 600);
return () => clearTimeout(t);
}, [title, blocks, color, pinned]);
// Mark dirty whenever any of those change so the debounce fires.
React.useEffect(() => { dirtyRef.current = true; }, [title, blocks, color, pinned]);
function saveNew() {
const hasContent = title.trim() || blocks.some(b => (b.text || "").trim() || b.type === "divider" || b.type === "todo");
if (!hasContent) {
onCancel && onCancel();
return;
}
onSave && onSave({
title: title.trim().slice(0, 255),
blocks,
color: color || null,
pinned: !!pinned,
});
}
// ── Block-level mutations ───────────────────────────────────────
function patchBlock(id, patch) {
setBlocks(bs => bs.map(b => b.id === id ? { ...b, ...patch } : b));
}
function changeType(id, type) {
setBlocks(bs => bs.map(b => {
if (b.id !== id) return b;
const next = { ...b, type };
if (type === "todo" && !("done" in next)) next.done = false;
if (type !== "todo") delete next.done;
if (type === "divider") next.text = "";
return next;
}));
}
function insertAfter(id, type = "paragraph", text = "") {
const newBlock = makeBlock(type, text);
setBlocks(bs => {
const i = bs.findIndex(b => b.id === id);
if (i === -1) return [...bs, newBlock];
const next = bs.slice();
next.splice(i + 1, 0, newBlock);
return next;
});
setFocusReq({ id: newBlock.id, at: "start" });
return newBlock.id;
}
function deleteBlock(id) {
setBlocks(bs => {
if (bs.length <= 1) return [makeBlock("paragraph", "")];
const i = bs.findIndex(b => b.id === id);
if (i === -1) return bs;
const next = bs.slice();
next.splice(i, 1);
// Move caret to the previous block (or first if removing top).
const prev = next[Math.max(0, i - 1)];
if (prev) setFocusReq({ id: prev.id, at: "end" });
return next;
});
}
function mergeWithPrevious(id) {
setBlocks(bs => {
const i = bs.findIndex(b => b.id === id);
if (i <= 0) return bs;
const prev = bs[i - 1];
const cur = bs[i];
// Divider-prev + empty-cur → drop the divider, keep cur.
if (prev.type === "divider" && (!cur.text || cur.text === "")) {
const next = bs.slice();
next.splice(i - 1, 1);
setFocusReq({ id: cur.id, at: "start" });
return next;
}
// Otherwise concatenate cur.text onto prev.text.
const merged = (prev.text || "") + (cur.text || "");
const next = bs.slice();
next[i - 1] = { ...prev, text: merged };
next.splice(i, 1);
// Caret goes where the merge happened.
setFocusReq({ id: prev.id, at: "end" });
return next;
});
}
// ── Slash menu actions ──────────────────────────────────────────
function openSlashMenu(blockId, q, anchorRect) {
setSlash({ blockId, q, anchorRect });
}
function closeSlashMenu() { setSlash(null); }
function pickSlashType(type) {
if (!slash) return;
const id = slash.blockId;
// Strip the leading "/" the user typed when they opened
// the menu — that text was the trigger, not content.
setBlocks(bs => bs.map(b => {
if (b.id !== id) return b;
const next = { ...b, type, text: "" };
if (type === "todo" && !("done" in next)) next.done = false;
if (type !== "todo") delete next.done;
return next;
}));
setSlash(null);
setFocusReq({ id, at: "end" });
}
// ── Render ──────────────────────────────────────────────────────
const swatch = NOTE_COLORS.find(c => c.id === (color || null)) || NOTE_COLORS[0];
const cardStyle = color ? { background: swatch.swatch } : null;
return (
);
}
// ── A single block row ─────────────────────────────────────────────
// Each block is rendered as a contentEditable
typed by the block
// type (heading sizes, monospace for code, etc.). We use one element
// per block instead of ProseMirror / Slate to keep the bundle tiny —
// the trade-off is that we hand-roll caret routing (focusReq) and the
// markdown-shortcut transforms.
function BlockRow({
block, isFirst, focusReq, onFocused,
onTextChange, onToggleTodo, onChangeType,
onEnter, onBackspaceEmpty,
onSlash, onSlashUpdate, onSlashClose,
onMarkdownTransform, onDelete,
}) {
const ref = React.useRef(null);
// Sync DOM textContent from React state ONCE per block id — never
// on every text change, because that would fight contentEditable
// and trash the caret. The component effectively treats the DOM
// as the source of truth between mount and unmount.
React.useEffect(() => {
if (!ref.current) return;
const dom = ref.current;
const cur = dom.textContent || "";
if (cur !== (block.text || "")) {
dom.textContent = block.text || "";
}
}, [block.id]);
// Focus router — placeCaret to start/end after a state-driven
// change (insertAfter, merge, type-change).
React.useEffect(() => {
if (!focusReq || !ref.current) return;
const el = ref.current;
el.focus();
try {
const sel = window.getSelection();
const range = document.createRange();
if (focusReq.at === "end") {
range.selectNodeContents(el);
range.collapse(false);
} else {
range.setStart(el, 0);
range.collapse(true);
}
sel.removeAllRanges();
sel.addRange(range);
} catch {}
onFocused && onFocused();
}, [focusReq]);
// Helpers to read DOM caret state — used by Enter / Backspace
// handlers to decide between split, merge, and convert.
function getSelectionInfo() {
const sel = window.getSelection();
if (!sel || !sel.rangeCount || !ref.current) return { atStart: false, atEnd: false, after: "", before: "" };
const range = sel.getRangeAt(0);
if (!ref.current.contains(range.startContainer)) return { atStart: false, atEnd: false, after: "", before: "" };
const text = ref.current.textContent || "";
// Compute caret offset within the text content. Iterating
// child nodes covers the case where the contentEditable has
// text nodes interleaved with formatting elements.
let offset = 0;
const walk = (node) => {
if (node === range.startContainer) {
offset += range.startOffset;
return true;
}
if (node.nodeType === Node.TEXT_NODE) {
offset += node.length;
return false;
}
for (const child of node.childNodes) if (walk(child)) return true;
return false;
};
walk(ref.current);
return {
atStart: offset === 0,
atEnd: offset === text.length,
after: text.slice(offset),
before: text.slice(0, offset),
};
}
// Markdown shortcut detection on space — fires when the user types
// certain prefixes followed by space. Mirrors Notion / Linear.
function tryMarkdownTransformOnSpace() {
const text = (ref.current?.textContent || "");
let m;
if ((m = /^# $/.exec(text))) { onMarkdownTransform("h1", ""); return true; }
if ((m = /^## $/.exec(text))) { onMarkdownTransform("h2", ""); return true; }
if ((m = /^### $/.exec(text))) { onMarkdownTransform("h3", ""); return true; }
if ((m = /^[-*•] $/.exec(text))) { onMarkdownTransform("bulleted", ""); return true; }
if ((m = /^1\. $/.exec(text))) { onMarkdownTransform("numbered", ""); return true; }
if ((m = /^\[\] $/.exec(text))) { onMarkdownTransform("todo", ""); return true; }
if ((m = /^\[x\] $/i.exec(text))) { onMarkdownTransform("todo", ""); return true; }
if ((m = /^> $/.exec(text))) { onMarkdownTransform("quote", ""); return true; }
return false;
}
function handleKeyDown(e) {
// Slash menu — open when "/" is typed at start of an empty block,
// navigation handled by the SlashMenu itself (it captures arrow
// keys / Enter while open).
if (e.key === "/" && (block.text || "") === "") {
// Defer the open until after the "/" lands so the menu's q is "".
setTimeout(() => {
const r = ref.current?.getBoundingClientRect();
onSlash && onSlash("", r ? { left: r.left, top: r.bottom } : { left: 100, top: 100 });
}, 0);
// Don't preventDefault — let the "/" land so the user sees they
// can type to filter. We strip it on pick.
return;
}
if (e.key === "Enter" && !e.shiftKey) {
e.preventDefault();
const info = getSelectionInfo();
// Empty list/todo/heading/quote on Enter → convert to paragraph
// ("escape" the format so the user can write a normal line).
if ((block.text || "") === "") {
onEnter(false);
return;
}
onEnter(true);
return;
}
if (e.key === "Backspace") {
const info = getSelectionInfo();
if (info.atStart && (block.text || "") === "") {
e.preventDefault();
onBackspaceEmpty && onBackspaceEmpty();
return;
}
// Backspace at start of a non-empty paragraph after a previous
// block → merge the lines (Notion does this; nice).
if (info.atStart && !isFirst) {
e.preventDefault();
onBackspaceEmpty && onBackspaceEmpty();
return;
}
}
if (e.key === "Escape") {
// If slash menu is open, the menu closes itself — otherwise blur
// out of the editable so the user can click elsewhere cleanly.
if (ref.current) ref.current.blur();
}
}
function handleInput(e) {
const text = ref.current?.textContent || "";
// Maintain slash menu's filter as the user types.
if (text.startsWith("/")) {
const q = text.slice(1);
onSlashUpdate && onSlashUpdate(q);
} else {
// User backed out — close the menu.
onSlashClose && onSlashClose();
}
onTextChange(text);
}
function handleKeyUp(e) {
if (e.key === " ") {
// Markdown shortcut: convert prefix → block type.
tryMarkdownTransformOnSpace();
}
}
// Render variants per block type. Heading/code/quote get a typed
// wrapper element so default browser styles + our CSS hit them.
const editableProps = {
ref,
contentEditable: true,
suppressContentEditableWarning: true,
spellCheck: true,
className: "note-block-edit",
onInput: handleInput,
onKeyDown: handleKeyDown,
onKeyUp: handleKeyUp,
"data-placeholder": placeholderFor(block.type),
};
if (block.type === "divider") {
return (
);
}
function placeholderFor(type) {
if (type === "h1") return "Heading 1";
if (type === "h2") return "Heading 2";
if (type === "h3") return "Heading 3";
if (type === "todo") return "To-do";
if (type === "bulleted" || type === "numbered") return "List item";
if (type === "quote") return "Quote";
if (type === "code") return "Code";
return "Type '/' for commands";
}
// ── Slash menu ─────────────────────────────────────────────────────
// Renders a small popup anchored to the block currently being typed
// in. Keyboard nav: ↑ ↓ to highlight, Enter to pick, Esc to close.
function SlashMenu({ slash, onPick, onClose }) {
const filtered = React.useMemo(() => {
const q = (slash.q || "").toLowerCase().trim();
if (!q) return BLOCK_TYPES;
return BLOCK_TYPES.filter(t =>
t.id.includes(q) || t.label.toLowerCase().includes(q) || (t.hint || "").toLowerCase().includes(q)
);
}, [slash.q]);
const [active, setActive] = React.useState(0);
React.useEffect(() => { setActive(0); }, [slash.q]);
// Capture arrow keys / Enter at the document level while the menu
// is open. We don't put a child input here — the user is still
// typing into the contentEditable, we just steer the highlight.
// stopPropagation() is critical: without it the Enter that picks
// a slash menu item ALSO bubbles down to the BlockRow's keydown
// and creates a new paragraph block, leaving an empty row above
// the converted block.
React.useEffect(() => {
function onKey(e) {
if (e.key === "ArrowDown") {
e.preventDefault(); e.stopPropagation();
setActive(a => Math.min(a + 1, filtered.length - 1));
}
else if (e.key === "ArrowUp") {
e.preventDefault(); e.stopPropagation();
setActive(a => Math.max(a - 1, 0));
}
else if (e.key === "Enter") {
if (filtered[active]) {
e.preventDefault(); e.stopPropagation();
onPick(filtered[active].id);
}
}
else if (e.key === "Escape") {
e.preventDefault(); e.stopPropagation();
onClose();
}
}
document.addEventListener("keydown", onKey, true);
return () => document.removeEventListener("keydown", onKey, true);
}, [filtered, active]);
if (!filtered.length) return null;
const top = (slash.anchorRect && slash.anchorRect.top) || 100;
const left = (slash.anchorRect && slash.anchorRect.left) || 100;
return ReactDOM.createPortal(