@knotpad/app 0.1.0 → 0.1.1

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

@@ -1,305 +0,0 @@
-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

@@ -1,90 +0,0 @@
-"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;