From 119117735b2446f2fcf89a7a8b8d194fbb41e572 Mon Sep 17 00:00:00 2001 From: TomMorane Date: Fri, 24 Feb 2023 16:37:13 +0100 Subject: [PATCH 1/9] fix --- packages/dnd/.npmignore | 3 + packages/dnd/README.md | 15 +++ packages/dnd/package.json | 42 ++++++++ .../src/components/Scroller/DndScroller.tsx | 0 .../src/components/Scroller/ScrollArea.tsx | 0 .../dnd/src/components/Scroller/Scroller.tsx | 0 .../dnd/src/components/Scroller/index.ts | 0 packages/{ui => }/dnd/src/createDndPlugin.tsx | 2 +- packages/{ui => }/dnd/src/dndStore.ts | 0 packages/{ui => }/dnd/src/hooks/index.ts | 0 .../{ui => }/dnd/src/hooks/useDndBlock.ts | 0 packages/{ui => }/dnd/src/hooks/useDndNode.ts | 0 .../{ui => }/dnd/src/hooks/useDragBlock.ts | 0 .../{ui => }/dnd/src/hooks/useDragNode.ts | 0 .../{ui => }/dnd/src/hooks/useDropBlock.ts | 0 .../{ui => }/dnd/src/hooks/useDropNode.ts | 0 .../dnd/src/queries/getBlocksWithId.ts | 0 .../{ui => }/dnd/src/queries/getNodesRange.ts | 0 packages/{ui => }/dnd/src/queries/index.ts | 0 .../dnd/src/transforms/focusBlockStartById.ts | 0 packages/{ui => }/dnd/src/transforms/index.ts | 0 .../{ui => }/dnd/src/transforms/onDropNode.ts | 4 +- .../dnd/src/transforms/onHoverNode.ts | 2 +- .../src/transforms/removeBlocksAndFocus.ts | 0 .../dnd/src/transforms/selectBlockById.ts | 0 .../transforms/selectBlocksBySelectionOrId.ts | 0 packages/{ui => }/dnd/src/types.ts | 0 .../dnd/src/utils/getHoverDirection.ts | 0 .../{ui => }/dnd/src/utils/getNewDirection.ts | 0 packages/{ui => }/dnd/src/utils/index.ts | 0 packages/dnd/tsconfig.json | 7 ++ packages/headless/package.json | 1 + packages/ui/dnd/package.json | 5 +- .../ui/dnd/src/components/withDraggable.tsx | 6 +- yarn.lock | 99 +++++++++++-------- 35 files changed, 135 insertions(+), 51 deletions(-) create mode 100644 packages/dnd/.npmignore create mode 100644 packages/dnd/README.md create mode 100644 packages/dnd/package.json rename packages/{ui => }/dnd/src/components/Scroller/DndScroller.tsx (100%) rename packages/{ui => }/dnd/src/components/Scroller/ScrollArea.tsx (100%) rename packages/{ui => }/dnd/src/components/Scroller/Scroller.tsx (100%) rename packages/{ui => }/dnd/src/components/Scroller/index.ts (100%) rename packages/{ui => }/dnd/src/createDndPlugin.tsx (91%) rename packages/{ui => }/dnd/src/dndStore.ts (100%) rename packages/{ui => }/dnd/src/hooks/index.ts (100%) rename packages/{ui => }/dnd/src/hooks/useDndBlock.ts (100%) rename packages/{ui => }/dnd/src/hooks/useDndNode.ts (100%) rename packages/{ui => }/dnd/src/hooks/useDragBlock.ts (100%) rename packages/{ui => }/dnd/src/hooks/useDragNode.ts (100%) rename packages/{ui => }/dnd/src/hooks/useDropBlock.ts (100%) rename packages/{ui => }/dnd/src/hooks/useDropNode.ts (100%) rename packages/{ui => }/dnd/src/queries/getBlocksWithId.ts (100%) rename packages/{ui => }/dnd/src/queries/getNodesRange.ts (100%) rename packages/{ui => }/dnd/src/queries/index.ts (100%) rename packages/{ui => }/dnd/src/transforms/focusBlockStartById.ts (100%) rename packages/{ui => }/dnd/src/transforms/index.ts (100%) rename packages/{ui => }/dnd/src/transforms/onDropNode.ts (93%) rename packages/{ui => }/dnd/src/transforms/onHoverNode.ts (93%) rename packages/{ui => }/dnd/src/transforms/removeBlocksAndFocus.ts (100%) rename packages/{ui => }/dnd/src/transforms/selectBlockById.ts (100%) rename packages/{ui => }/dnd/src/transforms/selectBlocksBySelectionOrId.ts (100%) rename packages/{ui => }/dnd/src/types.ts (100%) rename packages/{ui => }/dnd/src/utils/getHoverDirection.ts (100%) rename packages/{ui => }/dnd/src/utils/getNewDirection.ts (100%) rename packages/{ui => }/dnd/src/utils/index.ts (100%) create mode 100644 packages/dnd/tsconfig.json diff --git a/packages/dnd/.npmignore b/packages/dnd/.npmignore new file mode 100644 index 0000000000..7d3b305b17 --- /dev/null +++ b/packages/dnd/.npmignore @@ -0,0 +1,3 @@ +__tests__ +__test-utils__ +__mocks__ diff --git a/packages/dnd/README.md b/packages/dnd/README.md new file mode 100644 index 0000000000..64327a69e6 --- /dev/null +++ b/packages/dnd/README.md @@ -0,0 +1,15 @@ +# Drag & drop feature for Plate + + + +## Documentation + +WIP + +## 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 new file mode 100644 index 0000000000..dd5750c8dc --- /dev/null +++ b/packages/dnd/package.json @@ -0,0 +1,42 @@ +{ + "name": "@udecode/plate-dnd", + "version": "19.5.0", + "description": "Drag & 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.5.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/ui/dnd/src/components/Scroller/DndScroller.tsx b/packages/dnd/src/components/Scroller/DndScroller.tsx similarity index 100% rename from packages/ui/dnd/src/components/Scroller/DndScroller.tsx rename to packages/dnd/src/components/Scroller/DndScroller.tsx diff --git a/packages/ui/dnd/src/components/Scroller/ScrollArea.tsx b/packages/dnd/src/components/Scroller/ScrollArea.tsx similarity index 100% rename from packages/ui/dnd/src/components/Scroller/ScrollArea.tsx rename to packages/dnd/src/components/Scroller/ScrollArea.tsx diff --git a/packages/ui/dnd/src/components/Scroller/Scroller.tsx b/packages/dnd/src/components/Scroller/Scroller.tsx similarity index 100% rename from packages/ui/dnd/src/components/Scroller/Scroller.tsx rename to packages/dnd/src/components/Scroller/Scroller.tsx diff --git a/packages/ui/dnd/src/components/Scroller/index.ts b/packages/dnd/src/components/Scroller/index.ts similarity index 100% rename from packages/ui/dnd/src/components/Scroller/index.ts rename to packages/dnd/src/components/Scroller/index.ts diff --git a/packages/ui/dnd/src/createDndPlugin.tsx b/packages/dnd/src/createDndPlugin.tsx similarity index 91% rename from packages/ui/dnd/src/createDndPlugin.tsx rename to packages/dnd/src/createDndPlugin.tsx index e4f6f4541a..6b2dff4253 100644 --- a/packages/ui/dnd/src/createDndPlugin.tsx +++ b/packages/dnd/src/createDndPlugin.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { createPluginFactory } from '@udecode/plate-core'; -import { DndScroller, ScrollerProps } from './components/index'; +import { DndScroller, ScrollerProps } from './components/Scroller'; import { dndStore } from './dndStore'; export interface DndPlugin { diff --git a/packages/ui/dnd/src/dndStore.ts b/packages/dnd/src/dndStore.ts similarity index 100% rename from packages/ui/dnd/src/dndStore.ts rename to packages/dnd/src/dndStore.ts diff --git a/packages/ui/dnd/src/hooks/index.ts b/packages/dnd/src/hooks/index.ts similarity index 100% rename from packages/ui/dnd/src/hooks/index.ts rename to packages/dnd/src/hooks/index.ts diff --git a/packages/ui/dnd/src/hooks/useDndBlock.ts b/packages/dnd/src/hooks/useDndBlock.ts similarity index 100% rename from packages/ui/dnd/src/hooks/useDndBlock.ts rename to packages/dnd/src/hooks/useDndBlock.ts diff --git a/packages/ui/dnd/src/hooks/useDndNode.ts b/packages/dnd/src/hooks/useDndNode.ts similarity index 100% rename from packages/ui/dnd/src/hooks/useDndNode.ts rename to packages/dnd/src/hooks/useDndNode.ts diff --git a/packages/ui/dnd/src/hooks/useDragBlock.ts b/packages/dnd/src/hooks/useDragBlock.ts similarity index 100% rename from packages/ui/dnd/src/hooks/useDragBlock.ts rename to packages/dnd/src/hooks/useDragBlock.ts diff --git a/packages/ui/dnd/src/hooks/useDragNode.ts b/packages/dnd/src/hooks/useDragNode.ts similarity index 100% rename from packages/ui/dnd/src/hooks/useDragNode.ts rename to packages/dnd/src/hooks/useDragNode.ts diff --git a/packages/ui/dnd/src/hooks/useDropBlock.ts b/packages/dnd/src/hooks/useDropBlock.ts similarity index 100% rename from packages/ui/dnd/src/hooks/useDropBlock.ts rename to packages/dnd/src/hooks/useDropBlock.ts diff --git a/packages/ui/dnd/src/hooks/useDropNode.ts b/packages/dnd/src/hooks/useDropNode.ts similarity index 100% rename from packages/ui/dnd/src/hooks/useDropNode.ts rename to packages/dnd/src/hooks/useDropNode.ts diff --git a/packages/ui/dnd/src/queries/getBlocksWithId.ts b/packages/dnd/src/queries/getBlocksWithId.ts similarity index 100% rename from packages/ui/dnd/src/queries/getBlocksWithId.ts rename to packages/dnd/src/queries/getBlocksWithId.ts diff --git a/packages/ui/dnd/src/queries/getNodesRange.ts b/packages/dnd/src/queries/getNodesRange.ts similarity index 100% rename from packages/ui/dnd/src/queries/getNodesRange.ts rename to packages/dnd/src/queries/getNodesRange.ts diff --git a/packages/ui/dnd/src/queries/index.ts b/packages/dnd/src/queries/index.ts similarity index 100% rename from packages/ui/dnd/src/queries/index.ts rename to packages/dnd/src/queries/index.ts diff --git a/packages/ui/dnd/src/transforms/focusBlockStartById.ts b/packages/dnd/src/transforms/focusBlockStartById.ts similarity index 100% rename from packages/ui/dnd/src/transforms/focusBlockStartById.ts rename to packages/dnd/src/transforms/focusBlockStartById.ts diff --git a/packages/ui/dnd/src/transforms/index.ts b/packages/dnd/src/transforms/index.ts similarity index 100% rename from packages/ui/dnd/src/transforms/index.ts rename to packages/dnd/src/transforms/index.ts diff --git a/packages/ui/dnd/src/transforms/onDropNode.ts b/packages/dnd/src/transforms/onDropNode.ts similarity index 93% rename from packages/ui/dnd/src/transforms/onDropNode.ts rename to packages/dnd/src/transforms/onDropNode.ts index ce2f402df2..7132ddf1ff 100644 --- a/packages/ui/dnd/src/transforms/onDropNode.ts +++ b/packages/dnd/src/transforms/onDropNode.ts @@ -7,9 +7,9 @@ import { Value, } from '@udecode/plate-core'; import { Path } from 'slate'; -import { UseDropNodeOptions } from '../hooks/index'; +import { UseDropNodeOptions } from '../hooks'; import { DragItemNode } from '../types'; -import { getHoverDirection } from '../utils/index'; +import { getHoverDirection } from '../utils'; /** * Callback called on drag an drop a node with id. diff --git a/packages/ui/dnd/src/transforms/onHoverNode.ts b/packages/dnd/src/transforms/onHoverNode.ts similarity index 93% rename from packages/ui/dnd/src/transforms/onHoverNode.ts rename to packages/dnd/src/transforms/onHoverNode.ts index d061902aee..f18e6f0be0 100644 --- a/packages/ui/dnd/src/transforms/onHoverNode.ts +++ b/packages/dnd/src/transforms/onHoverNode.ts @@ -8,7 +8,7 @@ import { } from '@udecode/plate-core'; import { UseDropNodeOptions } from '../hooks/useDropNode'; import { DragItemNode } from '../types'; -import { getHoverDirection, getNewDirection } from '../utils/index'; +import { getHoverDirection, getNewDirection } from '../utils'; /** * Callback called when dragging a node and hovering nodes. diff --git a/packages/ui/dnd/src/transforms/removeBlocksAndFocus.ts b/packages/dnd/src/transforms/removeBlocksAndFocus.ts similarity index 100% rename from packages/ui/dnd/src/transforms/removeBlocksAndFocus.ts rename to packages/dnd/src/transforms/removeBlocksAndFocus.ts diff --git a/packages/ui/dnd/src/transforms/selectBlockById.ts b/packages/dnd/src/transforms/selectBlockById.ts similarity index 100% rename from packages/ui/dnd/src/transforms/selectBlockById.ts rename to packages/dnd/src/transforms/selectBlockById.ts diff --git a/packages/ui/dnd/src/transforms/selectBlocksBySelectionOrId.ts b/packages/dnd/src/transforms/selectBlocksBySelectionOrId.ts similarity index 100% rename from packages/ui/dnd/src/transforms/selectBlocksBySelectionOrId.ts rename to packages/dnd/src/transforms/selectBlocksBySelectionOrId.ts diff --git a/packages/ui/dnd/src/types.ts b/packages/dnd/src/types.ts similarity index 100% rename from packages/ui/dnd/src/types.ts rename to packages/dnd/src/types.ts diff --git a/packages/ui/dnd/src/utils/getHoverDirection.ts b/packages/dnd/src/utils/getHoverDirection.ts similarity index 100% rename from packages/ui/dnd/src/utils/getHoverDirection.ts rename to packages/dnd/src/utils/getHoverDirection.ts diff --git a/packages/ui/dnd/src/utils/getNewDirection.ts b/packages/dnd/src/utils/getNewDirection.ts similarity index 100% rename from packages/ui/dnd/src/utils/getNewDirection.ts rename to packages/dnd/src/utils/getNewDirection.ts diff --git a/packages/ui/dnd/src/utils/index.ts b/packages/dnd/src/utils/index.ts similarity index 100% rename from packages/ui/dnd/src/utils/index.ts rename to packages/dnd/src/utils/index.ts diff --git a/packages/dnd/tsconfig.json b/packages/dnd/tsconfig.json new file mode 100644 index 0000000000..9f68b4628c --- /dev/null +++ b/packages/dnd/tsconfig.json @@ -0,0 +1,7 @@ +{ + "extends": "../../config/tsconfig.build.json", + "compilerOptions": { + "declarationDir": "./dist" + }, + "include": ["src"] +} diff --git a/packages/headless/package.json b/packages/headless/package.json index 37f6191a56..18d335580d 100644 --- a/packages/headless/package.json +++ b/packages/headless/package.json @@ -30,6 +30,7 @@ "@udecode/plate-combobox": "19.5.0", "@udecode/plate-comments": "19.5.0", "@udecode/plate-core": "19.5.0", + "@udecode/plate-dnd": "19.5.0", "@udecode/plate-emoji": "19.5.0", "@udecode/plate-find-replace": "19.5.0", "@udecode/plate-floating": "19.5.0", diff --git a/packages/ui/dnd/package.json b/packages/ui/dnd/package.json index e71dfbdf78..39501f0733 100644 --- a/packages/ui/dnd/package.json +++ b/packages/ui/dnd/package.json @@ -19,11 +19,10 @@ ], "types": "dist/index.d.ts", "dependencies": { - "@react-hook/merged-ref": "^1.3.2", "@tippyjs/react": "^4.2.6", "@udecode/plate-core": "19.5.0", - "@udecode/plate-styled-components": "19.5.0", - "raf": "^3.4.1" + "@udecode/plate-dnd": "19.5.0", + "@udecode/plate-styled-components": "19.5.0" }, "peerDependencies": { "react": ">=16.8.0", diff --git a/packages/ui/dnd/src/components/withDraggable.tsx b/packages/ui/dnd/src/components/withDraggable.tsx index 7970b7696c..f83e5895d0 100644 --- a/packages/ui/dnd/src/components/withDraggable.tsx +++ b/packages/ui/dnd/src/components/withDraggable.tsx @@ -6,8 +6,8 @@ import { Value, } from '@udecode/plate-core'; import { useReadOnly } from 'slate-react'; -import { Draggable } from './Draggable'; import { DraggableProps } from './Draggable.types'; +import { PlateDraggable } from './PlateDraggable'; export interface WithDraggableOptions extends Pick< @@ -46,7 +46,7 @@ export const withDraggable = ( } return ( - ( onRenderDragHandle={onRenderDragHandle} > - + ); }); }; diff --git a/yarn.lock b/yarn.lock index d6f041a259..9de7407fb5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5534,6 +5534,23 @@ __metadata: languageName: unknown linkType: soft +"@udecode/plate-dnd@npm:19.5.0, @udecode/plate-dnd@workspace:packages/dnd": + version: 0.0.0-use.local + resolution: "@udecode/plate-dnd@workspace:packages/dnd" + dependencies: + "@udecode/plate-core": "npm:19.5.0" + raf: "npm:^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" + languageName: unknown + linkType: soft + "@udecode/plate-emoji@npm:19.5.0, @udecode/plate-emoji@workspace:packages/nodes/emoji": version: 0.0.0-use.local resolution: "@udecode/plate-emoji@workspace:packages/nodes/emoji" @@ -5622,6 +5639,7 @@ __metadata: "@udecode/plate-combobox": "npm:19.5.0" "@udecode/plate-comments": "npm:19.5.0" "@udecode/plate-core": "npm:19.5.0" + "@udecode/plate-dnd": "npm:19.5.0" "@udecode/plate-emoji": "npm:19.5.0" "@udecode/plate-find-replace": "npm:19.5.0" "@udecode/plate-floating": "npm:19.5.0" @@ -6082,14 +6100,14 @@ __metadata: languageName: unknown linkType: soft -"@udecode/plate-ui-alignment@npm:19.5.0, @udecode/plate-ui-alignment@workspace:packages/ui/nodes/alignment": +"@udecode/plate-ui-alignment@npm:19.6.0, @udecode/plate-ui-alignment@workspace:packages/ui/nodes/alignment": version: 0.0.0-use.local resolution: "@udecode/plate-ui-alignment@workspace:packages/ui/nodes/alignment" dependencies: "@udecode/plate-alignment": "npm:19.5.0" "@udecode/plate-core": "npm:19.5.0" "@udecode/plate-styled-components": "npm:19.5.0" - "@udecode/plate-ui-toolbar": "npm:19.5.0" + "@udecode/plate-ui-toolbar": "npm:19.6.0" peerDependencies: react: ">=16.8.0" react-dom: ">=16.8.0" @@ -6152,14 +6170,14 @@ __metadata: languageName: unknown linkType: soft -"@udecode/plate-ui-code-block@npm:19.5.0, @udecode/plate-ui-code-block@workspace:packages/ui/nodes/code-block": +"@udecode/plate-ui-code-block@npm:19.6.0, @udecode/plate-ui-code-block@workspace:packages/ui/nodes/code-block": version: 0.0.0-use.local resolution: "@udecode/plate-ui-code-block@workspace:packages/ui/nodes/code-block" dependencies: "@udecode/plate-code-block": "npm:19.5.0" "@udecode/plate-core": "npm:19.5.0" "@udecode/plate-styled-components": "npm:19.5.0" - "@udecode/plate-ui-toolbar": "npm:19.5.0" + "@udecode/plate-ui-toolbar": "npm:19.6.0" peerDependencies: react: ">=16.8.0" react-dom: ">=16.8.0" @@ -6188,7 +6206,7 @@ __metadata: languageName: unknown linkType: soft -"@udecode/plate-ui-comments@npm:19.5.0, @udecode/plate-ui-comments@workspace:packages/ui/comments": +"@udecode/plate-ui-comments@npm:19.6.0, @udecode/plate-ui-comments@workspace:packages/ui/comments": version: 0.0.0-use.local resolution: "@udecode/plate-ui-comments@workspace:packages/ui/comments" dependencies: @@ -6196,7 +6214,7 @@ __metadata: "@udecode/plate-core": "npm:19.5.0" "@udecode/plate-styled-components": "npm:19.5.0" "@udecode/plate-ui-button": "npm:19.5.0" - "@udecode/plate-ui-toolbar": "npm:19.5.0" + "@udecode/plate-ui-toolbar": "npm:19.6.0" peerDependencies: react: ">=16.8.0" react-dom: ">=16.8.0" @@ -6227,11 +6245,10 @@ __metadata: version: 0.0.0-use.local resolution: "@udecode/plate-ui-dnd@workspace:packages/ui/dnd" dependencies: - "@react-hook/merged-ref": "npm:^1.3.2" "@tippyjs/react": "npm:^4.2.6" "@udecode/plate-core": "npm:19.5.0" + "@udecode/plate-dnd": "npm:19.5.0" "@udecode/plate-styled-components": "npm:19.5.0" - raf: "npm:^3.4.1" peerDependencies: react: ">=16.8.0" react-dnd: ">=14.0.0" @@ -6244,7 +6261,7 @@ __metadata: languageName: unknown linkType: soft -"@udecode/plate-ui-emoji@npm:19.5.0, @udecode/plate-ui-emoji@workspace:packages/ui/nodes/emoji": +"@udecode/plate-ui-emoji@npm:19.6.0, @udecode/plate-ui-emoji@workspace:packages/ui/nodes/emoji": version: 0.0.0-use.local resolution: "@udecode/plate-ui-emoji@workspace:packages/ui/nodes/emoji" dependencies: @@ -6253,7 +6270,7 @@ __metadata: "@udecode/plate-emoji": "npm:19.5.0" "@udecode/plate-styled-components": "npm:19.5.0" "@udecode/plate-ui-combobox": "npm:19.5.0" - "@udecode/plate-ui-toolbar": "npm:19.5.0" + "@udecode/plate-ui-toolbar": "npm:19.6.0" peerDependencies: react: ">=16.8.0" react-dom: ">=16.8.0" @@ -6271,7 +6288,7 @@ __metadata: "@excalidraw/excalidraw": "npm:0.12.0" "@udecode/plate-core": "npm:19.5.0" "@udecode/plate-styled-components": "npm:19.5.0" - "@udecode/plate-ui-toolbar": "npm:19.5.0" + "@udecode/plate-ui-toolbar": "npm:19.6.0" peerDependencies: react: ">=16.8.0" react-dom: ">=16.8.0" @@ -6282,14 +6299,14 @@ __metadata: languageName: unknown linkType: soft -"@udecode/plate-ui-find-replace@npm:19.5.0, @udecode/plate-ui-find-replace@workspace:packages/ui/find-replace": +"@udecode/plate-ui-find-replace@npm:19.6.0, @udecode/plate-ui-find-replace@workspace:packages/ui/find-replace": version: 0.0.0-use.local resolution: "@udecode/plate-ui-find-replace@workspace:packages/ui/find-replace" dependencies: "@udecode/plate-core": "npm:19.5.0" "@udecode/plate-find-replace": "npm:19.5.0" "@udecode/plate-styled-components": "npm:19.5.0" - "@udecode/plate-ui-toolbar": "npm:19.5.0" + "@udecode/plate-ui-toolbar": "npm:19.6.0" peerDependencies: react: ">=16.8.0" react-dom: ">=16.8.0" @@ -6300,7 +6317,7 @@ __metadata: languageName: unknown linkType: soft -"@udecode/plate-ui-font@npm:19.5.0, @udecode/plate-ui-font@workspace:packages/ui/nodes/font": +"@udecode/plate-ui-font@npm:19.6.0, @udecode/plate-ui-font@workspace:packages/ui/nodes/font": version: 0.0.0-use.local resolution: "@udecode/plate-ui-font@workspace:packages/ui/nodes/font" dependencies: @@ -6308,7 +6325,7 @@ __metadata: "@udecode/plate-font": "npm:19.5.0" "@udecode/plate-styled-components": "npm:19.5.0" "@udecode/plate-ui-button": "npm:19.5.0" - "@udecode/plate-ui-toolbar": "npm:19.5.0" + "@udecode/plate-ui-toolbar": "npm:19.6.0" peerDependencies: react: ">=16.8.0" react-dom: ">=16.8.0" @@ -6348,14 +6365,14 @@ __metadata: languageName: unknown linkType: soft -"@udecode/plate-ui-line-height@npm:19.5.0, @udecode/plate-ui-line-height@workspace:packages/ui/nodes/line-height": +"@udecode/plate-ui-line-height@npm:19.6.0, @udecode/plate-ui-line-height@workspace:packages/ui/nodes/line-height": version: 0.0.0-use.local resolution: "@udecode/plate-ui-line-height@workspace:packages/ui/nodes/line-height" dependencies: "@udecode/plate-core": "npm:19.5.0" "@udecode/plate-line-height": "npm:19.5.0" "@udecode/plate-styled-components": "npm:19.5.0" - "@udecode/plate-ui-toolbar": "npm:19.5.0" + "@udecode/plate-ui-toolbar": "npm:19.6.0" peerDependencies: react: ">=16.8.0" react-dom: ">=16.8.0" @@ -6366,7 +6383,7 @@ __metadata: languageName: unknown linkType: soft -"@udecode/plate-ui-link@npm:19.5.0, @udecode/plate-ui-link@workspace:packages/ui/nodes/link": +"@udecode/plate-ui-link@npm:19.6.0, @udecode/plate-ui-link@workspace:packages/ui/nodes/link": version: 0.0.0-use.local resolution: "@udecode/plate-ui-link@workspace:packages/ui/nodes/link" dependencies: @@ -6374,7 +6391,7 @@ __metadata: "@udecode/plate-link": "npm:19.5.0" "@udecode/plate-styled-components": "npm:19.5.0" "@udecode/plate-ui-button": "npm:19.5.0" - "@udecode/plate-ui-toolbar": "npm:19.5.0" + "@udecode/plate-ui-toolbar": "npm:19.6.0" peerDependencies: react: ">=16.8.0" react-dom: ">=16.8.0" @@ -6385,14 +6402,14 @@ __metadata: languageName: unknown linkType: soft -"@udecode/plate-ui-list@npm:19.5.0, @udecode/plate-ui-list@workspace:packages/ui/nodes/list": +"@udecode/plate-ui-list@npm:19.6.0, @udecode/plate-ui-list@workspace:packages/ui/nodes/list": version: 0.0.0-use.local resolution: "@udecode/plate-ui-list@workspace:packages/ui/nodes/list" dependencies: "@udecode/plate-core": "npm:19.5.0" "@udecode/plate-list": "npm:19.5.0" "@udecode/plate-styled-components": "npm:19.5.0" - "@udecode/plate-ui-toolbar": "npm:19.5.0" + "@udecode/plate-ui-toolbar": "npm:19.6.0" peerDependencies: react: ">=16.8.0" react-dom: ">=16.8.0" @@ -6403,7 +6420,7 @@ __metadata: languageName: unknown linkType: soft -"@udecode/plate-ui-media@npm:19.5.0, @udecode/plate-ui-media@workspace:packages/ui/nodes/media": +"@udecode/plate-ui-media@npm:19.6.0, @udecode/plate-ui-media@workspace:packages/ui/nodes/media": version: 0.0.0-use.local resolution: "@udecode/plate-ui-media@workspace:packages/ui/nodes/media" dependencies: @@ -6412,8 +6429,8 @@ __metadata: "@udecode/plate-link": "npm:19.5.0" "@udecode/plate-media": "npm:19.5.0" "@udecode/plate-styled-components": "npm:19.5.0" - "@udecode/plate-ui-link": "npm:19.5.0" - "@udecode/plate-ui-toolbar": "npm:19.5.0" + "@udecode/plate-ui-link": "npm:19.6.0" + "@udecode/plate-ui-toolbar": "npm:19.6.0" js-video-url-parser: "npm:0.5.1" peerDependencies: react: ">=16.8.0" @@ -6487,7 +6504,7 @@ __metadata: languageName: unknown linkType: soft -"@udecode/plate-ui-table@npm:19.5.0, @udecode/plate-ui-table@workspace:packages/ui/nodes/table": +"@udecode/plate-ui-table@npm:19.6.0, @udecode/plate-ui-table@workspace:packages/ui/nodes/table": version: 0.0.0-use.local resolution: "@udecode/plate-ui-table@workspace:packages/ui/nodes/table" dependencies: @@ -6496,7 +6513,7 @@ __metadata: "@udecode/plate-styled-components": "npm:19.5.0" "@udecode/plate-table": "npm:19.5.0" "@udecode/plate-ui-button": "npm:19.5.0" - "@udecode/plate-ui-toolbar": "npm:19.5.0" + "@udecode/plate-ui-toolbar": "npm:19.6.0" re-resizable: "npm:^6.9.9" peerDependencies: react: ">=16.8.0" @@ -6508,7 +6525,7 @@ __metadata: languageName: unknown linkType: soft -"@udecode/plate-ui-toolbar@npm:19.5.0, @udecode/plate-ui-toolbar@workspace:packages/ui/toolbar": +"@udecode/plate-ui-toolbar@npm:19.6.0, @udecode/plate-ui-toolbar@workspace:packages/ui/toolbar": version: 0.0.0-use.local resolution: "@udecode/plate-ui-toolbar@workspace:packages/ui/toolbar" dependencies: @@ -6528,30 +6545,30 @@ __metadata: languageName: unknown linkType: soft -"@udecode/plate-ui@npm:19.5.0, @udecode/plate-ui@workspace:packages/ui/plate": +"@udecode/plate-ui@npm:19.6.0, @udecode/plate-ui@workspace:packages/ui/plate": version: 0.0.0-use.local resolution: "@udecode/plate-ui@workspace:packages/ui/plate" dependencies: "@udecode/plate-headless": "npm:19.5.0" "@udecode/plate-styled-components": "npm:19.5.0" - "@udecode/plate-ui-alignment": "npm:19.5.0" + "@udecode/plate-ui-alignment": "npm:19.6.0" "@udecode/plate-ui-block-quote": "npm:19.5.0" "@udecode/plate-ui-button": "npm:19.5.0" - "@udecode/plate-ui-code-block": "npm:19.5.0" + "@udecode/plate-ui-code-block": "npm:19.6.0" "@udecode/plate-ui-combobox": "npm:19.5.0" - "@udecode/plate-ui-comments": "npm:19.5.0" + "@udecode/plate-ui-comments": "npm:19.6.0" "@udecode/plate-ui-cursor": "npm:19.5.0" - "@udecode/plate-ui-emoji": "npm:19.5.0" - "@udecode/plate-ui-find-replace": "npm:19.5.0" - "@udecode/plate-ui-font": "npm:19.5.0" - "@udecode/plate-ui-line-height": "npm:19.5.0" - "@udecode/plate-ui-link": "npm:19.5.0" - "@udecode/plate-ui-list": "npm:19.5.0" - "@udecode/plate-ui-media": "npm:19.5.0" + "@udecode/plate-ui-emoji": "npm:19.6.0" + "@udecode/plate-ui-find-replace": "npm:19.6.0" + "@udecode/plate-ui-font": "npm:19.6.0" + "@udecode/plate-ui-line-height": "npm:19.6.0" + "@udecode/plate-ui-link": "npm:19.6.0" + "@udecode/plate-ui-list": "npm:19.6.0" + "@udecode/plate-ui-media": "npm:19.6.0" "@udecode/plate-ui-mention": "npm:19.5.0" "@udecode/plate-ui-placeholder": "npm:19.5.0" - "@udecode/plate-ui-table": "npm:19.5.0" - "@udecode/plate-ui-toolbar": "npm:19.5.0" + "@udecode/plate-ui-table": "npm:19.6.0" + "@udecode/plate-ui-toolbar": "npm:19.6.0" use-context-selector: "npm:1.4.1" peerDependencies: react: ">=16.8.0" @@ -6571,7 +6588,7 @@ __metadata: resolution: "@udecode/plate@workspace:packages/plate" dependencies: "@udecode/plate-headless": "npm:19.5.0" - "@udecode/plate-ui": "npm:19.5.0" + "@udecode/plate-ui": "npm:19.6.0" peerDependencies: react: ">=16.8.0" react-dom: ">=16.8.0" From e04398ec7fc73af053813ed823934d9c4379fdd0 Mon Sep 17 00:00:00 2001 From: TomMorane Date: Fri, 24 Feb 2023 16:37:25 +0100 Subject: [PATCH 2/9] fix --- packages/dnd/src/components/index.ts | 5 +++++ packages/dnd/src/index.ts | 12 ++++++++++++ packages/headless/src/index.tsx | 1 + packages/nodes/table/src/index.ts | 1 + packages/ui/dnd/src/components/Draggable.types.ts | 2 +- packages/ui/dnd/src/components/index.ts | 3 +-- packages/ui/dnd/src/index.ts | 7 ------- 7 files changed, 21 insertions(+), 10 deletions(-) create mode 100644 packages/dnd/src/components/index.ts create mode 100644 packages/dnd/src/index.ts diff --git a/packages/dnd/src/components/index.ts b/packages/dnd/src/components/index.ts new file mode 100644 index 0000000000..a6d9afd0ba --- /dev/null +++ b/packages/dnd/src/components/index.ts @@ -0,0 +1,5 @@ +/** + * @file Automatically generated by barrelsby. + */ + +export * from './Scroller/index'; diff --git a/packages/dnd/src/index.ts b/packages/dnd/src/index.ts new file mode 100644 index 0000000000..21faf2c126 --- /dev/null +++ b/packages/dnd/src/index.ts @@ -0,0 +1,12 @@ +/** + * @file Automatically generated by barrelsby. + */ + +export * from './createDndPlugin'; +export * from './dndStore'; +export * from './types'; +export * from './components/index'; +export * from './hooks/index'; +export * from './queries/index'; +export * from './transforms/index'; +export * from './utils/index'; diff --git a/packages/headless/src/index.tsx b/packages/headless/src/index.tsx index 5cae119ab9..a1d38abb14 100644 --- a/packages/headless/src/index.tsx +++ b/packages/headless/src/index.tsx @@ -13,6 +13,7 @@ export * from '@udecode/plate-code-block'; export * from '@udecode/plate-combobox'; export * from '@udecode/plate-comments'; export * from '@udecode/plate-core'; +export * from '@udecode/plate-dnd'; export * from '@udecode/plate-emoji'; export * from '@udecode/plate-find-replace'; export * from '@udecode/plate-floating'; diff --git a/packages/nodes/table/src/index.ts b/packages/nodes/table/src/index.ts index eccb991726..033f521a8b 100644 --- a/packages/nodes/table/src/index.ts +++ b/packages/nodes/table/src/index.ts @@ -12,6 +12,7 @@ export * from './withInsertFragmentTable'; export * from './withInsertTextTable'; export * from './withNormalizeTable'; export * from './withSelectionTable'; +export * from './withSetFragmentDataTable'; export * from './withTable'; export * from './queries/index'; export * from './transforms/index'; diff --git a/packages/ui/dnd/src/components/Draggable.types.ts b/packages/ui/dnd/src/components/Draggable.types.ts index 1ef25e6bac..5163fa1b43 100644 --- a/packages/ui/dnd/src/components/Draggable.types.ts +++ b/packages/ui/dnd/src/components/Draggable.types.ts @@ -1,9 +1,9 @@ import React from 'react'; import { EElement, TEditor, TElement, Value } from '@udecode/plate-core'; +import { DropLineDirection } from '@udecode/plate-dnd'; import { StyledElementProps } from '@udecode/plate-styled-components'; import { Path } from 'slate'; import { CSSProp } from 'styled-components'; -import { DropLineDirection } from '../types'; export interface DraggableStyleProps extends DraggableProps { diff --git a/packages/ui/dnd/src/components/index.ts b/packages/ui/dnd/src/components/index.ts index a43f9849c8..59ef16f1bc 100644 --- a/packages/ui/dnd/src/components/index.ts +++ b/packages/ui/dnd/src/components/index.ts @@ -3,8 +3,7 @@ */ export * from './Draggable.styles'; -export * from './Draggable'; +export * from './PlateDraggable'; export * from './Draggable.types'; export * from './grabberTooltipProps'; export * from './withDraggable'; -export * from './Scroller/index'; diff --git a/packages/ui/dnd/src/index.ts b/packages/ui/dnd/src/index.ts index 21faf2c126..82394da659 100644 --- a/packages/ui/dnd/src/index.ts +++ b/packages/ui/dnd/src/index.ts @@ -2,11 +2,4 @@ * @file Automatically generated by barrelsby. */ -export * from './createDndPlugin'; -export * from './dndStore'; -export * from './types'; export * from './components/index'; -export * from './hooks/index'; -export * from './queries/index'; -export * from './transforms/index'; -export * from './utils/index'; From a181495018b3f09cc4f31166a2cd120d2ba1f751 Mon Sep 17 00:00:00 2001 From: TomMorane Date: Sat, 25 Feb 2023 15:31:28 +0100 Subject: [PATCH 3/9] fix --- examples/src/DndApp.tsx | 2 +- examples/src/PlaygroundApp.tsx | 2 +- packages/dnd/src/components/DragHandle.tsx | 22 +++++ packages/dnd/src/components/Draggable.tsx | 16 ++++ .../dnd/src/components/DraggableBlock.tsx | 28 ++++++ .../src/components/DraggableBlockToolbar.tsx | 34 ++++++++ .../dnd/src/components/DraggableDropline.tsx | 21 +++++ .../components/DraggableGutterLeftProps.tsx | 22 +++++ packages/dnd/src/components/DraggableRoot.tsx | 31 +++++++ packages/dnd/src/components/index.ts | 8 ++ .../dnd/src/components/useDraggableState.ts | 18 ++++ packages/headless/package.json | 1 - packages/headless/src/index.tsx | 1 - .../ui/dnd/src/components/Draggable.styles.ts | 5 +- packages/ui/dnd/src/components/Draggable.tsx | 87 ------------------- .../ui/dnd/src/components/Draggable.types.ts | 11 +-- .../ui/dnd/src/components/PlateDraggable.tsx | 78 +++++++++++++++++ packages/ui/dnd/src/components/index.ts | 2 +- .../ui/dnd/src/components/withDraggable.tsx | 15 ++-- yarn.lock | 1 - 20 files changed, 293 insertions(+), 112 deletions(-) create mode 100644 packages/dnd/src/components/DragHandle.tsx create mode 100644 packages/dnd/src/components/Draggable.tsx create mode 100644 packages/dnd/src/components/DraggableBlock.tsx create mode 100644 packages/dnd/src/components/DraggableBlockToolbar.tsx create mode 100644 packages/dnd/src/components/DraggableDropline.tsx create mode 100644 packages/dnd/src/components/DraggableGutterLeftProps.tsx create mode 100644 packages/dnd/src/components/DraggableRoot.tsx create mode 100644 packages/dnd/src/components/useDraggableState.ts delete mode 100644 packages/ui/dnd/src/components/Draggable.tsx create mode 100644 packages/ui/dnd/src/components/PlateDraggable.tsx diff --git a/examples/src/DndApp.tsx b/examples/src/DndApp.tsx index df1f80c4a7..cf2aed3a60 100644 --- 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 index 9702ffb03d..fe25d6109d 100644 --- 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/packages/dnd/src/components/DragHandle.tsx b/packages/dnd/src/components/DragHandle.tsx new file mode 100644 index 0000000000..9b79885b3f --- /dev/null +++ b/packages/dnd/src/components/DragHandle.tsx @@ -0,0 +1,22 @@ +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((props) => { + const htmlProps = usePlateDragHandleProps(props); + return createElementAs('button', htmlProps); +}); diff --git a/packages/dnd/src/components/Draggable.tsx b/packages/dnd/src/components/Draggable.tsx new file mode 100644 index 0000000000..09a63e2226 --- /dev/null +++ b/packages/dnd/src/components/Draggable.tsx @@ -0,0 +1,16 @@ +import { DraggableBlock, DraggableBlockToolbarWrapper } from './DraggableBlock'; +import { DraggableBlockToolbar } from './DraggableBlockToolbar'; +import { DraggableDropline } from './DraggableDropline'; +import { DraggableGutterLeft } from './DraggableGutterLeftProps'; +import { DraggableRoot } from './DraggableRoot'; +import { DragHandle } from './DragHandle'; + +export const Draggable = { + Root: DraggableRoot, + Block: DraggableBlock, + BlockToolbar: DraggableBlockToolbar, + Wrapper: DraggableBlockToolbarWrapper, + GutenLeft: DraggableGutterLeft, + Handle: DragHandle, + Dropline: DraggableDropline, +}; diff --git a/packages/dnd/src/components/DraggableBlock.tsx b/packages/dnd/src/components/DraggableBlock.tsx new file mode 100644 index 0000000000..ffdbeae6f0 --- /dev/null +++ b/packages/dnd/src/components/DraggableBlock.tsx @@ -0,0 +1,28 @@ +import { useRef } from 'react'; +import { + AsProps, + createComponentAs, + createElementAs, + HTMLPropsAs, + useComposedRef, +} from '@udecode/plate-core'; + +export type DraggableBlockProps = {} & HTMLPropsAs<'div'>; +export const useDraggableBlockProps = ( + props: DraggableBlockProps +): HTMLPropsAs<'div'> => { + const blockRef = useRef(null); + return { + ...props, + ref: useComposedRef(props.ref, blockRef), + }; +}; +export const DraggableBlock = createComponentAs( + (props) => { + const htmlProps = useDraggableBlockProps(props); + return createElementAs('div', htmlProps); + } +); +export const DraggableBlockToolbarWrapper = createComponentAs>( + (props) => createElementAs('div', props) +); diff --git a/packages/dnd/src/components/DraggableBlockToolbar.tsx b/packages/dnd/src/components/DraggableBlockToolbar.tsx new file mode 100644 index 0000000000..9d328853bd --- /dev/null +++ b/packages/dnd/src/components/DraggableBlockToolbar.tsx @@ -0,0 +1,34 @@ +import { useRef } from 'react'; +import { ConnectDragSource } from 'react-dnd'; +import { + createComponentAs, + createElementAs, + HTMLPropsAs, + TElement, + useComposedRef, +} from '@udecode/plate-core'; + +export type DraggableBlockToolbarProps = { + element: TElement; + dragRef: ConnectDragSource; +} & HTMLPropsAs<'div'>; +export const useDraggableBlockToolbarProps = ({ + element, + dragRef, + ...props +}: DraggableBlockToolbarProps): HTMLPropsAs<'div'> => { + const dragWrapperRef = useRef(null); + + const multiDragRef = useComposedRef(dragRef, dragWrapperRef); + + return { + ...props, + ref: useComposedRef(props.ref, multiDragRef), + }; +}; +export const DraggableBlockToolbar = createComponentAs( + (props) => { + const htmlProps = useDraggableBlockToolbarProps(props); + return createElementAs('div', htmlProps); + } +); diff --git a/packages/dnd/src/components/DraggableDropline.tsx b/packages/dnd/src/components/DraggableDropline.tsx new file mode 100644 index 0000000000..307a2cec7c --- /dev/null +++ b/packages/dnd/src/components/DraggableDropline.tsx @@ -0,0 +1,21 @@ +import { + createComponentAs, + createElementAs, + HTMLPropsAs, +} from '@udecode/plate-core'; + +export type DraggableDroplineProps = {} & HTMLPropsAs<'div'>; +export const useDraggableDroplineProps = ( + props: DraggableDroplineProps +): HTMLPropsAs<'div'> => { + return { + contentEditable: false, + ...props, + }; +}; +export const DraggableDropline = createComponentAs( + (props) => { + const htmlProps = useDraggableDroplineProps(props); + return createElementAs('div', htmlProps); + } +); diff --git a/packages/dnd/src/components/DraggableGutterLeftProps.tsx b/packages/dnd/src/components/DraggableGutterLeftProps.tsx new file mode 100644 index 0000000000..e423416179 --- /dev/null +++ b/packages/dnd/src/components/DraggableGutterLeftProps.tsx @@ -0,0 +1,22 @@ +import { + AsProps, + createComponentAs, + createElementAs, + HTMLPropsAs, +} from '@udecode/plate-core'; + +export type DraggableGutterLeftProps = {} & HTMLPropsAs<'div'>; +export const useDraggableGutterLeft = ( + props: DraggableGutterLeftProps +): HTMLPropsAs<'div'> => { + return { + contentEditable: false, + ...props, + }; +}; +export const DraggableGutterLeft = createComponentAs>( + (props) => { + const htmlProps = useDraggableGutterLeft(props); + return createElementAs('div', htmlProps); + } +); diff --git a/packages/dnd/src/components/DraggableRoot.tsx b/packages/dnd/src/components/DraggableRoot.tsx new file mode 100644 index 0000000000..464e9cee54 --- /dev/null +++ b/packages/dnd/src/components/DraggableRoot.tsx @@ -0,0 +1,31 @@ +import React from 'react'; +import { ConnectDragSource } from 'react-dnd'; +import { + createComponentAs, + createElementAs, + HTMLPropsAs, + useComposedRef, +} from '@udecode/plate-core'; +import { DropLineDirection } from '../types'; + +export type DraggableRootProps = {} & HTMLPropsAs<'div'> & + Pick; +export type DraggableState = { + dropLine: DropLineDirection; + isDragging: boolean; + rootRef: React.RefObject; + dragRef: ConnectDragSource; +}; +export const useDraggableRootProps = ({ + rootRef, + ...props +}: DraggableRootProps): HTMLPropsAs<'div'> => { + return { + ...props, + ref: useComposedRef(props.ref, rootRef), + }; +}; +export const DraggableRoot = createComponentAs((props) => { + const htmlProps = useDraggableRootProps(props); + return createElementAs('div', htmlProps); +}); diff --git a/packages/dnd/src/components/index.ts b/packages/dnd/src/components/index.ts index a6d9afd0ba..dcd5112d83 100644 --- a/packages/dnd/src/components/index.ts +++ b/packages/dnd/src/components/index.ts @@ -2,4 +2,12 @@ * @file Automatically generated by barrelsby. */ +export * from './DragHandle'; +export * from './Draggable'; +export * from './DraggableBlock'; +export * from './DraggableBlockToolbar'; +export * from './DraggableDropline'; +export * from './DraggableGutterLeftProps'; +export * from './DraggableRoot'; export * from './Scroller/index'; +export { useDraggableState } from './useDraggableState'; diff --git a/packages/dnd/src/components/useDraggableState.ts b/packages/dnd/src/components/useDraggableState.ts new file mode 100644 index 0000000000..78939d6b6b --- /dev/null +++ b/packages/dnd/src/components/useDraggableState.ts @@ -0,0 +1,18 @@ +import { useRef } from 'react'; +import { TElement } from '@udecode/plate-core'; +import { useDndBlock } from '../hooks'; +import { DraggableState } from './DraggableRoot'; + +export const useDraggableState = (props: { + element: TElement; +}): DraggableState => { + const { element } = props; + const rootRef = useRef(null); + const { dropLine, isDragging, dragRef } = useDndBlock({ + id: element.id as string, + nodeRef: rootRef, + }); + + return { dropLine, isDragging, rootRef, dragRef }; +}; +``; diff --git a/packages/headless/package.json b/packages/headless/package.json index 18d335580d..37f6191a56 100644 --- a/packages/headless/package.json +++ b/packages/headless/package.json @@ -30,7 +30,6 @@ "@udecode/plate-combobox": "19.5.0", "@udecode/plate-comments": "19.5.0", "@udecode/plate-core": "19.5.0", - "@udecode/plate-dnd": "19.5.0", "@udecode/plate-emoji": "19.5.0", "@udecode/plate-find-replace": "19.5.0", "@udecode/plate-floating": "19.5.0", diff --git a/packages/headless/src/index.tsx b/packages/headless/src/index.tsx index a1d38abb14..5cae119ab9 100644 --- a/packages/headless/src/index.tsx +++ b/packages/headless/src/index.tsx @@ -13,7 +13,6 @@ export * from '@udecode/plate-code-block'; export * from '@udecode/plate-combobox'; export * from '@udecode/plate-comments'; export * from '@udecode/plate-core'; -export * from '@udecode/plate-dnd'; export * from '@udecode/plate-emoji'; export * from '@udecode/plate-find-replace'; export * from '@udecode/plate-floating'; diff --git a/packages/ui/dnd/src/components/Draggable.styles.ts b/packages/ui/dnd/src/components/Draggable.styles.ts index 416cb60b45..7bd36e9d62 100644 --- a/packages/ui/dnd/src/components/Draggable.styles.ts +++ b/packages/ui/dnd/src/components/Draggable.styles.ts @@ -1,12 +1,9 @@ -import { Value } from '@udecode/plate-core'; import { createStyles } from '@udecode/plate-styled-components'; import { css } from 'styled-components'; import tw from 'twin.macro'; import { DraggableStyleProps } from './Draggable.types'; -export const getDraggableStyles = ( - props: DraggableStyleProps -) => +export const getDraggableStyles = (props: DraggableStyleProps) => createStyles( { prefixClassNames: 'Draggable', ...props }, { diff --git a/packages/ui/dnd/src/components/Draggable.tsx b/packages/ui/dnd/src/components/Draggable.tsx deleted file mode 100644 index f77123db3a..0000000000 --- a/packages/ui/dnd/src/components/Draggable.tsx +++ /dev/null @@ -1,87 +0,0 @@ -import React, { useRef } from 'react'; -import useMergedRef from '@react-hook/merged-ref'; -import { Value } from '@udecode/plate-core'; -import { useDndBlock } from '../hooks/useDndBlock'; -import { getDraggableStyles } from './Draggable.styles'; -import { DraggableProps, DragHandleProps } from './Draggable.types'; - -const DefaultDragHandle = ({ styles, ...props }: DragHandleProps) => ( - - - ); + draggableProps: { + onRenderDragHandle: () => { + return ( + + + + ); + }, }, }, { 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 index 77f77a01ba..e7b5b64711 100644 --- 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 = (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/src/components/index.ts b/packages/dnd/src/components/index.ts index dcd5112d83..4e8afb8af5 100644 --- a/packages/dnd/src/components/index.ts +++ b/packages/dnd/src/components/index.ts @@ -9,5 +9,7 @@ export * from './DraggableBlockToolbar'; export * from './DraggableDropline'; export * from './DraggableGutterLeftProps'; export * from './DraggableRoot'; +export * from './useDraggableState'; +export * from './useWithDraggable'; +export * from './withDraggable'; export * from './Scroller/index'; -export { useDraggableState } from './useDraggableState'; diff --git a/packages/dnd/src/components/useWithDraggable.ts b/packages/dnd/src/components/useWithDraggable.ts new file mode 100644 index 0000000000..2102c8a8ca --- /dev/null +++ b/packages/dnd/src/components/useWithDraggable.ts @@ -0,0 +1,57 @@ +import { useMemo } from 'react'; +import { + findNodePath, + PlateRenderElementProps, + TEditor, +} from '@udecode/plate-core'; +import { Path } from 'slate'; +import { useReadOnly } from 'slate-react'; + +export interface WithDraggableOptions { + /** + * Document level where dnd is enabled. 0 = root blocks, 1 = first level of children, etc. + * Set to null to allow all levels. + * @default 0 + */ + level?: number | null; + + /** + * Filter out elements that can't be dragged. + */ + filter?: (editor: TEditor, path: Path) => boolean; + + /** + * Enables dnd in read-only. + */ + allowReadOnly?: boolean; + draggableProps?: T; +} + +export const useWithDraggable = ({ + editor, + level = 0, + filter, + element, + allowReadOnly = false, + draggableProps, +}: WithDraggableOptions & PlateRenderElementProps) => { + const readOnly = useReadOnly(); + const path = useMemo(() => findNodePath(editor, element), [editor, element]); + + const filteredOut = useMemo( + () => + path && + ((Number.isInteger(level) && level !== path.length - 1) || + (filter && filter(editor, path))), + [path, level, filter, editor] + ); + + return { + disabled: filteredOut || (!allowReadOnly && readOnly), + draggableProps: { + editor, + element, + ...draggableProps, + }, + }; +}; diff --git a/packages/dnd/src/components/withDraggable.tsx b/packages/dnd/src/components/withDraggable.tsx new file mode 100644 index 0000000000..03ef43a71a --- /dev/null +++ b/packages/dnd/src/components/withDraggable.tsx @@ -0,0 +1,29 @@ +import React, { forwardRef } from 'react'; +import { + AnyObject, + PlateRenderElementProps, + RenderFunction, +} from '@udecode/plate-core'; +import { useWithDraggable, WithDraggableOptions } from './useWithDraggable'; + +export const withDraggable = ( + Draggable: RenderFunction, + Component: RenderFunction, + options?: WithDraggableOptions +) => + forwardRef((props, ref) => { + const { disabled, draggableProps } = useWithDraggable({ + ...options, + ...props, + }); + + if (disabled) { + return ; + } + + return ( + + + + ); + }); diff --git a/packages/ui/dnd/src/components/Draggable.types.ts b/packages/ui/dnd/src/components/Draggable.types.ts index 7f88bcca91..77f7ee095d 100644 --- a/packages/ui/dnd/src/components/Draggable.types.ts +++ b/packages/ui/dnd/src/components/Draggable.types.ts @@ -1,8 +1,7 @@ import React from 'react'; -import { EElement, TEditor, TElement, Value } from '@udecode/plate-core'; +import { EElement, TElement, Value } from '@udecode/plate-core'; import { DropLineDirection } from '@udecode/plate-dnd'; import { StyledElementProps } from '@udecode/plate-styled-components'; -import { Path } from 'slate'; import { CSSProp } from 'styled-components'; export interface DraggableStyleProps extends PlateDraggableProps { @@ -71,21 +70,4 @@ export interface PlateDraggableProps * An override to render the drag handle. */ onRenderDragHandle?: (props: DragHandleProps) => JSX.Element; - - /** - * Document level where dnd is enabled. 0 = root blocks, 1 = first level of children, etc. - * Set to null to allow all levels. - * @default 0 - */ - level?: number | null; - - /** - * Filter out elements that can't be dragged. - */ - filter?: (editor: TEditor, path: Path) => boolean; - - /** - * Enables dnd in read-only. - */ - allowReadOnly?: boolean; } diff --git a/packages/ui/dnd/src/components/PlateDraggable.tsx b/packages/ui/dnd/src/components/PlateDraggable.tsx index ef02f6da62..7b3cfdf5fb 100644 --- a/packages/ui/dnd/src/components/PlateDraggable.tsx +++ b/packages/ui/dnd/src/components/PlateDraggable.tsx @@ -24,6 +24,7 @@ export const PlateDraggable = forwardRef( direction: dropLine, isDragging, }); + return ( { {} - -export const withDraggable = ( - Component: any, - { - styles, - level = 0, - filter, - allowReadOnly = false, - onRenderDragHandle, - }: WithDraggableOptions = {} -) => { - return forwardRef((props, ref) => { - const { attributes, element, editor } = props; - const readOnly = useReadOnly(); - const path = useMemo(() => findNodePath(editor, element), [ - editor, - element, - ]); - - const filteredOut = useMemo( - () => - path && - ((Number.isInteger(level) && level !== path.length - 1) || - (filter && filter(editor, path))), - [path, editor] - ); - - if (filteredOut || (!allowReadOnly && readOnly)) { - return ; - } - - return ( - - - - ); - }); -}; - -export const withDraggables = createNodesWithHOC(withDraggable); diff --git a/packages/ui/dnd/src/components/withPlateDraggable.tsx b/packages/ui/dnd/src/components/withPlateDraggable.tsx new file mode 100644 index 0000000000..c757914d81 --- /dev/null +++ b/packages/ui/dnd/src/components/withPlateDraggable.tsx @@ -0,0 +1,19 @@ +import { createNodesWithHOC, RenderFunction } from '@udecode/plate-core'; +import { withDraggable, WithDraggableOptions } from '@udecode/plate-dnd'; +import { PlateDraggableProps } from './Draggable.types'; +import { PlateDraggable } from './PlateDraggable'; + +export const withPlateDraggable = ( + Component: RenderFunction, + options?: WithDraggableOptions< + Partial> + > +) => { + return withDraggable( + PlateDraggable, + Component, + options as any + ); +}; + +export const withPlateDraggables = createNodesWithHOC(withPlateDraggable); From e29a14e090db1c53bbdfa9a75c1458b160cd2b9d Mon Sep 17 00:00:00 2001 From: TomMorane <112502503+TomMorane@users.noreply.github.com> Date: Sat, 25 Feb 2023 18:14:09 +0100 Subject: [PATCH 5/9] Create two-glasses-doubt.md --- .changeset/two-glasses-doubt.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/two-glasses-doubt.md diff --git a/.changeset/two-glasses-doubt.md b/.changeset/two-glasses-doubt.md new file mode 100644 index 0000000000..244b50e0dd --- /dev/null +++ b/.changeset/two-glasses-doubt.md @@ -0,0 +1,6 @@ +--- +"@udecode/plate-core": patch + +--- + +`createHOC`: deep merge props From 2fb407230fe3de45acd048f7a85b1aea6286b7dd Mon Sep 17 00:00:00 2001 From: zbeyens Date: Sun, 5 Mar 2023 12:34:31 +0100 Subject: [PATCH 6/9] refactor --- config/aliases-plate.js | 1 + packages/dnd/package.json | 4 ++-- packages/dnd/src/components/DragHandle.tsx | 3 +++ packages/dnd/src/components/Draggable.tsx | 3 ++- .../{DraggableBlock.tsx => DraggableBlock.ts} | 8 ++++---- ...ckToolbar.tsx => DraggableBlockToolbar.ts} | 3 +++ .../DraggableBlockToolbarWrapper.ts | 9 +++++++++ ...gableDropline.tsx => DraggableDropline.ts} | 3 +++ ...tProps.tsx => DraggableGutterLeftProps.ts} | 3 +++ packages/dnd/src/components/DraggableRoot.tsx | 12 ++++------- packages/dnd/src/components/index.ts | 1 + .../dnd/src/components/useDraggableState.ts | 13 +++++++++--- .../src/{components => }/Draggable.styles.ts | 0 .../src/{components => }/Draggable.types.ts | 0 .../src/{components => }/PlateDraggable.tsx | 0 packages/ui/dnd/src/components/index.ts | 9 --------- .../{components => }/grabberTooltipProps.tsx | 0 packages/ui/dnd/src/index.ts | 6 +++++- .../{components => }/withDraggable.spec.tsx | 4 ++-- .../{components => }/withPlateDraggable.tsx | 0 yarn.lock | 20 +++++++++++++++++-- 21 files changed, 70 insertions(+), 32 deletions(-) rename packages/dnd/src/components/{DraggableBlock.tsx => DraggableBlock.ts} (82%) rename packages/dnd/src/components/{DraggableBlockToolbar.tsx => DraggableBlockToolbar.ts} (99%) create mode 100644 packages/dnd/src/components/DraggableBlockToolbarWrapper.ts rename packages/dnd/src/components/{DraggableDropline.tsx => DraggableDropline.ts} (99%) rename packages/dnd/src/components/{DraggableGutterLeftProps.tsx => DraggableGutterLeftProps.ts} (99%) rename packages/ui/dnd/src/{components => }/Draggable.styles.ts (100%) rename packages/ui/dnd/src/{components => }/Draggable.types.ts (100%) rename packages/ui/dnd/src/{components => }/PlateDraggable.tsx (100%) delete mode 100644 packages/ui/dnd/src/components/index.ts rename packages/ui/dnd/src/{components => }/grabberTooltipProps.tsx (100%) rename packages/ui/dnd/src/{components => }/withDraggable.spec.tsx (94%) rename packages/ui/dnd/src/{components => }/withPlateDraggable.tsx (100%) diff --git a/config/aliases-plate.js b/config/aliases-plate.js index cf4c34c099..f9a6497fcd 100644 --- 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/packages/dnd/package.json b/packages/dnd/package.json index dd5750c8dc..7642331795 100644 --- a/packages/dnd/package.json +++ b/packages/dnd/package.json @@ -1,6 +1,6 @@ { "name": "@udecode/plate-dnd", - "version": "19.5.0", + "version": "19.7.0", "description": "Drag & drop feature for Plate", "license": "MIT", "homepage": "https://plate.udecode.io", @@ -19,7 +19,7 @@ ], "types": "dist/index.d.ts", "dependencies": { - "@udecode/plate-core": "19.5.0", + "@udecode/plate-core": "19.7.0", "raf": "^3.4.1" }, "peerDependencies": { diff --git a/packages/dnd/src/components/DragHandle.tsx b/packages/dnd/src/components/DragHandle.tsx index 9b79885b3f..73189d54cc 100644 --- a/packages/dnd/src/components/DragHandle.tsx +++ b/packages/dnd/src/components/DragHandle.tsx @@ -8,6 +8,7 @@ import { export type PlateDragHandleProps = { element: TElement; } & HTMLPropsAs<'button'>; + export const usePlateDragHandleProps = ( props: PlateDragHandleProps ): HTMLPropsAs<'button'> => { @@ -16,7 +17,9 @@ export const usePlateDragHandleProps = ( onMouseDown: (e: any) => e.stopPropagation(), }; }; + export const DragHandle = createComponentAs((props) => { const htmlProps = usePlateDragHandleProps(props); + return createElementAs('button', htmlProps); }); diff --git a/packages/dnd/src/components/Draggable.tsx b/packages/dnd/src/components/Draggable.tsx index 09a63e2226..e406d4fccd 100644 --- a/packages/dnd/src/components/Draggable.tsx +++ b/packages/dnd/src/components/Draggable.tsx @@ -1,5 +1,6 @@ -import { DraggableBlock, DraggableBlockToolbarWrapper } from './DraggableBlock'; +import { DraggableBlock } from './DraggableBlock'; import { DraggableBlockToolbar } from './DraggableBlockToolbar'; +import { DraggableBlockToolbarWrapper } from './DraggableBlockToolbarWrapper'; import { DraggableDropline } from './DraggableDropline'; import { DraggableGutterLeft } from './DraggableGutterLeftProps'; import { DraggableRoot } from './DraggableRoot'; diff --git a/packages/dnd/src/components/DraggableBlock.tsx b/packages/dnd/src/components/DraggableBlock.ts similarity index 82% rename from packages/dnd/src/components/DraggableBlock.tsx rename to packages/dnd/src/components/DraggableBlock.ts index ffdbeae6f0..f2e3ae242e 100644 --- a/packages/dnd/src/components/DraggableBlock.tsx +++ b/packages/dnd/src/components/DraggableBlock.ts @@ -1,6 +1,5 @@ import { useRef } from 'react'; import { - AsProps, createComponentAs, createElementAs, HTMLPropsAs, @@ -8,21 +7,22 @@ import { } from '@udecode/plate-core'; export type DraggableBlockProps = {} & HTMLPropsAs<'div'>; + export const useDraggableBlockProps = ( props: DraggableBlockProps ): HTMLPropsAs<'div'> => { const blockRef = useRef(null); + return { ...props, ref: useComposedRef(props.ref, blockRef), }; }; + export const DraggableBlock = createComponentAs( (props) => { const htmlProps = useDraggableBlockProps(props); + return createElementAs('div', htmlProps); } ); -export const DraggableBlockToolbarWrapper = createComponentAs>( - (props) => createElementAs('div', props) -); diff --git a/packages/dnd/src/components/DraggableBlockToolbar.tsx b/packages/dnd/src/components/DraggableBlockToolbar.ts similarity index 99% rename from packages/dnd/src/components/DraggableBlockToolbar.tsx rename to packages/dnd/src/components/DraggableBlockToolbar.ts index 9d328853bd..fe4073bbf7 100644 --- a/packages/dnd/src/components/DraggableBlockToolbar.tsx +++ b/packages/dnd/src/components/DraggableBlockToolbar.ts @@ -12,6 +12,7 @@ export type DraggableBlockToolbarProps = { element: TElement; dragRef: ConnectDragSource; } & HTMLPropsAs<'div'>; + export const useDraggableBlockToolbarProps = ({ element, dragRef, @@ -26,9 +27,11 @@ export const useDraggableBlockToolbarProps = ({ ref: useComposedRef(props.ref, multiDragRef), }; }; + export const DraggableBlockToolbar = createComponentAs( (props) => { const htmlProps = useDraggableBlockToolbarProps(props); + return createElementAs('div', htmlProps); } ); diff --git a/packages/dnd/src/components/DraggableBlockToolbarWrapper.ts b/packages/dnd/src/components/DraggableBlockToolbarWrapper.ts new file mode 100644 index 0000000000..80bea261df --- /dev/null +++ b/packages/dnd/src/components/DraggableBlockToolbarWrapper.ts @@ -0,0 +1,9 @@ +import { + AsProps, + createComponentAs, + createElementAs, +} from '@udecode/plate-core'; + +export const DraggableBlockToolbarWrapper = createComponentAs>( + (props) => createElementAs('div', props) +); diff --git a/packages/dnd/src/components/DraggableDropline.tsx b/packages/dnd/src/components/DraggableDropline.ts similarity index 99% rename from packages/dnd/src/components/DraggableDropline.tsx rename to packages/dnd/src/components/DraggableDropline.ts index 307a2cec7c..64722c44f5 100644 --- a/packages/dnd/src/components/DraggableDropline.tsx +++ b/packages/dnd/src/components/DraggableDropline.ts @@ -5,6 +5,7 @@ import { } from '@udecode/plate-core'; export type DraggableDroplineProps = {} & HTMLPropsAs<'div'>; + export const useDraggableDroplineProps = ( props: DraggableDroplineProps ): HTMLPropsAs<'div'> => { @@ -13,9 +14,11 @@ export const useDraggableDroplineProps = ( ...props, }; }; + export const DraggableDropline = createComponentAs( (props) => { const htmlProps = useDraggableDroplineProps(props); + return createElementAs('div', htmlProps); } ); diff --git a/packages/dnd/src/components/DraggableGutterLeftProps.tsx b/packages/dnd/src/components/DraggableGutterLeftProps.ts similarity index 99% rename from packages/dnd/src/components/DraggableGutterLeftProps.tsx rename to packages/dnd/src/components/DraggableGutterLeftProps.ts index e423416179..5afd081bc8 100644 --- a/packages/dnd/src/components/DraggableGutterLeftProps.tsx +++ b/packages/dnd/src/components/DraggableGutterLeftProps.ts @@ -6,6 +6,7 @@ import { } from '@udecode/plate-core'; export type DraggableGutterLeftProps = {} & HTMLPropsAs<'div'>; + export const useDraggableGutterLeft = ( props: DraggableGutterLeftProps ): HTMLPropsAs<'div'> => { @@ -14,9 +15,11 @@ export const useDraggableGutterLeft = ( ...props, }; }; + export const DraggableGutterLeft = createComponentAs>( (props) => { const htmlProps = useDraggableGutterLeft(props); + return createElementAs('div', htmlProps); } ); diff --git a/packages/dnd/src/components/DraggableRoot.tsx b/packages/dnd/src/components/DraggableRoot.tsx index 464e9cee54..4344eb8e57 100644 --- a/packages/dnd/src/components/DraggableRoot.tsx +++ b/packages/dnd/src/components/DraggableRoot.tsx @@ -1,21 +1,15 @@ import React from 'react'; -import { ConnectDragSource } from 'react-dnd'; import { createComponentAs, createElementAs, HTMLPropsAs, useComposedRef, } from '@udecode/plate-core'; -import { DropLineDirection } from '../types'; +import { DraggableState } from './useDraggableState'; export type DraggableRootProps = {} & HTMLPropsAs<'div'> & Pick; -export type DraggableState = { - dropLine: DropLineDirection; - isDragging: boolean; - rootRef: React.RefObject; - dragRef: ConnectDragSource; -}; + export const useDraggableRootProps = ({ rootRef, ...props @@ -25,7 +19,9 @@ export const useDraggableRootProps = ({ ref: useComposedRef(props.ref, rootRef), }; }; + export const DraggableRoot = createComponentAs((props) => { const htmlProps = useDraggableRootProps(props); + return createElementAs('div', htmlProps); }); diff --git a/packages/dnd/src/components/index.ts b/packages/dnd/src/components/index.ts index 4e8afb8af5..54c7f82ec3 100644 --- a/packages/dnd/src/components/index.ts +++ b/packages/dnd/src/components/index.ts @@ -13,3 +13,4 @@ export * from './useDraggableState'; export * from './useWithDraggable'; export * from './withDraggable'; export * from './Scroller/index'; +export { DraggableBlockToolbarWrapper } from './DraggableBlockToolbarWrapper'; diff --git a/packages/dnd/src/components/useDraggableState.ts b/packages/dnd/src/components/useDraggableState.ts index 78939d6b6b..45927599c3 100644 --- a/packages/dnd/src/components/useDraggableState.ts +++ b/packages/dnd/src/components/useDraggableState.ts @@ -1,7 +1,15 @@ -import { useRef } from 'react'; +import React, { useRef } from 'react'; +import { ConnectDragSource } from 'react-dnd'; import { TElement } from '@udecode/plate-core'; import { useDndBlock } from '../hooks'; -import { DraggableState } from './DraggableRoot'; +import { DropLineDirection } from '../types'; + +export type DraggableState = { + dropLine: DropLineDirection; + isDragging: boolean; + rootRef: React.RefObject; + dragRef: ConnectDragSource; +}; export const useDraggableState = (props: { element: TElement; @@ -15,4 +23,3 @@ export const useDraggableState = (props: { return { dropLine, isDragging, rootRef, dragRef }; }; -``; diff --git a/packages/ui/dnd/src/components/Draggable.styles.ts b/packages/ui/dnd/src/Draggable.styles.ts similarity index 100% rename from packages/ui/dnd/src/components/Draggable.styles.ts rename to packages/ui/dnd/src/Draggable.styles.ts diff --git a/packages/ui/dnd/src/components/Draggable.types.ts b/packages/ui/dnd/src/Draggable.types.ts similarity index 100% rename from packages/ui/dnd/src/components/Draggable.types.ts rename to packages/ui/dnd/src/Draggable.types.ts diff --git a/packages/ui/dnd/src/components/PlateDraggable.tsx b/packages/ui/dnd/src/PlateDraggable.tsx similarity index 100% rename from packages/ui/dnd/src/components/PlateDraggable.tsx rename to packages/ui/dnd/src/PlateDraggable.tsx diff --git a/packages/ui/dnd/src/components/index.ts b/packages/ui/dnd/src/components/index.ts deleted file mode 100644 index b5b28122d7..0000000000 --- a/packages/ui/dnd/src/components/index.ts +++ /dev/null @@ -1,9 +0,0 @@ -/** - * @file Automatically generated by barrelsby. - */ - -export * from './Draggable.styles'; -export * from './Draggable.types'; -export * from './PlateDraggable'; -export * from './grabberTooltipProps'; -export * from './withPlateDraggable'; diff --git a/packages/ui/dnd/src/components/grabberTooltipProps.tsx b/packages/ui/dnd/src/grabberTooltipProps.tsx similarity index 100% rename from packages/ui/dnd/src/components/grabberTooltipProps.tsx rename to packages/ui/dnd/src/grabberTooltipProps.tsx diff --git a/packages/ui/dnd/src/index.ts b/packages/ui/dnd/src/index.ts index 82394da659..b5b28122d7 100644 --- a/packages/ui/dnd/src/index.ts +++ b/packages/ui/dnd/src/index.ts @@ -2,4 +2,8 @@ * @file Automatically generated by barrelsby. */ -export * from './components/index'; +export * from './Draggable.styles'; +export * from './Draggable.types'; +export * from './PlateDraggable'; +export * from './grabberTooltipProps'; +export * from './withPlateDraggable'; diff --git a/packages/ui/dnd/src/components/withDraggable.spec.tsx b/packages/ui/dnd/src/withDraggable.spec.tsx similarity index 94% rename from packages/ui/dnd/src/components/withDraggable.spec.tsx rename to packages/ui/dnd/src/withDraggable.spec.tsx index b7dba51db1..1d4f441863 100644 --- a/packages/ui/dnd/src/components/withDraggable.spec.tsx +++ b/packages/ui/dnd/src/withDraggable.spec.tsx @@ -6,8 +6,8 @@ import { Plate, Value } from '@udecode/plate-core'; import { createParagraphPlugin, ELEMENT_PARAGRAPH, -} from '../../../../nodes/paragraph/src/createParagraphPlugin'; -import { createPlateUI } from '../../../plate/src/utils/createPlateUI'; +} from '../../../nodes/paragraph/src/createParagraphPlugin'; +import { createPlateUI } from '../../plate/src/utils/createPlateUI'; import { withPlateDraggable } from './withPlateDraggable'; const components = createPlateUI(); diff --git a/packages/ui/dnd/src/components/withPlateDraggable.tsx b/packages/ui/dnd/src/withPlateDraggable.tsx similarity index 100% rename from packages/ui/dnd/src/components/withPlateDraggable.tsx rename to packages/ui/dnd/src/withPlateDraggable.tsx diff --git a/yarn.lock b/yarn.lock index 8f77982cf4..36027dc20b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5534,6 +5534,23 @@ __metadata: languageName: unknown linkType: soft +"@udecode/plate-dnd@npm:19.7.0, @udecode/plate-dnd@workspace:packages/dnd": + version: 0.0.0-use.local + resolution: "@udecode/plate-dnd@workspace:packages/dnd" + dependencies: + "@udecode/plate-core": "npm:19.7.0" + raf: "npm:^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" + languageName: unknown + linkType: soft + "@udecode/plate-emoji@npm:19.7.0, @udecode/plate-emoji@workspace:packages/nodes/emoji": version: 0.0.0-use.local resolution: "@udecode/plate-emoji@workspace:packages/nodes/emoji" @@ -6227,11 +6244,10 @@ __metadata: version: 0.0.0-use.local resolution: "@udecode/plate-ui-dnd@workspace:packages/ui/dnd" dependencies: - "@react-hook/merged-ref": "npm:^1.3.2" "@tippyjs/react": "npm:^4.2.6" "@udecode/plate-core": "npm:19.7.0" + "@udecode/plate-dnd": "npm:19.7.0" "@udecode/plate-styled-components": "npm:19.7.0" - raf: "npm:^3.4.1" peerDependencies: react: ">=16.8.0" react-dnd: ">=14.0.0" From f2e3de80ec93d48b0f650d88d882416a970db1e9 Mon Sep 17 00:00:00 2001 From: zbeyens Date: Sun, 5 Mar 2023 12:43:04 +0100 Subject: [PATCH 7/9] refactor --- .../{DragHandle.tsx => DragHandle.ts} | 0 .../{Draggable.tsx => Draggable.ts} | 0 .../{DraggableRoot.tsx => DraggableRoot.ts} | 0 packages/dnd/src/components/index.ts | 4 ++-- ...hDraggable.ts => useWithDraggableState.ts} | 2 +- packages/dnd/src/components/withDraggable.tsx | 7 +++++-- ...ble.styles.ts => PlateDraggable.styles.ts} | 10 +++++++++- packages/ui/dnd/src/PlateDraggable.tsx | 15 +++++++++++++-- ...gable.types.ts => PlateDraggable.types.ts} | 19 +------------------ packages/ui/dnd/src/grabberTooltipProps.tsx | 1 + packages/ui/dnd/src/index.ts | 4 ++-- ...e.spec.tsx => withPlateDraggable.spec.tsx} | 0 packages/ui/dnd/src/withPlateDraggable.tsx | 12 +++--------- 13 files changed, 37 insertions(+), 37 deletions(-) rename packages/dnd/src/components/{DragHandle.tsx => DragHandle.ts} (100%) rename packages/dnd/src/components/{Draggable.tsx => Draggable.ts} (100%) rename packages/dnd/src/components/{DraggableRoot.tsx => DraggableRoot.ts} (100%) rename packages/dnd/src/components/{useWithDraggable.ts => useWithDraggableState.ts} (96%) rename packages/ui/dnd/src/{Draggable.styles.ts => PlateDraggable.styles.ts} (83%) rename packages/ui/dnd/src/{Draggable.types.ts => PlateDraggable.types.ts} (63%) rename packages/ui/dnd/src/{withDraggable.spec.tsx => withPlateDraggable.spec.tsx} (100%) diff --git a/packages/dnd/src/components/DragHandle.tsx b/packages/dnd/src/components/DragHandle.ts similarity index 100% rename from packages/dnd/src/components/DragHandle.tsx rename to packages/dnd/src/components/DragHandle.ts diff --git a/packages/dnd/src/components/Draggable.tsx b/packages/dnd/src/components/Draggable.ts similarity index 100% rename from packages/dnd/src/components/Draggable.tsx rename to packages/dnd/src/components/Draggable.ts diff --git a/packages/dnd/src/components/DraggableRoot.tsx b/packages/dnd/src/components/DraggableRoot.ts similarity index 100% rename from packages/dnd/src/components/DraggableRoot.tsx rename to packages/dnd/src/components/DraggableRoot.ts diff --git a/packages/dnd/src/components/index.ts b/packages/dnd/src/components/index.ts index 54c7f82ec3..3f24f5e3c1 100644 --- a/packages/dnd/src/components/index.ts +++ b/packages/dnd/src/components/index.ts @@ -6,11 +6,11 @@ export * from './DragHandle'; export * from './Draggable'; export * from './DraggableBlock'; export * from './DraggableBlockToolbar'; +export * from './DraggableBlockToolbarWrapper'; export * from './DraggableDropline'; export * from './DraggableGutterLeftProps'; export * from './DraggableRoot'; export * from './useDraggableState'; -export * from './useWithDraggable'; +export * from './useWithDraggableState'; export * from './withDraggable'; export * from './Scroller/index'; -export { DraggableBlockToolbarWrapper } from './DraggableBlockToolbarWrapper'; diff --git a/packages/dnd/src/components/useWithDraggable.ts b/packages/dnd/src/components/useWithDraggableState.ts similarity index 96% rename from packages/dnd/src/components/useWithDraggable.ts rename to packages/dnd/src/components/useWithDraggableState.ts index 2102c8a8ca..cbf295ae79 100644 --- a/packages/dnd/src/components/useWithDraggable.ts +++ b/packages/dnd/src/components/useWithDraggableState.ts @@ -27,7 +27,7 @@ export interface WithDraggableOptions { draggableProps?: T; } -export const useWithDraggable = ({ +export const useWithDraggableState = ({ editor, level = 0, filter, diff --git a/packages/dnd/src/components/withDraggable.tsx b/packages/dnd/src/components/withDraggable.tsx index 03ef43a71a..ec5b0b85de 100644 --- a/packages/dnd/src/components/withDraggable.tsx +++ b/packages/dnd/src/components/withDraggable.tsx @@ -4,7 +4,10 @@ import { PlateRenderElementProps, RenderFunction, } from '@udecode/plate-core'; -import { useWithDraggable, WithDraggableOptions } from './useWithDraggable'; +import { + useWithDraggableState, + WithDraggableOptions, +} from './useWithDraggableState'; export const withDraggable = ( Draggable: RenderFunction, @@ -12,7 +15,7 @@ export const withDraggable = ( options?: WithDraggableOptions ) => forwardRef((props, ref) => { - const { disabled, draggableProps } = useWithDraggable({ + const { disabled, draggableProps } = useWithDraggableState({ ...options, ...props, }); diff --git a/packages/ui/dnd/src/Draggable.styles.ts b/packages/ui/dnd/src/PlateDraggable.styles.ts similarity index 83% rename from packages/ui/dnd/src/Draggable.styles.ts rename to packages/ui/dnd/src/PlateDraggable.styles.ts index 7bd36e9d62..93a217cb79 100644 --- a/packages/ui/dnd/src/Draggable.styles.ts +++ b/packages/ui/dnd/src/PlateDraggable.styles.ts @@ -1,7 +1,15 @@ +import { DropLineDirection } from '@udecode/plate-dnd'; import { createStyles } from '@udecode/plate-styled-components'; import { css } from 'styled-components'; import tw from 'twin.macro'; -import { DraggableStyleProps } from './Draggable.types'; +import { PlateDraggableProps } from './PlateDraggable'; + +export interface DraggableStyleProps extends PlateDraggableProps { + direction: DropLineDirection; + isDragging: boolean; + + selected?: boolean; +} export const getDraggableStyles = (props: DraggableStyleProps) => createStyles( diff --git a/packages/ui/dnd/src/PlateDraggable.tsx b/packages/ui/dnd/src/PlateDraggable.tsx index 7b3cfdf5fb..c635494c8f 100644 --- a/packages/ui/dnd/src/PlateDraggable.tsx +++ b/packages/ui/dnd/src/PlateDraggable.tsx @@ -1,4 +1,5 @@ import React, { forwardRef } from 'react'; +import { EElement, Value } from '@udecode/plate-core'; import { DraggableBlock, DraggableBlockToolbar, @@ -9,8 +10,17 @@ import { DragHandle as DefaultDragHandle, useDraggableState, } from '@udecode/plate-dnd'; -import { getDraggableStyles } from './Draggable.styles'; -import { PlateDraggableProps } from './Draggable.types'; +import { StyledElementProps } from '@udecode/plate-styled-components'; +import { getDraggableStyles } from './PlateDraggable.styles'; +import { DraggableStyles, DragHandleProps } from './PlateDraggable.types'; + +export interface PlateDraggableProps + extends StyledElementProps, DraggableStyles> { + /** + * An override to render the drag handle. + */ + onRenderDragHandle?: (props: DragHandleProps) => JSX.Element; +} export const PlateDraggable = forwardRef( (props, ref) => { @@ -19,6 +29,7 @@ export const PlateDraggable = forwardRef( const DragHandle = onRenderDragHandle ?? DefaultDragHandle; const { dropLine, isDragging, rootRef, dragRef } = useDraggableState(props); + const styles = getDraggableStyles({ ...props, direction: dropLine, diff --git a/packages/ui/dnd/src/Draggable.types.ts b/packages/ui/dnd/src/PlateDraggable.types.ts similarity index 63% rename from packages/ui/dnd/src/Draggable.types.ts rename to packages/ui/dnd/src/PlateDraggable.types.ts index 77f7ee095d..d6b7be9b45 100644 --- a/packages/ui/dnd/src/Draggable.types.ts +++ b/packages/ui/dnd/src/PlateDraggable.types.ts @@ -1,16 +1,7 @@ import React from 'react'; -import { EElement, TElement, Value } from '@udecode/plate-core'; -import { DropLineDirection } from '@udecode/plate-dnd'; -import { StyledElementProps } from '@udecode/plate-styled-components'; +import { TElement } from '@udecode/plate-core'; import { CSSProp } from 'styled-components'; -export interface DraggableStyleProps extends PlateDraggableProps { - direction: DropLineDirection; - isDragging: boolean; - - selected?: boolean; -} - export interface DraggableStyles { /** * Block and gutter. @@ -63,11 +54,3 @@ export interface DragHandleProps element: TElement; styles?: CSSProp; } - -export interface PlateDraggableProps - extends StyledElementProps, DraggableStyles> { - /** - * An override to render the drag handle. - */ - onRenderDragHandle?: (props: DragHandleProps) => JSX.Element; -} diff --git a/packages/ui/dnd/src/grabberTooltipProps.tsx b/packages/ui/dnd/src/grabberTooltipProps.tsx index 91e4849868..1067a1dfba 100644 --- a/packages/ui/dnd/src/grabberTooltipProps.tsx +++ b/packages/ui/dnd/src/grabberTooltipProps.tsx @@ -8,6 +8,7 @@ const GrabberTooltipContent = () => ( ); + export const grabberTooltipProps: TippyProps = { content: , placement: 'bottom', diff --git a/packages/ui/dnd/src/index.ts b/packages/ui/dnd/src/index.ts index b5b28122d7..d41213d26b 100644 --- a/packages/ui/dnd/src/index.ts +++ b/packages/ui/dnd/src/index.ts @@ -2,8 +2,8 @@ * @file Automatically generated by barrelsby. */ -export * from './Draggable.styles'; -export * from './Draggable.types'; +export * from './PlateDraggable.styles'; +export * from './PlateDraggable.types'; export * from './PlateDraggable'; export * from './grabberTooltipProps'; export * from './withPlateDraggable'; diff --git a/packages/ui/dnd/src/withDraggable.spec.tsx b/packages/ui/dnd/src/withPlateDraggable.spec.tsx similarity index 100% rename from packages/ui/dnd/src/withDraggable.spec.tsx rename to packages/ui/dnd/src/withPlateDraggable.spec.tsx diff --git a/packages/ui/dnd/src/withPlateDraggable.tsx b/packages/ui/dnd/src/withPlateDraggable.tsx index c757914d81..7c09531d66 100644 --- a/packages/ui/dnd/src/withPlateDraggable.tsx +++ b/packages/ui/dnd/src/withPlateDraggable.tsx @@ -1,19 +1,13 @@ import { createNodesWithHOC, RenderFunction } from '@udecode/plate-core'; import { withDraggable, WithDraggableOptions } from '@udecode/plate-dnd'; -import { PlateDraggableProps } from './Draggable.types'; -import { PlateDraggable } from './PlateDraggable'; +import { PlateDraggable, PlateDraggableProps } from './PlateDraggable'; export const withPlateDraggable = ( Component: RenderFunction, options?: WithDraggableOptions< Partial> > -) => { - return withDraggable( - PlateDraggable, - Component, - options as any - ); -}; +) => + withDraggable(PlateDraggable, Component, options as any); export const withPlateDraggables = createNodesWithHOC(withPlateDraggable); From 0eeef4763009479f02dcb15711eef19a7e0f9677 Mon Sep 17 00:00:00 2001 From: zbeyens Date: Sun, 5 Mar 2023 12:55:17 +0100 Subject: [PATCH 8/9] docs --- .changeset/dnd-ui.md | 29 ++++++++++++++++++++++++++++ .changeset/dnd.md | 5 +++++ docs/docs/components/dnd.mdx | 8 ++++++-- docs/docs/sandpack/code-deps.ts | 1 + docs/docs/sandpack/plate-versions.ts | 1 + packages/dnd/README.md | 8 +++++--- packages/ui/dnd/README.md | 5 ++--- 7 files changed, 49 insertions(+), 8 deletions(-) create mode 100644 .changeset/dnd-ui.md create mode 100644 .changeset/dnd.md diff --git a/.changeset/dnd-ui.md b/.changeset/dnd-ui.md new file mode 100644 index 0000000000..30e540db39 --- /dev/null +++ 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, + }, +} +``` \ No newline at end of file diff --git a/.changeset/dnd.md b/.changeset/dnd.md new file mode 100644 index 0000000000..1fab34e291 --- /dev/null +++ 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/docs/docs/components/dnd.mdx b/docs/docs/components/dnd.mdx index 350241ed2b..ee8076626a 100644 --- 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"; diff --git a/docs/docs/sandpack/code-deps.ts b/docs/docs/sandpack/code-deps.ts index 5a7a792e56..f1623994d3 100644 --- a/docs/docs/sandpack/code-deps.ts +++ b/docs/docs/sandpack/code-deps.ts @@ -31,6 +31,7 @@ export const cloudDeps = { }; export const dndDeps = { + '@udecode/plate-dnd': dndVersion, '@udecode/plate-ui-dnd': dndVersion, '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 index 56d15bb27e..bfb54c5a73 100644 --- a/docs/docs/sandpack/plate-versions.ts +++ b/docs/docs/sandpack/plate-versions.ts @@ -6,3 +6,4 @@ export const selectionVersion = '19.5.0'; export const cloudVersion = '19.5.0'; export const cloudUiVersion = '19.5.0'; export const dndVersion = '19.5.0'; +export const dndUiVersion = '19.5.0'; diff --git a/packages/dnd/README.md b/packages/dnd/README.md index 64327a69e6..39b7db2e6c 100644 --- a/packages/dnd/README.md +++ b/packages/dnd/README.md @@ -1,10 +1,12 @@ -# Drag & drop feature for Plate - +# Plate drag & drop feature +This package implements the drag & drop feature. It allows you to drag & +drop blocks using a grabber. ## Documentation -WIP +Check out +[Drag & Drop](https://plate.udecode.io/docs/components/dnd). ## API diff --git a/packages/ui/dnd/README.md b/packages/ui/dnd/README.md index 71c466de08..005f7afcf3 100644 --- a/packages/ui/dnd/README.md +++ b/packages/ui/dnd/README.md @@ -1,7 +1,6 @@ -# Plate drag and drop feature +# Plate drag & drop UI -This package implements the drag & drop feature. It allows you to drag & -drop blocks using a grabber. +This package implements the drag & drop UI. ## Documentation From 753e4ec6c5bbfcb4e7c83788f0b9699c80fe5915 Mon Sep 17 00:00:00 2001 From: zbeyens Date: Sun, 5 Mar 2023 12:56:56 +0100 Subject: [PATCH 9/9] docs --- docs/docs/sandpack/code-deps.ts | 3 ++- docs/docs/sandpack/plate-versions.ts | 1 + 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/docs/sandpack/code-deps.ts b/docs/docs/sandpack/code-deps.ts index f1623994d3..aac5a91062 100644 --- 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, @@ -32,7 +33,7 @@ export const cloudDeps = { export const dndDeps = { '@udecode/plate-dnd': dndVersion, - '@udecode/plate-ui-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 index d5f567a396..8a8daca542 100644 --- 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';