@knotpad/app 0.1.5 → 0.1.6

package/components/notes/note-editor-keyboard.ts

@@ -0,0 +1,305 @@
+import React from "react";
+import type { Member, NoteRef, TaskRef, SlashCommandId, PriorityLevel } from "./note-types";
+import { SLASH_COMMANDS, PRIORITY_LEVELS } from "./note-types";
+
+export interface KeyboardHandlerDeps {
+  content: string;
+  title: string;
+  textareaRef: React.RefObject<HTMLTextAreaElement | null>;
+  savedCursor: React.MutableRefObject<{ start: number; end: number } | null>;
+  // Undo
+  historyTimer: React.MutableRefObject<ReturnType<typeof setTimeout> | null>;
+  historyPos: React.MutableRefObject<number>;
+  historyStack: React.MutableRefObject<string[]>;
+  pushHistoryImmediate: (v: string) => void;
+  // Save
+  scheduleSave: (t: string, c: string) => void;
+  setContent: (v: string | ((prev: string) => string)) => void;
+  // Slash
+  slashQuery: string | null;
+  setSlashQuery: (v: string | null) => void;
+  slashIndex: number;
+  setSlashIndex: (v: number | ((prev: number) => number)) => void;
+  slashSuggestions: typeof SLASH_COMMANDS;
+  executeSlashCommand: (id: SlashCommandId) => void;
+  setDropdownPos: (v: { top: number; left: number } | null) => void;
+  // Mention
+  mentionQuery: string | null;
+  setMentionQuery: (v: string | null) => void;
+  mentionIndex: number;
+  setMentionIndex: (v: number | ((prev: number) => number)) => void;
+  mentionSuggestions: Member[];
+  insertMention: (h: string) => void;
+  // Task
+  taskQuery: string | null;
+  setTaskQuery: (v: string | null) => void;
+  taskIndex: number;
+  setTaskIndex: (v: number | ((prev: number) => number)) => void;
+  taskSuggestions: TaskRef[];
+  insertTaskRef: (t: TaskRef) => void;
+  // Priority
+  priorityQuery: string | null;
+  setPriorityQuery: (v: string | null) => void;
+  priorityIndex: number;
+  setPriorityIndex: (v: number | ((prev: number) => number)) => void;
+  prioritySuggestions: typeof PRIORITY_LEVELS;
+  insertPriority: (level: PriorityLevel) => void;
+  // Plus
+  plusOpen: boolean;
+  setPlusOpen: (v: boolean) => void;
+  triggerPlusOption: (o: "note" | "task" | "person" | "date" | "priority") => void;
+  // Template
+  templateOpen: boolean;
+  setTemplateOpen: (v: boolean) => void;
+  // Context menu
+  contextMenu: { top: number; left: number; selStart: number; selEnd: number } | null;
+  setContextMenu: (v: { top: number; left: number; selStart: number; selEnd: number } | null) => void;
+  // Note
+  noteQuery: string | null;
+  setNoteQuery: (v: string | null) => void;
+  noteIndex: number;
+  setNoteIndex: (v: number | ((prev: number) => number)) => void;
+  noteSuggestions: NoteRef[];
+  insertNoteLink: (n: NoteRef) => void;
+}
+
+export function useNoteEditorKeyboard(d: KeyboardHandlerDeps) {
+  function handleKeyDown(e: React.KeyboardEvent<HTMLTextAreaElement>) {
+    const mod = e.ctrlKey || e.metaKey;
+
+    // ── Undo  Ctrl/Cmd+Z ────────────────────────────────────────────────────
+    if (mod && e.key === "z" && !e.shiftKey) {
+      e.preventDefault();
+      if (d.historyTimer.current) { clearTimeout(d.historyTimer.current); d.historyTimer.current = null; }
+      if (d.historyPos.current > 0) {
+        const curCursor = d.textareaRef.current?.selectionStart ?? 0;
+        d.historyPos.current--;
+        const prev = d.historyStack.current[d.historyPos.current];
+        const restored = Math.min(curCursor, prev.length);
+        d.savedCursor.current = { start: restored, end: restored };
+        d.setContent(prev);
+        d.scheduleSave(d.title, prev);
+      }
+      return;
+    }
+    // ── Redo  Ctrl/Cmd+Y  or  Ctrl/Cmd+Shift+Z ──────────────────────────────
+    if (mod && (e.key === "y" || (e.key === "z" && e.shiftKey))) {
+      e.preventDefault();
+      if (d.historyTimer.current) { clearTimeout(d.historyTimer.current); d.historyTimer.current = null; }
+      if (d.historyPos.current < d.historyStack.current.length - 1) {
+        const curCursor = d.textareaRef.current?.selectionStart ?? 0;
+        d.historyPos.current++;
+        const next = d.historyStack.current[d.historyPos.current];
+        const restored = Math.min(curCursor, next.length);
+        d.savedCursor.current = { start: restored, end: restored };
+        d.setContent(next);
+        d.scheduleSave(d.title, next);
+      }
+      return;
+    }
+
+    // / command palette takes priority
+    if (d.slashQuery !== null && d.slashSuggestions.length > 0) {
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        d.setSlashIndex((i) => Math.min(i + 1, d.slashSuggestions.length - 1));
+        return;
+      }
+      if (e.key === "ArrowUp") {
+        e.preventDefault();
+        d.setSlashIndex((i) => Math.max(i - 1, 0));
+        return;
+      }
+      if (e.key === "Enter" || e.key === "Tab") {
+        e.preventDefault();
+        d.executeSlashCommand(d.slashSuggestions[d.slashIndex].id);
+        return;
+      }
+      if (e.key === "Escape") {
+        d.setSlashQuery(null);
+        d.setDropdownPos(null);
+        return;
+      }
+    }
+
+    // Auto-continue task list on Enter — only when NO picker is active
+    if (
+      e.key === "Enter" &&
+      d.mentionQuery === null &&
+      d.slashQuery === null &&
+      d.noteQuery === null &&
+      d.taskQuery === null &&
+      d.priorityQuery === null &&
+      !d.plusOpen
+    ) {
+      const ta = d.textareaRef.current;
+      if (ta) {
+        const pos = ta.selectionStart;
+        const lineStart = d.content.lastIndexOf("\n", pos - 1) + 1;
+        const currentLine = d.content.slice(lineStart, pos);
+        // Empty task line + Enter → terminate the list
+        if (/^\s*-\s+\[[ x]\]\s*$/.test(currentLine)) {
+          e.preventDefault();
+          d.pushHistoryImmediate(d.content);
+          const before = d.content.slice(0, lineStart);
+          const after = d.content.slice(ta.selectionEnd);
+          const newContent = before + after;
+          d.savedCursor.current = { start: lineStart, end: lineStart };
+          d.setContent(newContent);
+          d.scheduleSave(d.title, newContent);
+          return;
+        }
+        if (/^\s*-\s+\[[ x]\]\s/.test(currentLine)) {
+          e.preventDefault();
+          const prefix = "- [ ] ";
+          const before = d.content.slice(0, pos);
+          const after = d.content.slice(ta.selectionEnd);
+          const newContent = before + "\n" + prefix + after;
+          d.pushHistoryImmediate(d.content);
+          d.savedCursor.current = { start: pos + 1 + prefix.length, end: pos + 1 + prefix.length };
+          d.setContent(newContent);
+          d.scheduleSave(d.title, newContent);
+          return;
+        }
+        // Empty numbered list line → terminate
+        if (/^\s*\d+\.\s*$/.test(currentLine)) {
+          e.preventDefault();
+          d.pushHistoryImmediate(d.content);
+          const before = d.content.slice(0, lineStart);
+          const after = d.content.slice(ta.selectionEnd);
+          d.savedCursor.current = { start: lineStart, end: lineStart };
+          d.setContent(before + after);
+          d.scheduleSave(d.title, before + after);
+          return;
+        }
+        // Numbered list continuation (auto-increment)
+        const numberedMatch = /^(\s*)(\d+)\.\s/.exec(currentLine);
+        if (numberedMatch) {
+          e.preventDefault();
+          const indent = numberedMatch[1];
+          const nextNum = parseInt(numberedMatch[2], 10) + 1;
+          const prefix = `${indent}${nextNum}. `;
+          const before = d.content.slice(0, pos);
+          const after = d.content.slice(ta.selectionEnd);
+          const afterLines = after.split("\n");
+          for (let j = 1; j < afterLines.length; j++) {
+            const mm = /^(\s*)(\d+)(\.\s)/.exec(afterLines[j]);
+            if (mm && mm[1] === indent) {
+              afterLines[j] = `${mm[1]}${parseInt(mm[2], 10) + 1}${mm[3]}` + afterLines[j].slice(mm[0].length);
+            } else {
+              break;
+            }
+          }
+          const newContent = before + "\n" + prefix + afterLines.join("\n");
+          d.pushHistoryImmediate(d.content);
+          d.savedCursor.current = { start: pos + 1 + prefix.length, end: pos + 1 + prefix.length };
+          d.setContent(newContent);
+          d.scheduleSave(d.title, newContent);
+          return;
+        }
+        // Empty bullet list line → terminate
+        if (/^\s*-\s*$/.test(currentLine)) {
+          e.preventDefault();
+          d.pushHistoryImmediate(d.content);
+          const before = d.content.slice(0, lineStart);
+          const after = d.content.slice(ta.selectionEnd);
+          d.savedCursor.current = { start: lineStart, end: lineStart };
+          d.setContent(before + after);
+          d.scheduleSave(d.title, before + after);
+          return;
+        }
+        // Bullet list continuation
+        const bulletMatch = /^(\s*)-\s/.exec(currentLine);
+        if (bulletMatch) {
+          e.preventDefault();
+          const indent = bulletMatch[1];
+          const prefix = `${indent}- `;
+          const before = d.content.slice(0, pos);
+          const after = d.content.slice(ta.selectionEnd);
+          const newContent = before + "\n" + prefix + after;
+          d.pushHistoryImmediate(d.content);
+          d.savedCursor.current = { start: pos + 1 + prefix.length, end: pos + 1 + prefix.length };
+          d.setContent(newContent);
+          d.scheduleSave(d.title, newContent);
+          return;
+        }
+      }
+      // Regular Enter is also a good undo checkpoint
+      d.pushHistoryImmediate(d.content);
+    }
+
+    // @mention navigation
+    if (d.mentionQuery !== null && d.mentionSuggestions.length > 0) {
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        d.setMentionIndex((i) => Math.min(i + 1, d.mentionSuggestions.length - 1));
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        d.setMentionIndex((i) => Math.max(i - 1, 0));
+      } else if (e.key === "Enter" || e.key === "Tab") {
+        e.preventDefault();
+        d.insertMention(d.mentionSuggestions[d.mentionIndex].handle);
+      } else if (e.key === "Escape") {
+        d.setMentionQuery(null);
+        d.setDropdownPos(null);
+      }
+    }
+
+    // ((task)) picker navigation
+    if (d.taskQuery !== null && d.taskSuggestions.length > 0) {
+      if (e.key === "ArrowDown") { e.preventDefault(); d.setTaskIndex((i) => Math.min(i + 1, d.taskSuggestions.length - 1)); }
+      else if (e.key === "ArrowUp") { e.preventDefault(); d.setTaskIndex((i) => Math.max(i - 1, 0)); }
+      else if (e.key === "Enter" || e.key === "Tab") { e.preventDefault(); d.insertTaskRef(d.taskSuggestions[d.taskIndex]); }
+      else if (e.key === "Escape") { d.setTaskQuery(null); d.setDropdownPos(null); }
+    }
+
+    // !priority picker navigation
+    if (d.priorityQuery !== null && d.prioritySuggestions.length > 0) {
+      if (e.key === "ArrowDown") { e.preventDefault(); d.setPriorityIndex((i) => Math.min(i + 1, d.prioritySuggestions.length - 1)); }
+      else if (e.key === "ArrowUp") { e.preventDefault(); d.setPriorityIndex((i) => Math.max(i - 1, 0)); }
+      else if (e.key === "Enter" || e.key === "Tab") { e.preventDefault(); d.insertPriority(d.prioritySuggestions[d.priorityIndex].id); }
+      else if (e.key === "Escape") { d.setPriorityQuery(null); d.setDropdownPos(null); }
+    }
+
+    // + quick-pick navigation
+    if (d.plusOpen) {
+      if (e.key === "Escape") { d.setPlusOpen(false); d.setDropdownPos(null); }
+      if (e.key === "1") { e.preventDefault(); d.triggerPlusOption("note"); }
+      if (e.key === "2") { e.preventDefault(); d.triggerPlusOption("task"); }
+      if (e.key === "3") { e.preventDefault(); d.triggerPlusOption("person"); }
+      if (e.key === "4") { e.preventDefault(); d.triggerPlusOption("date"); }
+      if (e.key === "5") { e.preventDefault(); d.triggerPlusOption("priority"); }
+    }
+
+    // Template sub-picker — Escape to dismiss
+    if (d.templateOpen && e.key === "Escape") {
+      d.setTemplateOpen(false);
+      return;
+    }
+
+    // Context menu — Escape to dismiss
+    if (d.contextMenu && e.key === "Escape") {
+      d.setContextMenu(null);
+      return;
+    }
+
+    // [[note]] picker navigation
+    if (d.noteQuery !== null && d.noteSuggestions.length > 0) {
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        d.setNoteIndex((i) => Math.min(i + 1, d.noteSuggestions.length - 1));
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        d.setNoteIndex((i) => Math.max(i - 1, 0));
+      } else if (e.key === "Enter" || e.key === "Tab") {
+        e.preventDefault();
+        d.insertNoteLink(d.noteSuggestions[d.noteIndex]);
+      } else if (e.key === "Escape") {
+        d.setNoteQuery(null);
+        d.setDropdownPos(null);
+      }
+    }
+  }
+
+  return { handleKeyDown };
+}

package/components/notes/note-editor-overlay.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import React from "react";
+import type { Task } from "./note-types";
+import { extractTaskTitleFromLine, formatDateChip, formatDateRangeChip } from "./note-types";
+
+/** Escape HTML entities and apply inline syntax colouring. */
+export function highlightLine(raw: string): string {
+  const esc = raw
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;");
+
+  function colorize(s: string): string {
+    return s
+      .replace(/@[\w-]+/g, (m) => `<span class="text-blue-400 font-medium">${m}</span>`)
+      .replace(/&lt;[^&]+&gt;/g, (m) => `<span class="text-emerald-400 font-medium">${m}</span>`)
+      .replace(/\[\[([^\]]+)\]\]/g, (_, t) => `<span class="text-violet-400 underline decoration-dotted">[[${t}]]</span>`)
+      .replace(/\(\(([^)]+)\)\)/g, (_, t) => `<span class="text-amber-400 underline decoration-dotted">((${t}))</span>`)
+      .replace(/~~([^~]+)~~/g, (_, t) => `<s class="text-zinc-500">~~${t}~~</s>`)
+      .replace(/!(low|medium|high|critical)\b/gi, (m, level) => {
+        const colors: Record<string, string> = {
+          critical: "text-red-500 bg-red-950/50 border-red-800/40",
+          high: "text-red-400 bg-red-950/30 border-red-800/30",
+          medium: "text-yellow-400 bg-yellow-950/30 border-yellow-800/30",
+          low: "text-green-400 bg-green-950/30 border-green-800/30",
+        };
+        return `<span class="${colors[level.toLowerCase()]} text-[11px] font-mono border rounded px-1">${m}</span>`;
+      })
+      // Inserted dates stay stored as ISO (so badge/title-stripping regexes keep
+      // working — see EDITOR_DATE_REGEX), but we show the human-readable
+      // form on hover via title= since rewriting the visible text here would
+      // shift it out of alignment with the textarea underneath (breaks caret
+      // hit-testing).
+      .replace(/\d{4}-\d{2}-\d{2}(?:\.\.\d{4}-\d{2}-\d{2})?/g, (m) => {
+        const chip = m.includes("..")
+          ? formatDateRangeChip(m.split("..")[0], m.split("..")[1])
+          : formatDateChip(m);
+        return (
+          `<span class="relative">` +
+          `<span class="invisible">${m}</span>` +
+          `<span class="absolute inset-0 flex items-center pointer-events-none overflow-hidden">` +
+          `<span class="text-green-400 text-[11px] font-mono bg-green-950/50 border border-green-800/40 rounded px-1 leading-4 whitespace-nowrap">${chip}</span>` +
+          `</span>` +
+          `</span>`
+        );
+      });
+  }
+
+  // Checked task line → dim the whole line + strikethrough the text
+  const checkedMatch = /^(\s*-\s+\[x\]\s*)(.+)$/.exec(esc);
+  if (checkedMatch) {
+    return (
+      `<span class="text-zinc-600">${checkedMatch[1]}` +
+      `<s>${colorize(checkedMatch[2])}</s></span>`
+    );
+  }
+
+  return colorize(esc);
+}
+
+/** Render the overlay as pure inline content — no block elements at all. */
+export function EditorOverlay({ content }: { content: string }) {
+  const lines = content.split("\n");
+  return (
+    <>
+      {lines.map((line, i) => (
+        <span key={i}>
+          <span dangerouslySetInnerHTML={{ __html: highlightLine(line) || " " }} />
+          {i < lines.length - 1 ? "\n" : null}
+        </span>
+      ))}
+    </>
+  );
+}
+
+/** Collect badge positions: one entry per task line (line index → task). */
+export function getTaskBadgeRows(
+  content: string,
+  tasks: Task[],
+): { lineIndex: number; task: Task }[] {
+  return content.split("\n").flatMap((line, i) => {
+    const taskTitle = extractTaskTitleFromLine(line);
+    const task = taskTitle ? tasks.find((t) => t.title === taskTitle) : null;
+    return task ? [{ lineIndex: i, task }] : [];
+  });
+}
+
+/** Gutter width in pixels for the task-badge column. */
+export const GUTTER_PX = 20;