@eightyfourthousand/lib-editing 2026.3.0

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

@@ -0,0 +1,238 @@
+import { cn } from '@eightyfourthousand/lib-utils';
+import {
+  NodeViewContent,
+  NodeViewWrapper,
+  type NodeViewProps,
+} from '@tiptap/react';
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from '@eightyfourthousand/design-system';
+import { EditorOptions } from './EditorOptions';
+import { ReaderOptions } from './ReaderOptions';
+import { memo, useCallback, useMemo, useState } from 'react';
+import { EditLabel } from './EditLabel';
+import { ShowAnnotations } from './ShowAnnotations';
+import {
+  LabeledElement,
+  useNavigation,
+  SuggestRevisionForm,
+  PANEL_FOR_SECTION,
+  TAB_FOR_SECTION,
+} from '../../../shared';
+import { Alignment, useBookmark } from '@eightyfourthousand/data-access';
+import { BookmarkIcon } from 'lucide-react';
+import { deleteEndnotePassageNode } from '../EndNoteLink/endnote-utils';
+
+const PassageComponent = (props: NodeViewProps) => {
+  const { node, editor } = props;
+
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const [dialogType, setDialogType] = useState<string>();
+  const [showRevisionForm, setShowRevisionForm] = useState(false);
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+
+  const { isBookmarked, toggle: toggleBookmark } = useBookmark(
+    node.attrs.uuid,
+    { type: 'passage', subType: node.attrs.type, tab: node.attrs.type ?? '' },
+  );
+
+  const { panels, toh, updatePanel } = useNavigation();
+
+  // Compute values directly instead of using effects to avoid re-render loops
+  const isCompare = panels.main.open && panels.main.tab === 'compare';
+
+  const { source, compareLeadingSpace } = useMemo(() => {
+    if (!isCompare || !toh) {
+      return { source: '', compareLeadingSpace: 'md:mt-1' };
+    }
+
+    const alignment = node.attrs.alignments?.[toh] as Alignment;
+    const source = alignment?.tibetan || '';
+
+    const firstChild = node.content.firstChild;
+    let compareLeadingSpace = 'md:mt-1';
+    if (firstChild?.attrs.hasLeadingSpace) {
+      compareLeadingSpace = 'md:mt-5';
+    } else if (['lineGroup', 'list'].includes(firstChild?.type.name || '')) {
+      compareLeadingSpace = 'md:mt-2';
+    }
+
+    return { source, compareLeadingSpace };
+  }, [isCompare, toh, node.attrs.alignments, node.content.firstChild]);
+
+  const references = node.attrs.references as
+    | { uuid: string; label: string | null; sort: number; type: string }[]
+    | undefined;
+
+  const handleReferenceClick = useCallback(
+    (passage: { uuid: string; type: string }) => {
+      updatePanel({
+        name: PANEL_FOR_SECTION[passage.type] || 'main',
+        state: {
+          open: true,
+          tab: TAB_FOR_SECTION[passage.type] || 'translation',
+          hash: passage.uuid,
+        },
+      });
+    },
+    [updatePanel],
+  );
+
+  const handleDeletePassage = useCallback(() => {
+    deleteEndnotePassageNode(editor, node.attrs.uuid);
+    setIsDialogOpen(false);
+  }, [node.attrs.uuid, editor]);
+
+  const className =
+    'absolute labeled -left-16 w-16 text-end hover:cursor-pointer -mt-0.25';
+  const borderClassName =
+    editor.storage.globalConfig.debug && node.attrs.invalid
+      ? 'after:content-["⚠️"] after:absolute after:top-0 after:-right-5'
+      : '';
+
+  return (
+    <NodeViewWrapper
+      id={node.attrs.uuid}
+      as="div"
+      className={cn(
+        'flex md:flex-row flex-col w-full md:gap-10 gap-2 scroll-mt-20',
+        node.attrs.toh,
+      )}
+    >
+      <div className="w-full">
+        <div
+          className={cn(
+            'relative scroll-m-20 w-full self-start',
+            borderClassName,
+          )}
+        >
+          <DropdownMenu
+            open={dropdownOpen}
+            onOpenChange={(open) => {
+              setDropdownOpen(open);
+              if (!open) setShowRevisionForm(false);
+            }}
+          >
+            {!editor.isEditable && isBookmarked && (
+              <div className="absolute -left-15.75 top-6 w-16 flex justify-end">
+                <BookmarkIcon
+                  className="text-accent size-3"
+                  fill="currentColor"
+                />
+              </div>
+            )}
+            <DropdownMenuTrigger className={className} contentEditable={false}>
+              {node.attrs.label || ''}
+            </DropdownMenuTrigger>
+            <DropdownMenuContent
+              align="start"
+              alignOffset={48}
+              className={cn(showRevisionForm ? 'w-80' : 'w-64')}
+            >
+              {showRevisionForm ? (
+                <SuggestRevisionForm
+                  toh={toh ?? ''}
+                  type={'passage'}
+                  label={node.attrs.label ?? ''}
+                  onClose={() => {
+                    setShowRevisionForm(false);
+                    setDropdownOpen(false);
+                  }}
+                />
+              ) : editor.isEditable ? (
+                <EditorOptions
+                  onSelection={(item) => {
+                    setDialogType(item);
+                    setIsDialogOpen(true);
+                  }}
+                />
+              ) : (
+                <ReaderOptions
+                  {...props}
+                  contentType={source ? 'compare' : node.attrs.type}
+                  isBookmarked={isBookmarked}
+                  toggleBookmark={toggleBookmark}
+                  onSuggestRevision={() => setShowRevisionForm(true)}
+                />
+              )}
+            </DropdownMenuContent>
+          </DropdownMenu>
+          <NodeViewContent className="passage is-editable pl-6 @c/sidebar:pl-4" />
+          {references && references.length > 0 && (
+            <div className="pl-6 @c/sidebar:pl-4 mt-1" contentEditable={false}>
+              {references.map((ref, index) => (
+                <span key={ref.uuid}>
+                  {index > 0 && ', '}
+                  <Button
+                    variant="link"
+                    className="p-0 h-6 font-normal hover:cursor-pointer"
+                    onClick={() => handleReferenceClick(ref)}
+                  >
+                    {ref.label || ref.uuid.slice(0, 6)}
+                  </Button>
+                </span>
+              ))}
+            </div>
+          )}
+          {editor.isEditable && (
+            <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+              {dialogType === 'label' && (
+                <EditLabel {...props} close={() => setIsDialogOpen(false)} />
+              )}
+              {dialogType === 'attributes' && <ShowAnnotations {...props} />}
+              {dialogType === 'delete' && (
+                <DialogContent
+                  className="max-w-readable w-full font-serif"
+                  showCloseButton={false}
+                >
+                  <DialogHeader>
+                    <DialogTitle>Delete Passage</DialogTitle>
+                    <DialogDescription>
+                      This will delete passage {node.attrs.label}
+                      {node.attrs.type === 'endnotes' &&
+                        ' and remove all links to it in the translation'}
+                      . This action cannot be undone after saving.
+                    </DialogDescription>
+                  </DialogHeader>
+                  <DialogFooter>
+                    <Button
+                      variant="outline"
+                      onClick={() => setIsDialogOpen(false)}
+                    >
+                      Cancel
+                    </Button>
+                    <Button variant="destructive" onClick={handleDeletePassage}>
+                      Delete
+                    </Button>
+                  </DialogFooter>
+                </DialogContent>
+              )}
+            </Dialog>
+          )}
+        </div>
+      </div>
+      <div
+        className={cn('w-full', source ? '' : 'hidden', compareLeadingSpace)}
+      >
+        <LabeledElement label={node.attrs.label} className="mt-0.5">
+          <div className="leading-7 font-tibetan text-lg whitespace-normal mt-1.5 pb-4 md:pb-2">
+            {source}
+          </div>
+        </LabeledElement>
+      </div>
+    </NodeViewWrapper>
+  );
+};
+
+export const Passage = memo(PassageComponent);
+
+export default Passage;

package/src/lib/components/editor/extensions/Passage/PassageNode.ts

@@ -0,0 +1,223 @@
+import { Node } from '@tiptap/core';
+import { ReactNodeViewRenderer, mergeAttributes } from '@tiptap/react';
+import { Passage } from './Passage';
+import { Selection, TextSelection } from '@tiptap/pm/state';
+import { ResolvedPos } from '@tiptap/pm/model';
+import { incrementLabel } from './label';
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    passage: {
+      normalizeLabelsAfter: () => ReturnType;
+      splitPassage: () => ReturnType;
+    };
+  }
+}
+
+const currentPassageDepth = ($from: ResolvedPos) => {
+  let passageDepth = null;
+  for (let i = $from.depth; i >= 0; i--) {
+    if ($from.node(i).type.name === 'passage') {
+      passageDepth = i;
+      break;
+    }
+  }
+
+  return passageDepth;
+};
+
+export const PassageNode = Node.create({
+  name: 'passage',
+  group: 'block',
+  content: 'block+',
+  parseHTML() {
+    return [
+      {
+        tag: 'passage',
+      },
+    ];
+  },
+  addAttributes() {
+    return {
+      label: {
+        default: null,
+        parseHTML: (element) => element.getAttribute('label'),
+        renderHTML: (attributes) => {
+          return mergeAttributes(attributes, {
+            label: attributes.label,
+          });
+        },
+      },
+      sort: {
+        default: 0,
+        parseHTML: (element) => element.getAttribute('sort'),
+        renderHTML: (attributes) => {
+          return mergeAttributes(attributes, {
+            sort: attributes.sort,
+          });
+        },
+      },
+      alignments: {
+        default: {},
+      },
+      references: {
+        default: [],
+      },
+    };
+  },
+  renderHTML({ HTMLAttributes }) {
+    return ['passage', mergeAttributes(HTMLAttributes), 0];
+  },
+  addNodeView() {
+    return ReactNodeViewRenderer(Passage);
+  },
+  addCommands() {
+    return {
+      normalizeLabelsAfter:
+        () =>
+          ({ dispatch, tr }) => {
+            if (!dispatch) return true;
+
+            // Use tr.selection so this works correctly when chained after commands
+            // like joinBackward that have already modified the document.
+            const { $from } = tr.selection;
+            const passageDepth = currentPassageDepth($from);
+            if (passageDepth === null) return false;
+
+            const passagePos = $from.start(passageDepth) - 1;
+            const currentPassage = $from.node(passageDepth);
+            const currentLabel = currentPassage.attrs.label as string;
+            if (!currentLabel) return false;
+
+            const currentParts = currentLabel.split('.');
+            const numParts = currentParts.length;
+            const currentPrefixWithDot =
+              numParts > 1 ? currentParts.slice(0, -1).join('.') + '.' : '';
+
+            const parentDepth = passageDepth - 1;
+            if (parentDepth < 0) return false;
+
+            const parentNode = $from.node(parentDepth);
+            const startIndex = $from.index(parentDepth);
+
+            let expectedNext = incrementLabel(currentLabel);
+            let pos = passagePos + currentPassage.nodeSize;
+            let changed = false;
+
+            for (let i = startIndex + 1; i < parentNode.childCount; i++) {
+              const child = parentNode.child(i);
+
+              if (child.type.name !== 'passage') {
+                pos += child.nodeSize;
+                continue;
+              }
+
+              const targetLabel = child.attrs.label as string;
+              if (!targetLabel) {
+                pos += child.nodeSize;
+                continue;
+              }
+
+              const targetParts = targetLabel.split('.');
+              if (targetParts.length < numParts) break; // shallower → out of scope
+              if (targetParts.length > numParts) {
+                // deeper → skip sub-passage
+                pos += child.nodeSize;
+                continue;
+              }
+              if (!targetLabel.startsWith(currentPrefixWithDot)) break; // different prefix
+
+              if (targetLabel === expectedNext) break; // already contiguous
+
+              tr.setNodeMarkup(pos, null, { ...child.attrs, label: expectedNext });
+              expectedNext = incrementLabel(expectedNext);
+              changed = true;
+              pos += child.nodeSize;
+            }
+
+            if (changed) dispatch(tr);
+            return true;
+          },
+      splitPassage:
+        () =>
+          ({ state, dispatch }) => {
+            const { selection } = state;
+            const { $from } = selection;
+
+            // Find the passage node that contains the current selection
+            const passageDepth = currentPassageDepth($from);
+            if (passageDepth === null) {
+              return false;
+            }
+
+            const passageNode = $from.node(passageDepth);
+            const passageStart = $from.start(passageDepth) - 1; // -1 to include the passage node itself
+            const passageEnd = $from.end(passageDepth) + 1; // +1 to include the passage node itself
+
+            // Get the position within the passage content
+            const posInPassage = $from.pos - $from.start(passageDepth);
+
+            // Split the passage content
+            const beforeContent = passageNode.content.cut(0, posInPassage);
+            const afterContent = passageNode.content.cut(posInPassage);
+
+            if (!dispatch) return true;
+
+            const tr = state.tr;
+
+            // Replace current passage with first part
+            tr.replaceWith(
+              passageStart,
+              passageEnd,
+              state.schema.nodes.passage.create(passageNode.attrs, beforeContent),
+            );
+
+            // Calculate where to insert the new passage
+            const newPassagePos = passageStart + beforeContent.size + 2; // +2 for passage wrapper
+            const oldAttrs = passageNode.attrs;
+            const attrs = {
+              ...oldAttrs,
+              uuid: crypto.randomUUID(),
+              sort: oldAttrs.sort + 1,
+              label: incrementLabel(oldAttrs.label),
+            };
+            // Insert new passage with remaining content
+            tr.insert(
+              newPassagePos,
+              state.schema.nodes.passage.create(attrs, afterContent),
+            );
+
+            // move the cursor to the new paragraph
+            const $pos = tr.doc.resolve(newPassagePos + 1);
+            const newSelection =
+              TextSelection.findFrom($pos, 1, true) || Selection.near($pos, 1);
+            if (newSelection) {
+              tr.setSelection(newSelection);
+            }
+
+            dispatch(tr);
+            return true;
+          },
+    };
+  },
+  addKeyboardShortcuts() {
+    return {
+      Backspace: () =>
+        this.editor.commands.first(({ commands }) => [
+          () => commands.undoInputRule(),
+          () => {
+            // Only intercept at the very start of a passage's content
+            const { $from } = this.editor.state.selection;
+            const passageDepth = currentPassageDepth($from);
+            if (passageDepth === null) return false;
+            const isAtStart =
+              $from.parentOffset === 0 && $from.index(passageDepth) === 0;
+            if (!isAtStart) return false;
+            const joined = commands.joinBackward();
+            if (joined) commands.normalizeLabelsAfter();
+            return joined;
+          },
+        ]),
+    };
+  },
+});

package/src/lib/components/editor/extensions/Passage/ReaderOptions.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import { PanelContentType, urlForPanelContent } from '@eightyfourthousand/data-access';
+import { DropdownMenuItem, DropdownMenuSeparator } from '@eightyfourthousand/design-system';
+import { NodeViewProps } from '@tiptap/react';
+import { BookmarkIcon, CopyIcon, MessageSquareIcon } from 'lucide-react';
+import { useCallback } from 'react';
+
+export const ReaderOptions = (
+  props: NodeViewProps & {
+    contentType: PanelContentType;
+    isBookmarked?: boolean;
+    toggleBookmark?: () => void;
+    onSuggestRevision?: () => void;
+  },
+) => {
+  const copyLink = useCallback(() => {
+    const hash = props.node.attrs.uuid;
+    const contentType = props.contentType;
+    const location = window.location;
+
+    const link = urlForPanelContent({
+      location,
+      hash,
+      contentType,
+    });
+
+    navigator.clipboard.writeText(link);
+  }, [props.node, props.contentType]);
+  return (
+    <>
+      <DropdownMenuItem onSelect={props.toggleBookmark}>
+        <BookmarkIcon className="text-ochre" />
+        {props.isBookmarked ? 'Remove Bookmark' : 'Add Bookmark'}
+      </DropdownMenuItem>
+      <DropdownMenuSeparator />
+      <DropdownMenuItem onSelect={copyLink}>
+        <CopyIcon className="text-ochre" /> Copy Link
+      </DropdownMenuItem>
+      {props.onSuggestRevision && (
+        <>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem
+            onSelect={(e) => {
+              e.preventDefault();
+              props.onSuggestRevision?.();
+            }}
+          >
+            <MessageSquareIcon className="text-ochre" /> Suggest Revision
+          </DropdownMenuItem>
+        </>
+      )}
+    </>
+  );
+};

package/src/lib/components/editor/extensions/Passage/ShowAnnotations.tsx

@@ -0,0 +1,92 @@
+'use client';
+
+import {
+  DialogContent,
+  DialogDescription,
+  DialogTitle,
+  Skeleton,
+  ToggleGroup,
+  ToggleGroupItem,
+} from '@eightyfourthousand/design-system';
+import { NodeViewProps } from '@tiptap/react';
+import { useNavigation } from '../../../shared';
+import { useEffect, useState } from 'react';
+import { Passage } from '@eightyfourthousand/data-access';
+
+const CodeBlock = ({ code }: { code: string }) => {
+  return (
+    <div className="flex-1 overflow-auto rounded-md bg-muted p-4 font-mono text-sm">
+      <pre className="whitespace-pre-wrap">
+        <code className="language-json">{code}</code>
+      </pre>
+    </div>
+  );
+};
+
+export const ShowAnnotations = (props: NodeViewProps) => {
+  const [passage, setPassage] = useState<Passage>();
+  const [toggleValue, setToggleValue] = useState<string[]>(['db', 'editor']);
+
+  const { node } = props;
+  const { fetchPassage } = useNavigation();
+
+  useEffect(() => {
+    if (passage) {
+      return;
+    }
+
+    const uuid = node.attrs.uuid;
+    if (!uuid) {
+      return;
+    }
+
+    (async () => {
+      const fetchedPassage = await fetchPassage(uuid);
+      setPassage(fetchedPassage);
+    })();
+  }, [node, passage, fetchPassage]);
+
+  return (
+    <DialogContent className="size-full flex flex-col gap-4 max-h-[calc(100vh-2rem)]">
+      <DialogTitle>Passage Details</DialogTitle>
+      <DialogDescription className="hidden">
+        All annotations and metadata for this passage
+      </DialogDescription>
+
+      <div className="text-sm flex gap-1">
+        <span className="text-navy">UUID: </span>
+        <span>{node.attrs.uuid}</span>
+        <span className="text-muted-foreground px-2">{'|'}</span>
+        <span className="text-navy">Label:</span>
+        <span>{node.attrs.label}</span>
+        <span className="text-muted-foreground px-2">{'|'}</span>
+        <span className="text-navy">Type:</span>
+        <span>{node.attrs.type}</span>
+      </div>
+
+      <ToggleGroup
+        type="multiple"
+        variant="outline"
+        defaultValue={['db', 'editor']}
+        onValueChange={setToggleValue}
+        className="mt-4"
+      >
+        <ToggleGroupItem value="db">Annotations</ToggleGroupItem>
+        <ToggleGroupItem value="editor">Editor JSON</ToggleGroupItem>
+      </ToggleGroup>
+
+      <div className="flex gap-2 flex-1 min-h-0 overflow-auto">
+        {toggleValue.includes('db') &&
+          (passage ? (
+            <CodeBlock code={JSON.stringify(passage.annotations, null, 2)} />
+          ) : (
+            <Skeleton className="size-full flex-1" />
+          ))}
+
+        {toggleValue.includes('editor') && (
+          <CodeBlock code={JSON.stringify(node, null, 2)} />
+        )}
+      </div>
+    </DialogContent>
+  );
+};

package/src/lib/components/editor/extensions/Passage/index.ts

@@ -0,0 +1 @@
+export * from './PassageNode';