Dnd headless UI (#2237)

* fix * fix * fix * fix * Create two-glasses-doubt.md * refactor * refactor * docs * docs --------- Co-authored-by: zbeyens <[email protected]>
udecode · Mar 5, 2023 · 07ddae6 · 07ddae6 · vercel · Mar 5, 2023
1 parent 9c35c4e
commit 07ddae6
Show file tree

Hide file tree

Showing 69 changed files with 726 additions and 336 deletions.
diff --git a/.changeset/dnd-ui.md b/.changeset/dnd-ui.md
@@ -0,0 +1,29 @@
+---
+'@udecode/plate-ui-dnd': major
+---
+
+Unstyled logic has been moved to `@udecode/plate-dnd`
+```ts
+// before
+import { createDndPlugin } from '@udecode/plate-ui-dnd';
+
+// after
+import { createDndPlugin } from '@udecode/plate-dnd';
+```
+Renamed:
+- `withDraggables` -> `withPlateDraggables`. In the second parameter, draggable props options have been moved under `draggableProps`:
+```tsx
+// before
+{
+  onRenderDragHandle: () => {}
+  styles,
+}
+
+// after
+{
+  draggableProps: {
+    onRenderDragHandle: () => {}
+    styles,
+  }, 
+}
+```
diff --git a/.changeset/dnd.md b/.changeset/dnd.md
@@ -0,0 +1,5 @@
+---
+'@udecode/plate-dnd': minor
+---
+
+New package extracting unstyled logic from `@udecode/plate-ui-dnd`
diff --git a/.changeset/two-glasses-doubt.md b/.changeset/two-glasses-doubt.md
@@ -0,0 +1,6 @@
+---
+"@udecode/plate-core": patch
+
+---
+
+`createHOC`: deep merge props
diff --git a/config/aliases-plate.js b/config/aliases-plate.js
@@ -11,6 +11,7 @@ module.exports = {
   '@udecode/plate-combobox': 'editor/combobox',
   '@udecode/plate-comments': 'comments',
   '@udecode/plate-core': 'core',
+  '@udecode/plate-dnd': 'dnd',
   '@udecode/plate-emoji': 'nodes/emoji',
   '@udecode/plate-serializer-csv': 'serializers/csv',
   '@udecode/plate-serializer-docx': 'serializers/docx',

diff --git a/docs/docs/components/dnd.mdx b/docs/docs/components/dnd.mdx
@@ -8,7 +8,10 @@ Includes drag & drop feature using a drag handle on the left side of each block.
 ### Installation
 
 ```bash npm2yarn
-npm install @udecode/plate-ui-dnd react-dnd react-dnd-html5-backend
+npm install @udecode/plate-dnd react-dnd react-dnd-html5-backend
+
+# with Plate UI
+npm install @udecode/plate-ui-dnd
 ```
 
 ### Usage
@@ -17,6 +20,7 @@ npm install @udecode/plate-ui-dnd react-dnd react-dnd-html5-backend
 - Override your components with `components = withStyledDraggables(components)`, these will wrap your block components with a draggable handle.
 - Use `createNodeIdPlugin()` plugin as it requires `id` property on your blocks.
 
-import { DndSandpack } from './DndSandpack'
+
+import { DndSandpack } from "./DndSandpack";
 
 <DndSandpack />
diff --git a/docs/docs/sandpack/code-deps.ts b/docs/docs/sandpack/code-deps.ts
@@ -1,6 +1,7 @@
 import {
   cloudUiVersion,
   cloudVersion,
+  dndUiVersion,
   dndVersion,
   excalidrawVersion,
   juiceVersion,
@@ -31,7 +32,8 @@ export const cloudDeps = {
 };
 
 export const dndDeps = {
-  '@udecode/plate-ui-dnd': dndVersion,
+  '@udecode/plate-dnd': dndVersion,
+  '@udecode/plate-ui-dnd': dndUiVersion,
   'react-dnd': '15.1.2',
   'react-dnd-html5-backend': '15.1.3',
 };

diff --git a/docs/docs/sandpack/plate-versions.ts b/docs/docs/sandpack/plate-versions.ts
@@ -6,3 +6,4 @@ export const selectionVersion = '19.7.0';
 export const cloudVersion = '19.7.0';
 export const cloudUiVersion = '19.7.0';
 export const dndVersion = '19.7.0';
+export const dndUiVersion = '19.7.0';
diff --git a/examples/src/DndApp.tsx b/examples/src/DndApp.tsx
@@ -6,7 +6,7 @@ import {
   createNodeIdPlugin,
   Plate,
 } from '@udecode/plate';
-import { createDndPlugin } from '@udecode/plate-ui-dnd';
+import { createDndPlugin } from '@udecode/plate-dnd';
 import { basicElementsValue } from './basic-elements/basicElementsValue';
 import { editableProps } from './common/editableProps';
 import { plateUI } from './common/plateUI';

diff --git a/examples/src/PlaygroundApp.tsx b/examples/src/PlaygroundApp.tsx
@@ -51,9 +51,9 @@ import {
   PlateFloatingComments,
   PlateProvider,
 } from '@udecode/plate';
+import { createDndPlugin } from '@udecode/plate-dnd';
 import { createJuicePlugin } from '@udecode/plate-juice';
 import { createBlockSelectionPlugin } from '@udecode/plate-selection';
-import { createDndPlugin } from '@udecode/plate-ui-dnd';
 import {
   createExcalidrawPlugin,
   ELEMENT_EXCALIDRAW,

diff --git a/examples/src/dnd/withStyledDraggables.tsx b/examples/src/dnd/withStyledDraggables.tsx
@@ -18,7 +18,7 @@ import {
   ELEMENT_TODO_LI,
   ELEMENT_UL,
 } from '@udecode/plate';
-import { withDraggables } from '@udecode/plate-ui-dnd';
+import { withPlateDraggables } from '@udecode/plate-ui-dnd';
 
 const styles = {
   grabber: { fontSize: 12 },
@@ -50,7 +50,7 @@ export const grabberTooltipProps: TippyProps = {
 };
 
 export const withStyledDraggables = (components: any) => {
-  return withDraggables(components, [
+  return withPlateDraggables(components, [
     {
       keys: [ELEMENT_PARAGRAPH, ELEMENT_UL, ELEMENT_OL],
       level: 0,
@@ -73,85 +73,101 @@ export const withStyledDraggables = (components: any) => {
         ELEMENT_MEDIA_EMBED,
         ELEMENT_CODE_BLOCK,
       ],
-      onRenderDragHandle: () => {
-        return (
-          <Tippy {...grabberTooltipProps}>
-            <button type="button" className="drag-button">
-              <DragIndicator style={styles.dragButton} />
-            </button>
-          </Tippy>
-        );
+      draggableProps: {
+        onRenderDragHandle: () => {
+          return (
+            <Tippy {...grabberTooltipProps}>
+              <button type="button" className="drag-button">
+                <DragIndicator style={styles.dragButton} />
+              </button>
+            </Tippy>
+          );
+        },
       },
     },
     {
       key: ELEMENT_H1,
-      styles: {
-        gutterLeft: {
-          padding: '2em 0 4px',
-          fontSize: '1.875em',
-        },
-        blockToolbarWrapper: {
-          height: '1.3em',
+      draggableProps: {
+        styles: {
+          gutterLeft: {
+            padding: '2em 0 4px',
+            fontSize: '1.875em',
+          },
+          blockToolbarWrapper: {
+            height: '1.3em',
+          },
         },
       },
     },
     {
       key: ELEMENT_H2,
-      styles: {
-        gutterLeft: {
-          padding: '1.4em 0 1px',
-          fontSize: '1.5em',
-        },
-        blockToolbarWrapper: {
-          height: '1.3em',
+      draggableProps: {
+        styles: {
+          gutterLeft: {
+            padding: '1.4em 0 1px',
+            fontSize: '1.5em',
+          },
+          blockToolbarWrapper: {
+            height: '1.3em',
+          },
         },
       },
     },
     {
       key: ELEMENT_H3,
-      styles: {
-        gutterLeft: {
-          padding: '1em 0 1px',
-          fontSize: '1.25em',
-        },
-        blockToolbarWrapper: {
-          height: '1.3em',
+      draggableProps: {
+        styles: {
+          gutterLeft: {
+            padding: '1em 0 1px',
+            fontSize: '1.25em',
+          },
+          blockToolbarWrapper: {
+            height: '1.3em',
+          },
         },
       },
     },
     {
       keys: [ELEMENT_H4, ELEMENT_H5, ELEMENT_H6],
-      styles: {
-        gutterLeft: {
-          padding: '0.75em 0 0',
-          fontSize: '1.1em',
-        },
-        blockToolbarWrapper: {
-          height: '1.3em',
+      draggableProps: {
+        styles: {
+          gutterLeft: {
+            padding: '0.75em 0 0',
+            fontSize: '1.1em',
+          },
+          blockToolbarWrapper: {
+            height: '1.3em',
+          },
         },
       },
     },
     {
       keys: [ELEMENT_PARAGRAPH, ELEMENT_UL, ELEMENT_OL],
-      styles: {
-        gutterLeft: {
-          padding: '4px 0 0',
+      draggableProps: {
+        styles: {
+          gutterLeft: {
+            padding: '4px 0 0',
+          },
         },
       },
     },
     {
       key: ELEMENT_BLOCKQUOTE,
-      styles: {
-        gutterLeft: {
-          padding: '18px 0 0',
+      draggableProps: {
+        styles: {
+          gutterLeft: {
+            padding: '18px 0 0',
+          },
         },
       },
     },
     {
       key: ELEMENT_CODE_BLOCK,
-      styles: {
-        gutterLeft: {
-          padding: '12px 0 0',
+      draggableProps: {
+        styles: {
+          gutterLeft: {
+            padding: '12px 0 0',
+          },
         },
       },
     },

diff --git a/packages/core/src/utils/react/createNodesHOC.tsx b/packages/core/src/utils/react/createNodesHOC.tsx
@@ -1,5 +1,6 @@
 import { FunctionComponent } from 'react';
 import { castArray } from 'lodash';
+import merge from 'lodash/merge';
 import { AnyObject } from '../../types/misc/AnyObject';
 import { createNodeHOC } from './createNodeHOC';
 
@@ -30,7 +31,7 @@ const createHOC = <T,>(withHOC: any) => {
       const _keys: string[] = key ? [key] : keys ?? Object.keys(_components);
 
       _keys.forEach((_key) => {
-        optionsByKey[_key] = { ...optionsByKey[_key], ...opt };
+        optionsByKey[_key] = merge(optionsByKey[_key], opt);
       });
     });
 

diff --git a/packages/dnd/.npmignore b/packages/dnd/.npmignore
@@ -0,0 +1,3 @@
+__tests__
+__test-utils__
+__mocks__
diff --git a/packages/dnd/README.md b/packages/dnd/README.md
@@ -0,0 +1,17 @@
+# Plate drag & drop feature
+
+This package implements the drag & drop feature. It allows you to drag &
+drop blocks using a grabber.
+
+## Documentation
+
+Check out
+[Drag & Drop](https://plate.udecode.io/docs/components/dnd).
+
+## API
+
+See the [API documentation](https://plate-api.udecode.io/globals.html). 
+
+## License
+
+[MIT](../../LICENSE)
diff --git a/packages/dnd/package.json b/packages/dnd/package.json
@@ -0,0 +1,42 @@
+{
+  "name": "@udecode/plate-dnd",
+  "version": "19.7.0",
+  "description": "Drag &amp; drop feature for Plate",
+  "license": "MIT",
+  "homepage": "https://plate.udecode.io",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/udecode/plate.git",
+    "directory": "packages/dnd"
+  },
+  "bugs": {
+    "url": "https://github.com/udecode/plate/issues"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.es.js",
+  "files": [
+    "dist"
+  ],
+  "types": "dist/index.d.ts",
+  "dependencies": {
+    "@udecode/plate-core": "19.7.0",
+    "raf": "^3.4.1"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dnd": ">=14.0.0",
+    "react-dnd-html5-backend": ">=14.0.0",
+    "react-dom": ">=16.8.0",
+    "slate": ">=0.87.0",
+    "slate-history": ">=0.86.0",
+    "slate-react": ">=0.88.0"
+  },
+  "keywords": [
+    "plate",
+    "plugin",
+    "slate"
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
+}
diff --git a/packages/dnd/src/components/DragHandle.ts b/packages/dnd/src/components/DragHandle.ts
@@ -0,0 +1,25 @@
+import {
+  createComponentAs,
+  createElementAs,
+  HTMLPropsAs,
+  TElement,
+} from '@udecode/plate-core';
+
+export type PlateDragHandleProps = {
+  element: TElement;
+} & HTMLPropsAs<'button'>;
+
+export const usePlateDragHandleProps = (
+  props: PlateDragHandleProps
+): HTMLPropsAs<'button'> => {
+  return {
+    ...props,
+    onMouseDown: (e: any) => e.stopPropagation(),
+  };
+};
+
+export const DragHandle = createComponentAs<PlateDragHandleProps>((props) => {
+  const htmlProps = usePlateDragHandleProps(props);
+
+  return createElementAs('button', htmlProps);
+});