@knotpad/app 0.1.4 → 0.1.6

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

@@ -0,0 +1,692 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { useRouter } from "next/navigation";
+import type { Task, Member, NoteRef, TaskRef, SlashCommandId, PriorityLevel } from "./note-types";
+import { SAVE_DEBOUNCE_MS, AGENT_HANDLES, SLASH_COMMANDS, PRIORITY_LEVELS, stripBadgeComments } from "./note-types";
+import { getCaretCoords } from "./note-editor-dom";
+
+// ── useNoteSave ─────────────────────────────────────────────────────────────
+// Manages debounced saving, version conflicts, abort, and unmount flush.
+export function useNoteSave(
+  noteId: string,
+  initialVersion: number,
+  setTasks: React.Dispatch<React.SetStateAction<Task[]>>,
+  setContent: React.Dispatch<React.SetStateAction<string>>,
+  setTitle: React.Dispatch<React.SetStateAction<string>>,
+) {
+  const router = useRouter();
+  const [saving, setSaving] = useState(false);
+  const [saveError, setSaveError] = useState<string | null>(null);
+  const [staleReloaded, setStaleReloaded] = useState(false);
+  const saveTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const saveAbort = useRef<AbortController | null>(null);
+  const versionRef = useRef(initialVersion);
+  const latestPayload = useRef<{ title: string; content: string } | null>(null);
+  const savePending = useRef(false);
+
+  const scheduleSave = useCallback(
+    (newTitle: string, newContent: string) => {
+      latestPayload.current = { title: newTitle, content: newContent };
+      savePending.current = true;
+      if (saveTimer.current) clearTimeout(saveTimer.current);
+      saveTimer.current = setTimeout(async () => {
+        if (saveAbort.current) saveAbort.current.abort();
+        const controller = new AbortController();
+        saveAbort.current = controller;
+        setSaving(true);
+        try {
+          const res = await fetch(`/api/notes/${noteId}`, {
+            method: "PATCH",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ title: newTitle, content: newContent, baseVersion: versionRef.current }),
+            signal: controller.signal,
+          });
+          if (res.status === 409) {
+            const data = await res.json();
+            if (typeof data.currentVersion === "number") versionRef.current = data.currentVersion;
+            if (typeof data.content === "string") setContent(stripBadgeComments(data.content));
+            if (typeof data.title === "string") setTitle(data.title);
+            setStaleReloaded(true);
+            router.refresh();
+          } else if (res.ok) {
+            const updated = await res.json();
+            if (typeof updated.version === "number") versionRef.current = updated.version;
+            setTasks((prev) => updated.tasks ?? prev);
+            router.refresh();
+          }
+        } catch (err) {
+          if ((err as Error).name === "AbortError") return;
+          setSaveError("Couldn't save — check your connection and try again.");
+        } finally {
+          if (saveAbort.current === controller) {
+            setSaving(false);
+            savePending.current = false;
+          }
+        }
+      }, SAVE_DEBOUNCE_MS);
+    },
+    [noteId, router, setTasks, setContent, setTitle]
+  );
+
+  // Warn when closing the tab while an edit is in the debounce window.
+  useEffect(() => {
+    const handleBeforeUnload = (e: BeforeUnloadEvent) => {
+      if (savePending.current) {
+        e.preventDefault();
+        e.returnValue = "";
+      }
+    };
+    window.addEventListener("beforeunload", handleBeforeUnload);
+    return () => window.removeEventListener("beforeunload", handleBeforeUnload);
+  }, []);
+
+  // Flush on unmount.
+  useEffect(() => {
+    return () => {
+      if (saveTimer.current) clearTimeout(saveTimer.current);
+      if (saveAbort.current) saveAbort.current.abort();
+      if (savePending.current && latestPayload.current) {
+        savePending.current = false;
+        fetch(`/api/notes/${noteId}`, {
+          method: "PATCH",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ ...latestPayload.current, baseVersion: versionRef.current }),
+          keepalive: true,
+        }).catch(() => {});
+      }
+    };
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return {
+    saving, setSaving,
+    saveError, setSaveError,
+    staleReloaded, setStaleReloaded,
+    savePending,
+    versionRef,
+    scheduleSave,
+  };
+}
+
+// ── useUndoHistory ──────────────────────────────────────────────────────────
+// Custom undo/redo ring buffer (React's controlled textarea destroys the
+// browser's native undo stack on every setState).
+export function useUndoHistory(initialContent: string) {
+  const historyStack = useRef<string[]>([initialContent]);
+  const historyPos = useRef(0);
+  const historyTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  // Initialise once on mount
+  useEffect(() => {
+    historyStack.current = [initialContent];
+    historyPos.current = 0;
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  function pushHistory(value: string) {
+    if (historyTimer.current) clearTimeout(historyTimer.current);
+    historyTimer.current = setTimeout(() => {
+      const stack = historyStack.current;
+      const trimmed = stack.slice(0, historyPos.current + 1);
+      if (trimmed[trimmed.length - 1] === value) return;
+      trimmed.push(value);
+      if (trimmed.length > 300) trimmed.shift();
+      historyStack.current = trimmed;
+      historyPos.current = trimmed.length - 1;
+    }, 400);
+  }
+
+  function pushHistoryImmediate(value: string) {
+    if (historyTimer.current) clearTimeout(historyTimer.current);
+    const stack = historyStack.current.slice(0, historyPos.current + 1);
+    if (stack[stack.length - 1] === value) return;
+    stack.push(value);
+    if (stack.length > 300) stack.shift();
+    historyStack.current = stack;
+    historyPos.current = stack.length - 1;
+  }
+
+  return { historyStack, historyPos, historyTimer, pushHistory, pushHistoryImmediate };
+}
+
+// ── usePickerState ──────────────────────────────────────────────────────────
+// Manages all 7 picker states, trigger detection, suggestion lists, and
+// insert functions.
+export function usePickerState(
+  content: string,
+  title: string,
+  members: Member[],
+  initialNotesList: NoteRef[],
+  initialTasksList: TaskRef[],
+  noteId: string,
+  textareaRef: React.RefObject<HTMLTextAreaElement | null>,
+  scheduleSave: (t: string, c: string) => void,
+  setContent: React.Dispatch<React.SetStateAction<string>>,
+) {
+  // @mention autocomplete
+  const [mentionQuery, setMentionQuery] = useState<string | null>(null);
+  const [mentionStart, setMentionStart] = useState(0);
+  const [mentionIndex, setMentionIndex] = useState(0);
+
+  // [[note]] link picker
+  const [noteQuery, setNoteQuery] = useState<string | null>(null);
+  const [noteStart, setNoteStart] = useState(0);
+  const [noteIndex, setNoteIndex] = useState(0);
+
+  // ((task)) reference picker
+  const [taskQuery, setTaskQuery] = useState<string | null>(null);
+  const [taskStart, setTaskStart] = useState(0);
+  const [taskIndex, setTaskIndex] = useState(0);
+
+  // !priority picker
+  const [priorityQuery, setPriorityQuery] = useState<string | null>(null);
+  const [priorityStart, setPriorityStart] = useState(0);
+  const [priorityIndex, setPriorityIndex] = useState(0);
+
+  // Live lists for pickers
+  const [liveNotesList, setLiveNotesList] = useState<NoteRef[]>(initialNotesList);
+  const [liveTasksList, setLiveTasksList] = useState<TaskRef[]>(initialTasksList);
+
+  // + quick-pick
+  const [plusOpen, setPlusOpen] = useState(false);
+  const [plusStart, setPlusStart] = useState(0);
+
+  // Template sub-picker
+  const [templateOpen, setTemplateOpen] = useState(false);
+  const templateInsertPos = useRef(0);
+
+  // Right-click context menu
+  const [contextMenu, setContextMenu] = useState<{ top: number; left: number; selStart: number; selEnd: number } | null>(null);
+  const contextMenuRef = useRef<HTMLDivElement>(null);
+
+  // Inline date picker
+  const [datePickerPos, setDatePickerPos] = useState<{ top: number; left: number } | null>(null);
+  const [datePickerStart, setDatePickerStart] = useState("");
+  const [datePickerEnd, setDatePickerEnd] = useState("");
+  const datePickerCtx = useRef<{ before: string; after: string }>({ before: "", after: "" });
+
+  // / command palette
+  const [slashQuery, setSlashQuery] = useState<string | null>(null);
+  const [slashStart, setSlashStart] = useState(0);
+  const [slashIndex, setSlashIndex] = useState(0);
+
+  // Shared dropdown anchor
+  const [dropdownPos, setDropdownPos] = useState<{ top: number; left: number } | null>(null);
+
+  // "Did you mean @name?" soft hint
+  const [softHint, setSoftHint] = useState<{
+    word: string; handle: string; start: number; end: number;
+  } | null>(null);
+
+  // Saved cursor for post-render restoration
+  const savedCursor = useRef<{ start: number; end: number } | null>(null);
+
+  // Refresh note picker list when [[ is first typed.
+  useEffect(() => {
+    if (noteQuery !== "") return;
+    fetch("/api/notes")
+      .then((r) => r.ok ? r.json() : null)
+      .then((data: { id: string; title: string }[] | null) => {
+        if (data) setLiveNotesList(data.filter((n) => n.id !== noteId));
+      })
+      .catch(() => {});
+  }, [noteQuery]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Refresh task picker list when (( is first typed.
+  useEffect(() => {
+    if (taskQuery !== "") return;
+    fetch("/api/tasks?limit=200&picker=1")
+      .then((r) => r.ok ? r.json() : null)
+      .then((data: { id: string; title: string; note?: { title: string } }[] | null) => {
+        if (data) setLiveTasksList(data.map((t) => ({ id: t.id, title: t.title, noteTitle: t.note?.title ?? "" })));
+      })
+      .catch(() => {});
+  }, [taskQuery]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Dismiss context menu on outside click.
+  useEffect(() => {
+    if (!contextMenu) return;
+    function onDown(e: MouseEvent) {
+      if (contextMenuRef.current && !contextMenuRef.current.contains(e.target as Node)) {
+        setContextMenu(null);
+      }
+    }
+    document.addEventListener("mousedown", onDown);
+    return () => document.removeEventListener("mousedown", onDown);
+  }, [contextMenu]);
+
+  // ── Derived data ────────────────────────────────────────────────────────
+  const allHandles: Member[] = [
+    ...AGENT_HANDLES,
+    ...members.filter((m) => !m.isAgent),
+  ];
+
+  const mentionSuggestions =
+    mentionQuery !== null
+      ? allHandles.filter(
+          (m) =>
+            m.handle.toLowerCase().includes(mentionQuery.toLowerCase()) ||
+            m.label.toLowerCase().includes(mentionQuery.toLowerCase())
+        )
+      : [];
+
+  const slashSuggestions =
+    slashQuery !== null
+      ? SLASH_COMMANDS.filter(
+          (c) =>
+            c.id.startsWith(slashQuery.toLowerCase()) ||
+            c.label.toLowerCase().includes(slashQuery.toLowerCase())
+        )
+      : [];
+
+  const noteSuggestions =
+    noteQuery !== null
+      ? liveNotesList.filter((n) =>
+          n.title.toLowerCase().includes(noteQuery.toLowerCase())
+        )
+      : [];
+
+  const taskSuggestions =
+    taskQuery !== null
+      ? liveTasksList.filter((t) =>
+          t.title.toLowerCase().includes(taskQuery.toLowerCase()) ||
+          t.noteTitle.toLowerCase().includes(taskQuery.toLowerCase())
+        )
+      : [];
+
+  const prioritySuggestions =
+    priorityQuery !== null
+      ? PRIORITY_LEVELS.filter(
+          (p) =>
+            p.id.startsWith(priorityQuery.toLowerCase()) ||
+            p.label.toLowerCase().startsWith(priorityQuery.toLowerCase())
+        )
+      : [];
+
+  // ── Trigger detection ───────────────────────────────────────────────────
+  function detectTriggers(value: string, cursorPos: number) {
+    const textBefore = value.slice(0, cursorPos);
+    const ta = textareaRef.current;
+
+    // @mention
+    const atMatch = /@([\w-]*)$/.exec(textBefore);
+    if (atMatch) {
+      setMentionQuery(atMatch[1]);
+      setMentionStart(atMatch.index);
+      setMentionIndex(0);
+      setSlashQuery(null);
+      setSoftHint(null);
+      if (ta) setDropdownPos(getCaretCoords(ta, atMatch.index));
+      return;
+    }
+    setMentionQuery(null);
+
+    // !priority picker
+    const bangMatch = /(?:^|\s)!([\w-]*)$/.exec(textBefore);
+    if (bangMatch) {
+      const start = textBefore.lastIndexOf("!");
+      setPriorityQuery(bangMatch[1]);
+      setPriorityStart(start);
+      setPriorityIndex(0);
+      setSlashQuery(null);
+      setSoftHint(null);
+      if (ta) setDropdownPos(getCaretCoords(ta, start));
+      return;
+    }
+    setPriorityQuery(null);
+
+    // / command
+    const lastSlash = textBefore.lastIndexOf("/");
+    if (lastSlash !== -1) {
+      const charBefore = lastSlash > 0 ? textBefore[lastSlash - 1] : null;
+      const isLineStart = charBefore === null || charBefore === "\n";
+      const isAfterSpace = charBefore === " ";
+      if (isLineStart || isAfterSpace) {
+        const query = textBefore.slice(lastSlash + 1);
+        if (/^\w*$/.test(query)) {
+          setSlashQuery(query);
+          setSlashStart(lastSlash);
+          setSlashIndex(0);
+          setSoftHint(null);
+          if (ta) setDropdownPos(getCaretCoords(ta, lastSlash));
+          return;
+        }
+      }
+    }
+    setSlashQuery(null);
+
+    // [[note]] link picker
+    const bracketMatch = /\[\[([^\]]*)$/.exec(textBefore);
+    if (bracketMatch) {
+      setNoteQuery(bracketMatch[1]);
+      setNoteStart(bracketMatch.index);
+      setNoteIndex(0);
+      setTaskQuery(null);
+      setPlusOpen(false);
+      setSlashQuery(null);
+      setSoftHint(null);
+      if (ta) setDropdownPos(getCaretCoords(ta, bracketMatch.index));
+      return;
+    }
+    setNoteQuery(null);
+
+    // ((task)) reference picker
+    const parenMatch = /\(\(([^)]*)$/.exec(textBefore);
+    if (parenMatch) {
+      setTaskQuery(parenMatch[1]);
+      setTaskStart(parenMatch.index);
+      setTaskIndex(0);
+      setPlusOpen(false);
+      setSlashQuery(null);
+      setSoftHint(null);
+      if (ta) setDropdownPos(getCaretCoords(ta, parenMatch.index));
+      return;
+    }
+    setTaskQuery(null);
+
+    // + quick-pick
+    const plusMatch = /(?:^|\s)\+$/.exec(textBefore);
+    if (plusMatch) {
+      setPlusStart(textBefore.lastIndexOf("+"));
+      setPlusOpen(true);
+      setSlashQuery(null);
+      setSoftHint(null);
+      if (ta) setDropdownPos(getCaretCoords(ta, textBefore.lastIndexOf("+")));
+      return;
+    }
+    setPlusOpen(false);
+
+    // "Did you mean?" soft hint
+    const bareMatch = /\b([\w-]{2,})$/.exec(textBefore);
+    if (bareMatch) {
+      const word = bareMatch[1].toLowerCase();
+      const humanMatch = members.find(
+        (m) => !m.isAgent && m.label.toLowerCase().startsWith(word)
+      );
+      if (humanMatch) {
+        setSoftHint({
+          word: bareMatch[1],
+          handle: humanMatch.handle,
+          start: bareMatch.index,
+          end: bareMatch.index + bareMatch[1].length,
+        });
+        return;
+      }
+    }
+    setSoftHint(null);
+  }
+
+  // ── Insert functions ────────────────────────────────────────────────────
+  function applySoftHint() {
+    const ta = textareaRef.current;
+    if (!ta || !softHint) return;
+    const before = content.slice(0, softHint.start);
+    const after = content.slice(softHint.end);
+    const newContent = before + softHint.handle + after;
+    setContent(newContent);
+    setSoftHint(null);
+    scheduleSave(title, newContent);
+  }
+
+  function insertMention(handle: string) {
+    const ta = textareaRef.current;
+    if (!ta) return;
+    const before = content.slice(0, mentionStart);
+    const after = content.slice(ta.selectionStart);
+    const newContent = before + handle + " " + after;
+    setContent(newContent);
+    setMentionQuery(null);
+    setDropdownPos(null);
+    scheduleSave(title, newContent);
+    requestAnimationFrame(() => {
+      const pos = mentionStart + handle.length + 1;
+      ta.setSelectionRange(pos, pos);
+      ta.focus();
+    });
+  }
+
+  function insertNoteLink(noteRef: NoteRef) {
+    const ta = textareaRef.current;
+    if (!ta) return;
+    const link = `[[${noteRef.title}]]`;
+    const before = content.slice(0, noteStart);
+    const after = content.slice(ta.selectionStart);
+    const newContent = before + link + " " + after;
+    setContent(newContent);
+    setNoteQuery(null);
+    setDropdownPos(null);
+    scheduleSave(title, newContent);
+    requestAnimationFrame(() => {
+      const pos = noteStart + link.length + 1;
+      ta.setSelectionRange(pos, pos);
+      ta.focus();
+    });
+  }
+
+  function insertTaskRef(taskRef: TaskRef) {
+    const ta = textareaRef.current;
+    if (!ta) return;
+    const link = `((${taskRef.title}))`;
+    const before = content.slice(0, taskStart);
+    const after = content.slice(ta.selectionStart);
+    const newContent = before + link + " " + after;
+    setContent(newContent);
+    setTaskQuery(null);
+    setDropdownPos(null);
+    scheduleSave(title, newContent);
+    requestAnimationFrame(() => {
+      const pos = taskStart + link.length + 1;
+      ta.setSelectionRange(pos, pos);
+      ta.focus();
+    });
+  }
+
+  function insertPriority(level: PriorityLevel) {
+    const ta = textareaRef.current;
+    if (!ta) return;
+    const tag = `!${level}`;
+    const before = content.slice(0, priorityStart);
+    const after = content.slice(ta.selectionStart);
+    const newContent = before + tag + " " + after;
+    setContent(newContent);
+    setPriorityQuery(null);
+    setDropdownPos(null);
+    scheduleSave(title, newContent);
+    requestAnimationFrame(() => {
+      const pos = priorityStart + tag.length + 1;
+      ta.setSelectionRange(pos, pos);
+      ta.focus();
+    });
+  }
+
+  function triggerPlusOption(option: "note" | "task" | "person" | "date" | "priority") {
+    const ta = textareaRef.current;
+    if (!ta) return;
+    const before = content.slice(0, plusStart);
+    const after = content.slice(ta.selectionStart);
+    setPlusOpen(false);
+    setDropdownPos(null);
+    if (option === "note") {
+      const trigger = "[[";
+      const nc = before + trigger + after;
+      setContent(nc);
+      savedCursor.current = { start: plusStart + trigger.length, end: plusStart + trigger.length };
+      setNoteQuery("");
+      setNoteStart(plusStart);
+      setNoteIndex(0);
+      if (ta) setDropdownPos(getCaretCoords(ta, plusStart));
+    } else if (option === "task") {
+      const trigger = "((";
+      const nc = before + trigger + after;
+      setContent(nc);
+      savedCursor.current = { start: plusStart + trigger.length, end: plusStart + trigger.length };
+      setTaskQuery("");
+      setTaskStart(plusStart);
+      setTaskIndex(0);
+      if (ta) setDropdownPos(getCaretCoords(ta, plusStart));
+    } else if (option === "person") {
+      const trigger = "@";
+      const nc = before + trigger + after;
+      setContent(nc);
+      savedCursor.current = { start: plusStart + trigger.length, end: plusStart + trigger.length };
+      setMentionQuery("");
+      setMentionStart(plusStart);
+      setMentionIndex(0);
+      if (ta) setDropdownPos(getCaretCoords(ta, plusStart));
+    } else if (option === "priority") {
+      const trigger = "!";
+      const nc = before + trigger + after;
+      setContent(nc);
+      savedCursor.current = { start: plusStart + trigger.length, end: plusStart + trigger.length };
+      setPriorityQuery("");
+      setPriorityStart(plusStart);
+      setPriorityIndex(0);
+      if (ta) setDropdownPos(getCaretCoords(ta, plusStart));
+    } else {
+      datePickerCtx.current = { before, after };
+      setDatePickerStart(new Date().toISOString().slice(0, 10));
+      setDatePickerEnd("");
+      if (ta) setDatePickerPos(getCaretCoords(ta, plusStart));
+    }
+  }
+
+  function executeSlashCommand(commandId: SlashCommandId) {
+    const ta = textareaRef.current;
+    if (!ta) return;
+
+    if (commandId === "template") {
+      templateInsertPos.current = slashStart;
+      setSlashQuery(null);
+      setTemplateOpen(true);
+      return;
+    }
+
+    const before = content.slice(0, slashStart);
+    const after = content.slice(ta.selectionStart);
+
+    const insertions: Record<Exclude<SlashCommandId, "template">, { text: string; cursor: number }> = {
+      todo:     { text: "- [ ] ",                                         cursor: 6  },
+      bullet:   { text: "- ",                                             cursor: 2  },
+      numbered: { text: "1. ",                                            cursor: 3  },
+      h1:       { text: "# ",                                             cursor: 2  },
+      h2:       { text: "## ",                                            cursor: 3  },
+      h3:       { text: "### ",                                           cursor: 4  },
+      bold:     { text: "****",                                           cursor: 2  },
+      italic:   { text: "*",                                              cursor: 1  },
+      strike:   { text: "~~~~",                                           cursor: 2  },
+      quote:    { text: "> ",                                             cursor: 2  },
+      code:     { text: "```\n\n```",                                     cursor: 4  },
+      table:    { text: "| Col 1 | Col 2 |\n|---|---|\n| | |\n",         cursor: 2  },
+      callout:  { text: "> [!NOTE]\n> ",                                  cursor: 12 },
+      warning:  { text: "> [!WARNING]\n> ",                               cursor: 14 },
+      hr:       { text: "\n---\n",                                        cursor: 5  },
+    };
+
+    const { text, cursor } = insertions[commandId as Exclude<SlashCommandId, "template">];
+    const newContent = before + text + after;
+    setContent(newContent);
+    setSlashQuery(null);
+    setDropdownPos(null);
+    scheduleSave(title, newContent);
+    requestAnimationFrame(() => {
+      const pos = slashStart + cursor;
+      ta.setSelectionRange(pos, pos);
+      ta.focus();
+    });
+  }
+
+  function insertTemplate(templateContent: string) {
+    const ta = textareaRef.current;
+    if (!ta) return;
+    const insertPos = templateInsertPos.current;
+    const before = content.slice(0, insertPos);
+    const after = content.slice(ta.selectionStart);
+    const newContent = before + templateContent + after;
+    const cursorPos = before.length + templateContent.length;
+    savedCursor.current = { start: cursorPos, end: cursorPos };
+    setContent(newContent);
+    setTemplateOpen(false);
+    setDropdownPos(null);
+    scheduleSave(title, newContent);
+    requestAnimationFrame(() => ta.focus());
+  }
+
+  function confirmDatePicker() {
+    const ta = textareaRef.current;
+    if (!ta || !datePickerStart) return;
+    const dateStr =
+      datePickerEnd && datePickerEnd !== datePickerStart
+        ? `${datePickerStart}..${datePickerEnd}`
+        : datePickerStart;
+    const { before, after } = datePickerCtx.current;
+    const newContent = before + dateStr + after;
+    const caret = before.length + dateStr.length;
+    savedCursor.current = { start: caret, end: caret };
+    setContent(newContent);
+    setDatePickerPos(null);
+    scheduleSave(title, newContent);
+    requestAnimationFrame(() => ta.focus());
+  }
+
+  // ── Context menu actions ────────────────────────────────────────────────
+  function applyContextFormat(fmt: "bold" | "italic" | "strike") {
+    if (!contextMenu) return;
+    const { selStart, selEnd } = contextMenu;
+    const sel = content.slice(selStart, selEnd);
+    const wrap = fmt === "bold" ? "**" : fmt === "italic" ? "_" : "~~";
+    const newContent = content.slice(0, selStart) + wrap + sel + wrap + content.slice(selEnd);
+    savedCursor.current = { start: selStart + wrap.length, end: selEnd + wrap.length };
+    setContent(newContent);
+    setContextMenu(null);
+    scheduleSave(title, newContent);
+  }
+
+  function convertSelectionToTask() {
+    if (!contextMenu) return;
+    const { selStart, selEnd } = contextMenu;
+    const sel = content.slice(selStart, selEnd).trim();
+    const lineStart = content.lastIndexOf("\n", selStart - 1) + 1;
+    const lineEnd = content.indexOf("\n", selEnd);
+    const actualLineEnd = lineEnd === -1 ? content.length : lineEnd;
+    const prefix = "- [ ] ";
+    const newContent = content.slice(0, lineStart) + prefix + sel + content.slice(actualLineEnd);
+    savedCursor.current = { start: lineStart + prefix.length + sel.length, end: lineStart + prefix.length + sel.length };
+    setContent(newContent);
+    setContextMenu(null);
+    scheduleSave(title, newContent);
+  }
+
+  return {
+    // States
+    mentionQuery, setMentionQuery, mentionStart, mentionIndex, setMentionIndex,
+    noteQuery, setNoteQuery, noteStart, noteIndex, setNoteIndex,
+    taskQuery, setTaskQuery, taskStart, taskIndex, setTaskIndex,
+    priorityQuery, setPriorityQuery, priorityStart, priorityIndex, setPriorityIndex,
+    plusOpen, setPlusOpen, plusStart,
+    templateOpen, setTemplateOpen,
+    contextMenu, setContextMenu, contextMenuRef,
+    datePickerPos, setDatePickerPos,
+    datePickerStart, setDatePickerStart,
+    datePickerEnd, setDatePickerEnd,
+    slashQuery, setSlashQuery, slashStart, slashIndex, setSlashIndex,
+    dropdownPos, setDropdownPos,
+    softHint, setSoftHint,
+    savedCursor,
+    // Suggestions
+    mentionSuggestions,
+    slashSuggestions,
+    noteSuggestions,
+    taskSuggestions,
+    prioritySuggestions,
+    // Actions
+    detectTriggers,
+    applySoftHint,
+    insertMention,
+    insertNoteLink,
+    insertTaskRef,
+    insertPriority,
+    triggerPlusOption,
+    executeSlashCommand,
+    insertTemplate,
+    confirmDatePicker,
+    applyContextFormat,
+    convertSelectionToTask,
+  };
+}