wip

apps/www/public/r/styles/default/image-element.json

@@ -20,7 +20,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { withHOC } from '@udecode/plate-common/react';\nimport { Image, ImagePlugin, useMediaState } from '@udecode/plate-media/react';\nimport { ResizableProvider, useResizableStore } from '@udecode/plate-resizable';\n\nimport { Caption, CaptionTextarea } from './caption';\nimport { MediaPopover } from './media-popover';\nimport { PlateElement } from './plate-element';\nimport {\n  Resizable,\n  ResizeHandle,\n  mediaResizeHandleVariants,\n} from './resizable';\n\nexport const ImageElement = withHOC(\n  ResizableProvider,\n  withRef<typeof PlateElement>(\n    ({ children, className, nodeProps, ...props }, ref) => {\n      const { align = 'center', focused, readOnly, selected } = useMediaState();\n\n      const width = useResizableStore().get.width();\n\n      return (\n        <MediaPopover plugin={ImagePlugin}>\n          <PlateElement\n            ref={ref}\n            className={cn('py-2.5', className)}\n            {...props}\n          >\n            <figure className=\"group relative m-0\" contentEditable={false}>\n              <Resizable\n                align={align}\n                options={{\n                  align,\n                  readOnly,\n                }}\n              >\n                <ResizeHandle\n                  className={mediaResizeHandleVariants({ direction: 'left' })}\n                  options={{ direction: 'left' }}\n                />\n                <Image\n                  className={cn(\n                    'block w-full max-w-full cursor-pointer object-cover px-0',\n                    'rounded-sm',\n                    focused && selected && 'ring-2 ring-ring ring-offset-2'\n                  )}\n                  alt=\"\"\n                  {...nodeProps}\n                />\n                <ResizeHandle\n                  className={mediaResizeHandleVariants({\n                    direction: 'right',\n                  })}\n                  options={{ direction: 'right' }}\n                />\n              </Resizable>\n\n              <Caption style={{ width }} align={align}>\n                <CaptionTextarea\n                  readOnly={readOnly}\n                  placeholder=\"Write a caption...\"\n                />\n              </Caption>\n            </figure>\n\n            {children}\n          </PlateElement>\n        </MediaPopover>\n      );\n    }\n  )\n);\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { withHOC } from '@udecode/plate-common/react';\nimport { useDraggable, useDraggableState } from '@udecode/plate-dnd';\nimport { Image, ImagePlugin, useMediaState } from '@udecode/plate-media/react';\nimport { ResizableProvider, useResizableStore } from '@udecode/plate-resizable';\n\nimport { Caption, CaptionTextarea } from './caption';\nimport { MediaPopover } from './media-popover';\nimport { PlateElement } from './plate-element';\nimport {\n  Resizable,\n  ResizeHandle,\n  mediaResizeHandleVariants,\n} from './resizable';\n\nexport const ImageElement = withHOC(\n  ResizableProvider,\n  withRef<typeof PlateElement>(\n    ({ children, className, nodeProps, ...props }, ref) => {\n      const { align = 'center', focused, readOnly, selected } = useMediaState();\n\n      const width = useResizableStore().get.width();\n\n      const state = useDraggableState({ element: props.element });\n      const { isDragging } = state;\n      const { handleRef } = useDraggable(state);\n\n      return (\n        <MediaPopover plugin={ImagePlugin}>\n          <PlateElement\n            ref={ref}\n            className={cn('py-2.5', className)}\n            {...props}\n          >\n            <figure className=\"group relative m-0\" contentEditable={false}>\n              <Resizable\n                align={align}\n                options={{\n                  align,\n                  readOnly,\n                }}\n              >\n                <ResizeHandle\n                  className={mediaResizeHandleVariants({ direction: 'left' })}\n                  options={{ direction: 'left' }}\n                />\n                <Image\n                  ref={handleRef}\n                  className={cn(\n                    'block w-full max-w-full cursor-pointer object-cover px-0',\n                    'rounded-sm',\n                    focused && selected && 'ring-2 ring-ring ring-offset-2',\n                    isDragging && 'opacity-50'\n                  )}\n                  alt=\"\"\n                  {...nodeProps}\n                />\n                <ResizeHandle\n                  className={mediaResizeHandleVariants({\n                    direction: 'right',\n                  })}\n                  options={{ direction: 'right' }}\n                />\n              </Resizable>\n\n              <Caption style={{ width }} align={align}>\n                <CaptionTextarea\n                  readOnly={readOnly}\n                  onFocus={(e) => {\n                    e.preventDefault();\n                  }}\n                  placeholder=\"Write a caption...\"\n                />\n              </Caption>\n            </figure>\n\n            {children}\n          </PlateElement>\n        </MediaPopover>\n      );\n    }\n  )\n);\n",
       "path": "plate-ui/image-element.tsx",
       "target": "components/plate-ui/image-element.tsx",
       "type": "registry:ui"

apps/www/src/registry/default/example/playground-demo.tsx

@@ -300,11 +300,11 @@ export const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {
         DndPlugin.configure({
           options: {
             enableScroller: true,
-            onDropFiles: (editor, props) => {
+            onDropFiles: ({ dragItem, editor, target }) => {
               editor
                 .getTransforms(ImagePlugin)
-                .insertImageFromFiles(props.dragItem.files, {
-                  at: props.dropPath,
+                .insert.imageFromFiles(dragItem.files, {
+                  at: target,
                   nextBlock: false,
                 });
             },

apps/www/src/registry/default/plate-ui/image-element.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 
 import { cn, withRef } from '@udecode/cn';
 import { withHOC } from '@udecode/plate-common/react';
+import { useDraggable, useDraggableState } from '@udecode/plate-dnd';
 import { Image, ImagePlugin, useMediaState } from '@udecode/plate-media/react';
 import { ResizableProvider, useResizableStore } from '@udecode/plate-resizable';
 
@@ -24,6 +25,10 @@ export const ImageElement = withHOC(
 
       const width = useResizableStore().get.width();
 
+      const state = useDraggableState({ element: props.element });
+      const { isDragging } = state;
+      const { handleRef } = useDraggable(state);
+
       return (
         <MediaPopover plugin={ImagePlugin}>
           <PlateElement
@@ -44,10 +49,12 @@ export const ImageElement = withHOC(
                   options={{ direction: 'left' }}
                 />
                 <Image
+                  ref={handleRef}
                   className={cn(
                     'block w-full max-w-full cursor-pointer object-cover px-0',
                     'rounded-sm',
-                    focused && selected && 'ring-2 ring-ring ring-offset-2'
+                    focused && selected && 'ring-2 ring-ring ring-offset-2',
+                    isDragging && 'opacity-50'
                   )}
                   alt=""
                   {...nodeProps}
@@ -63,6 +70,9 @@ export const ImageElement = withHOC(
               <Caption style={{ width }} align={align}>
                 <CaptionTextarea
                   readOnly={readOnly}
+                  onFocus={(e) => {
+                    e.preventDefault();
+                  }}
                   placeholder="Write a caption..."
                 />
               </Caption>

packages/dnd/src/DndPlugin.tsx

@@ -20,16 +20,14 @@ export type DndConfig = PluginConfig<
     enableScroller?: boolean;
     isDragging?: boolean;
     scrollerProps?: Partial<ScrollerProps>;
-    onDropFiles?: (
-      props: {
-        editor: PlateEditor;
-        id: string;
-        dragItem: FileDragItemNode;
-        monitor: DropTargetMonitor<DragItemNode, unknown>;
-        nodeRef: any;
-        dropPath?: Path;
-      }
-    ) => void;
+    onDropFiles?: (props: {
+      id: string;
+      dragItem: FileDragItemNode;
+      editor: PlateEditor;
+      monitor: DropTargetMonitor<DragItemNode, unknown>;
+      nodeRef: any;
+      target?: Path;
+    }) => void;
   }
 >;
 

packages/dnd/src/hooks/useDropNode.ts

@@ -97,12 +97,13 @@ export const useDropNode = (
 
         if (!result || !onDropFiles) return;
 
-        return onDropFiles(editor, {
+        return onDropFiles({
           id,
           dragItem: dragItem as FileDragItemNode,
-          dropPath: result.to,
+          editor,
           monitor,
           nodeRef,
+          target: result.to,
         });
       }
 

packages/media/src/lib/image/BaseImagePlugin.ts

@@ -45,7 +45,9 @@ export const BaseImagePlugin = createTSlatePlugin<ImageConfig>({
   },
 })
   .extendEditorTransforms(({ editor }) => ({
-    insertImageFromFiles: bindFirst(insertImageFromFiles, editor),
+    insert: {
+      imageFromFiles: bindFirst(insertImageFromFiles, editor as any),
+    },
   }))
   .extend(({ plugin }) => ({
     parsers: {

packages/media/src/lib/image/withImageEmbed.spec.tsx

@@ -4,7 +4,7 @@ import { getEditorPlugin } from '@udecode/plate-common';
 import { createSlateEditor } from '@udecode/plate-common';
 import { jsx } from '@udecode/plate-test-utils';
 
-import { BaseImagePlugin } from './BaseImagePlugin';
+import { ImagePlugin } from '../../react';
 import { withImageEmbed } from './withImageEmbed';
 
 jsx;
@@ -27,7 +27,7 @@ describe('withImageEmbed', () => {
 
   it('should insert image from the text', () => {
     const editor = withImageEmbed(
-      getEditorPlugin(createSlateEditor({ editor: input }), BaseImagePlugin)
+      getEditorPlugin(createSlateEditor({ editor: input }), ImagePlugin as any)
     );
 
     const data = {

packages/media/src/lib/image/withImageUpload.spec.tsx

@@ -2,8 +2,8 @@
 
 import { createPlateEditor } from '@udecode/plate-common/react';
 import { jsx } from '@udecode/plate-test-utils';
+import { ImagePlugin } from '../../react';
 
-import { BaseImagePlugin } from './BaseImagePlugin';
 
 jsx;
 
@@ -24,7 +24,7 @@ describe('withImageUpload', () => {
     it('should insert image from the file(s)', () => {
       const editor = createPlateEditor({
         editor: input,
-        plugins: [BaseImagePlugin],
+        plugins: [ImagePlugin],
       });
 
       const data = {
@@ -59,7 +59,7 @@ describe('withImageUpload', () => {
 
       const editor = createPlateEditor({
         editor: input,
-        plugins: [BaseImagePlugin],
+        plugins: [ImagePlugin],
       });
 
       const data = {
@@ -87,7 +87,7 @@ describe('withImageUpload', () => {
     it('should insert image from the file(s)', () => {
       const editor = createPlateEditor({
         editor: input,
-        plugins: [BaseImagePlugin],
+        plugins: [ImagePlugin],
       });
 
       const data = {

packages/media/src/lib/image/withImageUpload.ts

@@ -39,7 +39,7 @@ export const withImageUpload: ExtendEditor<ImageConfig> = ({
         return insertData(dataTransfer);
       }
 
-      editor.getTransforms(ImagePlugin).insertImageFromFiles(files);
+      editor.getTransforms(ImagePlugin).insert.imageFromFiles(files);
     } else {
       return insertData(dataTransfer);
     }