@eightyfourthousand/lib-editing 2026.4.0 → 2026.4.1

package/src/lib/components/editor/util.ts

@@ -1,304 +0,0 @@
-import {
-  MarkViewProps,
-  mergeAttributes,
-  NodeViewProps,
-  NodeViewRendererProps,
-} from '@tiptap/react';
-import { Editor } from '@tiptap/core';
-import { HTMLElementType } from 'react';
-import { v4 as uuidv4 } from 'uuid';
-
-/**
- * WeakMap to associate DOM elements with their editor instances.
- * Used by HoverCardProvider to find the correct editor for a hovered element.
- */
-const editorElementMap = new WeakMap<HTMLElement, Editor>();
-
-/**
- * Registers an editor for a DOM element.
- * Call this when creating mark/node views to enable hover card functionality.
- */
-export const registerEditorElement = (element: HTMLElement, editor: Editor) => {
-  editorElementMap.set(element, editor);
-};
-
-/**
- * Gets the editor associated with a DOM element.
- */
-export const getEditorForElement = (
-  element: HTMLElement,
-): Editor | undefined => {
-  return editorElementMap.get(element);
-};
-
-/**
- * Validates and updates the attributes of a Node.
- * Specifically, it ensures that the node has a unique 'uuid' attribute.
- * If the 'uuid' is missing or duplicates the previous node's 'uuid',
- * a new UUID is generated and assigned. In the case of duplication, all
- * global attributes are set to their default values.
- */
-export const validateAttrs = ({
-  node,
-  editor,
-  getPos,
-  updateAttributes,
-}: Partial<NodeViewProps>) => {
-  if (!node?.attrs.uuid) {
-    updateAttributes?.({ uuid: uuidv4() });
-    return;
-  }
-
-  const pos = getPos?.();
-  if (pos === null || pos === undefined) {
-    return;
-  }
-
-  // check if previous node has same uuid, if so, set a new one
-  const $pos = editor?.state.doc.resolve(pos);
-  const parent = $pos?.parent;
-  const index = $pos?.index();
-  if (!parent || index === null || index === undefined) {
-    return;
-  }
-
-  if (index > 0 && parent.child(index - 1).attrs.uuid === node.attrs.uuid) {
-    const attrs: { [attr: string]: unknown } = {
-      ...node.attrs,
-      uuid: uuidv4(),
-    };
-
-    // reset all global attributes to default values
-    if (attrs.leadingSpaceUuid) {
-      attrs.leadSpaceUuid = undefined;
-    }
-
-    if (attrs.hasLeadingSpace) {
-      attrs.hasLeadingSpace = false;
-    }
-
-    if (attrs.indentUuid) {
-      attrs.indentUuid = undefined;
-    }
-
-    if (attrs.hasIndent) {
-      attrs.hasIndent = false;
-    }
-
-    if (attrs.hasParagraphIndent) {
-      attrs.hasParagraphIndent = false;
-    }
-
-    updateAttributes?.(attrs);
-  }
-};
-
-/**
- * Finds the range of a given mark in the editor's document by its reference.
- * Returns an object with 'from' and 'to' positions if found, otherwise undefined.
- */
-export const findMarkRange = ({ editor, mark }: Partial<MarkViewProps>) => {
-  if (!editor || !mark) {
-    return undefined;
-  }
-
-  const { state } = editor;
-  const { doc, tr } = state;
-
-  let foundRange: { from: number; to: number } | undefined = undefined;
-
-  const thisMark = mark;
-  doc.descendants((node, pos) => {
-    let foundMark = false;
-    const from = tr.mapping.map(pos);
-    const to = from + node.nodeSize;
-
-    node.marks.forEach((m) => {
-      if (m === thisMark) {
-        foundMark = true;
-        foundRange = { from, to };
-        return;
-      }
-    });
-
-    return !foundMark;
-  });
-
-  return foundRange;
-};
-
-/**
- * Finds a mark in the editor's document by its UUID attribute.
- * Returns an object with 'from', 'to', and 'mark' if found, otherwise undefined.
- */
-export const findMarkByUuid = ({
-  editor,
-  uuid,
-  markType,
-  comparator = (mark, uuid) => mark.attrs.uuid === uuid,
-}: {
-  editor: {
-    state: {
-      doc: MarkViewProps['editor']['state']['doc'];
-      tr: MarkViewProps['editor']['state']['tr'];
-    };
-  };
-  uuid: string;
-  markType: string;
-  comparator?: (mark: MarkViewProps['mark'], uuid: string) => boolean;
-}): { from: number; to: number; mark: MarkViewProps['mark'] } | undefined => {
-  const { state } = editor;
-  const { doc, tr } = state;
-
-  let foundRange:
-    | { from: number; to: number; mark: MarkViewProps['mark'] }
-    | undefined = undefined;
-
-  doc.descendants((node, pos) => {
-    if (foundRange) return false;
-
-    const from = tr.mapping.map(pos);
-    const to = from + node.nodeSize;
-
-    for (const m of node.marks) {
-      if (m.type.name === markType && comparator(m, uuid)) {
-        foundRange = { from, to, mark: m };
-        return false;
-      }
-    }
-
-    return true;
-  });
-
-  return foundRange;
-};
-
-export const findEndnoteMarkByUuid = ({
-  editor,
-  uuid,
-}: {
-  editor: {
-    state: {
-      doc: MarkViewProps['editor']['state']['doc'];
-      tr: MarkViewProps['editor']['state']['tr'];
-    };
-  };
-  uuid: string;
-}): { from: number; to: number; mark: MarkViewProps['mark'] } | undefined => {
-  return findMarkByUuid({
-    editor,
-    uuid,
-    markType: 'endNoteLink',
-    comparator: (mark, uuid) =>
-      mark.attrs.notes?.some((note: { uuid: string }) => note.uuid === uuid),
-  });
-};
-
-/**
- * Find a passage node in any editor by UUID.
- * Returns { pos, node } or undefined.
- */
-export const findPassageNode = (
-  editor: Editor,
-  passageUuid: string,
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-): { pos: number; node: any } | undefined => {
-  const { doc } = editor.state;
-  let result: { pos: number; node: typeof doc } | undefined;
-
-  doc.descendants((node, pos) => {
-    if (result) return false;
-    if (node.type.name === 'passage' && node.attrs.uuid === passageUuid) {
-      result = { pos, node };
-      return false;
-    }
-    return true;
-  });
-
-  return result;
-};
-
-/**
- * Creates a function to update the attributes of a given HTML element.
- * The returned function takes an object of attributes and sets them on the element.
- */
-export const createUpdateAttributes = (element: HTMLElement) => {
-  return (attrs: { [key: string]: unknown }) => {
-    Object.keys(attrs).forEach((key) => {
-      element.setAttribute(key, attrs[key] as string);
-    });
-  };
-};
-
-/**
- * Creates a NodeView DOM element for a given node and extension.
- * It sets up the element with merged attributes and validates them.
- */
-export const createNodeViewDom = ({
-  editor,
-  getPos,
-  node,
-  extension,
-  HTMLAttributes,
-  element,
-  className,
-}: Partial<NodeViewRendererProps> & {
-  element: HTMLElementType;
-  className?: string;
-}) => {
-  const dom = document.createElement(element);
-  const updateAttributes = createUpdateAttributes(dom);
-
-  const attributes = mergeAttributes(
-    node?.attrs || {},
-    extension?.options.HTMLAttributes,
-    HTMLAttributes || {},
-    {
-      class: className,
-      type: extension?.name,
-    },
-  );
-
-  updateAttributes(attributes);
-
-  validateAttrs({
-    node,
-    editor,
-    getPos,
-    updateAttributes,
-  });
-
-  return { dom, updateAttributes };
-};
-
-/**
- * Creates a MarkView DOM element for a given mark and extension.
- * It sets up the element with merged attributes.
- */
-export const createMarkViewDom = ({
-  mark,
-  extension,
-  HTMLAttributes,
-  element,
-  className,
-}: Partial<MarkViewProps> & {
-  element: HTMLElementType;
-  className?: string;
-}) => {
-  const dom = document.createElement(element);
-  const updateElementAttributes = createUpdateAttributes(dom);
-
-  const attributes = mergeAttributes(
-    mark?.attrs || {},
-    extension?.options.HTMLAttributes,
-    HTMLAttributes || {},
-    {
-      class: className,
-      type: extension?.name,
-    },
-  );
-
-  updateElementAttributes(attributes);
-
-  return { dom, updateAttributes: updateElementAttributes };
-};

package/src/lib/components/reader/ReaderBackMatterPage.tsx

@@ -1,63 +0,0 @@
-import {
-  createBuildGraphQLClient,
-  getTranslationBlocks,
-  getWorkGlossaryTerms,
-  getWorkBibliography,
-} from '@eightyfourthousand/client-graphql/ssr';
-import { isStaticFeatureEnabled } from '@eightyfourthousand/lib-instr/static';
-import { ReaderBackMatterPanel } from './ReaderBackMatterPanel';
-import { isUuid } from '@eightyfourthousand/lib-utils';
-import { notFound } from 'next/navigation';
-
-export const ReaderBackMatterPage = async ({
-  params,
-}: {
-  params: Promise<{ slug: string }>;
-}) => {
-  const { slug } = await params;
-
-  if (!isUuid(slug)) {
-    return notFound();
-  }
-
-  const graphqlClient = createBuildGraphQLClient();
-  const withAttestations = isStaticFeatureEnabled('glossary-attestations');
-
-  const [
-    { blocks: endnotes },
-    { blocks: abbreviations },
-    glossary,
-    bibliography,
-  ] = await Promise.all([
-    getTranslationBlocks({
-      client: graphqlClient,
-      uuid: slug,
-      type: 'endnotes',
-    }),
-    getTranslationBlocks({
-      client: graphqlClient,
-      uuid: slug,
-      type: 'abbreviations',
-    }),
-    getWorkGlossaryTerms({
-      client: graphqlClient,
-      uuid: slug,
-      withAttestations,
-    }),
-    getWorkBibliography({
-      client: graphqlClient,
-      uuid: slug,
-    }),
-  ]);
-
-  return (
-    <ReaderBackMatterPanel
-      workUuid={slug}
-      abbreviations={abbreviations}
-      bibliography={bibliography}
-      endnotes={endnotes}
-      glossary={glossary}
-      withAttestations={withAttestations}
-    />
-  );
-};

package/src/lib/components/reader/ReaderBackMatterPanel.tsx

@@ -1,56 +0,0 @@
-'use client';
-
-import { useCallback } from 'react';
-import { BibliographyEntries } from '@eightyfourthousand/data-access';
-import type { GlossaryTermsPage } from '@eightyfourthousand/client-graphql';
-import { BackMatterPanel } from '../shared/BackMatterPanel';
-import { TranslationRenderer } from '../shared/types';
-import { TranslationReader } from '.';
-import { TranslationEditorContent } from '../editor';
-import { useNavigation } from '../shared/NavigationProvider';
-
-export const ReaderBackMatterPanel = ({
-  workUuid,
-  endnotes,
-  glossary,
-  bibliography,
-  abbreviations,
-  withAttestations = false,
-}: {
-  workUuid: string;
-  endnotes: TranslationEditorContent;
-  glossary: GlossaryTermsPage;
-  bibliography: BibliographyEntries;
-  abbreviations: TranslationEditorContent;
-  withAttestations?: boolean;
-}) => {
-  const { hasTranslationContent } = useNavigation();
-  if (!hasTranslationContent) {
-    return null;
-  }
-
-  const renderTranslation = useCallback(
-    ({ content, name, className }: TranslationRenderer) => (
-      <TranslationReader
-        content={content}
-        name={name}
-        className={className}
-        filter={name}
-        panel="right"
-      />
-    ),
-    [],
-  );
-
-  return (
-    <BackMatterPanel
-      workUuid={workUuid}
-      endnotes={endnotes}
-      glossary={glossary}
-      bibliography={bibliography}
-      abbreviations={abbreviations}
-      renderTranslation={renderTranslation}
-      withAttestations={withAttestations}
-    />
-  );
-};

package/src/lib/components/reader/ReaderBodyPage.tsx

@@ -1,46 +0,0 @@
-import {
-  BODY_MATTER_FILTER,
-  createBuildGraphQLClient,
-  FRONT_MATTER_FILTER,
-  getTranslationBlocks,
-  getTranslationTitles,
-} from '@eightyfourthousand/client-graphql/ssr';
-import { ReaderBodyPanel } from './ReaderBodyPanel';
-import { isUuid } from '@eightyfourthousand/lib-utils';
-import { notFound } from 'next/navigation';
-
-const INITIAL_PASSAGES = 250;
-
-export const ReaderBodyPage = async ({
-  params,
-}: {
-  params: Promise<{ slug: string }>;
-}) => {
-  const { slug } = await params;
-
-  if (!isUuid(slug)) {
-    return notFound();
-  }
-
-  const client = createBuildGraphQLClient();
-
-  const { blocks: frontMatter } = await getTranslationBlocks({
-    client,
-    uuid: slug,
-    type: FRONT_MATTER_FILTER,
-    maxPassages: INITIAL_PASSAGES,
-  });
-
-  const { blocks: body } = await getTranslationBlocks({
-    client,
-    uuid: slug,
-    type: BODY_MATTER_FILTER,
-    maxPassages: INITIAL_PASSAGES,
-  });
-
-  const titles = await getTranslationTitles({ client, uuid: slug });
-
-  return (
-    <ReaderBodyPanel titles={titles} frontMatter={frontMatter} body={body} />
-  );
-};

package/src/lib/components/reader/ReaderBodyPanel.tsx

@@ -1,68 +0,0 @@
-'use client';
-
-import { useCallback } from 'react';
-import {
-  BODY_MATTER_FILTER,
-  FRONT_MATTER_FILTER,
-  Titles as TitlesData,
-} from '@eightyfourthousand/data-access';
-import { BodyPanel } from '../shared/BodyPanel';
-import { Titles, TitlesVariant } from '../shared/titles';
-import { TitlesRenderer, TranslationRenderer } from '../shared/types';
-import { TranslationEditorContent } from '../editor';
-import { TranslationReader } from './TranslationReader';
-
-const TITLE_VARIANTS_FOR_TABS: { [key: string]: TitlesVariant } = {
-  translation: 'english',
-  source: 'tibetan',
-  front: 'front',
-  compare: 'comparison',
-};
-
-export const ReaderBodyPanel = ({
-  titles,
-  frontMatter,
-  body,
-}: {
-  titles: TitlesData;
-  frontMatter: TranslationEditorContent;
-  body: TranslationEditorContent;
-  cursor?: string;
-}) => {
-  const renderTitles = useCallback(
-    ({ titles, imprint, name }: TitlesRenderer) => (
-      <Titles
-        titles={titles}
-        imprint={imprint}
-        variant={
-          (TITLE_VARIANTS_FOR_TABS[name] || 'english') as TitlesVariant
-        }
-      />
-    ),
-    [],
-  );
-
-  const renderTranslation = useCallback(
-    ({ content, name, className }: TranslationRenderer) => (
-      <TranslationReader
-        content={content}
-        name={name}
-        className={className}
-        filter={name === 'front' ? FRONT_MATTER_FILTER : BODY_MATTER_FILTER}
-        panel="main"
-      />
-    ),
-    [],
-  );
-
-  return (
-    <BodyPanel
-      titles={titles}
-      frontMatter={frontMatter}
-      body={body}
-      renderTitles={renderTitles}
-      renderTranslation={renderTranslation}
-      limitWhenNoTranslation={true}
-    />
-  );
-};

package/src/lib/components/reader/ReaderLayout.tsx

@@ -1,39 +0,0 @@
-'use client';
-
-import { ReactNode, use } from 'react';
-import { NavigationProvider, ThreeColumnRenderer } from '../shared';
-import {
-  LeftPanel,
-  MainPanel,
-  MainPanelHeader,
-  RightPanel,
-} from '@eightyfourthousand/design-system';
-import { EditorHeader } from '../editor/EditorHeader';
-
-export const ReaderLayout = ({
-  withHeader = false,
-  left,
-  main,
-  right,
-  params,
-}: {
-  withHeader?: boolean;
-  left: ReactNode;
-  main: ReactNode;
-  right: ReactNode;
-  params: Promise<{ slug: string }>;
-}) => {
-  const { slug } = use(params);
-  return (
-    <NavigationProvider uuid={slug}>
-      <ThreeColumnRenderer withHeader={withHeader}>
-        <LeftPanel>{left}</LeftPanel>
-        <MainPanelHeader>
-          <EditorHeader />
-        </MainPanelHeader>
-        <MainPanel>{main}</MainPanel>
-        <RightPanel>{right}</RightPanel>
-      </ThreeColumnRenderer>
-    </NavigationProvider>
-  );
-};

package/src/lib/components/reader/ReaderLeftPanel.tsx

@@ -1,8 +0,0 @@
-'use client';
-
-import { LeftPanel } from '../shared/LeftPanel';
-import { Toc, Work } from '@eightyfourthousand/data-access';
-
-export const ReaderLeftPanel = ({ toc, work }: { toc?: Toc; work: Work }) => {
-  return <LeftPanel toc={toc} work={work} limitWhenNoTranslation={true} />;
-};

package/src/lib/components/reader/ReaderLeftPanelPage.tsx

@@ -1,31 +0,0 @@
-import {
-  createBuildGraphQLClient,
-  getTranslationMetadataByUuid,
-  getTranslationToc,
-} from '@eightyfourthousand/client-graphql/ssr';
-import { ReaderLeftPanel } from './ReaderLeftPanel';
-import { isUuid } from '@eightyfourthousand/lib-utils';
-import { notFound } from 'next/navigation';
-
-export const ReaderLeftPanelPage = async ({
-  params,
-}: {
-  params: Promise<{ slug: string }>;
-}) => {
-  const { slug } = await params;
-
-  if (!isUuid(slug)) {
-    return notFound();
-  }
-
-  const client = createBuildGraphQLClient();
-  const work = await getTranslationMetadataByUuid({ client, uuid: slug });
-
-  if (!work) {
-    return notFound();
-  }
-
-  const toc = await getTranslationToc({ client, uuid: slug });
-
-  return <ReaderLeftPanel toc={toc} work={work} />;
-};

package/src/lib/components/reader/TranslationReader.tsx

@@ -1,28 +0,0 @@
-'use client';
-
-import { TranslationEditor } from '../editor';
-import { PaginationProvider } from '../editor/PaginationProvider';
-import { TranslationRenderer, useNavigation } from '../shared';
-
-export const TranslationReader = ({
-  content,
-  className,
-  filter,
-  panel,
-  name,
-}: TranslationRenderer) => {
-  const { uuid } = useNavigation();
-
-  return (
-    <PaginationProvider
-      uuid={uuid}
-      panel={panel}
-      tab={name}
-      filter={filter}
-      content={content}
-      isEditable={false}
-    >
-      <TranslationEditor className={className} />
-    </PaginationProvider>
-  );
-};

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

@@ -1,12 +0,0 @@
-'use client';
-
-import { notFound } from 'next/navigation';
-
-export const AiSummarizerPage = () => {
-  const src = process.env.NEXT_PUBLIC_AI_SUMMARIZER_URL;
-  if (!src) {
-    return notFound();
-  }
-
-  return <iframe src={src} className="size-full" title="AI Summarizer" />;
-};