@eightyfourthousand/lib-editing 2026.4.0 → 2026.4.2

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

@@ -1,89 +0,0 @@
-'use client';
-
-import { cn } from '@eightyfourthousand/lib-utils';
-import { Editor } from '@tiptap/core';
-import { useEditorState } from '@tiptap/react';
-import { Button } from '@eightyfourthousand/design-system';
-import {
-  BoldIcon,
-  ItalicIcon,
-  StrikethroughIcon,
-  UnderlineIcon,
-} from 'lucide-react';
-import { LinkSelector } from './LinkSelector';
-
-interface SelectorResult {
-  isBold: boolean;
-  isItalic: boolean;
-  isUnderline: boolean;
-  isStrike: boolean;
-}
-
-const items = [
-  {
-    icon: BoldIcon,
-    onClick: (editor: Editor) => {
-      editor.chain().focus().toggleBold().run();
-    },
-    isActive: (state: SelectorResult) => state.isBold,
-  },
-  {
-    icon: ItalicIcon,
-    onClick: (editor: Editor) => {
-      editor.chain().focus().toggleItalic().run();
-    },
-    isActive: (state: SelectorResult) => state.isItalic,
-  },
-  {
-    icon: UnderlineIcon,
-    onClick: (editor: Editor) => {
-      editor.chain().focus().toggleUnderline().run();
-    },
-    isActive: (state: SelectorResult) => state.isUnderline,
-  },
-  {
-    icon: StrikethroughIcon,
-    onClick: (editor: Editor) => {
-      editor.chain().focus().toggleStrike().run();
-    },
-    isActive: (state: SelectorResult) => state.isStrike,
-  },
-];
-
-export const TextButtons = ({ editor }: { editor: Editor }) => {
-  const editorState = useEditorState<SelectorResult>({
-    editor,
-    selector: (instance) => ({
-      isBold: instance.editor.isActive('bold'),
-      isItalic: instance.editor.isActive('italic'),
-      isUnderline: instance.editor.isActive('underline'),
-      isStrike: instance.editor.isActive('strike'),
-    }),
-  });
-
-  return (
-    <>
-      {items.map((item, i) => {
-        return (
-          <Button
-            key={i}
-            variant="ghost"
-            size="icon"
-            className="rounded-none flex-shrink-0"
-            onClick={() => {
-              item.onClick(editor);
-            }}
-          >
-            <item.icon
-              className={cn('size-4', {
-                'text-foreground': item.isActive(editorState),
-              })}
-              strokeWidth={2.5}
-            />
-          </Button>
-        );
-      })}
-      <LinkSelector editor={editor} />
-    </>
-  );
-};

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

@@ -1,143 +0,0 @@
-'use client';
-
-import {
-  Button,
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@eightyfourthousand/design-system';
-import { Editor } from '@tiptap/core';
-import { useEditorState } from '@tiptap/react';
-import {
-  CheckIcon,
-  ChevronDownIcon,
-  Heading1,
-  Heading2,
-  Heading3,
-  LetterTextIcon,
-  ListEndIcon,
-  ListStartIcon,
-  LucideIcon,
-  QuoteIcon,
-} from 'lucide-react';
-
-interface SelectorResult {
-  isParagraph: boolean;
-  isHeading1: boolean;
-  isHeading2: boolean;
-  isHeading3: boolean;
-  isLineGroup: boolean;
-  isBlockquote: boolean;
-  isTrailer: boolean;
-}
-
-interface MenuItem {
-  name: string;
-  icon: LucideIcon;
-  onClick: (editor: Editor) => void;
-  isActive: (state: SelectorResult) => boolean;
-}
-
-const items: MenuItem[] = [
-  {
-    name: 'Text',
-    icon: LetterTextIcon,
-    onClick: (editor) =>
-      editor.chain().focus().toggleNode('paragraph', 'paragraph').run(),
-    isActive: (state) => state.isParagraph,
-  },
-  {
-    name: 'Heading 1',
-    icon: Heading1,
-    onClick: (editor) =>
-      editor.chain().focus().toggleHeading({ level: 1 }).run(),
-    isActive: (state) => state.isHeading1,
-  },
-  {
-    name: 'Heading 2',
-    icon: Heading2,
-    onClick: (editor) =>
-      editor.chain().focus().toggleHeading({ level: 2 }).run(),
-    isActive: (state) => state.isHeading2,
-  },
-  {
-    name: 'Heading 3',
-    icon: Heading3,
-    onClick: (editor) =>
-      editor.chain().focus().toggleHeading({ level: 3 }).run(),
-    isActive: (state) => state.isHeading3,
-  },
-  {
-    name: 'Line Group',
-    icon: ListStartIcon,
-    onClick: (editor) => editor.chain().focus().toggleLineGroup().run(),
-    isActive: (state) => state.isLineGroup,
-  },
-  {
-    name: 'Quote',
-    icon: QuoteIcon,
-    onClick: (editor) =>
-      editor
-        .chain()
-        .focus()
-        .toggleNode('paragraph', 'paragraph')
-        .toggleBlockquote()
-        .run(),
-    isActive: (state) => state.isBlockquote,
-  },
-  {
-    name: 'Trailer',
-    icon: ListEndIcon,
-    onClick: (editor) => editor.chain().focus().toggleTrailer().run(),
-    isActive: (state) => state.isTrailer,
-  },
-];
-
-export const TranslationNodeSelector = ({ editor }: { editor: Editor }) => {
-  const editorState = useEditorState<SelectorResult>({
-    editor,
-    selector: (instance) => ({
-      isParagraph: instance.editor.isActive('paragraph'),
-      isHeading1: instance.editor.isActive('heading', { level: 1 }),
-      isHeading2: instance.editor.isActive('heading', { level: 2 }),
-      isHeading3: instance.editor.isActive('heading', { level: 3 }),
-      isLineGroup: instance.editor.isActive('lineGroup'),
-      isBlockquote: instance.editor.isActive('blockquote'),
-      isTrailer: instance.editor.isActive('trailer'),
-    }),
-  });
-
-  const activeItems = items.filter((item) => item.isActive(editorState));
-
-  const name =
-    activeItems.length > 1 ? 'Multiple' : (activeItems.pop()?.name ?? 'Text');
-
-  return (
-    <Popover>
-      <PopoverTrigger asChild>
-        <Button variant="ghost" className="rounded-none">
-          <span className="whitespace-nowrap text-sm me-2">{name}</span>
-          <ChevronDownIcon className="size-3" />
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className="w-48 p-1 shadow-xl" align="start" noPortal>
-        {items.map((item, i) => {
-          return (
-            <div
-              key={i}
-              onClick={() => item.onClick(editor)}
-              className="flex items-center text-sm rounded-md hover:bg-muted text-foreground px-2 py-1.5 cursor-pointer"
-            >
-              <item.icon className="size-3.5 me-2" />
-              <span>{item.name}</span>
-              <div className="flex-1"></div>
-              {item.isActive(editorState) && (
-                <CheckIcon className="size-3.5 ms-4" />
-              )}
-            </div>
-          );
-        })}
-      </PopoverContent>
-    </Popover>
-  );
-};

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

@@ -1,125 +0,0 @@
-'use client';
-
-import { cn } from '@eightyfourthousand/lib-utils';
-import { Editor } from '@tiptap/core';
-import { useEditorState } from '@tiptap/react';
-import {
-  BoldIcon,
-  CaseUpperIcon,
-  ItalicIcon,
-  SubscriptIcon,
-  SuperscriptIcon,
-  UnderlineIcon,
-} from 'lucide-react';
-import { Button, Separator } from '@eightyfourthousand/design-system';
-import { LinkSelector } from './LinkSelector';
-import { MantraSelector } from './MantraSelector';
-import { EndNoteSelector } from './EndNoteSelector';
-import { GlossarySelector } from './GlossarySelector';
-
-interface SelectorResult {
-  isBold: boolean;
-  isItalic: boolean;
-  isSmallCaps: boolean;
-  isSubscript: boolean;
-  isSuperscript: boolean;
-  isUnderline: boolean;
-}
-
-const items = [
-  {
-    icon: BoldIcon,
-    onClick: (editor: Editor, state: SelectorResult) =>
-      state.isBold
-        ? editor.chain().focus().unsetBold().run()
-        : editor.chain().focus().setBold().run(),
-    isActive: (state: SelectorResult) => state.isBold,
-  },
-  {
-    icon: ItalicIcon,
-    onClick: (editor: Editor, state: SelectorResult) =>
-      state.isItalic
-        ? editor.chain().focus().unsetItalic().run()
-        : editor.chain().focus().setItalic().run(),
-    isActive: (state: SelectorResult) => state.isItalic,
-  },
-  {
-    icon: UnderlineIcon,
-    onClick: (editor: Editor, state: SelectorResult) =>
-      state.isUnderline
-        ? editor.chain().focus().unsetUnderline().run()
-        : editor.chain().focus().setUnderline().run(),
-    isActive: (state: SelectorResult) => state.isUnderline,
-  },
-  {
-    icon: SubscriptIcon,
-    onClick: (editor: Editor, state: SelectorResult) =>
-      state.isSubscript
-        ? editor.chain().focus().unsetSubscript().run()
-        : editor.chain().focus().setSubscript().run(),
-    isActive: (state: SelectorResult) => state.isSubscript,
-  },
-  {
-    icon: SuperscriptIcon,
-    onClick: (editor: Editor, state: SelectorResult) =>
-      state.isSuperscript
-        ? editor.chain().focus().unsetSuperscript().run()
-        : editor.chain().focus().setSuperscript().run(),
-    isActive: (state: SelectorResult) => state.isSuperscript,
-  },
-  {
-    icon: CaseUpperIcon,
-    onClick: (editor: Editor, state: SelectorResult) =>
-      state.isSmallCaps
-        ? editor.chain().focus().unsetSmallCaps().run()
-        : editor.chain().focus().setSmallCaps().run(),
-    isActive: (state: SelectorResult) => state.isSmallCaps,
-  },
-];
-
-export const TranslationTextButtons = ({ editor }: { editor: Editor }) => {
-  const editorState = useEditorState<SelectorResult>({
-    editor,
-    selector: (instance) => ({
-      isBold: instance.editor.isActive('bold'),
-      isItalic: instance.editor.isActive('italic'),
-      isUnderline: instance.editor.isActive('underline'),
-      isSmallCaps: instance.editor.isActive('smallCaps'),
-      isSubscript: instance.editor.isActive('subscript'),
-      isSuperscript: instance.editor.isActive('superscript'),
-    }),
-  });
-
-  return (
-    <>
-      {items.map((item, i) => {
-        return (
-          <Button
-            key={i}
-            variant="ghost"
-            size="icon"
-            className="rounded-none flex-shrink-0"
-            onClick={() => {
-              item.onClick(editor, editorState);
-            }}
-          >
-            <item.icon
-              className={cn(
-                'size-4',
-                item.isActive(editorState)
-                  ? 'text-foreground'
-                  : 'text-muted-foreground',
-              )}
-              strokeWidth={2.5}
-            />
-          </Button>
-        );
-      })}
-      <MantraSelector editor={editor} />
-      <Separator orientation="vertical" className="h-10" />
-      <GlossarySelector editor={editor} />
-      <LinkSelector editor={editor} />
-      <EndNoteSelector editor={editor} />
-    </>
-  );
-};

package/src/lib/components/editor/save-filter.spec.ts

@@ -1,94 +0,0 @@
-import { computeSavePayload } from './save-filter';
-
-describe('computeSavePayload', () => {
-  it('should return dirty UUIDs as uuidsToSave when no deletions', () => {
-    const result = computeSavePayload({
-      dirtyUuids: new Set(['a', 'b']),
-      deletedUuids: new Set(),
-    });
-
-    expect(result.uuidsToSave).toEqual(['a', 'b']);
-    expect(result.uuidsToDelete).toEqual([]);
-    expect(result.hasChanges).toBe(true);
-  });
-
-  it('should return deleted UUIDs as uuidsToDelete when no dirty', () => {
-    const result = computeSavePayload({
-      dirtyUuids: new Set(),
-      deletedUuids: new Set(['x']),
-    });
-
-    expect(result.uuidsToSave).toEqual([]);
-    expect(result.uuidsToDelete).toEqual(['x']);
-    expect(result.hasChanges).toBe(true);
-  });
-
-  it('should exclude deleted UUIDs from the save list', () => {
-    const result = computeSavePayload({
-      dirtyUuids: new Set(['a', 'b', 'c']),
-      deletedUuids: new Set(['b']),
-    });
-
-    expect(result.uuidsToSave).toEqual(['a', 'c']);
-    expect(result.uuidsToDelete).toEqual(['b']);
-    expect(result.hasChanges).toBe(true);
-  });
-
-  it('should handle a UUID that is both dirty and deleted', () => {
-    const result = computeSavePayload({
-      dirtyUuids: new Set(['a']),
-      deletedUuids: new Set(['a']),
-    });
-
-    expect(result.uuidsToSave).toEqual([]);
-    expect(result.uuidsToDelete).toEqual(['a']);
-    expect(result.hasChanges).toBe(true);
-  });
-
-  it('should report no changes when both sets are empty', () => {
-    const result = computeSavePayload({
-      dirtyUuids: new Set(),
-      deletedUuids: new Set(),
-    });
-
-    expect(result.uuidsToSave).toEqual([]);
-    expect(result.uuidsToDelete).toEqual([]);
-    expect(result.hasChanges).toBe(false);
-  });
-
-  it('should handle split scenario: original dirty + new dirty, none deleted', () => {
-    const result = computeSavePayload({
-      dirtyUuids: new Set(['original', 'new-split']),
-      deletedUuids: new Set(),
-    });
-
-    expect(result.uuidsToSave).toEqual(
-      expect.arrayContaining(['original', 'new-split']),
-    );
-    expect(result.uuidsToSave).toHaveLength(2);
-    expect(result.uuidsToDelete).toEqual([]);
-    expect(result.hasChanges).toBe(true);
-  });
-
-  it('should handle merge scenario: merged passage dirty + old passage deleted', () => {
-    const result = computeSavePayload({
-      dirtyUuids: new Set(['passage-a', 'passage-b']),
-      deletedUuids: new Set(['passage-b']),
-    });
-
-    expect(result.uuidsToSave).toEqual(['passage-a']);
-    expect(result.uuidsToDelete).toEqual(['passage-b']);
-    expect(result.hasChanges).toBe(true);
-  });
-
-  it('should handle delete-only scenario: passage deleted without edits', () => {
-    const result = computeSavePayload({
-      dirtyUuids: new Set(),
-      deletedUuids: new Set(['deleted-passage']),
-    });
-
-    expect(result.uuidsToSave).toEqual([]);
-    expect(result.uuidsToDelete).toEqual(['deleted-passage']);
-    expect(result.hasChanges).toBe(true);
-  });
-});

package/src/lib/components/editor/save-filter.ts

@@ -1,27 +0,0 @@
-/**
- * Compute which passage UUIDs should be saved and which should be deleted.
- * Passages that are both dirty and deleted are excluded from the save list
- * (they no longer exist in the editor).
- */
-export const computeSavePayload = ({
-  dirtyUuids,
-  deletedUuids,
-}: {
-  dirtyUuids: Set<string>;
-  deletedUuids: Set<string>;
-}): {
-  uuidsToSave: string[];
-  uuidsToDelete: string[];
-  hasChanges: boolean;
-} => {
-  const uuidsToDelete = Array.from(deletedUuids);
-  const uuidsToSave = Array.from(dirtyUuids).filter(
-    (uuid) => !deletedUuids.has(uuid),
-  );
-
-  return {
-    uuidsToSave,
-    uuidsToDelete,
-    hasChanges: uuidsToSave.length > 0 || uuidsToDelete.length > 0,
-  };
-};