@eightyfourthousand/lib-editing 2026.4.0 → 2026.4.2

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

@@ -1,39 +0,0 @@
-'use client';
-
-import { Skeleton } from '@eightyfourthousand/design-system';
-import { useEffect, useState } from 'react';
-import { Passage } from '@eightyfourthousand/data-access';
-import { LabeledElement } from '../../../shared';
-
-export const EndNoteLink = ({
-  uuid,
-  fetch,
-}: {
-  uuid: string;
-  fetch?: (uuid: string) => Promise<Passage | undefined>;
-}) => {
-  const [content, setContent] = useState<Passage>();
-
-  useEffect(() => {
-    if (!uuid || !fetch) {
-      return;
-    }
-
-    (async () => {
-      const res = await fetch?.(uuid);
-      setContent(res);
-    })();
-  }, [uuid, fetch]);
-
-  return content ? (
-    <div className="p-2">
-      <LabeledElement label={content.label} contentType="endnotes">
-        {content.content}
-      </LabeledElement>
-    </div>
-  ) : (
-    <Skeleton className="p-2 h-20 w-full" />
-  );
-};
-
-export default EndNoteLink;

package/src/lib/components/editor/extensions/EndNoteLink/EndNoteLinkHoverContent.tsx

@@ -1,139 +0,0 @@
-'use client';
-
-import { Button } from '@eightyfourthousand/design-system';
-import { Editor } from '@tiptap/core';
-import {
-  AlertCircleIcon,
-  AsteriskIcon,
-  Loader2Icon,
-  UnlinkIcon,
-  Trash2Icon,
-} from 'lucide-react';
-import { useCallback, useEffect, useState } from 'react';
-import { useHoverCard } from '../../../shared/HoverCardProvider';
-import { useNavigation } from '../../../shared/NavigationContext';
-import { findEndnoteMarkByUuid, findPassageNode } from '../../util';
-import { useEditorState } from '../../EditorProvider';
-import { deleteEndnotePassageNode } from './endnote-utils';
-
-const EDITOR_UPDATE_DELAY_MS = 100;
-
-export const EndNoteLinkHoverContent = ({
-  uuid,
-  endNote,
-  editor,
-}: {
-  uuid: string;
-  endNote: string;
-  editor: Editor;
-  anchor: HTMLElement;
-}) => {
-  const [label, setLabel] = useState<string | undefined>();
-  const [labelState, setLabelState] = useState<
-    'loading' | 'loaded' | 'error'
-  >('loading');
-  const { close, setIsEditing } = useHoverCard();
-  const { getEditor } = useEditorState();
-  const { fetchEndNote } = useNavigation();
-
-  useEffect(() => {
-    if (!endNote) {
-      setLabelState('error');
-      return;
-    }
-
-    // Try the local endnotes editor first — works for unpersisted passages too
-    const endnotesEditor = getEditor('endnotes');
-    if (endnotesEditor) {
-      const found = findPassageNode(endnotesEditor, endNote);
-      if (found?.node.attrs.label) {
-        setLabel(found.node.attrs.label);
-        setLabelState('loaded');
-        return;
-      }
-    }
-
-    // Fall back to network fetch
-    setLabelState('loading');
-    fetchEndNote(endNote).then((passage) => {
-      if (passage?.label) {
-        setLabel(passage.label);
-        setLabelState('loaded');
-      } else {
-        setLabelState('error');
-      }
-    });
-  }, [endNote, fetchEndNote, getEditor]);
-
-  const removeLink = useCallback(() => {
-    setIsEditing(false);
-    close();
-
-    setTimeout(() => {
-      const range = findEndnoteMarkByUuid({ editor, uuid });
-      if (!range) {
-        console.warn('EndNoteLink mark not found in the document.');
-        return;
-      }
-
-      const { from, to, mark } = range;
-      const { tr } = editor.state;
-      tr.removeMark(from, to, mark.type);
-      const notes = (mark.attrs.notes || []).filter(
-        (note: { uuid: string }) => uuid !== note.uuid,
-      );
-      if (notes.length > 0) {
-        tr.addMark(from, to, mark.type.create({ ...mark.attrs, notes }));
-      }
-      editor.view.dispatch(tr);
-    }, EDITOR_UPDATE_DELAY_MS);
-  }, [editor, uuid, close, setIsEditing]);
-
-  const deleteEndnoteAndLink = useCallback(() => {
-    setIsEditing(false);
-    close();
-
-    setTimeout(() => {
-      const endnotesEditor = getEditor('endnotes');
-      if (endnotesEditor) {
-        deleteEndnotePassageNode(endnotesEditor, endNote);
-      }
-    }, EDITOR_UPDATE_DELAY_MS);
-  }, [endNote, getEditor, close, setIsEditing]);
-
-  return (
-    <div className="flex justify-between gap-2 p-2 w-fit max-w-80">
-      <AsteriskIcon className="text-primary my-auto size-6 [&_svg]:size-4" />
-      {labelState === 'loading' && (
-        <Loader2Icon className="text-muted-foreground my-auto size-4 animate-spin" />
-      )}
-      {labelState === 'error' && (
-        <AlertCircleIcon className="text-destructive my-auto size-4" />
-      )}
-      {labelState === 'loaded' && (
-        <span className="truncate text-muted-foreground text-sm my-auto">
-          {label}
-        </span>
-      )}
-      <span className="flex-grow" />
-      <Button
-        variant="ghost"
-        size="icon"
-        className="size-6 [&_svg]:size-4"
-        title="Remove link"
-        onClick={removeLink}
-      >
-        <UnlinkIcon className="text-destructive my-auto" />
-      </Button>
-      <Button
-        variant="ghost"
-        size="icon"
-        className="size-6 [&_svg]:size-4"
-        title="Delete endnote"
-        onClick={deleteEndnoteAndLink}
-      >
-        <Trash2Icon className="text-destructive my-auto" />
-      </Button>
-    </div>
-  );
-};

package/src/lib/components/editor/extensions/EndNoteLink/EndNoteLinkMark.ts

@@ -1,236 +0,0 @@
-import { Mark, mergeAttributes } from '@tiptap/core';
-import { v4 as uuidv4 } from 'uuid';
-import { cn } from '@eightyfourthousand/lib-utils';
-import { createUpdateAttributes, registerEditorElement } from '../../util';
-
-export interface EndNoteLinkOptions {
-  HTMLAttributes: Record<string, unknown>;
-}
-
-declare module '@tiptap/core' {
-  interface Commands<ReturnType> {
-    endNoteLink: {
-      setEndNoteLink: (endNote: string, label?: string) => ReturnType;
-      unsetEndNoteLink: () => ReturnType;
-    };
-  }
-}
-
-export const EndNoteLinkMark = Mark.create<EndNoteLinkOptions>({
-  name: 'endNoteLink',
-
-  addAttributes() {
-    return {
-      ...this.parent?.(),
-      notes: {
-        default: undefined,
-        parseHTML: (element) => element.getAttribute('notes'),
-      },
-    };
-  },
-
-  addOptions() {
-    return {
-      HTMLAttributes: {},
-    };
-  },
-
-  addMarkView() {
-    return (props) => {
-      const isEditable = props.editor.isEditable;
-      const className = isEditable
-        ? 'end-note-link select-text'
-        : 'end-note-link select-none';
-
-      const dom = document.createElement('span');
-      const contentDOM = document.createElement('span');
-      dom.appendChild(contentDOM);
-
-      // Define a visible default label when editable to indicate something
-      // _should_ be there.
-      const defaultLabel = isEditable ? '*' : '';
-      const notes: [
-        {
-          uuid: string;
-          location: string;
-          toh?: string;
-          endNote: string;
-          label?: string;
-        },
-      ] = props.mark.attrs.notes || [];
-      notes.sort((a, b) =>
-        (a.label || defaultLabel).localeCompare(b.label || defaultLabel),
-      );
-      notes.forEach(
-        (note: {
-          uuid: string;
-          location: string;
-          toh?: string;
-          endNote: string;
-          label?: string;
-        }) => {
-          const { uuid, location, toh, endNote, label } = note;
-          const isStart = location === 'start';
-
-          const endnoteDOM = document.createElement('sup');
-          const updateAttributes = createUpdateAttributes(endnoteDOM);
-          const attributes = mergeAttributes(this.options.HTMLAttributes, {
-            class: cn(className, toh, isStart ? 'me-0.75' : ''),
-            type: this.name,
-            endNote,
-            uuid,
-          });
-
-          updateAttributes(attributes);
-
-          // Register editor element for hover card detection in edit mode
-          if (isEditable) {
-            registerEditorElement(endnoteDOM, props.editor);
-          }
-
-          if (isStart) {
-            dom.insertBefore(endnoteDOM, dom.firstChild);
-          } else {
-            dom.appendChild(endnoteDOM);
-          }
-
-          const itemLabel = label?.split('.').pop() || defaultLabel;
-          endnoteDOM.textContent = itemLabel || defaultLabel;
-
-          endnoteDOM.addEventListener('click', () => {
-            if (!endNote) {
-              return;
-            }
-
-            const query = new URLSearchParams(window.location.search);
-            query.set('right', `open:endnotes:${endNote}`);
-            window.history.pushState({}, '', `?${query.toString()}`);
-          });
-        },
-      );
-
-      return {
-        dom,
-        contentDOM,
-      };
-    };
-  },
-
-  addCommands() {
-    return {
-      setEndNoteLink:
-        (endNote, label) =>
-        ({ state, dispatch }) => {
-          const { from, to, empty } = state.selection;
-          const markType = state.schema.marks[this.name];
-          if (!markType) return false;
-
-          const newNote = { uuid: uuidv4(), endNote, label };
-          const { tr } = state;
-
-          if (empty) {
-            // Cursor with no selection: append to stored/active marks
-            const existing = markType.isInSet(
-              state.storedMarks || state.doc.resolve(from).marks(),
-            );
-            const notes = existing
-              ? [...(existing.attrs.notes || []), newNote]
-              : [newNote];
-            tr.addStoredMark(markType.create({ notes }));
-            if (dispatch) dispatch(tr);
-            return true;
-          }
-
-          // Only the end of the selection matters — the endnote
-          // superscript renders there. Find the contiguous mark range
-          // that contains `to` within the same parent block.
-          const $to = state.doc.resolve(to);
-          const parent = $to.parent;
-          const parentStart = $to.start();
-
-          let markFrom = -1;
-          let markTo = -1;
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          let existingMark: any = null;
-          let found = false;
-
-          parent.forEach((child, offset) => {
-            if (found) return;
-
-            const childStart = parentStart + offset;
-            const childEnd = childStart + child.nodeSize;
-            const mark = markType.isInSet(child.marks);
-
-            if (mark && (markFrom === -1 || mark.eq(existingMark))) {
-              // Same mark (type + attrs) — extend the contiguous range
-              if (markFrom === -1) {
-                markFrom = childStart;
-                existingMark = mark;
-              }
-              markTo = childEnd;
-            } else if (markFrom !== -1) {
-              // End of a contiguous range (no mark, or different attrs)
-              if (to > markFrom && to <= markTo) {
-                found = true;
-                return;
-              }
-              if (mark) {
-                // Start a new range for a different endNoteLink mark
-                markFrom = childStart;
-                markTo = childEnd;
-                existingMark = mark;
-              } else {
-                markFrom = -1;
-                markTo = -1;
-                existingMark = null;
-              }
-            } else if (mark) {
-              markFrom = childStart;
-              markTo = childEnd;
-              existingMark = mark;
-            }
-          });
-
-          const toIsInMark =
-            existingMark && to > markFrom && to <= markTo;
-
-          if (!toIsInMark) {
-            // No existing mark at the end of the selection: create new
-            tr.addMark(from, to, markType.create({ notes: [newNote] }));
-          } else if (to === markTo) {
-            // `to` is exactly at the end of the mark — append the new
-            // note and keep the mark's original range unchanged.
-            const existingNotes = existingMark.attrs.notes || [];
-            tr.removeMark(markFrom, markTo, markType);
-            tr.addMark(
-              markFrom,
-              markTo,
-              markType.create({ notes: [...existingNotes, newNote] }),
-            );
-          } else {
-            // `to` is in the middle of the mark — split. Left side
-            // (up to `to`) gets only the new note, right side keeps
-            // the original mark unchanged.
-            tr.removeMark(markFrom, markTo, markType);
-            tr.addMark(
-              markFrom,
-              to,
-              markType.create({ notes: [newNote] }),
-            );
-            tr.addMark(to, markTo, existingMark);
-          }
-
-          if (dispatch) dispatch(tr);
-          return true;
-        },
-      unsetEndNoteLink:
-        () =>
-        ({ chain }) => {
-          return chain()
-            .unsetMark(this.name)
-            .resetAttributes(this.name, ['notes'])
-            .run();
-        },
-    };
-  },
-});