Media

.changeset/chilly-peaches-report.md

@@ -0,0 +1,5 @@
+---
+'@udecode/plate-ai': patch
+---
+
+Missing export

.changeset/rare-zebras-kneel.md

@@ -0,0 +1,5 @@
+---
+'@udecode/plate-dnd': patch
+---
+
+Add `enableFile` option to check whether to enable the DnD plugin for files dragged in from outside the browser.

.changeset/sour-bananas-arrive.md

@@ -0,0 +1,10 @@
+---
+'@udecode/plate-media': minor
+---
+
+New `initialHeight` and `initialWidth` in `TImageElement` This will display a loading placeholder while the image is still loading, which helps maintain a consistent height.
+Mew `placeholderId` Used to track what was converted from that placeholder plugin.
+New `insertMedia` Used for inserting the placeholder at once.
+New `validateFiles` utils for validate the files meet the `mediaConfig`. 
+If validation fails,stop insert placeholder and save the error message in uploadErrorMessage.
+NEw `option.multiple` `uploadMaxFileCount` Used to limit the number of placeholders inserted.

apps/www/src/lib/plate/demo/plugins/DragOverCursorPlugin.ts

@@ -15,6 +15,8 @@ export const DragOverCursorPlugin = createPlatePlugin({
     },
     onDragOver: ({ editor, event, plugin }) => {
       if (editor.getOptions(DndPlugin).isDragging) return;
+      // Only show cursor for text drag
+      if (!event.dataTransfer?.types.includes('text/plain')) return;
 
       const range = findEventRange(editor, event);
 

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

@@ -150,6 +150,9 @@ export const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {
         }),
         ...(id === 'list' ? [ListPlugin] : []),
         ImagePlugin.extend({
+          options: {
+            disableUploadInsert: true,
+          },
           render: { afterEditable: ImagePreview },
         }),
         MediaEmbedPlugin,
@@ -294,7 +297,20 @@ export const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {
         BlockMenuPlugin.configure({
           render: { aboveEditable: BlockContextMenu },
         }),
-        DndPlugin.configure({ options: { enableScroller: true } }),
+        DndPlugin.configure({
+          options: {
+            enableScroller: true,
+            onDropFiles: (editor, props) => {
+              console.log(props.dropPath, 'fj');
+
+              editor
+                .getTransforms(ImagePlugin)
+                .insertImageFromFiles(props.dragItem.files, {
+                  at: props.dropPath,
+                });
+            },
+          },
+        }),
         EmojiPlugin,
         exitBreakPlugin,
         NodeIdPlugin,
@@ -318,7 +334,7 @@ export const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {
         TrailingBlockPlugin.configure({
           options: { type: ParagraphPlugin.key },
         }),
-        DragOverCursorPlugin,
+        // DragOverCursorPlugin,
 
         // Collaboration
         CommentsPlugin.configure({

packages/ai/src/react/copilot/utils/index.ts

@@ -3,5 +3,6 @@
  */
 
 export * from './callCompletionApi';
+export * from './getNextWord';
 export * from './triggerCopilotSuggestion';
 export * from './withoutAbort';

packages/dnd/src/DndPlugin.tsx

@@ -1,8 +1,15 @@
 import React from 'react';
 
 import type { PluginConfig } from '@udecode/plate-common';
+import type { DropTargetMonitor } from 'react-dnd';
+import type { Path } from 'slate';
 
-import { createTPlatePlugin } from '@udecode/plate-common/react';
+import {
+  type PlateEditor,
+  createTPlatePlugin,
+} from '@udecode/plate-common/react';
+
+import type { DragItemNode, FileDragItemNode } from './types';
 
 import { type ScrollerProps, DndScroller } from './components/Scroller';
 
@@ -13,6 +20,16 @@ export type DndConfig = PluginConfig<
     enableScroller?: boolean;
     isDragging?: boolean;
     scrollerProps?: Partial<ScrollerProps>;
+    onDropFiles?: (
+      editor: PlateEditor,
+      props: {
+        id: string;
+        dragItem: FileDragItemNode;
+        monitor: DropTargetMonitor<DragItemNode, unknown>;
+        nodeRef: any;
+        dropPath?: Path;
+      }
+    ) => void;
   }
 >;
 

packages/dnd/src/hooks/useDndNode.ts

@@ -1,4 +1,4 @@
-import { getEmptyImage } from 'react-dnd-html5-backend';
+import { NativeTypes, getEmptyImage } from 'react-dnd-html5-backend';
 
 import type { DropTargetMonitor } from 'react-dnd';
 
@@ -48,7 +48,6 @@ export const useDndNode = ({
   onDropHandler,
 }: UseDndNodeOptions) => {
   const editor = useEditorRef();
-
   const [dropLine, setDropLine] = useDraggableStore().use.dropLine();
 
   const [{ isDragging }, dragRef, preview] = useDragNode(editor, {
@@ -58,7 +57,7 @@ export const useDndNode = ({
   });
   const [{ isOver }, drop] = useDropNode(editor, {
     id,
-    accept: type,
+    accept: [type, NativeTypes.FILE],
     dropLine,
     nodeRef,
     onChangeDropLine: setDropLine,

packages/dnd/src/hooks/useDropNode.ts

@@ -6,9 +6,17 @@ import {
 
 import type { PlateEditor } from '@udecode/plate-common/react';
 
-import type { DragItemNode, DropLineDirection } from '../types';
+import { Path } from 'slate';
 
-import { onDropNode } from '../transforms/onDropNode';
+import type {
+  DragItemNode,
+  DropLineDirection,
+  ElementDragItemNode,
+  FileDragItemNode,
+} from '../types';
+
+import { DndPlugin } from '../DndPlugin';
+import { getDropPath, onDropNode } from '../transforms/onDropNode';
 import { onHoverNode } from '../transforms/onHoverNode';
 
 export interface UseDropNodeOptions
@@ -77,6 +85,34 @@ export const useDropNode = (
       isOver: monitor.isOver(),
     }),
     drop: (dragItem, monitor) => {
+      // Don't call onDropNode if this is a file drop
+
+      if (!(dragItem as ElementDragItemNode).id) {
+        const result = getDropPath(editor, {
+          id,
+          dragItem: dragItem as any,
+          monitor,
+          nodeRef,
+        });
+
+        const onDropFiles = editor.getOptions(DndPlugin).onDropFiles;
+
+        if (!result || !onDropFiles) return;
+
+        //FIXME
+        const isFirstPath = Path.equals(result.to, [0]);
+
+        const dropPath = isFirstPath ? [0] : Path.previous(result.to);
+
+        return onDropFiles(editor, {
+          id,
+          dragItem: dragItem as FileDragItemNode,
+          dropPath: dropPath,
+          monitor,
+          nodeRef,
+        });
+      }
+
       const handled =
         !!onDropHandler &&
         onDropHandler(editor, {
@@ -88,7 +124,12 @@ export const useDropNode = (
 
       if (handled) return;
 
-      onDropNode(editor, { id, dragItem, monitor, nodeRef });
+      onDropNode(editor, {
+        id,
+        dragItem: dragItem as ElementDragItemNode,
+        monitor,
+        nodeRef,
+      });
     },
     hover(item: DragItemNode, monitor: DropTargetMonitor) {
       onHoverNode(editor, {

packages/dnd/src/transforms/onDropNode.ts

@@ -5,20 +5,20 @@ import { focusEditor } from '@udecode/plate-common/react';
 import { Path } from 'slate';
 
 import type { UseDropNodeOptions } from '../hooks';
-import type { DragItemNode } from '../types';
+import type { ElementDragItemNode } from '../types';
 
 import { getHoverDirection } from '../utils';
 
 /** Callback called on drag an drop a node with id. */
-export const onDropNode = (
+export const getDropPath = (
   editor: TEditor,
   {
     id,
     dragItem,
     monitor,
     nodeRef,
   }: {
-    dragItem: DragItemNode;
+    dragItem: ElementDragItemNode;
     monitor: DropTargetMonitor;
   } & Pick<UseDropNodeOptions, 'id' | 'nodeRef'>
 ) => {
@@ -61,9 +61,35 @@ export const onDropNode = (
       Path.isBefore(dragPath, _dropPath) && Path.isSibling(dragPath, _dropPath);
     const to = before ? _dropPath : Path.next(_dropPath);
 
-    moveNodes(editor, {
-      at: dragPath,
-      to,
-    });
+    return { dragPath, to };
   }
 };
+
+export const onDropNode = (
+  editor: TEditor,
+  {
+    id,
+    dragItem,
+    monitor,
+    nodeRef,
+  }: {
+    dragItem: ElementDragItemNode;
+    monitor: DropTargetMonitor;
+  } & Pick<UseDropNodeOptions, 'id' | 'nodeRef'>
+) => {
+  const result = getDropPath(editor, {
+    id,
+    dragItem,
+    monitor,
+    nodeRef,
+  });
+
+  if (!result) return;
+
+  const { dragPath, to } = result;
+
+  moveNodes(editor, {
+    at: dragPath,
+    to,
+  });
+};

packages/dnd/src/types.ts

@@ -1,9 +1,17 @@
-export interface DragItemNode {
+export type DragItemNode = ElementDragItemNode | FileDragItemNode;
+
+export interface ElementDragItemNode {
   /** Required to identify the node. */
   id: string;
   [key: string]: unknown;
 }
 
+export interface FileDragItemNode {
+  dataTransfer: DataTransfer[];
+  files: FileList;
+  items: DataTransferItemList;
+}
+
 export type DropLineDirection = '' | 'bottom' | 'top';
 
 export type DropDirection = 'bottom' | 'top' | undefined;

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

@@ -1,10 +1,18 @@
-import { type PluginConfig, createTSlatePlugin } from '@udecode/plate-common';
+import {
+  type PluginConfig,
+  bindFirst,
+  createTSlatePlugin,
+} from '@udecode/plate-common';
 
 import type { MediaPluginOptions, TMediaElement } from '../media';
 
+import { insertImageFromFiles } from './transforms/insertImageFromFiles';
 import { withImage } from './withImage';
 
-export interface TImageElement extends TMediaElement {}
+export interface TImageElement extends TMediaElement {
+  initialHeight?: number;
+  initialWidth?: number;
+}
 
 export type ImageConfig = PluginConfig<
   'img',
@@ -35,20 +43,24 @@ export const BaseImagePlugin = createTSlatePlugin<ImageConfig>({
     isElement: true,
     isVoid: true,
   },
-}).extend(({ plugin }) => ({
-  parsers: {
-    html: {
-      deserializer: {
-        parse: ({ element }) => ({
-          type: plugin.node.type,
-          url: element.getAttribute('src'),
-        }),
-        rules: [
-          {
-            validNodeName: 'IMG',
-          },
-        ],
+})
+  .extendEditorTransforms(({ editor }) => ({
+    insertImageFromFiles: bindFirst(insertImageFromFiles, editor),
+  }))
+  .extend(({ plugin }) => ({
+    parsers: {
+      html: {
+        deserializer: {
+          parse: ({ element }) => ({
+            type: plugin.node.type,
+            url: element.getAttribute('src'),
+          }),
+          rules: [
+            {
+              validNodeName: 'IMG',
+            },
+          ],
+        },
       },
     },
-  },
-}));
+  }));

packages/media/src/lib/image/transforms/insertImageFromFiles.ts

@@ -0,0 +1,33 @@
+import type { InsertNodesOptions, SlateEditor } from '@udecode/plate-common';
+
+import { ImagePlugin } from '../../../react';
+import { insertImage } from './insertImage';
+
+export const insertImageFromFiles = (
+  editor: SlateEditor,
+  files: FileList,
+  options: InsertNodesOptions = {}
+) => {
+  for (const file of files) {
+    const reader = new FileReader();
+    const [mime] = file.type.split('/');
+
+    if (mime === 'image') {
+      reader.addEventListener('load', async () => {
+        if (!reader.result) {
+          return;
+        }
+
+        const uploadImage = editor.getOptions(ImagePlugin).uploadImage;
+
+        const uploadedUrl = uploadImage
+          ? await uploadImage(reader.result)
+          : reader.result;
+
+        insertImage(editor, uploadedUrl, options);
+      });
+
+      reader.readAsDataURL(file);
+    }
+  }
+};