@eightyfourthousand/lib-editing 2026.3.0

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

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

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

@@ -0,0 +1,133 @@
+'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-ochre" />
+                  {isBookmarked ? 'Remove Bookmark' : 'Add Bookmark'}
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem onSelect={copyLink}>
+                  <CopyIcon className="text-ochre" /> Copy Link
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem
+                  onSelect={(e) => {
+                    e.preventDefault();
+                    setShowRevisionForm(true);
+                  }}
+                >
+                  <MessageSquareIcon className="text-ochre" /> 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

@@ -0,0 +1,65 @@
+'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"
+    >
+      <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="px-2">
+        <div className="overflow-auto md:h-[calc(100vh-8.5rem)] h-[calc(100vh-4rem)] rounded 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

@@ -0,0 +1,64 @@
+'use client';
+
+import type {
+  BibliographyEntryItem,
+  GlossaryTermInstance,
+  Imprint,
+  Passage,
+  TohokuCatalogEntry,
+  Work,
+} from '@eightyfourthousand/data-access';
+import { createContext, useContext } from 'react';
+import { PanelName, PanelsState, PanelState, TabName } 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;
+};