@eightyfourthousand/lib-editing 2026.3.1 → 2026.4.1

package/src/lib/components/editor/extensions/Subscript.ts

@@ -1,43 +0,0 @@
-import { mergeAttributes } from '@tiptap/react';
-import { Subscript as TipTapSubscript } from '@tiptap/extension-subscript';
-import { v4 as uuidv4 } from 'uuid';
-
-export const Subscript = TipTapSubscript.extend({
-  addAttributes() {
-    return {
-      ...this.parent?.(),
-      type: {
-        default: undefined,
-        parseHTML: (element) => element.getAttribute('data-type'),
-        renderHTML(attributes) {
-          return mergeAttributes(attributes, { 'data-type': attributes.type });
-        },
-      },
-      textStyle: {
-        default: undefined,
-        parseHTML: (element) => element.getAttribute('data-text-style'),
-        renderHTML(attributes) {
-          return mergeAttributes(attributes, {
-            'data-text-style': attributes.textStyle,
-          });
-        },
-      },
-    };
-  },
-  addCommands() {
-    const name = this.name;
-    return {
-      ...this.parent?.(),
-      setSubscript() {
-        return ({ commands }) => {
-          return commands.setMark(name, { uuid: uuidv4() });
-        };
-      },
-      toggleSubscript() {
-        return ({ commands }) => {
-          return commands.toggleMark(name, { uuid: uuidv4() });
-        };
-      },
-    };
-  },
-});

package/src/lib/components/editor/extensions/Superscript.ts

@@ -1,43 +0,0 @@
-import { mergeAttributes } from '@tiptap/react';
-import { Superscript as TipTapSuperscript } from '@tiptap/extension-superscript';
-import { v4 as uuidv4 } from 'uuid';
-
-export const Superscript = TipTapSuperscript.extend({
-  addAttributes() {
-    return {
-      ...this.parent?.(),
-      type: {
-        default: undefined,
-        parseHTML: (element) => element.getAttribute('data-type'),
-        renderHTML(attributes) {
-          return mergeAttributes(attributes, { 'data-type': attributes.type });
-        },
-      },
-      textStyle: {
-        default: undefined,
-        parseHTML: (element) => element.getAttribute('data-text-style'),
-        renderHTML(attributes) {
-          return mergeAttributes(attributes, {
-            'data-text-style': attributes.textStyle,
-          });
-        },
-      },
-    };
-  },
-  addCommands() {
-    const name = this.name;
-    return {
-      ...this.parent?.(),
-      setSuperscript() {
-        return ({ commands }) => {
-          return commands.setMark(name, { uuid: uuidv4() });
-        };
-      },
-      toggleSuperscript() {
-        return ({ commands }) => {
-          return commands.toggleMark(name, { uuid: uuidv4() });
-        };
-      },
-    };
-  },
-});

package/src/lib/components/editor/extensions/Table.ts

@@ -1,32 +0,0 @@
-import {
-  TABLE_CELL_STYLE,
-  TABLE_HEAD_STYLE,
-  TABLE_ROW_STYLE,
-  TABLE_STYLE,
-} from '@eightyfourthousand/design-system';
-import { cn } from '@eightyfourthousand/lib-utils';
-import { TableKit as TipTapTableKit } from '@tiptap/extension-table';
-
-export const TableKit = TipTapTableKit.configure({
-  table: {
-    cellMinWidth: 100,
-    HTMLAttributes: {
-      class: cn(TABLE_STYLE, 'mt-5 mb-10'),
-    },
-  },
-  tableRow: {
-    HTMLAttributes: {
-      class: TABLE_ROW_STYLE,
-    },
-  },
-  tableHeader: {
-    HTMLAttributes: {
-      class: cn(TABLE_HEAD_STYLE, 'ps-0'),
-    },
-  },
-  tableCell: {
-    HTMLAttributes: {
-      class: cn(TABLE_CELL_STYLE, 'ps-0'),
-    },
-  },
-});

package/src/lib/components/editor/extensions/TextAlign.ts

@@ -1,5 +0,0 @@
-import TextAlign from '@tiptap/extension-text-align';
-
-export default TextAlign.configure({
-  types: ['heading', 'paragraph'],
-});

package/src/lib/components/editor/extensions/TitleMetadata.ts

@@ -1,40 +0,0 @@
-import { Extension } from '@tiptap/core';
-import { v4 as uuidv4 } from 'uuid';
-
-export const TitleMetadata = Extension.create({
-  name: 'titleMetadata',
-  addGlobalAttributes() {
-    return [
-      {
-        // Apply to all node types that the editor has registered
-        types: ['enTitle', 'boTitle', 'boLtnTitle', 'saLtnTitle'],
-        attributes: {
-          uuid: {
-            default: null,
-            parseHTML: (element) => element.getAttribute('data-uuid'),
-            renderHTML: (attributes) => {
-              if (!attributes.uuid) {
-                attributes.uuid = uuidv4();
-              }
-              return { 'data-uuid': attributes.uuid };
-            },
-          },
-          type: {
-            default: null,
-            parseHTML: (element) => element.getAttribute('data-type'),
-            renderHTML: (attributes) => {
-              return { 'data-type': attributes.type };
-            },
-          },
-          language: {
-            default: null,
-            parseHTML: (element) => element.getAttribute('data-language'),
-            renderHTML: (attributes) => {
-              return { 'data-language': attributes.language };
-            },
-          },
-        },
-      },
-    ];
-  },
-});

package/src/lib/components/editor/extensions/TitleNode.ts

@@ -1,133 +0,0 @@
-import { mergeAttributes } from '@tiptap/core';
-import TiptapHeading from '@tiptap/extension-heading';
-import { H3_STYLE, H4_STYLE } from '@eightyfourthousand/design-system';
-import { cn } from '@eightyfourthousand/lib-utils';
-import { TITLE_VARIANT_STYLES } from '../../shared/titles';
-
-export const TohTitleNode = TiptapHeading.extend({
-  name: 'tohTitle',
-  renderHTML({ HTMLAttributes }: { HTMLAttributes: Record<string, unknown> }) {
-    this.options.HTMLAttributes = {
-      ...this.options.HTMLAttributes,
-      class: H3_STYLE,
-    };
-
-    return [
-      'h3',
-      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
-      0,
-    ];
-  },
-});
-
-export const BoTitleNode = TiptapHeading.extend({
-  name: 'boTitle',
-  renderHTML({ HTMLAttributes }: { HTMLAttributes: Record<string, unknown> }) {
-    this.options.HTMLAttributes = {
-      ...this.options.HTMLAttributes,
-      class: cn(H3_STYLE, TITLE_VARIANT_STYLES['bo']),
-    };
-
-    return [
-      'h3',
-      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
-      0,
-    ];
-  },
-});
-
-export const EnTitleNode = TiptapHeading.extend({
-  name: 'enTitle',
-  renderHTML({ HTMLAttributes }: { HTMLAttributes: Record<string, unknown> }) {
-    this.options.HTMLAttributes = {
-      ...this.options.HTMLAttributes,
-      class: cn(H3_STYLE, TITLE_VARIANT_STYLES['en']),
-    };
-
-    return [
-      'h3',
-      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
-      0,
-    ];
-  },
-});
-
-export const BoLtnTitleNode = TiptapHeading.extend({
-  name: 'boLtnTitle',
-  renderHTML({ HTMLAttributes }: { HTMLAttributes: Record<string, unknown> }) {
-    this.options.HTMLAttributes = {
-      ...this.options.HTMLAttributes,
-      class: cn(H4_STYLE, TITLE_VARIANT_STYLES['Bo-Ltn']),
-    };
-
-    return [
-      'h4',
-      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
-      0,
-    ];
-  },
-});
-
-export const SaLtnTitleNode = TiptapHeading.extend({
-  name: 'saLtnTitle',
-  renderHTML({ HTMLAttributes }: { HTMLAttributes: Record<string, unknown> }) {
-    this.options.HTMLAttributes = {
-      ...this.options.HTMLAttributes,
-      class: cn(H4_STYLE, TITLE_VARIANT_STYLES['Sa-Ltn']),
-    };
-
-    return [
-      'h4',
-      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
-      0,
-    ];
-  },
-});
-
-export const PiLtnTitleNode = TiptapHeading.extend({
-  name: 'piLtnTitle',
-  renderHTML({ HTMLAttributes }: { HTMLAttributes: Record<string, unknown> }) {
-    this.options.HTMLAttributes = {
-      ...this.options.HTMLAttributes,
-      class: cn(H4_STYLE, TITLE_VARIANT_STYLES['Pi-Ltn']),
-    };
-
-    return [
-      'h4',
-      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
-      0,
-    ];
-  },
-});
-
-export const ZhTitleNode = TiptapHeading.extend({
-  name: 'zhTitle',
-  renderHTML({ HTMLAttributes }: { HTMLAttributes: Record<string, unknown> }) {
-    this.options.HTMLAttributes = {
-      ...this.options.HTMLAttributes,
-      class: cn(H4_STYLE, TITLE_VARIANT_STYLES['zh']),
-    };
-
-    return [
-      'h4',
-      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
-      0,
-    ];
-  },
-});
-
-export const JaTitleNode = TiptapHeading.extend({
-  name: 'jaTitle',
-  renderHTML({ HTMLAttributes }: { HTMLAttributes: Record<string, unknown> }) {
-    this.options.HTMLAttributes = {
-      ...this.options.HTMLAttributes,
-      class: cn(H4_STYLE, TITLE_VARIANT_STYLES['ja']),
-    };
-
-    return [
-      'h4',
-      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
-      0,
-    ];
-  },
-});

package/src/lib/components/editor/extensions/TitlesNode.ts

@@ -1,102 +0,0 @@
-import { cn } from '@eightyfourthousand/lib-utils';
-import { Node, mergeAttributes } from '@tiptap/core';
-
-// TODO: make nice custom components for each titles type
-
-const BASE_STYLE =
-  'relative border-t border-border/50 pb-8 pt-12 before:absolute before:top-0 before:text-lg before:font-light before:text-slate';
-
-export const TohsNode = Node.create({
-  name: 'tohs',
-  group: 'block',
-  content: 'tohTitle+',
-  renderHTML({ HTMLAttributes }) {
-    return [
-      'div',
-      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
-        class: cn(BASE_STYLE, 'before:content-["Tohoku_Numbers"]'),
-      }),
-      0,
-    ];
-  },
-});
-
-export const MainTitlesNode = Node.create({
-  name: 'mainTitles',
-  group: 'block',
-  content:
-    'boTitle enTitle boLtnTitle saLtnTitle* piLtnTitle* zhTitle* jaTitle*',
-  renderHTML({ HTMLAttributes }) {
-    return [
-      'div',
-      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
-        class: cn(BASE_STYLE, 'before:content-["Main_Titles"]'),
-      }),
-      0,
-    ];
-  },
-});
-
-export const AlternateTitlesNode = Node.create({
-  name: 'alternateMainTitles',
-  group: 'block',
-  content:
-    'boTitle* enTitle* boLtnTitle* saLtnTitle* piLtnTitle* zhTitle* jaTitle*',
-  renderHTML({ HTMLAttributes }) {
-    return [
-      'div',
-      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
-        class: cn(BASE_STYLE, 'before:content-["Alternate_Main_Titles"]'),
-      }),
-      0,
-    ];
-  },
-});
-
-export const LongTitlesNode = Node.create({
-  name: 'longTitles',
-  group: 'block',
-  content:
-    'boTitle* enTitle* boLtnTitle* saLtnTitle* piLtnTitle* zhTitle* jaTitle*',
-  renderHTML({ HTMLAttributes }) {
-    return [
-      'div',
-      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
-        class: cn(BASE_STYLE, 'before:content-["Long_Titles"]'),
-      }),
-      0,
-    ];
-  },
-});
-
-export const OtherTitlesNode = Node.create({
-  name: 'otherTitles',
-  group: 'block',
-  content:
-    'boTitle* enTitle* boLtnTitle* saLtnTitle* piLtnTitle* zhTitle* jaTitle*',
-  renderHTML({ HTMLAttributes }) {
-    return [
-      'div',
-      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
-        class: cn(BASE_STYLE, 'before:content-["Other_Titles"]'),
-      }),
-      0,
-    ];
-  },
-});
-
-export const ShortCodesNode = Node.create({
-  name: 'shortCodes',
-  group: 'block',
-  content:
-    'boTitle* enTitle* boLtnTitle* saLtnTitle* piLtnTitle* zhTitle* jaTitle*',
-  renderHTML({ HTMLAttributes }) {
-    return [
-      'div',
-      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
-        class: cn(BASE_STYLE, 'before:content-["Short_Codes"]'),
-      }),
-      0,
-    ];
-  },
-});

package/src/lib/components/editor/extensions/Trailer.ts

@@ -1,57 +0,0 @@
-import { mergeAttributes, Node } from '@tiptap/core';
-
-declare module '@tiptap/core' {
-  interface Commands<ReturnType> {
-    trailer: {
-      /**
-       * Make block a trailer
-       */
-      setTrailer: () => ReturnType;
-      /**
-       * Toggle block a trailer
-       */
-      toggleTrailer: () => ReturnType;
-    };
-  }
-}
-
-export const Trailer = Node.create({
-  name: 'trailer',
-  priority: 1000,
-  group: 'block',
-  content: 'inline*',
-
-  parseHTML() {
-    return [
-      {
-        tag: 'p[type="trailer"]',
-      },
-    ];
-  },
-
-  renderHTML({ HTMLAttributes }) {
-    return [
-      'p',
-      mergeAttributes(HTMLAttributes, {
-        type: 'trailer',
-        class: 'italic my-4',
-      }),
-      0,
-    ];
-  },
-
-  addCommands() {
-    return {
-      setTrailer:
-        () =>
-        ({ commands }) => {
-          return commands.setNode(this.name);
-        },
-      toggleTrailer:
-        () =>
-        ({ commands }) => {
-          return commands.toggleNode(this.name, 'paragraph');
-        },
-    };
-  },
-});

package/src/lib/components/editor/extensions/TranslationDocument.ts

@@ -1,7 +0,0 @@
-import { Node } from '@tiptap/core';
-
-export default Node.create({
-  name: 'translation',
-  topNode: true,
-  content: 'passage+',
-});

package/src/lib/components/editor/extensions/TranslationMetadata.ts

@@ -1,58 +0,0 @@
-import { Extension, mergeAttributes } from '@tiptap/react';
-import { v4 as uuidv4 } from 'uuid';
-
-export default Extension.create({
-  name: 'translationMetadata',
-  addGlobalAttributes() {
-    const prohibitedNodes = ['text', 'doc'];
-    const types = this.extensions
-      .filter((extension) => !prohibitedNodes.includes(extension.name))
-      .map((extension) => extension.name);
-
-    return [
-      {
-        // Apply to all node types that the editor has registered
-        types,
-        attributes: {
-          uuid: {
-            default: null,
-            parseHTML: (element) => element.getAttribute('uuid') || uuidv4(),
-            renderHTML: (attributes) => {
-              return mergeAttributes(attributes, {
-                uuid: attributes.uuid || uuidv4(),
-              });
-            },
-          },
-          type: {
-            default: null,
-            parseHTML: (element) => element.getAttribute('type'),
-            renderHTML: (attributes) => {
-              return mergeAttributes(attributes, {
-                type: attributes.type,
-              });
-            },
-          },
-          toh: {
-            default: undefined,
-            parseHTML: (element) => element.getAttribute('toh'),
-            renderHTML: (attributes) => {
-              return mergeAttributes(attributes, {
-                toh: attributes.toh,
-              });
-            },
-          },
-          invalid: {
-            default: null,
-            parseHTML: (element) =>
-              element.getAttribute('invalid') === 'true' ? true : false,
-            renderHTML: (attributes) => {
-              return mergeAttributes(attributes, {
-                invalid: attributes.invalid,
-              });
-            },
-          },
-        },
-      },
-    ];
-  },
-});

package/src/lib/components/editor/extensions/Underline.ts

@@ -1,43 +0,0 @@
-import { mergeAttributes } from '@tiptap/react';
-import { Underline as TipTapUnderline } from '@tiptap/extension-underline';
-import { v4 as uuidv4 } from 'uuid';
-
-export const Underline = TipTapUnderline.extend({
-  addAttributes() {
-    return {
-      ...this.parent?.(),
-      type: {
-        default: undefined,
-        parseHTML: (element) => element.getAttribute('data-type'),
-        renderHTML(attributes) {
-          return mergeAttributes(attributes, { 'data-type': attributes.type });
-        },
-      },
-      textStyle: {
-        default: undefined,
-        parseHTML: (element) => element.getAttribute('data-text-style'),
-        renderHTML(attributes) {
-          return mergeAttributes(attributes, {
-            'data-text-style': attributes.textStyle,
-          });
-        },
-      },
-    };
-  },
-  addCommands() {
-    const name = this.name;
-    return {
-      ...this.parent?.(),
-      setUnderline() {
-        return ({ commands }) => {
-          return commands.setMark(name, { uuid: uuidv4() });
-        };
-      },
-      toggleUnderline() {
-        return ({ commands }) => {
-          return commands.toggleMark(name, { uuid: uuidv4() });
-        };
-      },
-    };
-  },
-});

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

@@ -1,53 +0,0 @@
-'use client';
-
-import {
-  Content,
-  Editor,
-  Extensions,
-  UseEditorOptions,
-  useEditor,
-} from '@tiptap/react';
-declare global {
-  interface Window {
-    editor: Editor | null;
-  }
-}
-
-export const useBlockEditor = ({
-  content,
-  extensions = [],
-  isEditable = true,
-  onCreate,
-  ...rest
-}: UseEditorOptions & {
-  content: Content;
-  extensions?: Extensions;
-  isEditable?: boolean;
-}) => {
-  const editor = useEditor({
-    extensions,
-    immediatelyRender: false,
-    shouldRerenderOnTransaction: false,
-    autofocus: true,
-    editable: isEditable,
-    editorProps: {
-      attributes: {
-        spellcheck: 'false',
-        autocomplete: 'off',
-        autocorrect: 'off',
-        autocapitalize: 'off',
-        class: 'min-h-full focus:outline-none',
-      },
-    },
-    onCreate: (ctx) => {
-      if (ctx.editor.isEmpty) {
-        ctx.editor.commands.setContent(content);
-        ctx.editor.commands.focus('start', { scrollIntoView: true });
-      }
-      onCreate?.(ctx);
-    },
-    ...rest,
-  });
-
-  return { editor };
-};

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

@@ -1,39 +0,0 @@
-'use client';
-
-import Image from '@tiptap/extension-image';
-import Document from '../extensions/Document';
-import Heading from '../extensions/Heading/Heading';
-import Paragraph from '../extensions/Paragraph/Paragraph';
-import { SlashCommand } from '../extensions/SlashCommand/SlashCommand';
-import { getSuggestion } from '../extensions/SlashCommand/Suggestions';
-import { Link } from '../extensions/Link';
-import Placeholder from '../extensions/Placeholder';
-import TextAlign from '../extensions/TextAlign';
-import StarterKit from '../extensions/StarterKit';
-import { Italic } from '../extensions/Italic';
-import { Underline } from '../extensions/Underline';
-import { Bold } from '../extensions/Bold';
-import { List, ListItem } from '../extensions/List';
-
-export const useDefaultExtensions = () => {
-  return {
-    extensions: [
-      Bold,
-      Document,
-      Heading,
-      Image,
-      Italic,
-      Link,
-      List,
-      ListItem,
-      Paragraph,
-      Placeholder,
-      SlashCommand.configure({
-        suggestion: getSuggestion(),
-      }),
-      StarterKit,
-      TextAlign,
-      Underline,
-    ],
-  };
-};

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

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