@eightyfourthousand/lib-editing 2026.3.0

package/src/lib/components/editor/menus/selectors/EndNoteSelector.tsx

@@ -0,0 +1,388 @@
+'use client';
+
+import { cn } from '@eightyfourthousand/lib-utils';
+import { Editor } from '@tiptap/core';
+import { useEditorState as useTiptapEditorState } from '@tiptap/react';
+import {
+  Button,
+  Input,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  Separator,
+} from '@eightyfourthousand/design-system';
+import { AsteriskIcon, Loader2Icon, PlusIcon } from 'lucide-react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { v4 as uuidv4 } from 'uuid';
+import { createGraphQLClient } from '@eightyfourthousand/client-graphql';
+import { gql } from 'graphql-request';
+import { useEditorState } from '../../EditorProvider';
+import { useNavigation } from '../../../shared';
+import {
+  findLastEndNoteLinkBefore,
+  findPassageNode,
+  getFirstEndnoteInEditor,
+  getLastEndnoteInEditor,
+  insertEndnotePassage,
+  syncEndnoteLinkLabelsAcrossEditors,
+} from '../../extensions/EndNoteLink/endnote-utils';
+import { incrementLabel } from '../../extensions/Passage/label';
+
+const SEARCH_ENDNOTES = gql`
+  query SearchEndnotes($uuid: ID!, $limit: Int, $filter: PassageFilter) {
+    work(uuid: $uuid) {
+      uuid
+      passages(limit: $limit, filter: $filter) {
+        nodes {
+          uuid
+          content
+          label
+          sort
+        }
+      }
+    }
+  }
+`;
+
+interface EndnoteResult {
+  uuid: string;
+  label: string | null;
+  content: string;
+  sort: number;
+}
+
+export const EndNoteSelector = ({ editor }: { editor: Editor }) => {
+  const [open, setOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [results, setResults] = useState<EndnoteResult[]>([]);
+  const [loading, setLoading] = useState(false);
+  const debounceRef = useRef<ReturnType<typeof setTimeout>>(undefined);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const { getEditor } = useEditorState();
+  const { uuid: workUuid, updatePanel, fetchEndNote } = useNavigation();
+
+  const editorState = useTiptapEditorState({
+    editor,
+    selector: (instance) => ({
+      isActive: instance.editor.isActive('endNoteLink'),
+    }),
+  });
+
+  const searchEndnotes = useCallback(
+    async (query: string) => {
+      if (!query.trim() || !workUuid) {
+        setResults([]);
+        return;
+      }
+
+      setLoading(true);
+      try {
+        const client = createGraphQLClient();
+
+        // Normalize input: if just a number, prepend "n."
+        let labelPattern = query.trim();
+        if (/^\d+$/.test(labelPattern)) {
+          labelPattern = `n.${labelPattern}`;
+        }
+        // Append % for ILIKE pattern matching
+        if (!labelPattern.endsWith('%')) {
+          labelPattern = `${labelPattern}%`;
+        }
+
+        const response = await client.request<{
+          work: {
+            passages: {
+              nodes: Array<{
+                uuid: string;
+                content: string;
+                label: string | null;
+                sort: number;
+              }>;
+            };
+          } | null;
+        }>(SEARCH_ENDNOTES, {
+          uuid: workUuid,
+          limit: 20,
+          filter: { types: ['endnotes'], label: labelPattern },
+        });
+
+        const nodes = response.work?.passages.nodes ?? [];
+        setResults(
+          nodes.map((n) => ({
+            uuid: n.uuid,
+            label: n.label ?? null,
+            content: n.content,
+            sort: n.sort,
+          })),
+        );
+      } catch (err) {
+        console.error('Error searching endnotes:', err);
+        setResults([]);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [workUuid],
+  );
+
+  useEffect(() => {
+    if (debounceRef.current) {
+      clearTimeout(debounceRef.current);
+    }
+
+    if (!searchQuery.trim()) {
+      setResults([]);
+      return;
+    }
+
+    debounceRef.current = setTimeout(() => {
+      searchEndnotes(searchQuery);
+    }, 300);
+
+    return () => {
+      if (debounceRef.current) {
+        clearTimeout(debounceRef.current);
+      }
+    };
+  }, [searchQuery, searchEndnotes]);
+
+  const linkToExisting = useCallback(
+    (endnoteUuid: string, endnoteLabel: string | null) => {
+      const { to } = editor.state.selection;
+      editor
+        .chain()
+        .focus()
+        .setEndNoteLink(endnoteUuid, endnoteLabel ?? undefined)
+        .setTextSelection(to)
+        .run();
+      setOpen(false);
+      setSearchQuery('');
+      setResults([]);
+    },
+    [editor],
+  );
+
+  const createNewEndnote = useCallback(async () => {
+    const endnotesEditor = getEditor('endnotes');
+    const { from, to } = editor.state.selection;
+    const selectionIsRange = from !== to;
+
+    // Check for an existing endNoteLink mark at the end of the selection.
+    // Only the end matters — the endnote superscript renders there.
+    const nodeBeforeTo =
+      selectionIsRange ? editor.state.doc.nodeAt(to - 1) : null;
+    const endMark = nodeBeforeTo?.marks.find(
+      (m) => m.type.name === 'endNoteLink',
+    );
+    const endNote =
+      endMark &&
+      (endMark.attrs.notes as { endNote: string }[] | undefined)?.find(
+        (n) => n.endNote,
+      );
+
+    // Determine whether `to` is exactly at the end of the mark or in the middle.
+    // nodeAt(to) returns the character after the selection — if it still carries
+    // the same mark, `to` is in the middle and a split is needed.
+    const markType = editor.state.schema.marks.endNoteLink;
+    const nodeAtTo = endNote ? editor.state.doc.nodeAt(to) : null;
+    const markContinues = nodeAtTo && markType.isInSet(nodeAtTo.marks);
+
+    // Find the previous endnote link before cursor to determine insertion point
+    const prevLink = findLastEndNoteLinkBefore(editor, from);
+
+    let newLabel: string;
+    let newSort: number;
+    let afterPassageUuid: string | undefined;
+    let beforePassageUuid: string | undefined;
+
+    if (endNote && !markContinues) {
+      // `to` is at the exact end of the mark — append a new note after
+      // the last existing note's passage.
+      const notes = endMark.attrs.notes as { endNote: string }[];
+      const lastNote = notes[notes.length - 1];
+      const passage = await fetchEndNote(lastNote.endNote);
+      if (passage) {
+        newLabel = incrementLabel(passage.label || 'n.0');
+        newSort = passage.sort + 1;
+        afterPassageUuid = passage.uuid;
+      } else if (endnotesEditor) {
+        const last = getLastEndnoteInEditor(endnotesEditor);
+        newLabel = last ? incrementLabel(last.label) : 'n.1';
+        newSort = last ? last.sort + 1 : 1;
+      } else {
+        newLabel = 'n.1';
+        newSort = 1;
+      }
+    } else if (endNote && markContinues) {
+      // `to` is in the middle of the mark — split. The new endnote takes
+      // the existing passage's label and is inserted before it.
+      const passage = await fetchEndNote(endNote.endNote);
+      if (passage) {
+        newLabel = passage.label || 'n.1';
+        newSort = passage.sort;
+        beforePassageUuid = passage.uuid;
+      } else if (endnotesEditor) {
+        const last = getLastEndnoteInEditor(endnotesEditor);
+        newLabel = last ? incrementLabel(last.label) : 'n.1';
+        newSort = last ? last.sort + 1 : 1;
+      } else {
+        newLabel = 'n.1';
+        newSort = 1;
+      }
+    } else if (prevLink) {
+      // Try to get the label/sort from the endnotes editor or API
+      const passage = await fetchEndNote(prevLink.endNote);
+      if (passage) {
+        newLabel = incrementLabel(passage.label || 'n.0');
+        newSort = passage.sort + 1;
+        afterPassageUuid = passage.uuid;
+      } else if (endnotesEditor) {
+        const last = getLastEndnoteInEditor(endnotesEditor);
+        newLabel = last ? incrementLabel(last.label) : 'n.1';
+        newSort = last ? last.sort + 1 : 1;
+      } else {
+        newLabel = 'n.1';
+        newSort = 1;
+      }
+    } else if (endnotesEditor) {
+      // No previous link; insert before the first endnote passage
+      const first = getFirstEndnoteInEditor(endnotesEditor);
+      if (first) {
+        newLabel = 'n.1';
+        newSort = first.sort;
+        beforePassageUuid = first.uuid;
+      } else {
+        newLabel = 'n.1';
+        newSort = 1;
+      }
+    } else {
+      newLabel = 'n.1';
+      newSort = 1;
+    }
+
+    const newPassageUuid = uuidv4();
+
+    // Insert endNoteLink mark in main editor with the label for immediate display,
+    // then collapse the selection to dismiss the bubble menu.
+    editor
+      .chain()
+      .focus()
+      .setEndNoteLink(newPassageUuid, newLabel)
+      .setTextSelection(to)
+      .run();
+
+    // Insert new passage in endnotes editor at the correct position
+    if (endnotesEditor) {
+      insertEndnotePassage(endnotesEditor, {
+        label: newLabel,
+        sort: newSort,
+        uuid: newPassageUuid,
+        afterPassageUuid,
+        beforePassageUuid,
+      });
+
+      // Sync updated labels into endNoteLink marks across front + translation
+      syncEndnoteLinkLabelsAcrossEditors(endnotesEditor, getEditor);
+    }
+
+    // Navigate to the new endnote
+    updatePanel({
+      name: 'right',
+      state: { open: true, tab: 'endnotes', hash: newPassageUuid },
+    });
+
+    // Focus the new endnote passage after navigation
+    if (endnotesEditor) {
+      setTimeout(() => {
+        const found = findPassageNode(endnotesEditor, newPassageUuid);
+        if (found) {
+          endnotesEditor.commands.focus(found.pos + 2);
+        }
+      }, 200);
+    }
+
+    setOpen(false);
+    setSearchQuery('');
+    setResults([]);
+  }, [editor, getEditor, fetchEndNote, updatePanel]);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="rounded-none flex-shrink-0"
+        >
+          <AsteriskIcon
+            className={cn(
+              'size-4',
+              editorState.isActive ? 'text-primary' : 'text-muted-foreground',
+            )}
+            strokeWidth={2.5}
+          />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        className="w-72 shadow-xl rounded-md border p-2"
+        align="end"
+        noPortal
+      >
+        <div className="flex flex-col gap-2">
+          <Input
+            ref={inputRef}
+            placeholder="Search endnotes by label..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="h-8 text-sm"
+          />
+
+          {loading && (
+            <div className="flex items-center justify-center py-2">
+              <Loader2Icon className="size-4 animate-spin text-muted-foreground" />
+            </div>
+          )}
+
+          {!loading && results.length > 0 && (
+            <div className="max-h-48 overflow-y-auto flex flex-col gap-0.5">
+              {results.map((result) => (
+                <button
+                  key={result.uuid}
+                  className="flex items-start gap-2 px-2 py-1.5 text-sm rounded hover:bg-muted cursor-pointer text-left w-full"
+                  onClick={() => linkToExisting(result.uuid, result.label)}
+                >
+                  <span className="font-medium text-primary shrink-0">
+                    {result.label}
+                  </span>
+                  <span className="text-muted-foreground truncate">
+                    {result.content.slice(0, 80)}
+                    {result.content.length > 80 ? '...' : ''}
+                  </span>
+                </button>
+              ))}
+            </div>
+          )}
+
+          {!loading && searchQuery && results.length === 0 && (
+            <p className="text-xs text-muted-foreground text-center py-1">
+              No matching endnotes found.
+            </p>
+          )}
+
+          <Separator />
+
+          <Button
+            variant="ghost"
+            size="sm"
+            className="w-full justify-start text-sm"
+            onClick={createNewEndnote}
+          >
+            <PlusIcon className="size-4 mr-1" />
+            Create new endnote
+          </Button>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+};

package/src/lib/components/editor/menus/selectors/GlossarySelector.tsx

@@ -0,0 +1,63 @@
+'use client';
+
+import { cn } from '@eightyfourthousand/lib-utils';
+import { Editor } from '@tiptap/core';
+import { useEditorState } from '@tiptap/react';
+import {
+  Button,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@eightyfourthousand/design-system';
+import { BookOpenTextIcon } from 'lucide-react';
+import { SelectorInputField } from './SelectorInputField';
+
+export const GlossarySelector = ({ editor }: { editor: Editor }) => {
+  const editorState = useEditorState({
+    editor,
+    selector: (instance) => ({
+      isActive: instance.editor.isActive('glossaryInstance'),
+    }),
+  });
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="px-2 rounded-none flex-shrink-0"
+        >
+          <BookOpenTextIcon
+            className={cn(
+              'size-4',
+              editorState.isActive
+                ? 'text-foreground'
+                : 'text-muted-foreground',
+            )}
+            strokeWidth={2.5}
+          />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        className="w-fit shadow-xl rounded-md border p-1"
+        align="end"
+        noPortal
+      >
+        <SelectorInputField
+          editor={editor}
+          type="glossaryInstance"
+          attr="glossary"
+          placeholder="Add glossary uuid..."
+          onSubmit={(value) => {
+            if (value) {
+              editor.chain().focus().setGlossaryInstance(value).run();
+            } else {
+              editor.chain().focus().unsetGlossaryInstance().run();
+            }
+          }}
+        />
+      </PopoverContent>
+    </Popover>
+  );
+};

package/src/lib/components/editor/menus/selectors/LinkSelector.tsx

@@ -0,0 +1,68 @@
+'use client';
+
+import { cn } from '@eightyfourthousand/lib-utils';
+import { Editor } from '@tiptap/core';
+import { useEditorState } from '@tiptap/react';
+import {
+  Button,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@eightyfourthousand/design-system';
+import { LinkIcon } from 'lucide-react';
+import { SelectorInputField } from './SelectorInputField';
+
+export const LinkSelector = ({ editor }: { editor: Editor }) => {
+  const editorState = useEditorState({
+    editor,
+    selector: (instance) => ({
+      isActive: instance.editor.isActive('link'),
+    }),
+  });
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="rounded-none flex-shrink-0"
+        >
+          <LinkIcon
+            className={cn(
+              'size-4',
+              editorState.isActive
+                ? 'text-foreground'
+                : 'text-muted-foreground',
+            )}
+            strokeWidth={2.5}
+          />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        className="w-fit shadow-xl rounded-md border p-1"
+        align="end"
+        noPortal
+      >
+        <SelectorInputField
+          editor={editor}
+          type="link"
+          attr="href"
+          placeholder="Add link..."
+          onSubmit={(value) => {
+            if (value) {
+              editor
+                .chain()
+                .focus()
+                .extendMarkRange('link')
+                .setLink({ href: value })
+                .run();
+            } else {
+              editor.chain().focus().extendMarkRange('link').unsetLink().run();
+            }
+          }}
+        />
+      </PopoverContent>
+    </Popover>
+  );
+};

package/src/lib/components/editor/menus/selectors/MantraSelector.tsx

@@ -0,0 +1,119 @@
+'use client';
+
+import { Editor } from '@tiptap/core';
+import { useEditorState } from '@tiptap/react';
+import {
+  Button,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@eightyfourthousand/design-system';
+import { CheckIcon, ChevronDownIcon, SpeechIcon } from 'lucide-react';
+import { cn } from '@eightyfourthousand/lib-utils';
+
+interface SelectorResult {
+  isEnglish: boolean;
+  isSanskrit: boolean;
+  isTibetan: boolean;
+  isWylie: boolean;
+  isMixed: boolean;
+}
+
+interface MenuItem {
+  name: string;
+  onClick: (editor: Editor) => void;
+  isActive: (state: SelectorResult) => boolean;
+}
+
+const items: MenuItem[] = [
+  {
+    name: 'English',
+    onClick: (editor: Editor) => {
+      editor.chain().focus().toggleMantra('en').run();
+    },
+    isActive: (state: SelectorResult) => state.isEnglish,
+  },
+  {
+    name: 'Sanskrit',
+    onClick: (editor: Editor) => {
+      editor.chain().focus().toggleMantra('Sa-Ltn').run();
+    },
+    isActive: (state: SelectorResult) => state.isSanskrit,
+  },
+  {
+    name: 'Wylie',
+    onClick: (editor: Editor) => {
+      editor.chain().focus().toggleMantra('Bo-Ltn').run();
+    },
+    isActive: (state: SelectorResult) => state.isWylie,
+  },
+  {
+    name: 'Tibetan',
+    onClick: (editor: Editor) => {
+      editor.chain().focus().toggleMantra('bo').run();
+    },
+    isActive: (state: SelectorResult) => state.isTibetan,
+  },
+  {
+    name: 'Mixed',
+    onClick: (editor: Editor) => {
+      editor.chain().focus().toggleMantra().run();
+    },
+    isActive: (state: SelectorResult) => state.isMixed,
+  },
+];
+
+export const MantraSelector = ({ editor }: { editor: Editor }) => {
+  const editorState = useEditorState({
+    editor,
+    selector: (instance) => ({
+      isEnglish: instance.editor.isActive('mantra', { lang: 'en' }),
+      isSanskrit: instance.editor.isActive('mantra', { lang: 'Sa-Ltn' }),
+      isTibetan: instance.editor.isActive('mantra', { lang: 'bo' }),
+      isWylie: instance.editor.isActive('mantra', { lang: 'Bo-Ltn' }),
+      isMixed: instance.editor.isActive('mantra', { lang: undefined }),
+    }),
+  });
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button variant="ghost" className="rounded-none">
+          <SpeechIcon
+            className={cn(
+              'size-3',
+              editorState.isEnglish ||
+                editorState.isSanskrit ||
+                editorState.isTibetan ||
+                editorState.isWylie ||
+                editorState.isMixed
+                ? 'text-primary'
+                : 'text-muted-foreground',
+            )}
+            strokeWidth={2.5}
+          />
+          <ChevronDownIcon className="size-2" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        className="w-28 shadow-xl rounded-md border p-1"
+        align="end"
+        noPortal
+      >
+        {items.map((item) => (
+          <div
+            key={item.name}
+            className="flex items-center text-sm rounded-md hover:bg-muted text-foreground px-2 py-1.5 cursor-pointer"
+            onClick={() => item.onClick(editor)}
+          >
+            <span>{item.name}</span>
+            <div className="flex-1"></div>
+            {item.isActive(editorState) && (
+              <CheckIcon className="size-3.5 ms-4" />
+            )}
+          </div>
+        ))}
+      </PopoverContent>
+    </Popover>
+  );
+};