@eightyfourthousand/lib-editing 2026.4.0 → 2026.4.2

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

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

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

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

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

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