onchain-lexical-components 0.0.1 → 0.0.3

package/dist/DraggableBlockPlugin.js

@@ -0,0 +1,805 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+'use strict';
+
+var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
+var lexical = require('lexical');
+var onchainLexicalInstance = require('onchain-lexical-instance');
+var react = require('react');
+var richText = require('@lexical/rich-text');
+var utils = require('@lexical/utils');
+var traversal = require('onchain-utility/traversal');
+var reactDom = require('react-dom');
+var jsxRuntime = require('react/jsx-runtime');
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+const useLatest = value => {
+  const latest = react.useRef(value);
+  react.useEffect(() => {
+    latest.current = value;
+  }, [value]);
+  return latest;
+};
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+class Point {
+  constructor(x, y) {
+    this._x = x;
+    this._y = y;
+  }
+  get x() {
+    return this._x;
+  }
+  get y() {
+    return this._y;
+  }
+  equals({
+    x,
+    y
+  }) {
+    return this.x === x && this.y === y;
+  }
+  calcDeltaXTo({
+    x
+  }) {
+    return this.x - x;
+  }
+  calcDeltaYTo({
+    y
+  }) {
+    return this.y - y;
+  }
+  calcHorizontalDistanceTo(point) {
+    return Math.abs(this.calcDeltaXTo(point));
+  }
+  calcVerticalDistance(point) {
+    return Math.abs(this.calcDeltaYTo(point));
+  }
+  calcDistanceTo(point) {
+    return Math.sqrt(Math.pow(this.calcDeltaXTo(point), 2) + Math.pow(this.calcDeltaYTo(point), 2));
+  }
+}
+function isPoint(x) {
+  return x instanceof Point;
+}
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+class Rectangle {
+  constructor(left, top, right, bottom) {
+    const [physicTop, physicBottom] = top <= bottom ? [top, bottom] : [bottom, top];
+    const [physicLeft, physicRight] = left <= right ? [left, right] : [right, left];
+    this._top = physicTop;
+    this._right = physicRight;
+    this._left = physicLeft;
+    this._bottom = physicBottom;
+  }
+  get top() {
+    return this._top;
+  }
+  get right() {
+    return this._right;
+  }
+  get bottom() {
+    return this._bottom;
+  }
+  get left() {
+    return this._left;
+  }
+  get width() {
+    return Math.abs(this._left - this._right);
+  }
+  get height() {
+    return Math.abs(this._bottom - this._top);
+  }
+  equals({
+    top,
+    left,
+    bottom,
+    right
+  }) {
+    return top === this._top && bottom === this._bottom && left === this._left && right === this._right;
+  }
+  contains(target) {
+    if (isPoint(target)) {
+      const {
+        x,
+        y
+      } = target;
+      const isOnTopSide = y < this._top;
+      const isOnBottomSide = y > this._bottom;
+      const isOnLeftSide = x < this._left;
+      const isOnRightSide = x > this._right;
+      const result = !isOnTopSide && !isOnBottomSide && !isOnLeftSide && !isOnRightSide;
+      return {
+        reason: {
+          isOnBottomSide,
+          isOnLeftSide,
+          isOnRightSide,
+          isOnTopSide
+        },
+        result
+      };
+    } else {
+      const {
+        top,
+        left,
+        bottom,
+        right
+      } = target;
+      return top >= this._top && top <= this._bottom && bottom >= this._top && bottom <= this._bottom && left >= this._left && left <= this._right && right >= this._left && right <= this._right;
+    }
+  }
+  intersectsWith(rect) {
+    const {
+      left: x1,
+      top: y1,
+      width: w1,
+      height: h1
+    } = rect;
+    const {
+      left: x2,
+      top: y2,
+      width: w2,
+      height: h2
+    } = this;
+    const maxX = x1 + w1 >= x2 + w2 ? x1 + w1 : x2 + w2;
+    const maxY = y1 + h1 >= y2 + h2 ? y1 + h1 : y2 + h2;
+    const minX = x1 <= x2 ? x1 : x2;
+    const minY = y1 <= y2 ? y1 : y2;
+    return maxX - minX <= w1 + w2 && maxY - minY <= h1 + h2;
+  }
+  generateNewRect({
+    left = this.left,
+    top = this.top,
+    right = this.right,
+    bottom = this.bottom
+  }) {
+    return new Rectangle(left, top, right, bottom);
+  }
+  static fromLTRB(left, top, right, bottom) {
+    return new Rectangle(left, top, right, bottom);
+  }
+  static fromLWTH(left, width, top, height) {
+    return new Rectangle(left, top, left + width, top + height);
+  }
+  static fromPoints(startPoint, endPoint) {
+    const {
+      y: top,
+      x: left
+    } = startPoint;
+    const {
+      y: bottom,
+      x: right
+    } = endPoint;
+    return Rectangle.fromLTRB(left, top, right, bottom);
+  }
+  static fromDOM(dom) {
+    const {
+      top,
+      width,
+      left,
+      height
+    } = dom.getBoundingClientRect();
+    return Rectangle.fromLWTH(left, width, top, height);
+  }
+}
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+const SPACE = 4;
+const TARGET_LINE_HALF_HEIGHT = 2;
+const DRAG_DATA_FORMAT = 'application/x-lexical-drag-block';
+const TEXT_BOX_HORIZONTAL_PADDING = 28;
+const BOX_INDENT_INSERT = 60;
+const Downward = 1;
+const Upward = -1;
+const Indeterminate = 0;
+let prevIndex = Infinity;
+function getCurrentIndex(keysLength) {
+  if (keysLength === 0) {
+    return Infinity;
+  }
+  if (prevIndex >= 0 && prevIndex < keysLength) {
+    return prevIndex;
+  }
+  return Math.floor(keysLength / 2);
+}
+function getTopLevelNodeKeys(editor) {
+  return editor.getEditorState().read(() => traversal.dfs(lexical.$getRoot().getChildren(), node => {
+    if (node.getChildren) {
+      return node.getChildren().filter(node => onchainLexicalInstance.$isInstanceNode(node));
+    }
+    return [];
+  })).map(node => {
+    return node.getKey();
+  });
+}
+function getCollapsedMargins(elem) {
+  const getMargin = (element, margin) => element ? parseFloat(window.getComputedStyle(element)[margin]) : 0;
+  const {
+    marginTop,
+    marginBottom
+  } = window.getComputedStyle(elem);
+  const prevElemSiblingMarginBottom = getMargin(elem.previousElementSibling, 'marginBottom');
+  const nextElemSiblingMarginTop = getMargin(elem.nextElementSibling, 'marginTop');
+  const collapsedTopMargin = Math.max(parseFloat(marginTop), prevElemSiblingMarginBottom);
+  const collapsedBottomMargin = Math.max(parseFloat(marginBottom), nextElemSiblingMarginTop);
+  return {
+    marginBottom: collapsedBottomMargin,
+    marginTop: collapsedTopMargin
+  };
+}
+function getBlockElement(anchorElem, editor, event, useEdgeAsDefault = false) {
+  const anchorElementRect = anchorElem.getBoundingClientRect();
+  const topLevelNodeKeys = getTopLevelNodeKeys(editor);
+  let blockElem = null;
+  editor.getEditorState().read(() => {
+    if (useEdgeAsDefault) {
+      const [firstNode, lastNode] = [editor.getElementByKey(topLevelNodeKeys[0]), editor.getElementByKey(topLevelNodeKeys[topLevelNodeKeys.length - 1])];
+      const [firstNodeRect, lastNodeRect] = [firstNode != null ? firstNode.getBoundingClientRect() : undefined, lastNode != null ? lastNode.getBoundingClientRect() : undefined];
+      if (firstNodeRect && lastNodeRect) {
+        const firstNodeZoom = utils.calculateZoomLevel(firstNode);
+        const lastNodeZoom = utils.calculateZoomLevel(lastNode);
+        if (event.y / firstNodeZoom < firstNodeRect.top) {
+          blockElem = firstNode;
+        } else if (event.y / lastNodeZoom > lastNodeRect.bottom) {
+          blockElem = lastNode;
+        }
+        if (blockElem) {
+          return;
+        }
+      }
+    }
+    // 直接获取第一个有instance属性的祖先元素 并返回
+    if (event.target instanceof Element) {
+      blockElem = event.target.closest(`[instance=true]`);
+      return blockElem;
+    }
+    let index = getCurrentIndex(topLevelNodeKeys.length);
+    let direction = Indeterminate;
+    while (index >= 0 && index < topLevelNodeKeys.length) {
+      const key = topLevelNodeKeys[index];
+      const elem = editor.getElementByKey(key);
+      if (elem === null) {
+        break;
+      }
+      const zoom = utils.calculateZoomLevel(elem);
+      const point = new Point(event.x / zoom, event.y / zoom);
+      const domRect = Rectangle.fromDOM(elem);
+      // console.log({direction, elem, index, zoom, point, domRect}, "elem")
+      const {
+        marginTop,
+        marginBottom
+      } = getCollapsedMargins(elem);
+      const rect = domRect.generateNewRect({
+        bottom: domRect.bottom + marginBottom,
+        left: anchorElementRect.left,
+        right: anchorElementRect.right,
+        top: domRect.top - marginTop
+      });
+      const {
+        result,
+        reason: {
+          isOnTopSide,
+          isOnBottomSide
+        }
+      } = rect.contains(point);
+      if (result) {
+        blockElem = elem;
+        prevIndex = index;
+        break;
+      }
+      if (direction === Indeterminate) {
+        if (isOnTopSide) {
+          direction = Upward;
+        } else if (isOnBottomSide) {
+          direction = Downward;
+        } else {
+          // stop search block element
+          direction = Infinity;
+        }
+      }
+      index += direction;
+    }
+  });
+  return blockElem;
+}
+function setMenuPosition(targetElem, floatingElem, anchorElem) {
+  if (!targetElem) {
+    floatingElem.style.opacity = '0';
+    floatingElem.style.transform = 'translate(-10000px, -10000px)';
+    return;
+  }
+  const targetRect = targetElem.getBoundingClientRect();
+  window.getComputedStyle(targetElem);
+  // const floatingElemRect = floatingElem.getBoundingClientRect();
+  const anchorElementRect = anchorElem.getBoundingClientRect();
+
+  // [源码修改]
+  // const top =
+  //   targetRect.top +
+  //   (targetCalculateHeight - floatingElemRect.height) / 2 -
+  //   anchorElementRect.top;
+  const top = targetRect.top - anchorElementRect.top;
+  const left = SPACE;
+  floatingElem.style.opacity = '1';
+  floatingElem.style.transform = `translate(${left}px, ${top}px)`;
+}
+function setDragImage(dataTransfer, draggableBlockElem) {
+  const {
+    transform
+  } = draggableBlockElem.style;
+
+  // Remove dragImage borders
+  draggableBlockElem.style.transform = 'translateZ(0)';
+  dataTransfer.setDragImage(draggableBlockElem, 0, 0);
+  setTimeout(() => {
+    draggableBlockElem.style.transform = transform;
+  });
+}
+
+/** 放置区域是否是自身 */
+// function isPlacementAreaElemSelf(
+//   targetBlockElem: HTMLElement,
+//   latestDraggableBlockElem: React.MutableRefObject<HTMLElement | null>,
+// ) {
+//   const isTargetSelf = latestDraggableBlockElem.current === targetBlockElem;
+//   return isTargetSelf;
+// }
+
+/** 放置区域是否是自身的子级 */
+function $isPlacementAreaElemSelfRoChild(targetBlockElem, latestDraggableBlockElem, isPlacementDown = true) {
+  const key = targetBlockElem.getAttribute('key');
+  let node = key ? lexical.$getNodeByKey(key) : null;
+  if (!isPlacementDown) {
+    node = node ? node.getPreviousSibling() : null;
+  }
+  if (node) {
+    return Boolean(utils.$findMatchingParent(node, current => {
+      const draggable = latestDraggableBlockElem.current;
+      if (current && draggable) {
+        return current.getKey() === draggable.getAttribute('key');
+      }
+      return false;
+    }));
+  }
+  return false;
+}
+
+/** 是否是插入到子节点 */
+function isInsertChild(targetBlockMouseX) {
+  const isIndent = targetBlockMouseX > BOX_INDENT_INSERT;
+  return isIndent;
+}
+
+/** 是否是放到节点下面 */
+function isPlacementAreaDown(mouseY, targetBlockElemTop) {
+  return mouseY >= targetBlockElemTop + 40;
+}
+
+/** 获取鼠标位置以及一些基础数据 */
+function getMouseInfo({
+  target,
+  pageY,
+  pageX,
+  targetBlockElem
+}) {
+  const mouseY = pageY / utils.calculateZoomLevel(target);
+  const mouseX = pageX / utils.calculateZoomLevel(target);
+  const targetBlockElemDOMRect = targetBlockElem.getBoundingClientRect();
+  const {
+    left: targetBlockElemLeft
+  } = targetBlockElemDOMRect;
+  const targetBlockMouseX = mouseX - targetBlockElemLeft;
+  const isAddChild = isInsertChild(targetBlockMouseX);
+  return {
+    isAddChild,
+    mouseX,
+    mouseY,
+    targetBlockElemDOMRect
+  };
+}
+function setTargetLine(params) {
+  const {
+    targetBlockElem,
+    targetLineElem,
+    mouseY,
+    mouseX,
+    anchorElem,
+    targetLineIndent,
+    targetBlockElemDOMRect
+  } = params;
+  const {
+    top: targetBlockElemTop,
+    height: targetBlockElemHeight,
+    left: targetBlockElemLeft,
+    width: targetBlockElemWidth
+  } = targetBlockElemDOMRect || targetBlockElem.getBoundingClientRect();
+  const {
+    top: anchorTop
+  } = anchorElem.getBoundingClientRect();
+  const {
+    marginTop,
+    marginBottom
+  } = getCollapsedMargins(targetBlockElem);
+  let lineTop = targetBlockElemTop;
+  if (isPlacementAreaDown(mouseY, targetBlockElemTop)) {
+    lineTop += targetBlockElemHeight + marginBottom / 2;
+  } else {
+    lineTop -= marginTop / 2;
+  }
+  const targetBlockMouseX = mouseX - targetBlockElemLeft;
+  const top = lineTop - anchorTop - TARGET_LINE_HALF_HEIGHT;
+  const lineIndent = targetLineIndent || TEXT_BOX_HORIZONTAL_PADDING;
+  const isAddChild = isInsertChild(targetBlockMouseX);
+  const left = isAddChild ? BOX_INDENT_INSERT + lineIndent : lineIndent;
+  targetLineElem.style.transform = `translate(${left}px, ${top}px)`;
+  targetLineElem.style.backgroundColor = isAddChild ? 'purple' : 'deepskyblue';
+  targetLineElem.style.width = `${targetBlockElemWidth - (isAddChild ? BOX_INDENT_INSERT : 0)}px`;
+  targetLineElem.style.opacity = '.4';
+}
+function hideTargetLine(targetLineElem) {
+  if (targetLineElem) {
+    targetLineElem.style.opacity = '0';
+    targetLineElem.style.transform = 'translate(-10000px, -10000px)';
+  }
+}
+function useDraggableBlockMenu(editor, anchorElem, menuRef, targetLineRef, isEditable, menuComponent, targetLineComponent, isOnMenu, targetLineIndent, onElementChanged) {
+  const scrollerElem = anchorElem.parentElement;
+  const isDraggingBlockRef = react.useRef(false);
+  const [draggableBlockElem, setDraggableBlockElemState] = react.useState(null);
+  const latestDraggableBlockElem = useLatest(draggableBlockElem);
+  const setDraggableBlockElem = react.useCallback(elem => {
+    setDraggableBlockElemState(elem);
+    if (onElementChanged) {
+      onElementChanged(elem);
+    }
+  }, [onElementChanged]);
+  react.useEffect(() => {
+    function onMouseMove(event) {
+      const target = event.target;
+      if (!utils.isHTMLElement(target)) {
+        setDraggableBlockElem(null);
+        return;
+      }
+      if (isOnMenu(target)) {
+        return;
+      }
+      const _draggableBlockElem = getBlockElement(anchorElem, editor, event);
+      setDraggableBlockElem(_draggableBlockElem);
+    }
+    function onMouseLeave() {
+      setDraggableBlockElem(null);
+    }
+    if (scrollerElem != null) {
+      scrollerElem.addEventListener('mousemove', onMouseMove);
+      scrollerElem.addEventListener('mouseleave', onMouseLeave);
+    }
+    return () => {
+      if (scrollerElem != null) {
+        scrollerElem.removeEventListener('mousemove', onMouseMove);
+        scrollerElem.removeEventListener('mouseleave', onMouseLeave);
+      }
+    };
+  }, [scrollerElem, anchorElem, editor, isOnMenu, setDraggableBlockElem]);
+  react.useEffect(() => {
+    if (menuRef.current) {
+      // 更新操作栏区域
+      setMenuPosition(draggableBlockElem, menuRef.current, anchorElem);
+    }
+  }, [anchorElem, draggableBlockElem, menuRef]);
+  react.useEffect(() => {
+    // 拖动
+    function $onDragover(event) {
+      if (!isDraggingBlockRef.current) {
+        return false;
+      }
+      const [isFileTransfer] = richText.eventFiles(event);
+      if (isFileTransfer) {
+        return false;
+      }
+      const {
+        pageY,
+        pageX,
+        target
+      } = event;
+      if (!utils.isHTMLElement(target)) {
+        return false;
+      }
+      const targetBlockElem = getBlockElement(anchorElem, editor, event, true);
+      const targetLineElem = targetLineRef.current;
+      if (targetBlockElem === null || targetLineElem === null) {
+        return false;
+      }
+      const {
+        mouseY,
+        mouseX,
+        isAddChild,
+        targetBlockElemDOMRect
+      } = getMouseInfo({
+        pageX,
+        pageY,
+        target,
+        targetBlockElem
+      });
+      const isPlacementDown = isPlacementAreaDown(mouseY, targetBlockElemDOMRect.top);
+      const isPlacementSelfRoChild = $isPlacementAreaElemSelfRoChild(targetBlockElem, latestDraggableBlockElem, isPlacementDown);
+      if (isPlacementSelfRoChild) {
+        if (isAddChild) {
+          hideTargetLine(targetLineElem);
+          return false;
+        }
+        const key = targetBlockElem.getAttribute('key');
+        const targetNode = key ? lexical.$getNodeByKey(key) : null;
+        if (!targetNode || !lexical.$isRootNode(targetNode.getParent())) {
+          hideTargetLine(targetLineElem);
+          return false;
+        }
+      }
+      setTargetLine({
+        anchorElem,
+        mouseX,
+        mouseY,
+        targetBlockElem,
+        targetBlockElemDOMRect,
+        targetLineElem,
+        targetLineIndent
+      });
+      // Prevent default event to be able to trigger onDrop events
+      event.preventDefault();
+      return true;
+    }
+
+    // 放下
+    function $onDrop(event) {
+      if (!isDraggingBlockRef.current) {
+        return false;
+      }
+      const [isFileTransfer] = richText.eventFiles(event);
+      if (isFileTransfer) {
+        return false;
+      }
+      const {
+        target,
+        dataTransfer,
+        pageY,
+        pageX
+      } = event;
+      const dragData = dataTransfer != null ? dataTransfer.getData(DRAG_DATA_FORMAT) : '';
+      const draggedNode = lexical.$getNodeByKey(dragData);
+      if (!draggedNode) {
+        return false;
+      }
+      if (!utils.isHTMLElement(target)) {
+        return false;
+      }
+      const targetBlockElem = getBlockElement(anchorElem, editor, event, true);
+      if (!targetBlockElem) {
+        return false;
+      }
+      const targetNode = lexical.$getNearestNodeFromDOMNode(targetBlockElem);
+      if (!targetNode) {
+        return false;
+      }
+      const {
+        mouseY,
+        isAddChild,
+        targetBlockElemDOMRect: {
+          top: targetBlockElemTop
+        }
+      } = getMouseInfo({
+        pageX,
+        pageY,
+        target,
+        targetBlockElem
+      });
+      if (targetNode === draggedNode && !isAddChild) {
+        return true;
+      }
+      if (isPlacementAreaDown(mouseY, targetBlockElemTop)) {
+        if (isAddChild) {
+          if (onchainLexicalInstance.$isInstanceNode(targetNode)) {
+            targetNode.append(draggedNode);
+          }
+        } else {
+          targetNode.insertAfter(draggedNode);
+        }
+      } else {
+        if (isAddChild && lexical.$isElementNode(targetNode)) {
+          const previous = targetNode.getPreviousSibling();
+          if (onchainLexicalInstance.$isInstanceNode(previous)) {
+            previous.append(draggedNode);
+          }
+        } else {
+          targetNode.insertBefore(draggedNode);
+        }
+      }
+      draggedNode.selectEnd();
+      setDraggableBlockElem(null);
+      return true;
+    }
+
+    // 添加拖拽事件
+    return utils.mergeRegister(editor.registerCommand(lexical.DRAGOVER_COMMAND, event => {
+      const result = $onDragover(event);
+      if (!result) {
+        if (event.dataTransfer) {
+          event.dataTransfer.dropEffect = 'none';
+        }
+      }
+      return result;
+    }, lexical.COMMAND_PRIORITY_LOW), editor.registerCommand(lexical.DROP_COMMAND, event => {
+      return $onDrop(event);
+    }, lexical.COMMAND_PRIORITY_HIGH));
+  }, [anchorElem, editor, targetLineRef, setDraggableBlockElem, targetLineIndent, latestDraggableBlockElem]);
+  function onDragStart(event) {
+    const dataTransfer = event.dataTransfer;
+    if (!dataTransfer || !draggableBlockElem) {
+      return;
+    }
+    setDragImage(dataTransfer, draggableBlockElem);
+    let nodeKey = '';
+    editor.update(() => {
+      const node = lexical.$getNearestNodeFromDOMNode(draggableBlockElem);
+      if (node) {
+        nodeKey = node.getKey();
+      }
+    });
+    isDraggingBlockRef.current = true;
+    dataTransfer.setData(DRAG_DATA_FORMAT, nodeKey);
+  }
+  function onDragEnd() {
+    isDraggingBlockRef.current = false;
+    hideTargetLine(targetLineRef.current);
+  }
+  return /*#__PURE__*/reactDom.createPortal(/*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+      draggable: true,
+      onDragStart: onDragStart,
+      onDragEnd: onDragEnd,
+      children: isEditable && menuComponent
+    }), targetLineComponent]
+  }), anchorElem);
+}
+function DraggableBlockPlugin_EXPERIMENTAL({
+  anchorElem = document.body,
+  menuRef,
+  targetLineRef,
+  menuComponent,
+  targetLineComponent,
+  targetLineIndent,
+  isOnMenu,
+  onElementChanged
+}) {
+  const [editor] = LexicalComposerContext.useLexicalComposerContext();
+  return useDraggableBlockMenu(editor, anchorElem, menuRef, targetLineRef, editor._editable, menuComponent, targetLineComponent, isOnMenu, targetLineIndent, onElementChanged);
+}
+
+function styleInject(css, ref) {
+  if (ref === void 0) ref = {};
+  var insertAt = ref.insertAt;
+  if (typeof document === 'undefined') {
+    return;
+  }
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z = ".index-module_draggable-block-menu__LSGkG{align-items:center;border-radius:4px;cursor:grab;display:flex;gap:2px;height:40px;left:0;opacity:0;position:absolute;top:0;will-change:transform}.index-module_draggable-block-menu__LSGkG .index-module_icon__J-jv8{align-items:center;background-image:url(/richText/draggable-block-menu.svg);display:flex;height:16px;justify-content:center;opacity:.3;width:16px}.index-module_draggable-block-menu__LSGkG .index-module_icon__J-jv8:hover{background-color:#efefef}.index-module_draggable-block-menu__LSGkG .index-module_icon-plus__jGImy{background-color:transparent;background-image:url(/richText/plus.svg);border:none;cursor:pointer;display:inline-block}.index-module_draggable-block-menu__LSGkG:active{cursor:grabbing}.index-module_draggable-block-target-line__iSspi{background:#00bfff;height:4px;left:0;opacity:0;pointer-events:none;position:absolute;top:0;will-change:transform}";
+var Styles = {"draggable-block-menu":"index-module_draggable-block-menu__LSGkG","icon":"index-module_icon__J-jv8","icon-plus":"index-module_icon-plus__jGImy","draggable-block-target-line":"index-module_draggable-block-target-line__iSspi"};
+styleInject(css_248z);
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+const DRAGGABLE_BLOCK_MENU_CLASSNAME = Styles['draggable-block-menu'];
+function isOnMenu(element) {
+  return !!element.closest(`.${DRAGGABLE_BLOCK_MENU_CLASSNAME}`);
+}
+function DraggableBlockPlugin({
+  anchorElem = document.body,
+  dragIcon,
+  targetLineIndent
+}) {
+  const [editor] = LexicalComposerContext.useLexicalComposerContext();
+  const menuRef = react.useRef(null);
+  const targetLineRef = react.useRef(null);
+  const [draggableElement, setDraggableElement] = react.useState(null);
+  function insertBlock(e) {
+    if (!draggableElement || !editor) {
+      return;
+    }
+    editor.update(() => {
+      const node = lexical.$getNearestNodeFromDOMNode(draggableElement);
+      if (!node) {
+        return;
+      }
+      const pNode = onchainLexicalInstance.$createInstanceNode();
+      if (e.altKey || e.ctrlKey) {
+        node.insertBefore(pNode);
+      } else {
+        node.insertAfter(pNode);
+      }
+      pNode.select();
+    });
+  }
+  return /*#__PURE__*/jsxRuntime.jsx(DraggableBlockPlugin_EXPERIMENTAL, {
+    anchorElem: anchorElem,
+    menuRef: menuRef,
+    targetLineRef: targetLineRef,
+    menuComponent: /*#__PURE__*/jsxRuntime.jsxs("div", {
+      ref: menuRef,
+      className: `${Styles.icon} ${Styles['draggable-block-menu']}`,
+      children: [/*#__PURE__*/jsxRuntime.jsx("button", {
+        title: "Click to add below",
+        className: `${Styles.icon} ${Styles['icon-plus']}`,
+        onClick: insertBlock,
+        style: {
+          display: 'none'
+        }
+      }), /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: Styles.icon,
+        children: dragIcon
+      })]
+    }),
+    targetLineComponent: /*#__PURE__*/jsxRuntime.jsx("div", {
+      ref: targetLineRef,
+      className: `${Styles['draggable-block-target-line']}`
+    }),
+    targetLineIndent: targetLineIndent,
+    isOnMenu: isOnMenu,
+    onElementChanged: setDraggableElement
+  });
+}
+
+exports.default = DraggableBlockPlugin;