@eightyfourthousand/lib-editing 2026.3.1 → 2026.4.1

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

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

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

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

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

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

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

@@ -1,137 +0,0 @@
-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>
-  );
-};