[lexical-playground][lexical-react] Feature: Push Draggable Element to Parent (#7338)

Co-authored-by: Stéphane Escandell <[email protected]>
Co-authored-by: Bob Ippolito <[email protected]>

Author: 3 people

packages/lexical-playground/src/plugins/DraggableBlockPlugin/index.css

@@ -7,6 +7,8 @@
   left: 0;
   top: 0;
   will-change: transform;
+  display: flex;
+  gap: 2px;
 }
 
 .draggable-block-menu .icon {
@@ -16,11 +18,16 @@
   background-image: url(../../images/icons/draggable-block-menu.svg);
 }
 
+.draggable-block-menu .icon-plus {
+  cursor: pointer;
+  background-image: url(../../images/icons/plus.svg);
+}
+
 .draggable-block-menu:active {
   cursor: grabbing;
 }
 
-.draggable-block-menu:hover {
+.draggable-block-menu .icon:hover {
   background-color: #efefef;
 }
 

packages/lexical-playground/src/plugins/DraggableBlockPlugin/index.tsx

@@ -9,8 +9,10 @@ import type {JSX} from 'react';
 
 import './index.css';
 
+import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
 import {DraggableBlockPlugin_EXPERIMENTAL} from '@lexical/react/LexicalDraggableBlockPlugin';
-import {useRef} from 'react';
+import {$createParagraphNode, $getNearestNodeFromDOMNode} from 'lexical';
+import {useRef, useState} from 'react';
 
 const DRAGGABLE_BLOCK_MENU_CLASSNAME = 'draggable-block-menu';
 
@@ -23,8 +25,33 @@ export default function DraggableBlockPlugin({
 }: {
   anchorElem?: HTMLElement;
 }): 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 = $createParagraphNode();
+      if (e.altKey || e.ctrlKey) {
+        node.insertBefore(pNode);
+      } else {
+        node.insertAfter(pNode);
+      }
+      pNode.select();
+    });
+  }
 
   return (
     <DraggableBlockPlugin_EXPERIMENTAL
@@ -33,13 +60,15 @@ export default function DraggableBlockPlugin({
       targetLineRef={targetLineRef}
       menuComponent={
         <div ref={menuRef} className="icon draggable-block-menu">
+          <div className="icon icon-plus" onClick={insertBlock} />
           <div className="icon" />
         </div>
       }
       targetLineComponent={
         <div ref={targetLineRef} className="draggable-block-target-line" />
       }
       isOnMenu={isOnMenu}
+      onElementChanged={setDraggableElement}
     />
   );
 }

packages/lexical-playground/src/ui/ContentEditable.css

@@ -12,7 +12,7 @@
   display: block;
   position: relative;
   outline: 0;
-  padding: 8px 28px 40px;
+  padding: 8px 46px 40px;
   min-height: 150px;
 }
 @media (max-width: 1025px) {
@@ -29,7 +29,7 @@
   position: absolute;
   text-overflow: ellipsis;
   top: 8px;
-  left: 28px;
+  left: 46px;
   right: 28px;
   user-select: none;
   white-space: nowrap;

packages/lexical-react/flow/LexicalDraggableBlockPlugin.js.flow

@@ -16,6 +16,7 @@ type Props = $ReadOnly<{
   menuComponent: React.Node,
   targetLineComponent: React.Node,
   isOnMenu: (element: HTMLElement) => boolean,
+  onElementChanged?: (element: HTMLElement | null) => void
 }>;
 
 declare export function DraggableBlockPlugin_EXPERIMENTAL(

packages/lexical-react/src/LexicalDraggableBlockPlugin.tsx

@@ -24,6 +24,7 @@ import {
 import {
   DragEvent as ReactDragEvent,
   ReactNode,
+  useCallback,
   useEffect,
   useRef,
   useState,
@@ -269,13 +270,24 @@ function useDraggableBlockMenu(
   menuComponent: ReactNode,
   targetLineComponent: ReactNode,
   isOnMenu: (element: HTMLElement) => boolean,
+  onElementChanged?: (element: HTMLElement | null) => void,
 ): JSX.Element {
   const scrollerElem = anchorElem.parentElement;
 
   const isDraggingBlockRef = useRef<boolean>(false);
-  const [draggableBlockElem, setDraggableBlockElem] =
+  const [draggableBlockElem, setDraggableBlockElemState] =
     useState<HTMLElement | null>(null);
 
+  const setDraggableBlockElem = useCallback(
+    (elem: HTMLElement | null) => {
+      setDraggableBlockElemState(elem);
+      if (onElementChanged) {
+        onElementChanged(elem);
+      }
+    },
+    [onElementChanged],
+  );
+
   useEffect(() => {
     function onMouseMove(event: MouseEvent) {
       const target = event.target;
@@ -308,7 +320,7 @@ function useDraggableBlockMenu(
         scrollerElem.removeEventListener('mouseleave', onMouseLeave);
       }
     };
-  }, [scrollerElem, anchorElem, editor, isOnMenu]);
+  }, [scrollerElem, anchorElem, editor, isOnMenu, setDraggableBlockElem]);
 
   useEffect(() => {
     if (menuRef.current) {
@@ -401,7 +413,7 @@ function useDraggableBlockMenu(
         COMMAND_PRIORITY_HIGH,
       ),
     );
-  }, [anchorElem, editor, targetLineRef]);
+  }, [anchorElem, editor, targetLineRef, setDraggableBlockElem]);
 
   function onDragStart(event: ReactDragEvent<HTMLDivElement>): void {
     const dataTransfer = event.dataTransfer;
@@ -442,13 +454,15 @@ export function DraggableBlockPlugin_EXPERIMENTAL({
   menuComponent,
   targetLineComponent,
   isOnMenu,
+  onElementChanged,
 }: {
   anchorElem?: HTMLElement;
   menuRef: React.RefObject<HTMLElement>;
   targetLineRef: React.RefObject<HTMLElement>;
   menuComponent: ReactNode;
   targetLineComponent: ReactNode;
   isOnMenu: (element: HTMLElement) => boolean;
+  onElementChanged?: (element: HTMLElement | null) => void;
 }): JSX.Element {
   const [editor] = useLexicalComposerContext();
   return useDraggableBlockMenu(
@@ -460,5 +474,6 @@ export function DraggableBlockPlugin_EXPERIMENTAL({
     menuComponent,
     targetLineComponent,
     isOnMenu,
+    onElementChanged,
   );
 }