reactjs-tiptap-editor-pro 0.2.31 → 0.2.33

package/src/plugins/DragHandle/index.ts

@@ -1,375 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
-/* eslint-disable @typescript-eslint/no-unused-expressions */
-import { type Editor } from '@tiptap/core';
-import { type Node } from '@tiptap/pm/model';
-import { PluginKey, Plugin } from '@tiptap/pm/state';
-import { type Transaction, type EditorState } from '@tiptap/pm/state';
-import type { EditorView } from '@tiptap/pm/view';
-import debounce from 'lodash-es/debounce';
-import tippy from 'tippy.js';
-import { type Props as TippyProps } from 'tippy.js';
-// import { ySyncPluginKey, absolutePositionToRelativePosition } from 'y-prosemirror';
-
-import { getSelectionRanges, NodeRangeSelection } from './range';
-import { cloneElement, getComputedStyles, minMax, removeNode, findElementNextToCoords } from './utils';
-
-function getSelectionRangesNearCursor(event: any, editor: any) {
-  const { doc: editorDocument } = editor.view.state,
-    nearestElement = findElementNextToCoords({ editor: editor, x: event.clientX, y: event.clientY, direction: 'right' });
-  if (!nearestElement.resultNode || null === nearestElement.pos) return [];
-  const mouseXPosition = event.clientX,
-    cursorPosition = (function (editor, mouseX, mouseY) {
-      const editorPaddingLeft = Number.parseInt(getComputedStyles(editor.dom, 'paddingLeft'), 10),
-        editorPaddingRight = Number.parseInt(getComputedStyles(editor.dom, 'paddingRight'), 10),
-        editorBorderLeft = Number.parseInt(getComputedStyles(editor.dom, 'borderLeftWidth'), 10),
-        editorBorderRight = Number.parseInt(getComputedStyles(editor.dom, 'borderLeftWidth'), 10),
-        editorRect = editor.dom.getBoundingClientRect();
-      return {
-        left: minMax(mouseX, editorRect.left + editorPaddingLeft + editorBorderLeft,
-          editorRect.right - editorPaddingRight - editorBorderRight),
-        top: mouseY
-      };
-    })(editor.view, mouseXPosition, event.clientY),
-    positionAtCoords = editor.view.posAtCoords(cursorPosition);
-  if (!positionAtCoords) return [];
-  const { pos: documentPosition } = positionAtCoords;
-  if (!editorDocument.resolve(documentPosition).parent) return [];
-  const startResolvedPosition = editorDocument.resolve(nearestElement.pos),
-    endResolvedPosition = editorDocument.resolve(nearestElement.pos + 1);
-  return getSelectionRanges(startResolvedPosition, endResolvedPosition, 0);
-}
-function getPreviousNodeStartPosition (document: any, position: any) {
-  const resolvedPosition = document.resolve(position),
-    { depth: nodeDepth } = resolvedPosition;
-  if (0 === nodeDepth) return position;
-  return resolvedPosition.pos - resolvedPosition.parentOffset - 1;
-}
-function getAncestorNodeAtDepth (document: any, position: any) {
-  const currentNode = document.nodeAt(position),
-    resolvedPosition = document.resolve(position);
-  let { depth: currentDepth } = resolvedPosition,
-    ancestorNode = currentNode;
-  for (; currentDepth > 0;) {
-    const parentNode = resolvedPosition.node(currentDepth);
-    currentDepth -= 1;
-    if (0 === currentDepth) {
-      ancestorNode = parentNode;
-    }
-  }
-  return ancestorNode;
-}
-// function getOuterNode (doc: any, pos: any) {
-//   const n = ySyncPluginKey.getState(doc);
-//   return n ? absolutePositionToRelativePosition(pos, n.type, n.binding.mapping) : null;
-// }
-function getOuterNodePos (e: any, t: any) {
-  let n = t;
-  for (; n && n.parentNode && n.parentNode !== e.dom;) n = n.parentNode;
-  return n;
-}
-
-const dragHandlePluginDefaultKey = new PluginKey('dragHandle');
-
-function DragHandlePlugin ({
-  pluginKey: customPluginKey = dragHandlePluginDefaultKey,
-  element: dragHandleElement,
-  editor,
-  tippyOptions,
-  onNodeChange,
-}: {
-  pluginKey?: PluginKey | string
-  element: HTMLElement
-  editor: Editor
-  tippyOptions?: Partial<TippyProps>
-  onNodeChange?: (data: { editor: Editor; node: Node | null; pos: number }) => void
-}) {
-  const dragHandleContainer = document.createElement('div');
-  let tippyInstance: any = null;
-  let isDragLocked = false;
-  // eslint-disable-next-line @typescript-eslint/no-inferrable-types
-  let selectedNode: null = null;
-  let selectedNodePosition = -1;
-
-  dragHandleElement.addEventListener('dragstart', event => {
-    const { view: editorView } = editor;
-    if (!event.dataTransfer) return;
-    const { empty: isSelectionEmpty, $from: selectionStart, $to: selectionEnd } = editorView.state.selection;
-    const nearCursorRanges = getSelectionRangesNearCursor(event, editor);
-    const currentSelectionRanges = getSelectionRanges(selectionStart, selectionEnd, 0);
-    const hasOverlappingRanges = currentSelectionRanges.some(range =>
-      nearCursorRanges.find(nearRange => nearRange.$from === range.$from && nearRange.$to === range.$to));
-    const selectedRanges = isSelectionEmpty || !hasOverlappingRanges ? nearCursorRanges : currentSelectionRanges;
-
-    if (selectedRanges.length === 0) return;
-    const { tr: transaction } = editorView.state;
-    const dragPreviewElement = document.createElement('div');
-    const startPos = selectedRanges[0].$from.pos;
-    const endPos = selectedRanges[selectedRanges.length - 1].$to.pos;
-    const nodeSelection = NodeRangeSelection.create(editorView.state.doc, startPos, endPos);
-    const selectionSlice = nodeSelection.content();
-
-    selectedRanges.forEach(range => {
-      const clonedNode = cloneElement(editorView.nodeDOM(range.$from.pos) as HTMLElement);
-      dragPreviewElement.append(clonedNode);
-    });
-    dragPreviewElement.style.position = 'absolute';
-    dragPreviewElement.style.top = '-10000px';
-    document.body.append(dragPreviewElement);
-    event.dataTransfer.clearData();
-    event.dataTransfer.setDragImage(dragPreviewElement, 0, 0);
-    editorView.dragging = { slice: selectionSlice, move: true };
-    transaction.setSelection(nodeSelection);
-    editorView.dispatch(transaction);
-    document.addEventListener('drop', () => removeNode(dragPreviewElement), { once: true });
-    setTimeout(() => {
-      dragHandleElement && (dragHandleElement.style.pointerEvents = 'none');
-    }, 0);
-  });
-  dragHandleElement.addEventListener('dragend', () => {
-    dragHandleElement && (dragHandleElement.style.pointerEvents = 'auto');
-  });
-  return new Plugin({
-    key: typeof customPluginKey === 'string' ? new PluginKey(customPluginKey) : customPluginKey,
-    state: {
-      init: () => ({ locked: false }),
-      apply(transaction: Transaction, oldState: { locked: boolean }): { locked: boolean } {
-        const isLocked = transaction.getMeta('lockDragHandle');
-        const shouldHide = transaction.getMeta('hideDragHandle');
-        if ((undefined !== isLocked && (isDragLocked = isLocked), shouldHide && tippyInstance)) {
-          tippyInstance.hide();
-          isDragLocked = false;
-          selectedNode = null;
-          selectedNodePosition = -1;
-          onNodeChange?.({ editor: editor, node: null, pos: -1 });
-          return oldState;
-        }
-        if (transaction.docChanged && -1 !== selectedNodePosition && dragHandleElement && tippyInstance) {
-          const newPos = transaction.mapping.map(selectedNodePosition);
-          if (newPos !== selectedNodePosition) {
-            selectedNodePosition = newPos;
-            //  relativePosition = getOuterNode(editorState.doc, selectedNodePosition);
-          }
-        }
-        return oldState;
-      },
-    },
-    view: editorView => {
-      initializeDragHandle();
-
-      setupDragHandleContainer(editor.view.dom);
-
-      tippyInstance = tippy(editorView.dom, {
-        ...getDefaultTippyConfig(),
-        ...tippyOptions,
-      });
-
-      return {
-        update(editorView, oldState) {
-          if (!canUpdateDragHandle(dragHandleElement, tippyInstance)) {
-            return;
-          }
-
-          dragHandleElement.draggable = !isDragLocked;
-
-          if (!shouldUpdatePosition(editorView, oldState)) {
-            return;
-          }
-
-          const targetElement = getValidTargetElement(editorView);
-          if (!targetElement) {
-            return;
-          }
-
-          updateNodeInformation(editorView, targetElement);
-        },
-        destroy() {
-          cleanup();
-        }
-      };
-
-      function initializeDragHandle() {
-        dragHandleElement.draggable = true;
-        dragHandleElement.style.pointerEvents = 'auto';
-      }
-
-      function setupDragHandleContainer(parentElement: any) {
-        parentElement.parentElement?.appendChild(dragHandleContainer);
-        dragHandleContainer.appendChild(dragHandleElement);
-
-        Object.assign(dragHandleContainer.style, {
-          pointerEvents: 'none',
-          position: 'absolute',
-          top: '0',
-          left: '0'
-        });
-      }
-
-      function getDefaultTippyConfig(): Partial<TippyProps> {
-        return {
-          getReferenceClientRect: null,
-          interactive: true,
-          trigger: 'manual',
-          placement: 'left-start',
-          hideOnClick: false,
-          duration: 100,
-          zIndex: 10,
-          appendTo: dragHandleContainer,
-          content: dragHandleElement,
-          popperOptions: {
-            modifiers: [
-              { name: 'flip', enabled: false },
-              {
-                name: 'preventOverflow',
-                options: {
-                  rootBoundary: 'document',
-                  mainAxis: false
-                }
-              },
-            ],
-          }
-        };
-      }
-
-      function canUpdateDragHandle(element: HTMLElement | null, tippy: any) {
-        return element && tippy;
-      }
-
-      function shouldUpdatePosition(view: EditorView, oldState: EditorState) {
-        return !view.state.doc.eq(oldState.doc) && selectedNodePosition !== -1;
-      }
-
-      function getValidTargetElement(view: EditorView) {
-        let targetElement: any = view.nodeDOM(selectedNodePosition);
-        targetElement = getOuterNodePos(view, targetElement);
-
-        if (targetElement === view.dom || targetElement?.nodeType !== 1) {
-          return null;
-        }
-
-        return targetElement;
-      }
-
-      function updateNodeInformation(view: EditorView, targetElement: HTMLElement) {
-        const domPosition = view.posAtDOM(targetElement, 0);
-        const ancestorNode = getAncestorNodeAtDepth(editor.state.doc, domPosition);
-
-        if (ancestorNode === selectedNode) {
-          return;
-        }
-
-        const previousNodePos = getPreviousNodeStartPosition(editor.state.doc, domPosition);
-
-        selectedNode = ancestorNode;
-        selectedNodePosition = previousNodePos;
-        // relativePosition = getOuterNode(editor.state.doc, selectedNodePosition);
-
-        onNodeChange?.({
-          editor,
-          node: selectedNode,
-          pos: selectedNodePosition
-        });
-
-        updateTippyPosition(targetElement);
-      }
-
-      function updateTippyPosition(element: HTMLElement) {
-        tippyInstance.setProps({
-          getReferenceClientRect: () => element.getBoundingClientRect()
-        });
-        tippyInstance.show();
-      }
-
-      function cleanup() {
-        tippyInstance?.destroy();
-        dragHandleElement && removeNode(dragHandleContainer);
-      }
-    },
-    props: {
-      handleDOMEvents: {
-        mouseleave: (editorView, event: any) => {
-          if (isDragLocked) return false;
-          if (!shouldHideDragHandle(event)) return false;
-
-          hideDragHandle();
-          resetSelectedState();
-          return false;
-
-          function shouldHideDragHandle(event: any) {
-            return event.target && !dragHandleContainer.contains(event.relatedTarget);
-          }
-
-          function hideDragHandle() {
-            tippyInstance?.hide();
-          }
-
-          function resetSelectedState() {
-            selectedNode = null;
-            selectedNodePosition = -1;
-            onNodeChange?.({
-              editor: editor,
-              node: null,
-              pos: -1
-            });
-          }
-        },
-        mousemove: debounce((editorView: EditorView, mouseEvent: MouseEvent) => {
-          if (!dragHandleElement || !tippyInstance || isDragLocked) {
-            return false;
-          }
-
-          const nearestElement = findElementNextToCoords({
-            x: mouseEvent.clientX,
-            y: mouseEvent.clientY,
-            direction: 'right',
-            editor: editor
-          });
-
-          if (!nearestElement.resultElement) {
-            return false;
-          }
-
-          if (nearestElement.resultElement === editorView.dom) {
-            return false;
-          }
-
-          const targetElement = getOuterNodePos(editorView, nearestElement.resultElement);
-
-          if (targetElement === editorView.dom) {
-            return false;
-          }
-
-          if (targetElement?.nodeType !== 1) {
-            return false;
-          }
-
-          const domPosition = editorView.posAtDOM(targetElement, 0);
-          const ancestorNode = getAncestorNodeAtDepth(editor.state.doc, domPosition);
-
-          if (ancestorNode === selectedNode) {
-            return false;
-          }
-
-          const previousNodePosition = getPreviousNodeStartPosition(editor.state.doc, domPosition);
-          selectedNode = ancestorNode;
-          selectedNodePosition = previousNodePosition;
-          // relativePosition = getOuterNode(editorView.state, selectedNodePosition);
-
-          onNodeChange?.({
-            editor: editor,
-            node: selectedNode,
-            pos: selectedNodePosition
-          });
-
-          tippyInstance.setProps({
-            getReferenceClientRect: () => targetElement.getBoundingClientRect()
-          });
-          tippyInstance.show();
-
-          return false;
-        }, 100),
-      },
-    },
-  });
-}
-
-export { DragHandlePlugin, dragHandlePluginDefaultKey };

package/src/plugins/DragHandle/range.ts

@@ -1,114 +0,0 @@
-import { Selection, SelectionRange } from '@tiptap/pm/state';
-import { NodeRange, ResolvedPos, Node as ProseMirrorNode } from '@tiptap/pm/model';
-import { Mapping, Mappable } from '@tiptap/pm/transform';
-
-export function getSelectionRanges(state: ResolvedPos, range: ResolvedPos, depth?: number): SelectionRange[] {
-  const ranges: SelectionRange[] = [];
-  const root = state.node(0);
-  depth =
-    typeof depth === 'number' && depth >= 0
-      ? depth
-      : state.sameParent(range)
-        ? Math.max(0, state.sharedDepth(range.pos) - 1)
-        : state.sharedDepth(range.pos);
-  const nodeRange = new NodeRange(state, range, depth);
-  const startIndex = nodeRange.depth === 0 ? 0 : root.resolve(nodeRange.start).posAtIndex(0);
-
-  nodeRange.parent.forEach((size, offset) => {
-    const from = startIndex + offset;
-    const to = from + size.nodeSize;
-    if (from < nodeRange.start || from >= nodeRange.end) return;
-    const selectionRange = new SelectionRange(root.resolve(from), root.resolve(to));
-    ranges.push(selectionRange);
-  });
-
-  return ranges;
-}
-
-class NodeRangeBookmark {
-  anchor: number;
-  head: number;
-  constructor(anchor: number, head: number) {
-    this.anchor = anchor;
-    this.head = head;
-  }
-  map(mapping: Mappable) {
-    return new NodeRangeBookmark(mapping.map(this.anchor), mapping.map(this.head));
-  }
-  resolve(doc: ProseMirrorNode) {
-    const e = doc.resolve(this.anchor);
-    const o = doc.resolve(this.head);
-    return new NodeRangeSelection(e, o);
-  }
-}
-
-export class NodeRangeSelection extends Selection {
-  depth: number | undefined;
-  constructor(from: ResolvedPos, to: ResolvedPos, depth?: number, bias = 1) {
-    const { doc } = from;
-    const isSamePosition = from === to;
-    const isAtDocEnd = from.pos === doc.content.size && to.pos === doc.content.size;
-    const resolvedTo = isSamePosition && !isAtDocEnd ? doc.resolve(to.pos + (bias > 0 ? 1 : -1)) : to;
-    const resolvedFrom = isSamePosition && isAtDocEnd ? doc.resolve(from.pos - (bias > 0 ? 1 : -1)) : from;
-    const selectionRanges = getSelectionRanges(resolvedFrom.min(resolvedTo), resolvedFrom.max(resolvedTo), depth);
-    super(
-      resolvedTo.pos >= from.pos ? selectionRanges[0].$from : selectionRanges[selectionRanges.length - 1].$to,
-      resolvedTo.pos >= from.pos ? selectionRanges[selectionRanges.length - 1].$to : selectionRanges[0].$from,
-      selectionRanges
-    );
-    this.depth = depth;
-  }
-  get $to() {
-    return this.ranges[this.ranges.length - 1].$to;
-  }
-  eq(other: Selection) {
-    return other instanceof NodeRangeSelection && other.$from.pos === this.$from.pos && other.$to.pos === this.$to.pos;
-  }
-  map(doc: ProseMirrorNode, mapping: Mapping) {
-    const newFrom = doc.resolve(mapping.map(this.anchor));
-    const newTo = doc.resolve(mapping.map(this.head));
-    return new NodeRangeSelection(newFrom, newTo);
-  }
-  toJSON() {
-    return { type: 'nodeRange', anchor: this.anchor, head: this.head };
-  }
-  get isForwards() {
-    return this.head >= this.anchor;
-  }
-  get isBackwards() {
-    return !this.isForwards;
-  }
-  extendBackwards() {
-    const { doc } = this.$from;
-    if (this.isForwards && this.ranges.length > 1) {
-      const remainingRanges = this.ranges.slice(0, -1);
-      const newFrom = remainingRanges[0].$from;
-      const newTo = remainingRanges[remainingRanges.length - 1].$to;
-      return new NodeRangeSelection(newFrom, newTo, this.depth);
-    }
-    const currentRange = this.ranges[0];
-    const newPosition = doc.resolve(Math.max(0, currentRange.$from.pos - 1));
-    return new NodeRangeSelection(this.$anchor, newPosition, this.depth);
-  }
-  extendForwards() {
-    const { doc } = this.$from;
-    if (this.isBackwards && this.ranges.length > 1) {
-      const remainingRanges = this.ranges.slice(1);
-      const newFrom = remainingRanges[0].$from;
-      const newTo = remainingRanges[remainingRanges.length - 1].$to;
-      return new NodeRangeSelection(newTo, newFrom, this.depth);
-    }
-    const currentRange = this.ranges[this.ranges.length - 1];
-    const newPosition = doc.resolve(Math.min(doc.content.size, currentRange.$to.pos + 1));
-    return new NodeRangeSelection(this.$anchor, newPosition, this.depth);
-  }
-  static fromJSON(doc: ProseMirrorNode, json: any): NodeRangeSelection {
-    return new NodeRangeSelection(doc.resolve(json.anchor), doc.resolve(json.head));
-  }
-  static create(doc: ProseMirrorNode, anchor: number, head: number, depth?: number, bias = 1) {
-    return new this(doc.resolve(anchor), doc.resolve(head), depth, bias);
-  }
-  getBookmark() {
-    return new NodeRangeBookmark(this.anchor, this.head);
-  }
-}

package/src/plugins/DragHandle/utils.ts

@@ -1,80 +0,0 @@
-/* eslint-disable @typescript-eslint/prefer-for-of */
-import { type Editor } from '@tiptap/core';
-
-export function cloneElement(node: HTMLElement) {
-  const clonedNode: any = node.cloneNode(true);
-  const originalElements = [node, ...Array.from(node.getElementsByTagName('*'))];
-  const clonedElements = [clonedNode, ...Array.from(clonedNode.getElementsByTagName('*'))];
-  originalElements.forEach((element, index) => {
-    clonedElements[index].style.cssText = (function (element) {
-      let styles = '';
-      const computedStyles = getComputedStyle(element);
-      for (let i = 0; i < computedStyles.length; i += 1) {
-        styles += `${computedStyles[i]}:${computedStyles.getPropertyValue(computedStyles[i])};`;
-      }
-      return styles;
-    })(element);
-  });
-  return clonedNode;
-}
-export function getComputedStyles(element: Element, styleProperty: any) {
-  return window.getComputedStyle(element)[styleProperty];
-}
-
-export function minMax(value = 0, minimum = 0, maximum = 0) {
-  return Math.min(Math.max(value, minimum), maximum);
-}
-
-export function removeNode(node: HTMLElement) {
-  if (node.parentNode !== null && node.parentNode !== undefined) {
-    node.parentNode.removeChild(node);
-  }
-}
-export type FindElementNextToCoords = {
-  x: number
-  y: number
-  direction?: 'left' | 'right'
-  editor: Editor
-};
-export function findElementNextToCoords (options: FindElementNextToCoords) {
-  const { x, y, direction, editor } = options;
-  let targetElement: any = null;
-  let targetNode: any = null;
-  let documentPosition: any = null;
-  let currentX = x;
-
-  for (; null === targetNode && currentX < window.innerWidth && currentX > 0;) {
-    const elementsAtPoint = document.elementsFromPoint(currentX, y);
-    const proseMirrorIndex = elementsAtPoint.findIndex(el => el.classList.contains('ProseMirror'));
-    const relevantElements = elementsAtPoint.slice(0, proseMirrorIndex);
-
-    if (relevantElements.length > 0) {
-      const currentElement = relevantElements[0];
-      targetElement = currentElement;
-      documentPosition = editor.view.posAtDOM(currentElement, 0);
-
-      if (documentPosition >= 0) {
-        targetNode = editor.state.doc.nodeAt(Math.max(documentPosition - 1, 0));
-        if (targetNode === null || targetNode.isText) {
-          targetNode = editor.state.doc.nodeAt(Math.max(documentPosition - 1, 0));
-        }
-        if (!targetNode) {
-          targetNode = editor.state.doc.nodeAt(Math.max(documentPosition, 0));
-        }
-        break;
-      }
-    }
-
-    if (direction === 'left') {
-      currentX -= 1;
-    } else {
-      currentX += 1;
-    }
-  }
-
-  return {
-    resultElement: targetElement,
-    resultNode: targetNode,
-    pos: documentPosition !== null ? documentPosition : null
-  };
-}