@eightyfourthousand/lib-editing 2026.3.0

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

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

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

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