@eightyfourthousand/lib-editing 2026.3.1 → 2026.4.1

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

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

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

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

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