reactjs-tiptap-editor-pro 0.2.28 → 0.2.30

package/src/plugins/DragHandle/index.ts

@@ -0,0 +1,375 @@
+/* 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

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

@@ -0,0 +1,80 @@
+/* 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
+  };
+}