@eightyfourthousand/lib-editing 2026.3.0

package/src/lib/components/editor/extensions/GlossaryInstance/GlossaryInstanceNode.ts

@@ -0,0 +1,148 @@
+import { Mark } from '@tiptap/core';
+import { v4 as uuidv4 } from 'uuid';
+import { createMarkViewDom, registerEditorElement } from '../../util';
+import { cn } from '@eightyfourthousand/lib-utils';
+
+export interface GlossaryInstanceOptions {
+  HTMLAttributes: Record<string, unknown>;
+}
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    glossaryInstance: {
+      setGlossaryInstance: (glossary: string) => ReturnType;
+      unsetGlossaryInstance: () => ReturnType;
+    };
+  }
+}
+
+export const GlossaryInstanceNode = Mark.create<GlossaryInstanceOptions>({
+  name: 'glossaryInstance',
+
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      authority: {
+        default: undefined,
+        parseHTML(element) {
+          return element.getAttribute('authority');
+        }
+      },
+      glossary: {
+        default: undefined,
+        parseHTML(element) {
+          return element.getAttribute('glossary');
+        },
+      },
+      uuid: {
+        default: undefined,
+        parseHTML(element) {
+          return element.getAttribute('uuid');
+        },
+      },
+      isInline: { default: true },
+    };
+  },
+
+  addOptions() {
+    return {
+      HTMLAttributes: {
+        className: 'glossary-instance',
+      },
+    };
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'span[type="gloassaryInstance"]',
+        getAttrs: (dom) => {
+          const authority = (dom as HTMLElement).getAttribute('authority');
+          const glossary = (dom as HTMLElement).getAttribute('glossary');
+
+          if (!authority || !glossary) {
+            return false;
+          }
+          return null;
+        },
+      },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return [
+      'span',
+      { class: HTMLAttributes.className, type: 'glossaryInstance' },
+      0,
+    ];
+  },
+
+  addMarkView() {
+    return (props) => {
+      const isEditable = props.editor.isEditable;
+      const { dom } = createMarkViewDom({
+        ...props,
+        element: 'span',
+        className: cn('glossary-instance', props.mark.attrs.toh),
+      });
+
+      // Set attributes for HoverCardProvider identification
+      if (props.mark.attrs.uuid) {
+        dom.setAttribute('uuid', props.mark.attrs.uuid);
+      }
+      if (props.mark.attrs.authority) {
+        dom.setAttribute('authority', props.mark.attrs.authority);
+      }
+      if (props.mark.attrs.glossary) {
+        dom.setAttribute('glossary', props.mark.attrs.glossary);
+      }
+
+      // Only add type attribute and register in edit mode for hover card detection
+      if (isEditable) {
+        dom.setAttribute('type', 'glossaryInstance');
+        registerEditorElement(dom, props.editor);
+      }
+
+      dom.addEventListener('click', () => {
+        const { authority } = props.mark.attrs;
+        if (!authority) {
+          return;
+        }
+
+        const query = new URLSearchParams(window.location.search);
+        query.set('right', `open:glossary:${authority}`);
+        window.history.pushState({}, '', `?${query.toString()}`);
+      });
+
+      return {
+        dom,
+        contentDOM: dom,
+      };
+    };
+  },
+
+  addCommands() {
+    return {
+      setGlossaryInstance:
+        (glossary) =>
+          ({ chain }) => {
+            return chain()
+              .setMark(this.name)
+              .updateAttributes(this.name, {
+                glossary,
+                uuid: uuidv4(),
+              })
+              .run();
+          },
+
+      unsetGlossaryInstance:
+        () =>
+          ({ chain }) => {
+            return chain()
+              .unsetMark(this.name)
+              .resetAttributes(this.name, 'glossary')
+              .run();
+          },
+    };
+  },
+});

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

@@ -0,0 +1,71 @@
+import TiptapHeading from '@tiptap/extension-heading';
+import type { Level } from '@tiptap/extension-heading';
+import {
+  BODY_TITLE_STYLE,
+  H1_STYLE,
+  H2_STYLE,
+  H3_STYLE,
+  H4_STYLE,
+  H5_STYLE,
+  HONORIFIC_TITLE_STYLE,
+  SECTION_TITLE_STYLE,
+} from '@eightyfourthousand/design-system';
+import { createNodeViewDom } from '../../util';
+import { HTMLElementType } from 'react';
+
+const CLASS_FOR_LEVEL: Record<Level, string> = {
+  1: H1_STYLE,
+  2: H2_STYLE,
+  3: H3_STYLE,
+  4: H4_STYLE,
+  5: H5_STYLE,
+  6: H5_STYLE,
+};
+
+const CLASS_FOR_CLASS: Record<string, string> = {
+  'section-title': SECTION_TITLE_STYLE,
+  'body-title-main': BODY_TITLE_STYLE,
+  'body-title-honorific': HONORIFIC_TITLE_STYLE,
+};
+
+export const Heading = TiptapHeading.extend({
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      class: {
+        default: null,
+        parseHTML(element) {
+          return element.getAttribute('class');
+        },
+      },
+    };
+  },
+
+  addNodeView() {
+    return ({ node, editor, extension, getPos, HTMLAttributes }) => {
+      const nodeLevel = parseInt(node.attrs.level, 10) as Level;
+      const hasLevel = this.options.levels.includes(nodeLevel);
+      const level = hasLevel ? nodeLevel : this.options.levels.at(-1);
+      const element = `h${level}` as HTMLElementType;
+      const className =
+        CLASS_FOR_CLASS[node.attrs.class] || CLASS_FOR_LEVEL[nodeLevel];
+
+      const { dom } = createNodeViewDom({
+        editor,
+        getPos,
+        node,
+        extension,
+        HTMLAttributes,
+        element,
+        className,
+      });
+
+      return {
+        dom,
+        contentDOM: dom,
+      };
+    };
+  },
+});
+
+export default Heading;

package/src/lib/components/editor/extensions/HoverInputField.tsx

@@ -0,0 +1,54 @@
+import { Button, Input } from '@eightyfourthousand/design-system';
+import { CheckIcon, Trash2Icon } from 'lucide-react';
+import { useRef } from 'react';
+
+export const HoverInputField = ({
+  placeholder,
+  valueRef,
+  onSubmit,
+}: {
+  type: string;
+  attr: string;
+  valueRef: string;
+  placeholder: string;
+  onSubmit: (value?: string) => void;
+}) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  return (
+    <div className="flex space-x-1 items-center">
+      <Input
+        ref={inputRef}
+        placeholder={placeholder}
+        value={valueRef}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') {
+            e.preventDefault();
+            onSubmit(inputRef.current?.value);
+          }
+        }}
+      />
+      <Button
+        size="icon"
+        variant="ghost"
+        disabled={!!inputRef.current}
+        onClick={() => onSubmit(inputRef.current?.value)}
+      >
+        <CheckIcon />
+      </Button>
+      <Button
+        variant="ghost"
+        size="icon"
+        type="button"
+        onClick={() => {
+          if (inputRef.current) {
+            inputRef.current.value = '';
+          }
+          onSubmit();
+        }}
+      >
+        <Trash2Icon className="text-destructive" />
+      </Button>
+    </div>
+  );
+};

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

@@ -0,0 +1,18 @@
+import Image from '@tiptap/extension-image';
+import { v4 as uuidv4 } from 'uuid';
+
+export default Image.extend({
+  addCommands() {
+    return {
+      setImage:
+        (options) =>
+        ({ commands }) => {
+          return commands.insertContent({
+            type: this.name,
+            attrs: options,
+            uuid: uuidv4(),
+          });
+        },
+    };
+  },
+});

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

@@ -0,0 +1,103 @@
+import { Extension, mergeAttributes } from '@tiptap/core';
+import { v4 as uuidv4 } from 'uuid';
+
+export interface IndentOptions {
+  types: string[];
+  defaultHasIndent: boolean;
+}
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    indent: {
+      /**
+       * Add an indent
+       */
+      setIndent: () => ReturnType;
+      /**
+       * Remove an indent
+       */
+      unsetIndent: () => ReturnType;
+
+      /**
+       * Toggle an indent
+       */
+      toggleIndent: () => ReturnType;
+    };
+  }
+}
+
+export const Indent = Extension.create<IndentOptions>({
+  name: 'indent',
+  addOptions() {
+    return {
+      types: ['paragraph', 'lineGroup', 'list', 'blockquote'],
+      defaultHasIndent: false,
+    };
+  },
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          hasIndent: {
+            default: this.options.defaultHasIndent,
+            parseHTML: (element) => element.className.includes('pl-8'),
+            renderHTML: (attributes) => {
+              if (!attributes.hasIndent) {
+                return {};
+              }
+              return mergeAttributes(attributes, { class: 'pl-8' });
+            },
+          },
+          indentUuid: {
+            default: undefined,
+            parseHTML: (element) =>
+              element.getAttribute('data-indent-uuid') || undefined,
+            renderHTML: (attributes) => {
+              if (!attributes.indentUuid) {
+                return {};
+              }
+              return {
+                'data-indent-uuid': attributes.indentUuid,
+              };
+            },
+          },
+        },
+      },
+    ];
+  },
+
+  addCommands() {
+    return {
+      setIndent:
+        () =>
+        ({ commands }) => {
+          return this.options.types
+            .map((type) =>
+              commands.updateAttributes(type, {
+                hasIndent: true,
+                indentUuid: uuidv4(),
+              }),
+            )
+            .every((response) => response);
+        },
+      unsetIndent:
+        () =>
+        ({ commands }) => {
+          return this.options.types
+            .map((type) =>
+              commands.resetAttributes(type, ['hasIndent', 'indentUuid']),
+            )
+            .every((response) => response);
+        },
+      toggleIndent:
+        () =>
+        ({ editor, commands }) => {
+          if (editor.isActive({ hasIndent: true })) {
+            return commands.unsetIndent();
+          }
+          return commands.setIndent();
+        },
+    };
+  },
+});

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

@@ -0,0 +1,173 @@
+import { Mark, mergeAttributes } from '@tiptap/core';
+import { v4 as uuidv4 } from 'uuid';
+import { createMarkViewDom, registerEditorElement } from '../../util';
+import {
+  PANEL_FOR_SECTION,
+  TAB_FOR_SECTION,
+} from '../../../shared/types';
+import { cn } from '@eightyfourthousand/lib-utils';
+import { LINK_STYLE } from '@eightyfourthousand/design-system';
+
+export interface InternalLinkOptions {
+  HTMLAttributes: Record<string, unknown>;
+}
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    internalLink: {
+      setInternalLink: (entity: string, type: string) => ReturnType;
+      unsetInternalLink: () => ReturnType;
+    };
+  }
+}
+
+export const InternalLink = Mark.create<InternalLinkOptions>({
+  name: 'internalLink',
+  addAttributes() {
+    return {
+      entity: {
+        default: undefined,
+        parseHTML: (element) => element.getAttribute('entity'),
+      },
+      type: {
+        default: undefined,
+        parseHTML: (element) => element.getAttribute('entity-type'),
+      },
+      href: {
+        default: undefined,
+        parseHTML: (element) => element.getAttribute('href'),
+      },
+      uuid: {
+        default: undefined,
+        parseHTML: (element) => element.getAttribute('uuid'),
+      },
+      isSameWork: {
+        default: undefined,
+        parseHTML: (element) =>
+          element.getAttribute('data-same-work') === 'true',
+      },
+      subtype: {
+        default: undefined,
+        parseHTML: (element) => element.getAttribute('data-subtype'),
+      },
+      linkToh: {
+        default: undefined,
+        parseHTML: (element) => element.getAttribute('data-link-toh'),
+      },
+    };
+  },
+  addOptions() {
+    return {
+      HTMLAttributes: {},
+    };
+  },
+  parseHTML() {
+    return [
+      {
+        tag: 'a[type="internalLink"]',
+      },
+    ];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return [
+      'a',
+      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
+      0,
+    ];
+  },
+  addMarkView() {
+    return (props) => {
+      const isEditable = props.editor.isEditable;
+      const { dom } = createMarkViewDom({
+        ...props,
+        element: 'span',
+        className: cn(LINK_STYLE, props.mark.attrs.toh),
+      });
+
+      const { isSameWork, subtype, entity, type: linkType, linkToh } =
+        props.mark.attrs;
+
+      dom.addEventListener('click', (e) => {
+        e.preventDefault();
+        if (!isSameWork) {
+          // Cross-work links open in a new tab
+          const href = props.mark.attrs.href || '#';
+          window.open(href, '_blank');
+          return
+        }
+        const query = new URLSearchParams(window.location.search);
+
+        if (linkToh) {
+          query.set('toh', linkToh);
+        }
+
+        switch (linkType) {
+          case 'bibliography':
+            query.set('right', `open:bibliography:${entity}`);
+            break;
+          case 'glossary':
+            query.set('right', `open:glossary:${entity}`);
+            break;
+          case 'passage': {
+            const panel =
+              PANEL_FOR_SECTION[subtype] || 'main';
+            const tab =
+              TAB_FOR_SECTION[subtype] || 'translation';
+            query.set(panel, `open:${tab}:${entity}`);
+          }
+            break;
+          default:
+            break;
+        }
+
+        window.history.pushState({}, '', `?${query.toString()}`);
+      });
+
+      // Set attributes for HoverCardProvider identification
+      if (props.mark.attrs.uuid) {
+        dom.setAttribute('uuid', props.mark.attrs.uuid);
+      }
+      if (entity) {
+        dom.setAttribute('entity', entity);
+      }
+      if (linkType) {
+        dom.setAttribute('entity-type', linkType);
+      }
+
+      // Only add type attribute in edit mode for hover card detection
+      if (isEditable) {
+        dom.setAttribute('type', 'internalLink');
+        registerEditorElement(dom, props.editor);
+      }
+
+      return {
+        dom,
+        contentDOM: dom,
+      };
+    };
+  },
+  addCommands() {
+    return {
+      setInternalLink:
+        (entity: string, type: string) =>
+          ({ chain }) => {
+            return chain()
+              .setMark(this.name, {
+                entity,
+                type,
+                uuid: uuidv4(),
+                href: `/entity/${type}/${entity}`,
+              })
+              .run();
+          },
+      unsetInternalLink:
+        () =>
+          ({ chain }) => {
+            return chain()
+              .unsetMark(this.name)
+              .resetAttributes(this.name, ['entity', 'type'])
+              .run();
+          },
+    };
+  },
+});

package/src/lib/components/editor/extensions/InternalLink/InternalLinkHoverContent.tsx

@@ -0,0 +1,137 @@
+import { Button } from '@eightyfourthousand/design-system';
+import { Editor } from '@tiptap/core';
+import { ChevronRightIcon, PencilIcon, Trash2Icon } from 'lucide-react';
+import { useCallback, useState } from 'react';
+import { InternalLinkInput } from './InternalLinkInput';
+import { findMarkByUuid } from '../../util';
+import { useHoverCard } from '../../../shared/HoverCardProvider';
+
+const EDITOR_UPDATE_DELAY_MS = 100;
+
+export const InternalLinkHoverContent = ({
+  uuid,
+  entityType,
+  entity,
+  editor,
+  anchor,
+}: {
+  uuid: string;
+  entityType: string;
+  entity: string;
+  editor: Editor;
+  anchor: HTMLElement;
+}) => {
+  const [isEditing, setIsEditingLocal] = useState(false);
+  const { close, setIsEditing: setIsEditingContext } = useHoverCard();
+
+  const setIsEditing = useCallback(
+    (editing: boolean) => {
+      setIsEditingLocal(editing);
+      setIsEditingContext(editing);
+    },
+    [setIsEditingContext],
+  );
+
+  const deleteLink = useCallback(() => {
+    setIsEditing(false);
+    close();
+
+    setTimeout(() => {
+      const range = findMarkByUuid({ editor, uuid, markType: 'internalLink' });
+      if (!range) {
+        console.warn('InternalLink mark not found in the document.');
+        return;
+      }
+
+      const { from, to, mark } = range;
+      const { tr } = editor.state;
+      tr.removeMark(from, to, mark.type);
+      editor.view.dispatch(tr);
+    }, EDITOR_UPDATE_DELAY_MS);
+  }, [editor, uuid, close, setIsEditing]);
+
+  const updateValues = useCallback(
+    (newType: string, newEntity: string) => {
+      setIsEditing(false);
+      close();
+
+      setTimeout(() => {
+        const range = findMarkByUuid({
+          editor,
+          uuid,
+          markType: 'internalLink',
+        });
+        if (!range) {
+          console.warn('InternalLink mark not found in the document.');
+          return;
+        }
+
+        const { from, to, mark } = range;
+        const newHref = `/entity/${newType}/${newEntity}`;
+        const { tr } = editor.state;
+        tr.removeMark(from, to, mark.type);
+        tr.addMark(
+          from,
+          to,
+          mark.type.create({
+            ...mark.attrs,
+            type: newType,
+            entity: newEntity,
+            href: newHref,
+          }),
+        );
+        editor.view.dispatch(tr);
+
+        // Update the DOM attributes directly for immediate feedback
+        anchor.setAttribute('entity-type', newType);
+        anchor.setAttribute('entity', newEntity);
+        anchor.setAttribute('href', newHref);
+      }, EDITOR_UPDATE_DELAY_MS);
+    },
+    [editor, uuid, anchor, close, setIsEditing],
+  );
+
+  return (
+    <div className="flex justify-between gap-2 p-2 w-fit max-w-80">
+      {isEditing ? (
+        <InternalLinkInput
+          type={entityType}
+          uuid={entity}
+          onSubmit={(type, entityVal) => {
+            if (type && entityVal) {
+              updateValues(type, entityVal);
+            } else {
+              deleteLink();
+            }
+            setIsEditing(false);
+          }}
+        />
+      ) : (
+        <>
+          <span className="text-primary text-sm my-auto">{entityType}</span>
+          <ChevronRightIcon className="my-auto size-4" />
+          <span className="truncate text-muted-foreground text-sm my-auto">
+            {entity}
+          </span>
+          <span className="flex-grow" />
+          <Button
+            variant="ghost"
+            size="icon"
+            className="size-6 [&_svg]:size-4"
+            onClick={() => setIsEditing(true)}
+          >
+            <PencilIcon className="text-primary my-auto" />
+          </Button>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="size-6 [&_svg]:size-4"
+            onClick={deleteLink}
+          >
+            <Trash2Icon className="text-destructive my-auto" />
+          </Button>
+        </>
+      )}
+    </div>
+  );
+};