@eightyfourthousand/lib-editing 2026.3.0

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

@@ -0,0 +1,33 @@
+'use client';
+
+import { useRef } from 'react';
+
+export interface DirtyStore {
+  isDirty: boolean;
+  listeners: Set<() => void>;
+  subscribe(listener: () => void): () => void;
+  setDirty(value: boolean): void;
+  getSnapshot(): boolean;
+}
+
+export const useDirtyStore = (): DirtyStore => {
+  const storeRef = useRef<DirtyStore>({
+    isDirty: false,
+    listeners: new Set<() => void>(),
+    subscribe(listener: () => void) {
+      this.listeners.add(listener);
+      return () => this.listeners.delete(listener);
+    },
+    setDirty(value: boolean) {
+      if (this.isDirty !== value) {
+        this.isDirty = value;
+        this.listeners.forEach((listener) => listener());
+      }
+    },
+    getSnapshot() {
+      return this.isDirty;
+    },
+  });
+
+  return storeRef.current;
+};

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

@@ -0,0 +1,148 @@
+'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/index.ts

@@ -0,0 +1,10 @@
+export * from './BlockEditor';
+export * from './EditorBackMatterPage';
+export * from './EditorBodyPage';
+export * from './EditorLeftPanelPage';
+export * from './EditorLayout';
+export * from './EditorProvider';
+export * from './TranslationBuilder';
+export * from './TranslationEditor';
+export * from './hooks';
+export * from './menus';

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

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

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

@@ -0,0 +1,57 @@
+'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/index.ts

@@ -0,0 +1,3 @@
+export * from './EmptyBubbleMenu';
+export * from './MainBubbleMenu';
+export * from './TranslationBubbleMenu';