Skip to content

Commit

Permalink
fix
Browse files Browse the repository at this point in the history
  • Loading branch information
@zbeyens
zbeyens committed Oct 25, 2024
1 parent a8caed9 commit 86487a3
Show file tree
Hide file tree
Showing 10 changed files with 39 additions and 17 deletions.
5 changes: 5 additions & 0 deletions .changeset/eleven-baboons-shake.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@udecode/plate-core': patch
---

Remove debug warning on missing plugin
5 changes: 5 additions & 0 deletions .changeset/green-jokes-speak.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@udecode/plate-selection': patch
---

Remove data-key when not mounted
3 changes: 2 additions & 1 deletion apps/www/public/r/index.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -188,7 +188,8 @@
],
"name": "draggable",
"registryDependencies": [
"tooltip"
"tooltip",
"use-mounted"
],
"type": "registry:ui"
},
Expand Down
5 changes: 3 additions & 2 deletions apps/www/public/r/styles/default/draggable.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<DragItemNode, unknown>;\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 <div\n ref={ref}\n className={cn(\n 'relative',\n isDragging && 'opacity-50',\n 'group',\n className\n )}\n >\n <Gutter>\n <div className={cn('slate-blockToolbarWrapper', 'flex h-[1.5em]')}>\n <div\n className={cn(\n 'slate-blockToolbar',\n 'pointer-events-auto mr-1 flex items-center'\n )}\n >\n <div\n ref={handleRef}\n className=\"size-4\"\n data-key={element.id as string}\n >\n <DragHandle />\n </div>\n </div>\n </div>\n </Gutter>\n\n <div ref={previewRef} className=\"slate-blockWrapper\">\n <MemoizedChildren>{children}</MemoizedChildren>\n\n <DropLine />\n </div>\n </div>\n );\n }\n )\n);\n\nconst Gutter = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ children, className, ...props }, ref) => {\n const { useOption } = useEditorPlugin(BlockSelectionPlugin);\n const isSelectionAreaVisible = useOption('isSelectionAreaVisible');\n const gutter = useDraggableGutter();\n\n return (\n <div\n ref={ref}\n className={cn(\n 'slate-gutterLeft',\n 'absolute -top-px z-50 flex h-full -translate-x-full cursor-text opacity-0 hover:opacity-100 group-hover:opacity-100',\n isSelectionAreaVisible && 'hidden',\n className\n )}\n {...props}\n {...gutter.props}\n >\n {children}\n </div>\n );\n});\n\nconst DragHandle = React.memo(() => {\n const editor = useEditorRef();\n\n return (\n <TooltipProvider>\n <Tooltip>\n <TooltipTrigger type=\"button\">\n <Icons.dragHandle\n className=\"size-4 text-muted-foreground\"\n onClick={(event) => {\n event.stopPropagation();\n event.preventDefault();\n }}\n onMouseDown={() => {\n editor\n .getApi(BlockSelectionPlugin)\n .blockSelection?.resetSelectedIds();\n }}\n />\n </TooltipTrigger>\n <TooltipPortal>\n <TooltipContent>Drag to move</TooltipContent>\n </TooltipPortal>\n </Tooltip>\n </TooltipProvider>\n );\n});\n\nconst DropLine = React.memo(\n React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n ({ children, className, ...props }, ref) => {\n const state = useDropLine();\n\n if (!state.dropLine) return null;\n\n return (\n <div\n ref={ref}\n {...props}\n {...state.props}\n className={cn(\n 'slate-dropLine',\n 'absolute inset-x-0 h-0.5 opacity-100 transition-opacity',\n 'bg-brand/50',\n state.dropLine === 'top' && '-top-px',\n state.dropLine === 'bottom' && '-bottom-px',\n className\n )}\n >\n {children}\n </div>\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<DragItemNode, unknown>;\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 <div\n ref={ref}\n className={cn(\n 'relative',\n isDragging && 'opacity-50',\n 'group',\n className\n )}\n >\n <Gutter>\n <div className={cn('slate-blockToolbarWrapper', 'flex h-[1.5em]')}>\n <div\n className={cn(\n 'slate-blockToolbar',\n 'pointer-events-auto mr-1 flex items-center'\n )}\n >\n <div\n ref={handleRef}\n className=\"size-4\"\n data-key={mounted ? (element.id as string) : undefined}\n >\n <DragHandle />\n </div>\n </div>\n </div>\n </Gutter>\n\n <div ref={previewRef} className=\"slate-blockWrapper\">\n <MemoizedChildren>{children}</MemoizedChildren>\n\n <DropLine />\n </div>\n </div>\n );\n }\n )\n);\n\nconst Gutter = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ children, className, ...props }, ref) => {\n const { useOption } = useEditorPlugin(BlockSelectionPlugin);\n const isSelectionAreaVisible = useOption('isSelectionAreaVisible');\n const gutter = useDraggableGutter();\n\n return (\n <div\n ref={ref}\n className={cn(\n 'slate-gutterLeft',\n 'absolute -top-px z-50 flex h-full -translate-x-full cursor-text opacity-0 hover:opacity-100 group-hover:opacity-100',\n isSelectionAreaVisible && 'hidden',\n className\n )}\n {...props}\n {...gutter.props}\n >\n {children}\n </div>\n );\n});\n\nconst DragHandle = React.memo(() => {\n const editor = useEditorRef();\n\n return (\n <TooltipProvider>\n <Tooltip>\n <TooltipTrigger type=\"button\">\n <Icons.dragHandle\n className=\"size-4 text-muted-foreground\"\n onClick={(event) => {\n event.stopPropagation();\n event.preventDefault();\n }}\n onMouseDown={() => {\n editor\n .getApi(BlockSelectionPlugin)\n .blockSelection?.resetSelectedIds();\n }}\n />\n </TooltipTrigger>\n <TooltipPortal>\n <TooltipContent>Drag to move</TooltipContent>\n </TooltipPortal>\n </Tooltip>\n </TooltipProvider>\n );\n});\n\nconst DropLine = React.memo(\n React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n ({ children, className, ...props }, ref) => {\n const state = useDropLine();\n\n if (!state.dropLine) return null;\n\n return (\n <div\n ref={ref}\n {...props}\n {...state.props}\n className={cn(\n 'slate-dropLine',\n 'absolute inset-x-0 h-0.5 opacity-100 transition-opacity',\n 'bg-brand/50',\n state.dropLine === 'top' && '-top-px',\n state.dropLine === 'bottom' && '-bottom-px',\n className\n )}\n >\n {children}\n </div>\n );\n }\n )\n);\n",
"path": "plate-ui/draggable.tsx",
"target": "components/plate-ui/draggable.tsx",
"type": "registry:ui"
Expand All @@ -21,7 +21,8 @@
],
"name": "draggable",
"registryDependencies": [
"tooltip"
"tooltip",
"use-mounted"
],
"type": "registry:ui"
}
2 changes: 1 addition & 1 deletion apps/www/src/__registry__/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ export const Index: Record<string, any> = {
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: "",
Expand Down
4 changes: 3 additions & 1 deletion apps/www/src/registry/default/plate-ui/draggable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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 (
<div
Expand All @@ -82,7 +84,7 @@ export const Draggable = withHOC(
<div
ref={handleRef}
className="size-4"
data-key={element.id as string}
data-key={mounted ? (element.id as string) : undefined}
>
<DragHandle />
</div>
Expand Down
2 changes: 1 addition & 1 deletion apps/www/src/registry/registry-ui.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
},
{
Expand Down
16 changes: 8 additions & 8 deletions packages/core/src/react/editor/withPlate.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {};
}
Expand All @@ -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;
}
Expand Down
10 changes: 8 additions & 2 deletions packages/selection/src/react/components/BlockSelectable.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useRef } from 'react';
import React, { useEffect, useRef, useState } from 'react';

import {
type TElement,
Expand Down Expand Up @@ -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: {
Expand Down
4 changes: 3 additions & 1 deletion templates/plate-playground-template/src/components/plate-ui/draggable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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 (
<div
Expand All @@ -81,7 +83,7 @@ export const Draggable = withHOC(
<div
ref={handleRef}
className="size-4"
data-key={element.id as string}
data-key={mounted ? (element.id as string) : undefined}
>
<DragHandle />
</div>
Expand Down

0 comments on commit 86487a3

Please sign in to comment.