@eightyfourthousand/lib-editing 2026.4.0 → 2026.4.2

package/src/lib/components/editor/hooks/useTranslationExtensions.ts

@@ -1,148 +0,0 @@
-'use client';
-
-import type { XmlFragment } from 'yjs';
-import { Collaboration } from '@tiptap/extension-collaboration';
-import { Audio } from '../extensions/Audio/Audio';
-import Heading from '../extensions/Heading/Heading';
-import Image from '../extensions/Image';
-import Paragraph from '../extensions/Paragraph/Paragraph';
-import { TableKit } from '../extensions/Table';
-import { SlashCommand } from '../extensions/SlashCommand/SlashCommand';
-import {
-  BulletListSuggestion,
-  Heading1Suggestion,
-  Heading2Suggestion,
-  Heading3Suggestion,
-  NumberListSuggestion,
-  QuoteSuggestion,
-  TextSuggestion,
-  getSuggestion,
-} from '../extensions/SlashCommand/Suggestions';
-import { Link } from '../extensions/Link';
-import Placeholder from '../extensions/Placeholder';
-import TextAlign from '../extensions/TextAlign';
-import { STARTER_KIT_CONFIG, StarterKit } from '../extensions/StarterKit';
-import TranslationMetadata from '../extensions/TranslationMetadata';
-import TranslationDocument from '../extensions/TranslationDocument';
-import { PassageNode } from '../extensions/Passage';
-import { CommandSuggestionItem } from '../extensions/SlashCommand/SuggestionList';
-import { TableOfContentsIcon } from 'lucide-react';
-import { LeadingSpace } from '../extensions/LeadingSpace';
-import { Trailer } from '../extensions/Trailer';
-import { LineGroupNode } from '../extensions/LineGroup/LineGroupNode';
-import { LineNode } from '../extensions/Line/LineNode';
-import { Subscript } from '../extensions/Subscript';
-import { Superscript } from '../extensions/Superscript';
-import { SmallCaps } from '../extensions/SmallCaps';
-import { Italic } from '../extensions/Italic';
-import { Indent } from '../extensions/Indent';
-import { InternalLink } from '../extensions/InternalLink';
-import { MantraMark } from '../extensions/Mantra/Mantra';
-import { Mention } from '../extensions/Mention/Mention';
-import { EndNoteLinkMark } from '../extensions/EndNoteLink/EndNoteLinkMark';
-import { GlossaryInstanceNode } from '../extensions/GlossaryInstance/GlossaryInstanceNode';
-import {
-  Abbreviation,
-  AbbreviationCommand,
-  AbbreviationSuggestion,
-  HasAbbreviation,
-} from '../extensions/Abbreviation/Abbreviation';
-import { ParagraphIndent } from '../extensions/ParagraphIndent';
-import { Bold } from '../extensions/Bold';
-import { List, ListItem } from '../extensions/List';
-import { Underline } from '../extensions/Underline';
-import { GlobalConfig } from '../extensions/GlobalConfig';
-
-const PassageSuggestion: CommandSuggestionItem = {
-  title: 'Passage',
-  description: 'Start a new passage.',
-  keywords: ['passage'],
-  icon: TableOfContentsIcon,
-  command: ({ editor, range }) => {
-    editor
-      .chain()
-      .deleteRange(range)
-      .selectParentNode()
-      .deleteCurrentNode()
-      .splitPassage()
-      .normalizeLabelsAfter()
-      .run();
-  },
-};
-
-export const useTranslationExtensions = ({
-  fragment,
-}: {
-  fragment?: XmlFragment;
-} = {}) => {
-  const suggestions = [
-    TextSuggestion,
-    PassageSuggestion,
-    Heading1Suggestion,
-    Heading2Suggestion,
-    Heading3Suggestion,
-    AbbreviationSuggestion,
-    BulletListSuggestion,
-    NumberListSuggestion,
-    QuoteSuggestion,
-  ];
-  const extensions = [
-    TranslationDocument,
-    Audio,
-    Abbreviation,
-    HasAbbreviation,
-    AbbreviationCommand,
-    Bold,
-    EndNoteLinkMark,
-    GlobalConfig,
-    GlossaryInstanceNode,
-    Heading,
-    Image,
-    Indent,
-    InternalLink,
-    Italic,
-    LeadingSpace,
-    LineGroupNode,
-    LineNode,
-    Link,
-    List,
-    ListItem,
-    MantraMark,
-    Mention,
-    Paragraph,
-    ParagraphIndent,
-    PassageNode,
-    Placeholder,
-    SlashCommand.configure({
-      suggestion: getSuggestion(suggestions),
-    }),
-    SmallCaps,
-    Subscript,
-    Superscript,
-    TableKit,
-    Trailer,
-    TranslationMetadata,
-    TextAlign,
-    Underline,
-  ];
-
-  if (fragment) {
-    extensions.push(
-      StarterKit.configure({
-        ...STARTER_KIT_CONFIG,
-        trailingNode: { notAfter: ['passage', 'paragraph'] },
-        undoRedo: false,
-      }),
-      Collaboration.configure({ fragment }),
-    );
-  } else {
-    extensions.push(
-      StarterKit.configure({
-        ...STARTER_KIT_CONFIG,
-        trailingNode: { notAfter: ['passage', 'paragraph'] },
-      }),
-    );
-  }
-
-  return { extensions };
-};

package/src/lib/components/editor/menus/EmptyBubbleMenu.tsx

@@ -1,42 +0,0 @@
-'use client';
-
-import { Editor } from '@tiptap/core';
-import { BubbleMenu } from '@tiptap/react/menus';
-import { ScrollArea, ScrollBar } from '@eightyfourthousand/design-system';
-
-export const EmptyBubbleMenu = ({ editor }: { editor: Editor | null }) => {
-  if (!editor) {
-    return null;
-  }
-
-  return (
-    <BubbleMenu
-      editor={editor}
-      options={{
-        placement: 'top',
-        offset: 6,
-      }}
-      shouldShow={({ editor, state }) => {
-        const { selection } = state;
-        const { empty } = selection;
-
-        if (!editor.isEditable) {
-          return false;
-        }
-
-        if (empty) {
-          return false;
-        }
-
-        return true;
-      }}
-    >
-      <ScrollArea className="max-w-[90vw] rounded-md border bg-popover shadow-xl">
-        <div className="py-2 px-4 text-muted-foreground italic">
-          No menu options available
-        </div>
-        <ScrollBar orientation="horizontal" />
-      </ScrollArea>
-    </BubbleMenu>
-  );
-};

package/src/lib/components/editor/menus/MainBubbleMenu.tsx

@@ -1,51 +0,0 @@
-'use client';
-
-import { Editor } from '@tiptap/core';
-import { BubbleMenu } from '@tiptap/react/menus';
-import { ScrollArea, Separator, ScrollBar } from '@eightyfourthousand/design-system';
-import { NodeSelector, TextAlignSelector, TextButtons } from './selectors';
-
-export const MainBubbleMenu = ({ editor }: { editor: Editor | null }) => {
-  if (!editor) {
-    return null;
-  }
-
-  return (
-    <BubbleMenu
-      editor={editor}
-      options={{
-        placement: 'top',
-        offset: 6,
-      }}
-      shouldShow={({ editor, state }) => {
-        const { selection } = state;
-        const { empty } = selection;
-
-        if (!editor.isEditable) {
-          return false;
-        }
-
-        if (empty) {
-          return false;
-        }
-
-        if (editor.isActive('codeBlock')) {
-          return false;
-        }
-
-        return true;
-      }}
-    >
-      <ScrollArea className="max-w-[90vw] rounded-md border bg-popover shadow-xl">
-        <div className="flex">
-          <NodeSelector editor={editor} />
-          <Separator orientation="vertical" className="h-10" />
-          <TextButtons editor={editor} />
-          <Separator orientation="vertical" className="h-10" />
-          <TextAlignSelector editor={editor} />
-        </div>
-        <ScrollBar orientation="horizontal" />
-      </ScrollArea>
-    </BubbleMenu>
-  );
-};

package/src/lib/components/editor/menus/TranslationBubbleMenu.tsx

@@ -1,57 +0,0 @@
-'use client';
-
-import { Editor } from '@tiptap/core';
-import { BubbleMenu } from '@tiptap/react/menus';
-import { ScrollArea, Separator, ScrollBar } from '@eightyfourthousand/design-system';
-import { TranslationTextButtons } from './selectors/TranslationTextButtons';
-import { ParagraphButtons } from './selectors/ParagraphButtons';
-import { TranslationNodeSelector } from './selectors/TranslationNodeSelector';
-
-export const TranslationBubbleMenu = ({
-  editor,
-}: {
-  editor: Editor | null;
-}) => {
-  if (!editor) {
-    return null;
-  }
-
-  return (
-    <BubbleMenu
-      editor={editor}
-      options={{
-        placement: 'top',
-        offset: 6,
-      }}
-      shouldShow={({ editor, state }) => {
-        const { selection } = state;
-        const { empty } = selection;
-
-        if (!editor.isEditable) {
-          return false;
-        }
-
-        if (empty) {
-          return false;
-        }
-
-        if (editor.isActive('codeBlock')) {
-          return false;
-        }
-
-        return true;
-      }}
-    >
-      <ScrollArea className="max-w-[90vw] rounded-md border bg-popover shadow-xl z-10">
-        <div className="flex">
-          <TranslationNodeSelector editor={editor} />
-          <Separator orientation="vertical" className="h-10" />
-          <ParagraphButtons editor={editor} />
-          <Separator orientation="vertical" className="h-10" />
-          <TranslationTextButtons editor={editor} />
-        </div>
-        <ScrollBar orientation="horizontal" />
-      </ScrollArea>
-    </BubbleMenu>
-  );
-};

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

@@ -1,388 +0,0 @@
-'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>
-  );
-};