@eightyfourthousand/lib-editing 2026.3.0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,4 @@
+export * from './useBlockEditor';
+export * from './useDefaultExtensions';
+export * from './useTranslationExtensions';
+export * from './useDirtyStore';

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

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

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