From 86487a3357dbe6005a0b4e37c2510c97f2ad4d96 Mon Sep 17 00:00:00 2001 From: zbeyens Date: Fri, 25 Oct 2024 17:48:39 +0200 Subject: [PATCH] fix --- .changeset/eleven-baboons-shake.md | 5 +++++ .changeset/green-jokes-speak.md | 5 +++++ apps/www/public/r/index.json | 3 ++- apps/www/public/r/styles/default/draggable.json | 5 +++-- apps/www/src/__registry__/index.tsx | 2 +- .../src/registry/default/plate-ui/draggable.tsx | 4 +++- apps/www/src/registry/registry-ui.ts | 2 +- packages/core/src/react/editor/withPlate.ts | 16 ++++++++-------- .../src/react/components/BlockSelectable.tsx | 10 ++++++++-- .../src/components/plate-ui/draggable.tsx | 4 +++- 10 files changed, 39 insertions(+), 17 deletions(-) create mode 100644 .changeset/eleven-baboons-shake.md create mode 100644 .changeset/green-jokes-speak.md diff --git a/.changeset/eleven-baboons-shake.md b/.changeset/eleven-baboons-shake.md new file mode 100644 index 0000000000..17a8993b77 --- /dev/null +++ b/.changeset/eleven-baboons-shake.md @@ -0,0 +1,5 @@ +--- +'@udecode/plate-core': patch +--- + +Remove debug warning on missing plugin diff --git a/.changeset/green-jokes-speak.md b/.changeset/green-jokes-speak.md new file mode 100644 index 0000000000..0512450e79 --- /dev/null +++ b/.changeset/green-jokes-speak.md @@ -0,0 +1,5 @@ +--- +'@udecode/plate-selection': patch +--- + +Remove data-key when not mounted diff --git a/apps/www/public/r/index.json b/apps/www/public/r/index.json index b527c62e39..5b221cbc50 100644 --- a/apps/www/public/r/index.json +++ b/apps/www/public/r/index.json @@ -188,7 +188,8 @@ ], "name": "draggable", "registryDependencies": [ - "tooltip" + "tooltip", + "use-mounted" ], "type": "registry:ui" }, diff --git a/apps/www/public/r/styles/default/draggable.json b/apps/www/public/r/styles/default/draggable.json index 55168938c8..40e9b7168b 100644 --- a/apps/www/public/r/styles/default/draggable.json +++ b/apps/www/public/r/styles/default/draggable.json @@ -7,7 +7,7 @@ ], "files": [ { - "content": "'use client';\n\nimport React from 'react';\n\nimport type { TEditor } from '@udecode/plate-common';\nimport type { DropTargetMonitor } from 'react-dnd';\n\nimport { cn, withRef } from '@udecode/cn';\nimport {\n type PlateElementProps,\n MemoizedChildren,\n useEditorPlugin,\n useEditorRef,\n withHOC,\n} from '@udecode/plate-common/react';\nimport {\n type DragItemNode,\n DraggableProvider,\n useDraggable,\n useDraggableGutter,\n useDraggableState,\n useDropLine,\n} from '@udecode/plate-dnd';\nimport { BlockSelectionPlugin } from '@udecode/plate-selection/react';\n\nimport { Icons } from '@/components/icons';\n\nimport {\n Tooltip,\n TooltipContent,\n TooltipPortal,\n TooltipProvider,\n TooltipTrigger,\n} from './tooltip';\n\nexport interface DraggableProps extends PlateElementProps {\n /**\n * Intercepts the drop handling. If `false` is returned, the default drop\n * behavior is called after. If `true` is returned, the default behavior is\n * not called.\n */\n onDropHandler?: (\n editor: TEditor,\n props: {\n id: string;\n dragItem: DragItemNode;\n monitor: DropTargetMonitor;\n nodeRef: any;\n }\n ) => boolean;\n}\n\nexport const Draggable = withHOC(\n DraggableProvider,\n withRef<'div', DraggableProps>(\n ({ className, onDropHandler, ...props }, ref) => {\n const { children, element } = props;\n\n const state = useDraggableState({ element, onDropHandler });\n const { isDragging } = state;\n const { previewRef, handleRef } = useDraggable(state);\n\n return (\n \n \n
\n \n \n \n
\n \n \n \n\n
\n {children}\n\n \n
\n \n );\n }\n )\n);\n\nconst Gutter = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ children, className, ...props }, ref) => {\n const { useOption } = useEditorPlugin(BlockSelectionPlugin);\n const isSelectionAreaVisible = useOption('isSelectionAreaVisible');\n const gutter = useDraggableGutter();\n\n return (\n \n {children}\n \n );\n});\n\nconst DragHandle = React.memo(() => {\n const editor = useEditorRef();\n\n return (\n \n \n \n {\n event.stopPropagation();\n event.preventDefault();\n }}\n onMouseDown={() => {\n editor\n .getApi(BlockSelectionPlugin)\n .blockSelection?.resetSelectedIds();\n }}\n />\n \n \n Drag to move\n \n \n \n );\n});\n\nconst DropLine = React.memo(\n React.forwardRef>(\n ({ children, className, ...props }, ref) => {\n const state = useDropLine();\n\n if (!state.dropLine) return null;\n\n return (\n \n {children}\n \n );\n }\n )\n);\n", + "content": "'use client';\n\nimport React from 'react';\n\nimport type { TEditor } from '@udecode/plate-common';\nimport type { DropTargetMonitor } from 'react-dnd';\n\nimport { cn, withRef } from '@udecode/cn';\nimport {\n type PlateElementProps,\n MemoizedChildren,\n useEditorPlugin,\n useEditorRef,\n withHOC,\n} from '@udecode/plate-common/react';\nimport {\n type DragItemNode,\n DraggableProvider,\n useDraggable,\n useDraggableGutter,\n useDraggableState,\n useDropLine,\n} from '@udecode/plate-dnd';\nimport { BlockSelectionPlugin } from '@udecode/plate-selection/react';\n\nimport { Icons } from '@/components/icons';\nimport { useMounted } from '@/hooks/use-mounted';\n\nimport {\n Tooltip,\n TooltipContent,\n TooltipPortal,\n TooltipProvider,\n TooltipTrigger,\n} from './tooltip';\n\nexport interface DraggableProps extends PlateElementProps {\n /**\n * Intercepts the drop handling. If `false` is returned, the default drop\n * behavior is called after. If `true` is returned, the default behavior is\n * not called.\n */\n onDropHandler?: (\n editor: TEditor,\n props: {\n id: string;\n dragItem: DragItemNode;\n monitor: DropTargetMonitor;\n nodeRef: any;\n }\n ) => boolean;\n}\n\nexport const Draggable = withHOC(\n DraggableProvider,\n withRef<'div', DraggableProps>(\n ({ className, onDropHandler, ...props }, ref) => {\n const { children, element } = props;\n\n const state = useDraggableState({ element, onDropHandler });\n const { isDragging } = state;\n const { previewRef, handleRef } = useDraggable(state);\n const mounted = useMounted();\n\n return (\n \n \n
\n \n \n \n
\n \n \n \n\n
\n {children}\n\n \n
\n \n );\n }\n )\n);\n\nconst Gutter = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ children, className, ...props }, ref) => {\n const { useOption } = useEditorPlugin(BlockSelectionPlugin);\n const isSelectionAreaVisible = useOption('isSelectionAreaVisible');\n const gutter = useDraggableGutter();\n\n return (\n \n {children}\n \n );\n});\n\nconst DragHandle = React.memo(() => {\n const editor = useEditorRef();\n\n return (\n \n \n \n {\n event.stopPropagation();\n event.preventDefault();\n }}\n onMouseDown={() => {\n editor\n .getApi(BlockSelectionPlugin)\n .blockSelection?.resetSelectedIds();\n }}\n />\n \n \n Drag to move\n \n \n \n );\n});\n\nconst DropLine = React.memo(\n React.forwardRef>(\n ({ children, className, ...props }, ref) => {\n const state = useDropLine();\n\n if (!state.dropLine) return null;\n\n return (\n \n {children}\n \n );\n }\n )\n);\n", "path": "plate-ui/draggable.tsx", "target": "components/plate-ui/draggable.tsx", "type": "registry:ui" @@ -21,7 +21,8 @@ ], "name": "draggable", "registryDependencies": [ - "tooltip" + "tooltip", + "use-mounted" ], "type": "registry:ui" } \ No newline at end of file diff --git a/apps/www/src/__registry__/index.tsx b/apps/www/src/__registry__/index.tsx index 8a65836fb5..e806c2aaf8 100644 --- a/apps/www/src/__registry__/index.tsx +++ b/apps/www/src/__registry__/index.tsx @@ -93,7 +93,7 @@ export const Index: Record = { name: "draggable", description: "", type: "registry:ui", - registryDependencies: ["tooltip"], + registryDependencies: ["tooltip","use-mounted"], files: ["registry/default/plate-ui/draggable.tsx","registry/default/plate-ui/with-draggables.tsx"], component: React.lazy(() => import("@/registry/default/plate-ui/draggable.tsx")), source: "", diff --git a/apps/www/src/registry/default/plate-ui/draggable.tsx b/apps/www/src/registry/default/plate-ui/draggable.tsx index 1a5438a8ee..05721bb875 100644 --- a/apps/www/src/registry/default/plate-ui/draggable.tsx +++ b/apps/www/src/registry/default/plate-ui/draggable.tsx @@ -25,6 +25,7 @@ import { import { BlockSelectionPlugin } from '@udecode/plate-selection/react'; import { Icons } from '@/components/icons'; +import { useMounted } from '@/registry/default/hooks/use-mounted'; import { Tooltip, @@ -60,6 +61,7 @@ export const Draggable = withHOC( const state = useDraggableState({ element, onDropHandler }); const { isDragging } = state; const { previewRef, handleRef } = useDraggable(state); + const mounted = useMounted(); return (
diff --git a/apps/www/src/registry/registry-ui.ts b/apps/www/src/registry/registry-ui.ts index 7678e8fe36..cd31cf2785 100644 --- a/apps/www/src/registry/registry-ui.ts +++ b/apps/www/src/registry/registry-ui.ts @@ -85,7 +85,7 @@ export const ui: Registry = [ ], files: ['plate-ui/draggable.tsx', 'plate-ui/with-draggables.tsx'], name: 'draggable', - registryDependencies: ['tooltip'], + registryDependencies: ['tooltip', 'use-mounted'], type: 'registry:ui', }, { diff --git a/packages/core/src/react/editor/withPlate.ts b/packages/core/src/react/editor/withPlate.ts index 3983138899..9d651febd1 100644 --- a/packages/core/src/react/editor/withPlate.ts +++ b/packages/core/src/react/editor/withPlate.ts @@ -62,10 +62,10 @@ export const withPlate = < const store = editor.getOptionsStore(plugin); if (!store) { - editor.api.debug.warn( - `editor.useOptions: ${plugin.key} plugin is missing`, - 'PLUGIN_MISSING' - ); + // editor.api.debug.warn( + // `editor.useOptions: ${plugin.key} plugin is missing`, + // 'PLUGIN_MISSING' + // ); return {}; } @@ -77,10 +77,10 @@ export const withPlate = < const store = editor.getOptionsStore(plugin); if (!store) { - editor.api.debug.warn( - `editor.useOption: ${plugin.key} plugin is missing`, - 'PLUGIN_MISSING' - ); + // editor.api.debug.warn( + // `editor.useOption: ${plugin.key} plugin is missing`, + // 'PLUGIN_MISSING' + // ); return; } diff --git a/packages/selection/src/react/components/BlockSelectable.tsx b/packages/selection/src/react/components/BlockSelectable.tsx index 2772b07e9f..78fc2bee3d 100644 --- a/packages/selection/src/react/components/BlockSelectable.tsx +++ b/packages/selection/src/react/components/BlockSelectable.tsx @@ -1,4 +1,4 @@ -import React, { useRef } from 'react'; +import React, { useEffect, useRef, useState } from 'react'; import { type TElement, @@ -73,9 +73,15 @@ export const useBlockSelectable = ({ const { api, editor, getOption, getOptions } = useEditorPlugin(BlockSelectionPlugin); + const [mounted, setMounted] = useState(false); + + useEffect(() => { + setMounted(true); + }, []); + const id = element?.id as string | undefined; - const data = { 'data-key': id }; + const data = mounted ? { 'data-key': id } : {}; return { props: { diff --git a/templates/plate-playground-template/src/components/plate-ui/draggable.tsx b/templates/plate-playground-template/src/components/plate-ui/draggable.tsx index 159630e8d0..cf84f3f5e1 100644 --- a/templates/plate-playground-template/src/components/plate-ui/draggable.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/draggable.tsx @@ -18,6 +18,7 @@ import { } from '@udecode/plate-dnd'; import { BlockSelectionPlugin } from '@udecode/plate-selection/react'; +import { useMounted } from '@/hooks/use-mounted'; import { Icons } from '@/components/icons'; import { @@ -59,6 +60,7 @@ export const Draggable = withHOC( const state = useDraggableState({ element, onDropHandler }); const { isDragging } = state; const { previewRef, handleRef } = useDraggable(state); + const mounted = useMounted(); return (