@eightyfourthousand/lib-editing 2026.4.0 → 2026.4.1

package/src/lib/components/shared/HoverCardProvider.tsx

@@ -1,407 +0,0 @@
-'use client';
-
-import {
-  DEFAULT_HOVER_CARD_CLOSE_DELAY,
-  DEFAULT_HOVER_CARD_OPEN_DELAY,
-} from '@eightyfourthousand/design-system';
-import { isInBounds } from '@eightyfourthousand/lib-utils';
-import {
-  createContext,
-  ReactNode,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-import { TranslationHoverCard } from './TranslationHoverCard';
-import { GlossaryInstance } from '../editor/extensions/GlossaryInstance/GlossaryInstance';
-import { EndNoteLinkHoverContent } from '../editor/extensions/EndNoteLink/EndNoteLinkHoverContent';
-import { LinkHoverContent } from '../editor/extensions/Link/LinkHoverContent';
-import { InternalLinkHoverContent } from '../editor/extensions/InternalLink/InternalLinkHoverContent';
-import { MentionHoverContent } from '../editor/extensions/Mention/MentionHoverContent';
-import { Editor } from '@tiptap/core';
-import { getEditorForElement } from '../editor/util';
-
-export type HoverCardType =
-  | 'glossaryInstance'
-  | 'endNoteLink'
-  | 'link'
-  | 'internalLink'
-  | 'mention';
-
-const TYPE_ATTRIBUTE_MAP: Record<HoverCardType, string> = {
-  glossaryInstance: 'uuid',
-  endNoteLink: 'uuid',
-  link: 'uuid',
-  internalLink: 'uuid',
-  mention: 'uuid',
-};
-
-export interface HoverCardState {
-  anchor: HTMLElement | null;
-  uuid?: string;
-  cardType?: HoverCardType;
-  editor?: Editor;
-  isEditing: boolean;
-  setAnchor: (anchor: HTMLElement | null) => void;
-  setUuid: (uuid?: string) => void;
-  setCard: (card: HTMLElement | null) => void;
-  setIsEditing: (isEditing: boolean) => void;
-  close: () => void;
-}
-
-export const HoverCardContext = createContext<HoverCardState>({
-  anchor: null,
-  isEditing: false,
-  setAnchor: () => {
-    throw new Error('setAnchor function not implemented');
-  },
-  setCard: () => {
-    throw new Error('setCard function not implemented');
-  },
-  setUuid: () => {
-    throw new Error('setUuid function not implemented');
-  },
-  setIsEditing: () => {
-    throw new Error('setIsEditing function not implemented');
-  },
-  close: () => {
-    throw new Error('close function not implemented');
-  },
-});
-
-export const HoverCardProvider = ({
-  openDelay = DEFAULT_HOVER_CARD_OPEN_DELAY,
-  closeDelay = DEFAULT_HOVER_CARD_CLOSE_DELAY,
-  typeMap = TYPE_ATTRIBUTE_MAP,
-  children,
-}: {
-  closeDelay?: number;
-  openDelay?: number;
-  typeMap?: Record<string, string>;
-  children: ReactNode;
-}) => {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const timeoutRef = useRef<NodeJS.Timeout>(null);
-
-  // Get editor for anchor element using the WeakMap registry
-  const getEditorForAnchor = useCallback(
-    (anchorEl: HTMLElement): Editor | undefined => {
-      const editor = getEditorForElement(anchorEl);
-      return editor?.isEditable ? editor : undefined;
-    },
-    [],
-  );
-
-  const [anchor, setAnchor] = useState<HTMLElement | null>(null);
-  const [card, setCard] = useState<HTMLElement | null>(null);
-  const [uuid, setUuid] = useState<string>();
-  const [cardType, setCardType] = useState<HoverCardType>();
-  const [isHoveringAnchor, setIsHoveringAnchor] = useState(false);
-  const [isHoveringCard, setIsHoveringCard] = useState(false);
-  const [isEditing, setIsEditing] = useState(false);
-
-  // Get the editor for the current anchor
-  const editor = useMemo(() => {
-    if (!anchor) return undefined;
-    return getEditorForAnchor(anchor);
-  }, [anchor, getEditorForAnchor]);
-
-  const closeWithDelay = useCallback(() => {
-    timeoutRef.current = setTimeout(() => {
-      setAnchor(null);
-      setUuid(undefined);
-      setCardType(undefined);
-    }, closeDelay);
-  }, [closeDelay]);
-
-  const closeImmediately = useCallback(() => {
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
-    }
-    setAnchor(null);
-    setUuid(undefined);
-    setCardType(undefined);
-    setIsHoveringAnchor(false);
-    setIsHoveringCard(false);
-    setIsEditing(false);
-  }, []);
-
-  useEffect(() => {
-    const editorEl = containerRef.current;
-    if (!editorEl) {
-      return;
-    }
-    const types = Object.keys(typeMap)
-      .map((type) => `[type="${type}"]`)
-      .join(', ');
-
-    const handleMouseOver = (event: MouseEvent) => {
-      if (isHoveringAnchor || isHoveringCard) {
-        return;
-      }
-
-      const target = (event.target as HTMLDivElement).closest<HTMLElement>(
-        types,
-      );
-
-      if (!target) {
-        return;
-      }
-
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
-      }
-
-      timeoutRef.current = setTimeout(() => {
-        const typeAttr = target.getAttribute('type');
-        if (!typeAttr) {
-          return;
-        }
-
-        const attribute = typeMap[typeAttr];
-
-        if (!attribute) {
-          return;
-        }
-
-        const uuidAttr = target.getAttribute(attribute);
-
-        setCardType(typeAttr as HoverCardType);
-        if (uuidAttr) {
-          setIsHoveringAnchor(true);
-          setAnchor(target);
-          setUuid(uuidAttr);
-        }
-      }, openDelay);
-    };
-
-    const handleMouseLeave = (event: MouseEvent) => {
-      const target = (event.target as HTMLDivElement).closest<HTMLElement>(
-        types,
-      );
-
-      if (!target) {
-        return;
-      }
-
-      setIsHoveringAnchor(false);
-    };
-
-    const handleEscape = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        closeImmediately();
-      }
-    };
-
-    editorEl.addEventListener('mouseenter', handleMouseOver, true);
-    editorEl.addEventListener('mouseleave', handleMouseLeave, true);
-    document.addEventListener('keydown', handleEscape, true);
-
-    return () => {
-      editorEl.removeEventListener('mouseenter', handleMouseOver, true);
-      editorEl.removeEventListener('mouseleave', handleMouseLeave, true);
-      document.removeEventListener('keydown', handleEscape, true);
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
-      }
-    };
-  }, [
-    containerRef,
-    typeMap,
-    openDelay,
-    closeDelay,
-    isHoveringAnchor,
-    isHoveringCard,
-    closeImmediately,
-  ]);
-
-  useEffect(() => {
-    const handleMouseMove = (evt: MouseEvent) => {
-      if (!card) {
-        return;
-      }
-
-      const inCardBounds = isInBounds(evt, card);
-      const inAnchorBounds = anchor ? isInBounds(evt, anchor) : false;
-      if (inCardBounds) {
-        evt.stopPropagation();
-      }
-
-      setIsHoveringAnchor(inAnchorBounds);
-      setIsHoveringCard(inCardBounds);
-    };
-
-    document.addEventListener('mousemove', handleMouseMove);
-
-    return () => {
-      document.removeEventListener('mousemove', handleMouseMove);
-    };
-  }, [card, anchor, closeDelay]);
-
-  useEffect(() => {
-    if (!card) {
-      return;
-    }
-
-    const stopPropagation = (e: Event) => {
-      e.stopPropagation();
-    };
-
-    // Stop all mouse events from propagating
-    const events = ['mouseenter', 'mouseleave', 'mouseover', 'mouseout'];
-
-    events.forEach((eventType) => {
-      card.addEventListener(eventType, stopPropagation, true);
-    });
-
-    return () => {
-      events.forEach((eventType) => {
-        card.removeEventListener(eventType, stopPropagation, true);
-      });
-    };
-  }, [card]);
-
-  useEffect(() => {
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
-    }
-
-    // Don't close while editing or hovering
-    if (isEditing || isHoveringAnchor || isHoveringCard) {
-      return;
-    }
-
-    closeWithDelay();
-  }, [isEditing, isHoveringAnchor, isHoveringCard, closeDelay, closeWithDelay]);
-
-  // Handle click outside to dismiss the hover card
-  useEffect(() => {
-    if (!card && !anchor) {
-      return;
-    }
-
-    const handleClickOutside = (event: MouseEvent) => {
-      const target = event.target as HTMLElement;
-
-      // Check if click is inside the card or anchor
-      const isInsideCard = card?.contains(target);
-      const isInsideAnchor = anchor?.contains(target);
-
-      if (!isInsideCard && !isInsideAnchor) {
-        closeImmediately();
-      }
-    };
-
-    document.addEventListener('mousedown', handleClickOutside);
-
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, [card, anchor, closeImmediately]);
-
-  const renderCard = (uuid: string, type: string, anchorEl: HTMLElement) => {
-    if (!editor) return null;
-
-    if (type === 'glossaryInstance') {
-      const glossary = anchorEl.getAttribute('glossary') || '';
-      return (
-        <GlossaryInstance
-          uuid={uuid}
-          glossary={glossary}
-          editor={editor}
-          anchor={anchorEl}
-        />
-      );
-    }
-    if (type === 'endNoteLink') {
-      const endNote = anchorEl.getAttribute('endNote') || '';
-      return (
-        <EndNoteLinkHoverContent
-          uuid={uuid}
-          endNote={endNote}
-          editor={editor}
-          anchor={anchorEl}
-        />
-      );
-    }
-    if (type === 'link') {
-      const href = anchorEl.getAttribute('href') || '';
-      return (
-        <LinkHoverContent
-          uuid={uuid}
-          href={href}
-          editor={editor}
-          anchor={anchorEl}
-        />
-      );
-    }
-    if (type === 'internalLink') {
-      const entityType = anchorEl.getAttribute('entity-type') || '';
-      const entity = anchorEl.getAttribute('entity') || '';
-      return (
-        <InternalLinkHoverContent
-          uuid={uuid}
-          entityType={entityType}
-          entity={entity}
-          editor={editor}
-          anchor={anchorEl}
-        />
-      );
-    }
-    if (type === 'mention') {
-      const entityType = anchorEl.getAttribute('entity-type') || '';
-      const entity = anchorEl.getAttribute('entity') || '';
-      return (
-        <MentionHoverContent
-          uuid={uuid}
-          entityType={entityType}
-          entity={entity}
-          editor={editor}
-          anchor={anchorEl}
-        />
-      );
-    }
-    return null;
-  };
-
-  // Only show hover card when editor is available (editing mode only)
-  const shouldShowCard = anchor && uuid && cardType && editor;
-
-  return (
-    <HoverCardContext.Provider
-      value={{
-        anchor,
-        uuid,
-        cardType,
-        editor,
-        isEditing,
-        setAnchor,
-        setCard,
-        setUuid,
-        setIsEditing,
-        close: closeImmediately,
-      }}
-    >
-      <div className="size-full" ref={containerRef}>
-        {children}
-      </div>
-      {shouldShowCard && (
-        <TranslationHoverCard className="p-0" anchor={anchor} setCard={setCard}>
-          {renderCard(uuid, cardType, anchor)}
-        </TranslationHoverCard>
-      )}
-    </HoverCardContext.Provider>
-  );
-};
-
-export const useHoverCard = () => {
-  const context = useContext(HoverCardContext);
-  if (!context) {
-    throw new Error('useHoverCard must be used within a HoverCardProvider');
-  }
-
-  return context;
-};

package/src/lib/components/shared/Imprint.tsx

@@ -1,24 +0,0 @@
-import { Imprint as ImprintData } from '@eightyfourthousand/data-access';
-import { TranslationSkeleton } from './TranslationSkeleton';
-import { SectionTitle } from '@eightyfourthousand/design-system';
-
-export const Imprint = ({ imprint }: { imprint?: ImprintData }) => {
-  if (!imprint) {
-    return <TranslationSkeleton />;
-  }
-
-  const { license, version, publishYear, publisherStatement } = imprint;
-
-  return (
-    <div id="imprint">
-      <SectionTitle>Imprint</SectionTitle>
-      <div className="flex flex-col mt-4 mx-auto max-w-xl gap-5 text-center text-xs text-foreground/75">
-        {publishYear && <p>First published {publishYear}</p>}
-        {version && <p>Current version v {version}</p>}
-        {publisherStatement && <p>{publisherStatement}</p>}
-        {license.description && <p>{license.description}</p>}
-        <p>Generated by the Scholar's Room</p>
-      </div>
-    </div>
-  );
-};

package/src/lib/components/shared/LabeledElement.tsx

@@ -1,133 +0,0 @@
-'use client';
-
-import {
-  PanelContentType,
-  urlForPanelContent,
-  useBookmark,
-} from '@eightyfourthousand/data-access';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '@eightyfourthousand/design-system';
-import { cn } from '@eightyfourthousand/lib-utils';
-import { BookmarkIcon, CopyIcon, MessageSquareIcon } from 'lucide-react';
-import { ReactNode, useCallback, useState } from 'react';
-import { SuggestRevisionForm } from './SuggestRevisionForm';
-import { useNavigation } from './NavigationProvider';
-
-export const LabeledElement = ({
-  label,
-  id = undefined,
-  className,
-  contentType,
-  children,
-}: {
-  label?: string;
-  id?: string;
-  className?: string;
-  contentType?: PanelContentType;
-  children: ReactNode;
-}) => {
-  const { isBookmarked, toggle } = useBookmark(id ?? '', {
-    type: contentType ?? '',
-    tab: contentType ?? '',
-  });
-
-  const { toh } = useNavigation();
-  const [showRevisionForm, setShowRevisionForm] = useState(false);
-  const [dropdownOpen, setDropdownOpen] = useState(false);
-
-  const copyLink = useCallback(() => {
-    if (!id) {
-      return;
-    }
-
-    const link = urlForPanelContent({
-      location: window.location,
-      hash: id,
-      contentType,
-    });
-    navigator.clipboard.writeText(link);
-  }, [id, contentType]);
-
-  return (
-    <div id={id} className="relative scroll-mt-20">
-      {id ? (
-        <DropdownMenu
-          open={dropdownOpen}
-          onOpenChange={(open) => {
-            setDropdownOpen(open);
-            if (!open) setShowRevisionForm(false);
-          }}
-        >
-          {isBookmarked && (
-            <div className="absolute -left-15.75 top-5 w-16 flex justify-end">
-              <BookmarkIcon
-                className="text-accent size-3"
-                fill="currentColor"
-              />
-            </div>
-          )}
-          <DropdownMenuTrigger
-            className={cn(
-              'absolute labeled -left-16 w-16 text-end hover:cursor-pointer whitespace-pre-line leading-4',
-              className,
-            )}
-          >
-            {label || ''}
-          </DropdownMenuTrigger>
-          <DropdownMenuContent
-            align="start"
-            alignOffset={48}
-            className={cn(showRevisionForm ? 'w-80' : 'w-64')}
-          >
-            {showRevisionForm ? (
-              <SuggestRevisionForm
-                toh={toh ?? ''}
-                type={contentType ?? ''}
-                label={label ?? ''}
-                onClose={() => {
-                  setShowRevisionForm(false);
-                  setDropdownOpen(false);
-                }}
-              />
-            ) : (
-              <>
-                <DropdownMenuItem onSelect={toggle}>
-                  <BookmarkIcon className="text-primary" />
-                  {isBookmarked ? 'Remove Bookmark' : 'Add Bookmark'}
-                </DropdownMenuItem>
-                <DropdownMenuSeparator />
-                <DropdownMenuItem onSelect={copyLink}>
-                  <CopyIcon className="text-primary" /> Copy Link
-                </DropdownMenuItem>
-                <DropdownMenuSeparator />
-                <DropdownMenuItem
-                  onSelect={(e) => {
-                    e.preventDefault();
-                    setShowRevisionForm(true);
-                  }}
-                >
-                  <MessageSquareIcon className="text-primary" /> Suggest Revision
-                </DropdownMenuItem>
-              </>
-            )}
-          </DropdownMenuContent>
-        </DropdownMenu>
-      ) : (
-        <div
-          className={cn(
-            'absolute labeled -left-16 w-16 text-end  whitespace-pre-line leading-4',
-            className,
-          )}
-        >
-          {label || ''}
-        </div>
-      )}
-      <div className="passage pl-6 @c/sidebar:pl-4">{children}</div>
-    </div>
-  );
-};

package/src/lib/components/shared/LeftPanel.tsx

@@ -1,65 +0,0 @@
-'use client';
-
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@eightyfourthousand/design-system';
-import { TabName } from './types';
-import { useEffect } from 'react';
-import { useNavigation } from './NavigationProvider';
-import { Toc, Work } from '@eightyfourthousand/data-access';
-import { TableOfContents } from './TableOfContents';
-import { useTohToggle } from './hooks/useTohToggle';
-import { cn, useIsMobile } from '@eightyfourthousand/lib-utils';
-
-export const LeftPanel = ({
-  toc,
-  work,
-  limitWhenNoTranslation = false,
-}: {
-  toc?: Toc;
-  work: Work;
-  limitWhenNoTranslation?: boolean;
-}) => {
-  const { panels, toh, updatePanel, setToh } = useNavigation();
-  const isMobile = useIsMobile();
-  useTohToggle({ work, toh });
-
-  useEffect(() => {
-    const currentToh = toh || work.toh[0] || '';
-    setToh(currentToh);
-  }, [toh, work.toh, setToh]);
-
-  return (
-    <Tabs
-      value={panels.left.tab || 'toc'}
-      onValueChange={(tabName) => {
-        const tab = tabName as TabName;
-        updatePanel({ name: 'left', state: { open: true, tab } });
-      }}
-      defaultValue="toc"
-      className="w-full gap-0 @container/sidebar h-full flex flex-col"
-    >
-      <div className="sticky top-0 pt-1 pb-2 z-10 w-full rounded-t bg-background overflow-x-auto text-center">
-        <TabsList
-          className={cn(
-            'w-fit px-6 inline-flex mx-auto rounded-none',
-            isMobile && 'ps-12',
-          )}
-        >
-          <TabsTrigger value="toc">Table of Contents</TabsTrigger>
-        </TabsList>
-      </div>
-      <div className="flex-1 min-h-0">
-        <div className="overflow-auto h-full bg-surface">
-          <div className="rounded px-2 pb-8 max-w-readable mx-auto">
-            <TabsContent value="toc" className="px-2 mt-1.5">
-              <TableOfContents
-                toc={toc}
-                work={work}
-                limitWhenNoTranslation={limitWhenNoTranslation}
-              />
-            </TabsContent>
-          </div>
-        </div>
-      </div>
-    </Tabs>
-  );
-};

package/src/lib/components/shared/NavigationContext.ts

@@ -1,64 +0,0 @@
-'use client';
-
-import type {
-  BibliographyEntryItem,
-  GlossaryTermInstance,
-  Imprint,
-  Passage,
-  TohokuCatalogEntry,
-  Work,
-} from '@eightyfourthousand/data-access';
-import { createContext, useContext } from 'react';
-import { PanelName, PanelsState, PanelState } from './types';
-
-export interface NavigationState {
-  uuid: string;
-  imprint?: Imprint;
-  panels: PanelsState;
-  toh?: TohokuCatalogEntry;
-  showOuterContent: boolean;
-  hasTranslationContent: boolean;
-  setToh: (toh: TohokuCatalogEntry) => void;
-  setShowOuterContent: (withTitles: boolean) => void;
-  setHasTranslationContent: (hasTranslationContent: boolean) => void;
-  updatePanel: (params: { name: PanelName; state: PanelState }) => void;
-  fetchBibliographyEntry: (
-    uuid: string,
-  ) => Promise<BibliographyEntryItem | undefined>;
-  fetchEndNote: (uuid: string) => Promise<Passage | undefined>;
-  fetchGlossaryTerm: (
-    uuid: string,
-  ) => Promise<GlossaryTermInstance | undefined>;
-  fetchPassage: (uuid: string) => Promise<Passage | undefined>;
-  fetchWork: (uuid: string) => Promise<Work | undefined>;
-}
-
-export const DEFAULT_PANELS: PanelsState = {
-  left: { open: true, tab: 'toc' },
-  right: { open: false, tab: 'endnotes' },
-  main: { open: true, tab: 'translation' },
-};
-
-export const NavigationContext = createContext<NavigationState>({
-  uuid: '',
-  panels: DEFAULT_PANELS,
-  showOuterContent: true,
-  hasTranslationContent: true,
-  updatePanel: () => { throw new Error('Not implemented'); },
-  setToh: () => { throw new Error('Not implemented'); },
-  setShowOuterContent: () => { throw new Error('Not implemented'); },
-  setHasTranslationContent: () => { throw new Error('Not implemented'); },
-  fetchBibliographyEntry: async () => { throw new Error('Not implemented'); },
-  fetchEndNote: async () => { throw new Error('Not implemented'); },
-  fetchGlossaryTerm: async () => { throw new Error('Not implemented'); },
-  fetchPassage: async () => { throw new Error('Not implemented'); },
-  fetchWork: async () => { throw new Error('Not implemented'); },
-});
-
-export const useNavigation = () => {
-  const context = useContext(NavigationContext);
-  if (!context) {
-    throw new Error('useReaderCache must be used within a ReaderCacheProvider');
-  }
-  return context;
-};