@eightyfourthousand/lib-editing 2026.3.0

package/src/lib/components/editor/TranslationEditor.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import { EditorContent } from '@tiptap/react';
+import { TranslationBubbleMenu } from './menus';
+import { cn } from '@eightyfourthousand/lib-utils';
+import { usePagination } from './PaginationProvider';
+import type {
+  TranslationEditorContentItem,
+  TranslationEditorContent,
+} from '@eightyfourthousand/data-access';
+
+// Re-export for backwards compatibility
+export type { TranslationEditorContentItem, TranslationEditorContent };
+
+export const TranslationEditor = ({ className }: { className?: string }) => {
+  const { editor } = usePagination();
+
+  if (!editor) {
+    return null;
+  }
+
+  return (
+    <div className={cn('flex h-full', className)}>
+      <div className="relative flex flex-col flex-1 h-full">
+        <EditorContent className="flex-1" editor={editor} />
+        {editor.isEditable && <TranslationBubbleMenu editor={editor} />}
+      </div>
+    </div>
+  );
+};
+
+export default TranslationEditor;

package/src/lib/components/editor/extensions/Abbreviation/Abbreviation.ts

@@ -0,0 +1,133 @@
+import { Extension, Node } from '@tiptap/core';
+import { mergeAttributes } from '@tiptap/react';
+import { CommandSuggestionItem } from '../SlashCommand/SuggestionList';
+import { TableIcon } from 'lucide-react';
+import { v4 as uuidv4 } from 'uuid';
+
+export interface AbbreviationOptions {
+  HTMLAttributes: Record<string, unknown>;
+}
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    abbreviationCommand: {
+      insertAbbreviation: () => ReturnType;
+    };
+  }
+}
+
+export const AbbreviationCommand = Extension.create({
+  name: 'abbreviationCommand',
+
+  addCommands() {
+    return {
+      insertAbbreviation:
+        () =>
+        ({ commands }) => {
+          return commands.insertContent({
+            type: 'paragraph',
+            content: [
+              {
+                type: 'abbreviation',
+                content: [{ type: 'text', text: 'A' }],
+                attrs: { uuid: uuidv4() },
+              },
+              {
+                type: 'hasAbbreviation',
+                content: [{ type: 'text', text: 'Abbreviation' }],
+                attrs: { uuid: uuidv4() },
+              },
+            ],
+          });
+        },
+    };
+  },
+});
+
+export const AbbreviationSuggestion: CommandSuggestionItem = {
+  title: 'Abbreviation',
+  description: 'Insert an abbreviation',
+  keywords: ['abbreviation'],
+  icon: TableIcon,
+  command: ({ editor, range }) => {
+    editor.chain().focus().deleteRange(range).insertAbbreviation().run();
+  },
+};
+
+export const Abbreviation = Node.create<AbbreviationOptions>({
+  name: 'abbreviation',
+  group: 'inline',
+  content: 'inline*',
+  inline: true,
+
+  addAttributes() {
+    return {
+      abbreviation: {
+        default: undefined,
+        parseHTML(element: HTMLElement) {
+          return element.getAttribute('abbreviation');
+        },
+      },
+    };
+  },
+
+  addOptions() {
+    return {
+      HTMLAttributes: {
+        class: 'italic min-w-8',
+      },
+    };
+  },
+
+  parseHTML() {
+    return [{ tag: 'span[type="abbreviation"]' }];
+  },
+
+  renderHTML({ HTMLAttributes }: { HTMLAttributes: Record<string, unknown> }) {
+    return [
+      'span',
+      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
+        type: 'abbreviation',
+      }),
+      0,
+    ];
+  },
+});
+
+export const HasAbbreviation = Node.create<AbbreviationOptions>({
+  name: 'hasAbbreviation',
+  group: 'inline',
+  content: 'inline*',
+  inline: true,
+
+  addAttributes() {
+    return {
+      abbreviation: {
+        default: undefined,
+        parseHTML(element: HTMLElement) {
+          return element.getAttribute('abbreviation');
+        },
+      },
+    };
+  },
+
+  addOptions() {
+    return {
+      HTMLAttributes: {},
+    };
+  },
+
+  parseHTML() {
+    return [{ tag: 'span[type=hasAbbreviation]' }];
+  },
+
+  renderHTML({ HTMLAttributes }: { HTMLAttributes: Record<string, unknown> }) {
+    return [
+      'span',
+      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
+        type: 'hasAbbreviation',
+      }),
+      0,
+    ];
+  },
+});

package/src/lib/components/editor/extensions/Audio/Audio.ts

@@ -0,0 +1,69 @@
+import { mergeAttributes, Node } from '@tiptap/core';
+import { v4 as uuidv4 } from 'uuid';
+
+export interface AudioOptions {
+  /**
+   * HTML attributes to add to the image element.
+   * @default {}
+   * @example { class: 'foo' }
+   */
+  HTMLAttributes: Record<string, unknown>;
+}
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    audio: {
+      /**
+       * Set a audio node
+       * @param options.updateSelection set to true will select the newly inserted content
+       */
+      setAudio: (options: { src: string }) => ReturnType;
+    };
+  }
+}
+
+export const Audio = Node.create<AudioOptions>({
+  name: 'audio',
+
+  group: 'block',
+
+  addAttributes() {
+    return {
+      src: {
+        default: null,
+      },
+    };
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'audio[src]',
+      },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return [
+      'audio',
+      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
+        controls: true,
+        class: 'w-full max-w-xl my-4',
+      }),
+    ];
+  },
+
+  addCommands() {
+    return {
+      setAudio:
+        (options) =>
+        ({ commands }) => {
+          return commands.insertContent({
+            type: this.name,
+            attrs: options,
+            uuid: uuidv4(),
+          });
+        },
+    };
+  },
+});

package/src/lib/components/editor/extensions/Bold.ts

@@ -0,0 +1,43 @@
+import { mergeAttributes } from '@tiptap/react';
+import { Bold as TipTapBold } from '@tiptap/extension-bold';
+import { v4 as uuidv4 } from 'uuid';
+
+export const Bold = TipTapBold.extend({
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      type: {
+        default: undefined,
+        parseHTML: (element) => element.getAttribute('data-type'),
+        renderHTML(attributes) {
+          return mergeAttributes(attributes, { 'data-type': attributes.type });
+        },
+      },
+      textStyle: {
+        default: undefined,
+        parseHTML: (element) => element.getAttribute('data-text-style'),
+        renderHTML(attributes) {
+          return mergeAttributes(attributes, {
+            'data-text-style': attributes.textStyle,
+          });
+        },
+      },
+    };
+  },
+  addCommands() {
+    const name = this.name;
+    return {
+      ...this.parent?.(),
+      setBold() {
+        return ({ commands }) => {
+          return commands.setMark(name, { uuid: uuidv4() });
+        };
+      },
+      toggleBold() {
+        return ({ commands }) => {
+          return commands.toggleMark(name, { uuid: uuidv4() });
+        };
+      },
+    };
+  },
+});

package/src/lib/components/editor/extensions/Document.ts

@@ -0,0 +1,8 @@
+import { Document as TiptapDocument } from '@tiptap/extension-document';
+
+export const Document = TiptapDocument.extend({
+  // TODO: support columns, i.e. `(block|columns)+`
+  content: 'block+',
+});
+
+export default Document;

package/src/lib/components/editor/extensions/DragHandle/DragHandle.ts

@@ -0,0 +1,429 @@
+import { Extension } from '@tiptap/core';
+import {
+  NodeSelection,
+  Plugin,
+  PluginKey,
+  TextSelection,
+} from '@tiptap/pm/state';
+import { Fragment, Slice, Node } from '@tiptap/pm/model';
+import { EditorView } from '@tiptap/pm/view';
+
+export interface DragHandleOptions {
+  /**
+   * The width of the drag handle
+   */
+  dragHandleWidth: number;
+
+  /**
+   * The treshold for scrolling
+   */
+  scrollTreshold: number;
+
+  /*
+   * The css selector to query for the drag handle. (eg: '.custom-handle').
+   * If handle element is found, that element will be used as drag handle. If not, a default handle will be created
+   */
+  dragHandleSelector?: string;
+
+  /**
+   * Tags to be excluded for drag handle
+   */
+  excludedTags: string[];
+
+  /**
+   * Custom nodes to be included for drag handle
+   */
+  customNodes: string[];
+}
+
+const absoluteRect = (node: Element) => {
+  const data = node.getBoundingClientRect();
+  const modal = node.closest('[role="dialog"]');
+
+  if (modal && window.getComputedStyle(modal).transform !== 'none') {
+    const modalRect = modal.getBoundingClientRect();
+
+    return {
+      top: data.top - modalRect.top,
+      left: data.left - modalRect.left,
+      width: data.width,
+    };
+  }
+  return {
+    top: data.top,
+    left: data.left,
+    width: data.width,
+  };
+};
+
+function nodeDOMAtCoords(
+  coords: { x: number; y: number },
+  options: DragHandleOptions,
+) {
+  const selectors = [
+    'li',
+    'p:not(:first-child)',
+    'pre',
+    'blockquote',
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+    ...options.customNodes.map((node) => `[data-type=${node}]`),
+  ].join(', ');
+  return document
+    .elementsFromPoint(coords.x, coords.y)
+    .find(
+      (elem: Element) =>
+        elem.parentElement?.matches?.('.ProseMirror') ||
+        elem.matches(selectors),
+    );
+}
+const nodePosAtDOM = (
+  node: Element,
+  view: EditorView,
+  options: DragHandleOptions,
+) => {
+  const boundingRect = node.getBoundingClientRect();
+
+  return view.posAtCoords({
+    left: boundingRect.left + 50 + options.dragHandleWidth,
+    top: boundingRect.top + 1,
+  })?.inside;
+};
+
+const calcNodePos = (pos: number, view: EditorView) => {
+  const $pos = view.state.doc.resolve(pos);
+  if ($pos.depth > 1) return $pos.before($pos.depth);
+  return pos;
+};
+
+export const DragHandlePlugin = (
+  options: DragHandleOptions & { pluginKey: string },
+) => {
+  let listType = '';
+  function handleDragStart(event: DragEvent, view: EditorView) {
+    view.focus();
+
+    if (!event.dataTransfer) return;
+
+    const node = nodeDOMAtCoords(
+      {
+        x: event.clientX + 50 + options.dragHandleWidth,
+        y: event.clientY,
+      },
+      options,
+    );
+
+    if (!(node instanceof Element)) return;
+
+    let draggedNodePos = nodePosAtDOM(node, view, options);
+    if (draggedNodePos == null || draggedNodePos < 0) return;
+    draggedNodePos = calcNodePos(draggedNodePos, view);
+
+    const { from, to } = view.state.selection;
+    const diff = from - to;
+
+    const fromSelectionPos = calcNodePos(from, view);
+    let differentNodeSelected = false;
+
+    const nodePos = view.state.doc.resolve(fromSelectionPos);
+
+    // Check if nodePos points to the top level node
+    if (nodePos.node().type.name === 'doc') differentNodeSelected = true;
+    else {
+      const nodeSelection = NodeSelection.create(
+        view.state.doc,
+        nodePos.before(),
+      );
+
+      // Check if the node where the drag event started is part of the current selection
+      differentNodeSelected = !(
+        draggedNodePos + 1 >= nodeSelection.$from.pos &&
+        draggedNodePos <= nodeSelection.$to.pos
+      );
+    }
+    let selection = view.state.selection;
+    if (
+      !differentNodeSelected &&
+      diff !== 0 &&
+      !(view.state.selection instanceof NodeSelection)
+    ) {
+      const endSelection = NodeSelection.create(view.state.doc, to - 1);
+      selection = TextSelection.create(
+        view.state.doc,
+        draggedNodePos,
+        endSelection.$to.pos,
+      );
+    } else {
+      selection = NodeSelection.create(view.state.doc, draggedNodePos);
+
+      // if inline node is selected, e.g mention -> go to the parent node to select the whole node
+      // if table row is selected, go to the parent node to select the whole node
+      if (
+        (selection as NodeSelection).node.type.isInline ||
+        (selection as NodeSelection).node.type.name === 'tableRow'
+      ) {
+        const pos = view.state.doc.resolve(selection.from);
+        selection = NodeSelection.create(view.state.doc, pos.before());
+      }
+    }
+    view.dispatch(view.state.tr.setSelection(selection));
+
+    // If the selected node is a list item, we need to save the type of the wrapping list e.g. OL or UL
+    if (
+      view.state.selection instanceof NodeSelection &&
+      view.state.selection.node.type.name === 'listItem' &&
+      node.parentElement?.tagName
+    ) {
+      listType = node.parentElement.tagName;
+    }
+
+    const slice = view.state.selection.content();
+    const { dom, text } = view.serializeForClipboard(slice);
+
+    event.dataTransfer.clearData();
+    event.dataTransfer.setData('text/html', dom.innerHTML);
+    event.dataTransfer.setData('text/plain', text);
+    event.dataTransfer.effectAllowed = 'copyMove';
+
+    event.dataTransfer.setDragImage(node, 0, 0);
+
+    view.dragging = { slice, move: event.ctrlKey };
+  }
+
+  let dragHandleElement: HTMLElement | null = null;
+
+  function hideDragHandle() {
+    if (dragHandleElement) {
+      dragHandleElement.classList.add('hide');
+    }
+  }
+
+  function showDragHandle() {
+    if (dragHandleElement) {
+      dragHandleElement.classList.remove('hide');
+    }
+  }
+
+  function hideHandleOnEditorOut(event: MouseEvent) {
+    if (event.target instanceof Element) {
+      // Check if the relatedTarget class is still inside the editor
+      const relatedTarget = event.relatedTarget as HTMLElement;
+      const isInsideEditor =
+        relatedTarget?.classList.contains('tiptap') ||
+        relatedTarget?.classList.contains('drag-handle');
+
+      if (isInsideEditor) return;
+    }
+    hideDragHandle();
+  }
+
+  // Throttling state for mousemove handler
+  let lastPos = { x: 0, y: 0 };
+  let rafId: number | null = null;
+
+  return new Plugin({
+    key: new PluginKey(options.pluginKey),
+    view: (view) => {
+      const handleBySelector = options.dragHandleSelector
+        ? document.querySelector<HTMLElement>(options.dragHandleSelector)
+        : null;
+      dragHandleElement = handleBySelector ?? document.createElement('div');
+      dragHandleElement.draggable = true;
+      dragHandleElement.dataset.dragHandle = '';
+      dragHandleElement.classList.add('drag-handle');
+
+      function onDragHandleDragStart(e: DragEvent) {
+        handleDragStart(e, view);
+      }
+
+      dragHandleElement.addEventListener('dragstart', onDragHandleDragStart);
+
+      function onDragHandleDrag(e: DragEvent) {
+        hideDragHandle();
+        const scrollY = window.scrollY;
+        if (e.clientY < options.scrollTreshold) {
+          window.scrollTo({ top: scrollY - 30, behavior: 'smooth' });
+        } else if (window.innerHeight - e.clientY < options.scrollTreshold) {
+          window.scrollTo({ top: scrollY + 30, behavior: 'smooth' });
+        }
+      }
+
+      dragHandleElement.addEventListener('drag', onDragHandleDrag);
+
+      hideDragHandle();
+
+      if (!handleBySelector) {
+        view?.dom?.parentElement?.appendChild(dragHandleElement);
+      }
+      view?.dom?.parentElement?.addEventListener(
+        'mouseout',
+        hideHandleOnEditorOut,
+      );
+
+      return {
+        destroy: () => {
+          if (rafId) cancelAnimationFrame(rafId);
+          if (!handleBySelector) {
+            dragHandleElement?.remove?.();
+          }
+          dragHandleElement?.removeEventListener('drag', onDragHandleDrag);
+          dragHandleElement?.removeEventListener(
+            'dragstart',
+            onDragHandleDragStart,
+          );
+          dragHandleElement = null;
+          view?.dom?.parentElement?.removeEventListener(
+            'mouseout',
+            hideHandleOnEditorOut,
+          );
+        },
+      };
+    },
+    props: {
+      handleDOMEvents: {
+        mousemove: (view, event) => {
+          if (!view.editable) {
+            return;
+          }
+
+          // Skip if position hasn't changed significantly (< 5px threshold)
+          const dx = Math.abs(event.clientX - lastPos.x);
+          const dy = Math.abs(event.clientY - lastPos.y);
+          if (dx < 5 && dy < 5) return;
+
+          lastPos = { x: event.clientX, y: event.clientY };
+
+          // Use requestAnimationFrame to batch updates
+          if (rafId) cancelAnimationFrame(rafId);
+          rafId = requestAnimationFrame(() => {
+            rafId = null;
+
+            const node = nodeDOMAtCoords(
+              {
+                x: event.clientX + 50 + options.dragHandleWidth,
+                y: event.clientY,
+              },
+              options,
+            );
+
+            const notDragging = node?.closest('.not-draggable');
+            const excludedTagList = options.excludedTags
+              .concat(['ol', 'ul'])
+              .join(', ');
+
+            if (
+              !(node instanceof Element) ||
+              node.matches(excludedTagList) ||
+              notDragging
+            ) {
+              hideDragHandle();
+              return;
+            }
+
+            const compStyle = window.getComputedStyle(node);
+            const parsedLineHeight = parseInt(compStyle.lineHeight, 10);
+            const lineHeight = isNaN(parsedLineHeight)
+              ? parseInt(compStyle.fontSize) * 1.2
+              : parsedLineHeight;
+            const paddingTop = parseInt(compStyle.paddingTop, 10);
+
+            const rect = absoluteRect(node);
+
+            rect.top += (lineHeight - 24) / 2;
+            rect.top += paddingTop;
+            // Li markers
+            if (node.matches('ul:not([data-type=taskList]) li, ol li')) {
+              rect.left -= options.dragHandleWidth;
+            }
+            rect.width = options.dragHandleWidth;
+
+            if (!dragHandleElement) return;
+
+            dragHandleElement.style.left = `${rect.left - rect.width}px`;
+            dragHandleElement.style.top = `${rect.top}px`;
+            showDragHandle();
+          });
+        },
+        keydown: () => {
+          hideDragHandle();
+        },
+        mousewheel: () => {
+          hideDragHandle();
+        },
+        // dragging class is used for CSS
+        dragstart: (view) => {
+          view.dom.classList.add('dragging');
+        },
+        drop: (view, event) => {
+          view.dom.classList.remove('dragging');
+          hideDragHandle();
+          let droppedNode: Node | null = null;
+          const dropPos = view.posAtCoords({
+            left: event.clientX,
+            top: event.clientY,
+          });
+
+          if (!dropPos) return;
+
+          if (view.state.selection instanceof NodeSelection) {
+            droppedNode = view.state.selection.node;
+          }
+          if (!droppedNode) return;
+
+          const resolvedPos = view.state.doc.resolve(dropPos.pos);
+
+          const isDroppedInsideList =
+            resolvedPos.parent.type.name === 'listItem';
+
+          // If the selected node is a list item and is not dropped inside a list, we need to wrap it inside <ol> tag otherwise ol list items will be transformed into ul list item when dropped
+          if (
+            view.state.selection instanceof NodeSelection &&
+            view.state.selection.node.type.name === 'listItem' &&
+            !isDroppedInsideList &&
+            listType === 'OL'
+          ) {
+            const newList = view.state.schema.nodes.orderedList?.createAndFill(
+              null,
+              droppedNode,
+            );
+            const slice = new Slice(Fragment.from(newList), 0, 0);
+            view.dragging = { slice, move: event.ctrlKey };
+          }
+        },
+        dragend: (view) => {
+          view.dom.classList.remove('dragging');
+        },
+      },
+    },
+  });
+};
+
+export const DragHandle = Extension.create({
+  name: 'dragHandle',
+
+  addOptions() {
+    return {
+      dragHandleWidth: 25,
+      scrollTreshold: 100,
+      excludedTags: [],
+      customNodes: [],
+    };
+  },
+
+  addProseMirrorPlugins() {
+    return [
+      DragHandlePlugin({
+        pluginKey: 'dragHandle',
+        dragHandleWidth: this.options.dragHandleWidth,
+        scrollTreshold: this.options.scrollTreshold,
+        dragHandleSelector: this.options.dragHandleSelector,
+        excludedTags: this.options.excludedTags,
+        customNodes: this.options.customNodes,
+      }),
+    ];
+  },
+});