onchain-lexical-components 0.0.1

package/README.md

@@ -0,0 +1 @@
+# `@onchain/lexical-instance`

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "onchain-lexical-components",
+  "description": "This package provides Lexical components and hooks for React applications.",
+  "keywords": [
+    "react",
+    "lexical",
+    "editor",
+    "rich-text"
+  ],
+  "license": "MIT",
+  "version": "0.0.1",
+  "dependencies": {
+    "@lexical/react": "^0.30.0",
+    "@lexical/rich-text": "^0.30.0",
+    "@lexical/utils": "^0.30.0",
+    "lexical": "0.30.0",
+    "onchain-lexical-instance": "^0.0.1",
+    "onchain-lexical-markdown": "^0.0.1",
+    "onchain-utility": "^0.0.1"
+  },
+  "peerDependencies": {
+    "react": ">=17.x",
+    "react-dom": ">=17.x"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/facebook/lexical",
+    "directory": "packages/lexical-react"
+  },
+  "exports": {
+    "./DraggableBlockPlugin": {
+      "import": {
+        "types": "./DraggableBlockPlugin.d.ts",
+        "default": "./dist/DraggableBlockPlugin.mjs"
+      },
+      "require": {
+        "types": "./DraggableBlockPlugin.d.ts",
+        "default": "./dist/DraggableBlockPlugin.js"
+      }
+    },
+    "./MarkdownShortcutPlugin": {
+      "import": {
+        "types": "./MarkdownShortcutPlugin.d.ts",
+        "default": "./dist/MarkdownShortcutPlugin.mjs"
+      },
+      "require": {
+        "types": "./MarkdownShortcutPlugin.d.ts",
+        "default": "./dist/MarkdownShortcutPlugin.js"
+      }
+    }
+  }
+}

package/src/DraggableBlockPlugin/draggableBlockPlugin.tsx

@@ -0,0 +1,665 @@
+/**
+ * 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.
+ *
+ */
+
+import type {JSX} from 'react';
+
+import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
+import {eventFiles} from '@lexical/rich-text';
+import {
+  $findMatchingParent,
+  calculateZoomLevel,
+  isHTMLElement,
+  mergeRegister,
+} from '@lexical/utils';
+import {
+  $getNearestNodeFromDOMNode,
+  $getNodeByKey,
+  $getRoot,
+  $isElementNode,
+  $isRootNode,
+  COMMAND_PRIORITY_HIGH,
+  COMMAND_PRIORITY_LOW,
+  DRAGOVER_COMMAND,
+  DROP_COMMAND,
+  ElementNode,
+  LexicalEditor,
+  LexicalNode,
+} from 'lexical';
+import {$isInstanceNode} from 'onchain-lexical-instance';
+import {dfs} from 'onchain-utility/traversal';
+import {
+  DragEvent as ReactDragEvent,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import {createPortal} from 'react-dom';
+
+import {useLatest} from '../hooks';
+import {Point} from './shared/point';
+import {Rectangle} from './shared/rect';
+
+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: number): number {
+  if (keysLength === 0) {
+    return Infinity;
+  }
+  if (prevIndex >= 0 && prevIndex < keysLength) {
+    return prevIndex;
+  }
+  return Math.floor(keysLength / 2);
+}
+
+function getTopLevelNodeKeys(editor: LexicalEditor): string[] {
+  return editor
+    .getEditorState()
+    .read(() =>
+      dfs($getRoot().getChildren<LexicalNode & ElementNode>(), (node) => {
+        if (node.getChildren) {
+          return node.getChildren().filter((node) => $isInstanceNode(node));
+        }
+        return [];
+      }),
+    )
+    .map((node) => {
+      return node.getKey();
+    });
+}
+
+function getCollapsedMargins(elem: HTMLElement): {
+  marginTop: number;
+  marginBottom: number;
+} {
+  const getMargin = (
+    element: Element | null,
+    margin: 'marginTop' | 'marginBottom',
+  ): number =>
+    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: HTMLElement,
+  editor: LexicalEditor,
+  event: MouseEvent,
+  useEdgeAsDefault = false,
+): HTMLElement | null {
+  const anchorElementRect = anchorElem.getBoundingClientRect();
+  const topLevelNodeKeys = getTopLevelNodeKeys(editor);
+
+  let blockElem: HTMLElement | null = 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 = calculateZoomLevel(firstNode);
+        const lastNodeZoom = 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 = 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: HTMLElement | null,
+  floatingElem: HTMLElement,
+  anchorElem: HTMLElement,
+) {
+  if (!targetElem) {
+    floatingElem.style.opacity = '0';
+    floatingElem.style.transform = 'translate(-10000px, -10000px)';
+    return;
+  }
+
+  const targetRect = targetElem.getBoundingClientRect();
+  const targetStyle = window.getComputedStyle(targetElem);
+  // const floatingElemRect = floatingElem.getBoundingClientRect();
+  const anchorElementRect = anchorElem.getBoundingClientRect();
+
+  // top left
+  let targetCalculateHeight: number = parseInt(targetStyle.lineHeight, 10);
+  if (isNaN(targetCalculateHeight)) {
+    // middle
+    targetCalculateHeight = targetRect.bottom - targetRect.top;
+  }
+
+  // [源码修改]
+  // 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: DataTransfer,
+  draggableBlockElem: HTMLElement,
+) {
+  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: HTMLElement,
+  latestDraggableBlockElem: React.MutableRefObject<HTMLElement | null>,
+  isPlacementDown = true,
+) {
+  const key = targetBlockElem.getAttribute('key');
+  let node = key ? $getNodeByKey<ElementNode>(key) : null;
+  if (!isPlacementDown) {
+    node = node ? node.getPreviousSibling() : null;
+  }
+  if (node) {
+    return Boolean(
+      $findMatchingParent(node, (current) => {
+        const draggable = latestDraggableBlockElem.current;
+        if (current && draggable) {
+          return current.getKey() === draggable.getAttribute('key');
+        }
+        return false;
+      }),
+    );
+  }
+  return false;
+}
+
+/** 是否是插入到子节点 */
+function isInsertChild(targetBlockMouseX: number) {
+  const isIndent = targetBlockMouseX > BOX_INDENT_INSERT;
+  return isIndent;
+}
+
+/** 是否是放到节点下面 */
+function isPlacementAreaDown(mouseY: number, targetBlockElemTop: number) {
+  return mouseY >= targetBlockElemTop + 40;
+}
+
+/** 获取鼠标位置以及一些基础数据 */
+function getMouseInfo({
+  target,
+  pageY,
+  pageX,
+  targetBlockElem,
+}: {
+  target: HTMLElement;
+  pageY: number;
+  pageX: number;
+  targetBlockElem: HTMLElement;
+}) {
+  const mouseY = pageY / calculateZoomLevel(target);
+  const mouseX = pageX / 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: {
+  targetLineElem: HTMLElement;
+  targetBlockElem: HTMLElement;
+  mouseY: number;
+  mouseX: number;
+  anchorElem: HTMLElement;
+  targetLineIndent?: number;
+  targetBlockElemDOMRect?: DOMRect;
+}) {
+  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: HTMLElement | null) {
+  if (targetLineElem) {
+    targetLineElem.style.opacity = '0';
+    targetLineElem.style.transform = 'translate(-10000px, -10000px)';
+  }
+}
+
+function useDraggableBlockMenu(
+  editor: LexicalEditor,
+  anchorElem: HTMLElement,
+  menuRef: React.RefObject<HTMLElement>,
+  targetLineRef: React.RefObject<HTMLElement>,
+  isEditable: boolean,
+  menuComponent: ReactNode,
+  targetLineComponent: ReactNode,
+  isOnMenu: (element: HTMLElement) => boolean,
+  targetLineIndent?: number,
+  onElementChanged?: (element: HTMLElement | null) => void,
+): JSX.Element {
+  const scrollerElem = anchorElem.parentElement;
+
+  const isDraggingBlockRef = useRef<boolean>(false);
+  const [draggableBlockElem, setDraggableBlockElemState] =
+    useState<HTMLElement | null>(null);
+  const latestDraggableBlockElem = useLatest(draggableBlockElem);
+  const setDraggableBlockElem = useCallback(
+    (elem: HTMLElement | null) => {
+      setDraggableBlockElemState(elem);
+      if (onElementChanged) {
+        onElementChanged(elem);
+      }
+    },
+    [onElementChanged],
+  );
+
+  useEffect(() => {
+    function onMouseMove(event: MouseEvent) {
+      const target = event.target;
+      if (!isHTMLElement(target)) {
+        setDraggableBlockElem(null);
+        return;
+      }
+
+      if (isOnMenu(target as HTMLElement)) {
+        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]);
+
+  useEffect(() => {
+    if (menuRef.current) {
+      // 更新操作栏区域
+      setMenuPosition(draggableBlockElem, menuRef.current, anchorElem);
+    }
+  }, [anchorElem, draggableBlockElem, menuRef]);
+
+  useEffect(() => {
+    // 拖动
+    function $onDragover(event: DragEvent): boolean {
+      if (!isDraggingBlockRef.current) {
+        return false;
+      }
+      const [isFileTransfer] = eventFiles(event);
+      if (isFileTransfer) {
+        return false;
+      }
+      const {pageY, pageX, target} = event;
+      if (!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 ? $getNodeByKey(key) : null;
+        if (!targetNode || !$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: DragEvent): boolean {
+      if (!isDraggingBlockRef.current) {
+        return false;
+      }
+      const [isFileTransfer] = eventFiles(event);
+      if (isFileTransfer) {
+        return false;
+      }
+      const {target, dataTransfer, pageY, pageX} = event;
+      const dragData =
+        dataTransfer != null ? dataTransfer.getData(DRAG_DATA_FORMAT) : '';
+      const draggedNode = $getNodeByKey(dragData);
+      if (!draggedNode) {
+        return false;
+      }
+      if (!isHTMLElement(target)) {
+        return false;
+      }
+      const targetBlockElem = getBlockElement(anchorElem, editor, event, true);
+      if (!targetBlockElem) {
+        return false;
+      }
+      const targetNode = $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 && $isElementNode(targetNode)) {
+          targetNode.append(draggedNode);
+        } else {
+          targetNode.insertAfter(draggedNode);
+        }
+      } else {
+        if (isAddChild && $isElementNode(targetNode)) {
+          const previous = targetNode.getPreviousSibling();
+          if ($isElementNode(previous)) {
+            previous.append(draggedNode);
+          }
+        } else {
+          targetNode.insertBefore(draggedNode);
+        }
+      }
+      draggedNode.selectEnd();
+      setDraggableBlockElem(null);
+
+      return true;
+    }
+
+    // 添加拖拽事件
+    return mergeRegister(
+      editor.registerCommand(
+        DRAGOVER_COMMAND,
+        (event) => {
+          const result = $onDragover(event);
+          if (!result) {
+            if (event.dataTransfer) {
+              event.dataTransfer.dropEffect = 'none';
+            }
+          }
+          return result;
+        },
+        COMMAND_PRIORITY_LOW,
+      ),
+      editor.registerCommand(
+        DROP_COMMAND,
+        (event) => {
+          return $onDrop(event);
+        },
+        COMMAND_PRIORITY_HIGH,
+      ),
+    );
+  }, [
+    anchorElem,
+    editor,
+    targetLineRef,
+    setDraggableBlockElem,
+    targetLineIndent,
+    latestDraggableBlockElem,
+  ]);
+
+  function onDragStart(event: ReactDragEvent<HTMLDivElement>): void {
+    const dataTransfer = event.dataTransfer;
+    if (!dataTransfer || !draggableBlockElem) {
+      return;
+    }
+    setDragImage(dataTransfer, draggableBlockElem);
+    let nodeKey = '';
+    editor.update(() => {
+      const node = $getNearestNodeFromDOMNode(draggableBlockElem);
+      if (node) {
+        nodeKey = node.getKey();
+      }
+    });
+    isDraggingBlockRef.current = true;
+    dataTransfer.setData(DRAG_DATA_FORMAT, nodeKey);
+  }
+
+  function onDragEnd(): void {
+    isDraggingBlockRef.current = false;
+    hideTargetLine(targetLineRef.current);
+  }
+  return createPortal(
+    <>
+      <div draggable={true} onDragStart={onDragStart} onDragEnd={onDragEnd}>
+        {isEditable && menuComponent}
+      </div>
+      {targetLineComponent}
+    </>,
+    anchorElem,
+  );
+}
+
+export function DraggableBlockPlugin_EXPERIMENTAL({
+  anchorElem = document.body,
+  menuRef,
+  targetLineRef,
+  menuComponent,
+  targetLineComponent,
+  targetLineIndent,
+  isOnMenu,
+  onElementChanged,
+}: {
+  anchorElem?: HTMLElement;
+  menuRef: React.RefObject<HTMLElement>;
+  targetLineRef: React.RefObject<HTMLElement>;
+  menuComponent: ReactNode;
+  targetLineComponent: ReactNode;
+  isOnMenu: (element: HTMLElement) => boolean;
+  /** default 46 */
+  targetLineIndent?: number;
+  onElementChanged?: (element: HTMLElement | null) => void;
+}): JSX.Element {
+  const [editor] = useLexicalComposerContext();
+  return useDraggableBlockMenu(
+    editor,
+    anchorElem,
+    menuRef,
+    targetLineRef,
+    editor._editable,
+    menuComponent,
+    targetLineComponent,
+    isOnMenu,
+    targetLineIndent,
+    onElementChanged,
+  );
+}

package/src/DraggableBlockPlugin/index.module.less

@@ -0,0 +1,48 @@
+.draggable-block-menu {
+  border-radius: 4px;
+  cursor: grab;
+  opacity: 0;
+  position: absolute;
+  left: 0;
+  top: 0;
+  will-change: transform;
+  display: flex;
+  gap: 2px;
+  height: 40px;
+  align-items: center;
+  /* opacity: 1 !important;
+  transform: translate(4px, 10px) !important; */
+  .icon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 16px;
+    height: 16px;
+    opacity: 0.3;
+    background-image: url(../../images/icons/draggable-block-menu.svg);
+    &:hover {
+      background-color: #efefef;
+    }
+  }
+  .icon-plus {
+    display: inline-block;
+    border: none;
+    cursor: pointer;
+    background-color: transparent;
+    background-image: url(../../images/icons/plus.svg);
+  }
+  &:active {
+    cursor: grabbing;
+  }
+}
+
+.draggable-block-target-line {
+  pointer-events: none;
+  background: deepskyblue;
+  height: 4px;
+  position: absolute;
+  left: 0;
+  top: 0;
+  opacity: 0;
+  will-change: transform;
+}

package/src/DraggableBlockPlugin/index.tsx

@@ -0,0 +1,91 @@
+/**
+ * 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.
+ *
+ */
+import type {JSX} from 'react';
+
+import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
+// import {DraggableBlockPlugin_EXPERIMENTAL} from '@lexical/react/LexicalDraggableBlockPlugin';
+import {$getNearestNodeFromDOMNode} from 'lexical';
+import {$createInstanceNode} from 'onchain-lexical-instance';
+import {useRef, useState} from 'react';
+
+import {DraggableBlockPlugin_EXPERIMENTAL} from './draggableBlockPlugin';
+import Styles from './index.module.less';
+
+const DRAGGABLE_BLOCK_MENU_CLASSNAME = Styles['draggable-block-menu'];
+
+function isOnMenu(element: HTMLElement): boolean {
+  return !!element.closest(`.${DRAGGABLE_BLOCK_MENU_CLASSNAME}`);
+}
+
+export default function DraggableBlockPlugin({
+  anchorElem = document.body,
+  dragIcon,
+  targetLineIndent,
+}: {
+  anchorElem?: HTMLElement;
+  targetLineIndent?: number;
+  dragIcon?: React.ReactNode;
+}): JSX.Element {
+  const [editor] = useLexicalComposerContext();
+  const menuRef = useRef<HTMLDivElement>(null);
+  const targetLineRef = useRef<HTMLDivElement>(null);
+  const [draggableElement, setDraggableElement] = useState<HTMLElement | null>(
+    null,
+  );
+
+  function insertBlock(e: React.MouseEvent) {
+    if (!draggableElement || !editor) {
+      return;
+    }
+
+    editor.update(() => {
+      const node = $getNearestNodeFromDOMNode(draggableElement);
+      if (!node) {
+        return;
+      }
+
+      const pNode = $createInstanceNode();
+      if (e.altKey || e.ctrlKey) {
+        node.insertBefore(pNode);
+      } else {
+        node.insertAfter(pNode);
+      }
+      pNode.select();
+    });
+  }
+
+  return (
+    <DraggableBlockPlugin_EXPERIMENTAL
+      anchorElem={anchorElem}
+      menuRef={menuRef}
+      targetLineRef={targetLineRef}
+      menuComponent={
+        <div
+          ref={menuRef}
+          className={`${Styles.icon} ${Styles['draggable-block-menu']}`}>
+          <button
+            title="Click to add below"
+            className={`${Styles.icon} ${Styles['icon-plus']}`}
+            onClick={insertBlock}
+            style={{display: 'none'}}
+          />
+          <div className={Styles.icon}>{dragIcon}</div>
+        </div>
+      }
+      targetLineComponent={
+        <div
+          ref={targetLineRef}
+          className={`${Styles['draggable-block-target-line']}`}
+        />
+      }
+      targetLineIndent={targetLineIndent}
+      isOnMenu={isOnMenu}
+      onElementChanged={setDraggableElement}
+    />
+  );
+}

package/src/DraggableBlockPlugin/shared/point.ts

@@ -0,0 +1,55 @@
+/**
+ * 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.
+ *
+ */
+export class Point {
+  private readonly _x: number;
+  private readonly _y: number;
+
+  constructor(x: number, y: number) {
+    this._x = x;
+    this._y = y;
+  }
+
+  get x(): number {
+    return this._x;
+  }
+
+  get y(): number {
+    return this._y;
+  }
+
+  public equals({x, y}: Point): boolean {
+    return this.x === x && this.y === y;
+  }
+
+  public calcDeltaXTo({x}: Point): number {
+    return this.x - x;
+  }
+
+  public calcDeltaYTo({y}: Point): number {
+    return this.y - y;
+  }
+
+  public calcHorizontalDistanceTo(point: Point): number {
+    return Math.abs(this.calcDeltaXTo(point));
+  }
+
+  public calcVerticalDistance(point: Point): number {
+    return Math.abs(this.calcDeltaYTo(point));
+  }
+
+  public calcDistanceTo(point: Point): number {
+    return Math.sqrt(
+      Math.pow(this.calcDeltaXTo(point), 2) +
+        Math.pow(this.calcDeltaYTo(point), 2),
+    );
+  }
+}
+
+export function isPoint(x: unknown): x is Point {
+  return x instanceof Point;
+}

package/src/DraggableBlockPlugin/shared/rect.ts

@@ -0,0 +1,158 @@
+/**
+ * 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.
+ *
+ */
+import {isPoint, Point} from './point';
+
+type ContainsPointReturn = {
+  result: boolean;
+  reason: {
+    isOnTopSide: boolean;
+    isOnBottomSide: boolean;
+    isOnLeftSide: boolean;
+    isOnRightSide: boolean;
+  };
+};
+
+export class Rectangle {
+  private readonly _left: number;
+  private readonly _top: number;
+  private readonly _right: number;
+  private readonly _bottom: number;
+
+  constructor(left: number, top: number, right: number, bottom: number) {
+    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(): number {
+    return this._top;
+  }
+
+  get right(): number {
+    return this._right;
+  }
+
+  get bottom(): number {
+    return this._bottom;
+  }
+
+  get left(): number {
+    return this._left;
+  }
+
+  get width(): number {
+    return Math.abs(this._left - this._right);
+  }
+
+  get height(): number {
+    return Math.abs(this._bottom - this._top);
+  }
+
+  public equals({top, left, bottom, right}: Rectangle): boolean {
+    return (
+      top === this._top &&
+      bottom === this._bottom &&
+      left === this._left &&
+      right === this._right
+    );
+  }
+
+  public contains({x, y}: Point): ContainsPointReturn;
+  public contains({top, left, bottom, right}: Rectangle): boolean;
+  public contains(target: Point | Rectangle): boolean | ContainsPointReturn {
+    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
+      );
+    }
+  }
+
+  public intersectsWith(rect: Rectangle): boolean {
+    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;
+  }
+
+  public generateNewRect({
+    left = this.left,
+    top = this.top,
+    right = this.right,
+    bottom = this.bottom,
+  }): Rectangle {
+    return new Rectangle(left, top, right, bottom);
+  }
+
+  static fromLTRB(
+    left: number,
+    top: number,
+    right: number,
+    bottom: number,
+  ): Rectangle {
+    return new Rectangle(left, top, right, bottom);
+  }
+
+  static fromLWTH(
+    left: number,
+    width: number,
+    top: number,
+    height: number,
+  ): Rectangle {
+    return new Rectangle(left, top, left + width, top + height);
+  }
+
+  static fromPoints(startPoint: Point, endPoint: Point): Rectangle {
+    const {y: top, x: left} = startPoint;
+    const {y: bottom, x: right} = endPoint;
+    return Rectangle.fromLTRB(left, top, right, bottom);
+  }
+
+  static fromDOM(dom: HTMLElement): Rectangle {
+    const {top, width, left, height} = dom.getBoundingClientRect();
+    return Rectangle.fromLWTH(left, width, top, height);
+  }
+}

package/src/MarkdownShortcutPlugin/index.tsx

@@ -0,0 +1,15 @@
+/**
+ * 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.
+ *
+ */
+
+import {MarkdownShortcutPlugin} from '@lexical/react/LexicalMarkdownShortcutPlugin';
+import {getInstanceTransformers} from 'onchain-lexical-markdown';
+import {type JSX} from 'react';
+
+export default function MarkdownPlugin(): JSX.Element {
+  return <MarkdownShortcutPlugin transformers={getInstanceTransformers()} />;
+}

package/src/hooks/index.ts

@@ -0,0 +1,8 @@
+/**
+ * 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.
+ *
+ */
+export {default as useLatest} from './useLatest';

package/src/hooks/useLatest/index.ts

@@ -0,0 +1,18 @@
+/**
+ * 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.
+ *
+ */
+import {useEffect, useRef} from 'react';
+
+const useLatest = <T>(value: T) => {
+  const latest = useRef(value);
+  useEffect(() => {
+    latest.current = value;
+  }, [value]);
+  return latest;
+};
+
+export default useLatest;