refactor

.changeset/dnd-major.md

@@ -0,0 +1,5 @@
+---
+'@udecode/plate-dnd': patch
+---
+
+w

packages/core/src/lib/static/components/PlateStatic.tsx

@@ -7,7 +7,7 @@ import {
   type TElement,
   type TNodeEntry,
   type TText,
-  findNode,
+  findNodePath,
   getRange,
   isElement,
   isInline,
@@ -151,7 +151,7 @@ function Children({
   return (
     <React.Fragment>
       {children.map((child, i) => {
-        const p = findNode(editor, { match: (n) => n === child })?.[1];
+        const p = findNodePath(editor, child);
 
         let ds: DecoratedRange[] = [];
 

packages/core/src/react/hooks/index.ts

@@ -3,4 +3,5 @@
  */
 
 export * from './useEditableProps';
+export * from './useNodePath';
 export * from './useSlateProps';

packages/core/src/react/hooks/useNodePath.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import type { TNode } from '@udecode/slate';
+
+import { findPath } from '@udecode/slate-react';
+
+import { useEditorRef } from '../stores';
+
+export const useNodePath = (node: TNode) => {
+  const editor = useEditorRef();
+
+  return React.useMemo(() => findPath(editor, node), [editor, node]);
+};

packages/core/src/react/plugin/PlateRenderElementProps.ts

@@ -1,5 +1,6 @@
 import type { TElement } from '@udecode/slate';
 import type { TRenderElementProps } from '@udecode/slate-react';
+import type { Path } from 'slate';
 
 import type { AnyPluginConfig, PluginConfig } from '../../lib';
 import type { PlateRenderNodeProps } from './PlateRenderNodeProps';
@@ -8,4 +9,7 @@ import type { PlateRenderNodeProps } from './PlateRenderNodeProps';
 export type PlateRenderElementProps<
   N extends TElement = TElement,
   C extends AnyPluginConfig = PluginConfig,
-> = PlateRenderNodeProps<C> & TRenderElementProps<N>;
+> = PlateRenderNodeProps<C> &
+  TRenderElementProps<N> & {
+    path: Path;
+  };

packages/core/src/react/stores/element/index.ts

@@ -4,3 +4,4 @@
 
 export * from './useElement';
 export * from './useElementStore';
+export * from './usePath';

packages/core/src/react/stores/element/useElementStore.ts

@@ -1,15 +1,17 @@
 import type { TElement } from '@udecode/slate';
+import type { Path } from 'slate';
 
 import type { Nullable } from '../../../lib';
 
 import { createAtomStore } from '../../libs/jotai';
 
 export const SCOPE_ELEMENT = 'element';
 
-export type ElementStoreState = { element: TElement };
+export type ElementStoreState = { element: TElement; path: Path };
 
 const initialState: Nullable<ElementStoreState> = {
   element: null,
+  path: null,
 };
 
 export const { ElementProvider, useElementStore } = createAtomStore(

packages/core/src/react/stores/element/usePath.ts

@@ -0,0 +1,19 @@
+import { useEditorRef } from '../plate';
+import { useElementStore } from './useElementStore';
+
+/** Get the memoized path of the closest element. */
+export const usePath = (pluginKey?: string) => {
+  const editor = useEditorRef();
+  const value = useElementStore(pluginKey).get.path();
+
+  if (!value) {
+    editor.api.debug.warn(
+      `usePath(${pluginKey}) hook must be used inside the node component's context`,
+      'USE_ELEMENT_CONTEXT'
+    );
+
+    return undefined;
+  }
+
+  return value;
+};

packages/core/src/react/utils/pipeRenderElement.tsx

@@ -6,6 +6,7 @@ import { DefaultElement } from 'slate-react';
 
 import type { PlateEditor } from '../editor/PlateEditor';
 
+import { useNodePath } from '../hooks';
 import { type RenderElement, pluginRenderElement } from './pluginRenderElement';
 
 /** @see {@link RenderElement} */
@@ -24,15 +25,18 @@ export const pipeRenderElement = (
   return function render(props) {
     let element;
 
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const path = useNodePath(props.element)!;
+
     renderElements.some((renderElement) => {
-      element = renderElement(props as any);
+      element = renderElement({ ...props, path } as any);
 
       return !!element;
     });
 
     if (element) return element;
     if (renderElementProp) {
-      return renderElementProp(props);
+      return renderElementProp({ ...props, path } as any);
     }
 
     return (

packages/core/src/react/utils/pluginRenderElement.tsx

@@ -81,11 +81,11 @@ export const pluginRenderElement = (
   plugin: AnyEditorPlatePlugin
 ): RenderElement =>
   function render(nodeProps) {
-    const { element } = nodeProps;
+    const { element, path } = nodeProps;
 
     if (element.type === plugin.node.type) {
       return (
-        <ElementProvider element={element} scope={plugin.key}>
+        <ElementProvider element={element} path={path} scope={plugin.key}>
           <ElementContent
             editor={editor}
             nodeProps={nodeProps}

packages/dnd/src/components/index.ts

@@ -4,6 +4,4 @@
 
 export * from './useDraggable';
 export * from './useDropLine';
-export * from './useWithDraggable';
-export * from './withDraggable';
 export * from './Scroller/index';

packages/dnd/src/components/useDraggable.ts

@@ -2,17 +2,21 @@ import React from 'react';
 
 import type { TElement } from '@udecode/plate-common';
 
+import { useEditorRef } from '@udecode/plate-common/react';
+
 import { type UseDndNodeOptions, DRAG_ITEM_BLOCK, useDndNode } from '..';
 
 export type DraggableState = {
-  dragRef: (
+  isDragging: boolean;
+  /** The ref of the draggable element */
+  previewRef: React.RefObject<HTMLDivElement>;
+  /** The ref of the draggable handle */
+  handleRef: (
     elementOrNode: Element | React.ReactElement | React.RefObject<any> | null
   ) => void;
-  isDragging: boolean;
-  nodeRef: React.RefObject<HTMLDivElement>;
 };
 
-export const useDraggableState = (
+export const useDraggable = (
   props: UseDndNodeOptions & { element: TElement }
 ): DraggableState => {
   const {
@@ -22,8 +26,13 @@ export const useDraggableState = (
     onDropHandler,
   } = props;
 
+  const editor = useEditorRef();
+
   const nodeRef = React.useRef<HTMLDivElement>(null);
 
+  if (!editor.plugins.dnd) return {} as any;
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
   const { dragRef, isDragging } = useDndNode({
     id: element.id as string,
     nodeRef,
@@ -34,23 +43,8 @@ export const useDraggableState = (
   });
 
   return {
-    dragRef,
     isDragging,
-    nodeRef,
-  };
-};
-
-export const useDraggable = (state: DraggableState) => {
-  return {
-    previewRef: state.nodeRef,
-    handleRef: state.dragRef,
-  };
-};
-
-export const useDraggableGutter = () => {
-  return {
-    props: {
-      contentEditable: false,
-    },
+    previewRef: nodeRef,
+    handleRef: dragRef,
   };
 };

packages/dnd/src/components/useDropLine.ts

@@ -1,5 +1,7 @@
 import { useEditorPlugin, useElement } from '@udecode/plate-common/react';
 
+import type { DropLineDirection } from '../types';
+
 import { DndPlugin } from '../DndPlugin';
 
 export const useDropLine = ({
@@ -9,7 +11,9 @@ export const useDropLine = ({
   /** The id of the element to show the dropline for. */
   id?: string;
   orientation?: 'horizontal' | 'vertical';
-} = {}) => {
+} = {}): {
+  dropLine?: DropLineDirection;
+} => {
   const element = useElement();
   const id = idProp || (element.id as string);
   const dropTarget = useEditorPlugin(DndPlugin).useOption('dropTarget');
@@ -19,9 +23,6 @@ export const useDropLine = ({
   if (id && dropTarget?.id !== id) {
     return {
       dropLine: '',
-      props: {
-        contentEditable: false,
-      },
     };
   }
   if (orientation) {
@@ -35,17 +36,11 @@ export const useDropLine = ({
     ) {
       return {
         dropLine: '',
-        props: {
-          contentEditable: false,
-        },
       };
     }
   }
 
   return {
     dropLine,
-    props: {
-      contentEditable: false,
-    },
   };
 };

packages/dnd/src/hooks/useDndNode.ts

@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 import { NativeTypes, getEmptyImage } from 'react-dnd-html5-backend';
 
-import type { DropTargetMonitor } from 'react-dnd';
+import type { ConnectDragSource, DropTargetMonitor } from 'react-dnd';
 
 import { type PlateEditor, useEditorRef } from '@udecode/plate-common/react';
 
@@ -58,8 +58,13 @@ export const useDndNode = ({
   preview: previewOptions = {},
   type = DRAG_ITEM_BLOCK,
   onDropHandler,
-}: UseDndNodeOptions) => {
+}: UseDndNodeOptions): {
+  dragRef: ConnectDragSource;
+  isDragging: boolean;
+  isOver: boolean;
+} => {
   const editor = useEditorRef();
+
   const [{ isDragging }, dragRef, preview] = useDragNode(editor, {
     id,
     type,

packages/layout/src/lib/index.ts

@@ -6,3 +6,4 @@ export * from './BaseColumnPlugin';
 export * from './types';
 export * from './withColumn';
 export * from './transforms/index';
+export * from './utils/index';

packages/layout/src/lib/transforms/index.ts

@@ -5,5 +5,6 @@
 export * from './insertColumn';
 export * from './insertColumnGroup';
 export * from './moveMiddleColumn';
-export * from './setColumnWidth';
+export * from './resizeColumn';
+export * from './setColumns';
 export * from './toggleColumnGroup';