Add removeEmpty option to insertNodes

.changeset/tender-socks-dress.md

@@ -0,0 +1,5 @@
+---
+'@udecode/plate-media': patch
+---
+
+Pass additional options given to insertMedia to insertImage or insertMediaEmbed

.changeset/tiny-carpets-help.md

@@ -0,0 +1,5 @@
+---
+'@udecode/slate': minor
+---
+
+Add `removeEmpty: boolean | QueryNodeOptions` option to insertNodes

packages/media/src/media/insertMedia.ts

@@ -1,4 +1,9 @@
-import { getPluginType, PlateEditor, Value } from '@udecode/plate-common';
+import {
+  getPluginType,
+  InsertNodesOptions,
+  PlateEditor,
+  Value,
+} from '@udecode/plate-common';
 
 import {
   ELEMENT_IMAGE,
@@ -7,7 +12,8 @@ import {
   insertMediaEmbed,
 } from '..';
 
-export interface InsertMediaOptions {
+export interface InsertMediaOptions<V extends Value>
+  extends InsertNodesOptions<V> {
   /**
    * Default onClick is getting the image url by calling this promise before inserting the image.
    */
@@ -21,7 +27,8 @@ export const insertMedia = async <V extends Value>(
   {
     getUrl,
     type = getPluginType(editor, ELEMENT_IMAGE),
-  }: InsertMediaOptions = {}
+    ...options
+  }: InsertMediaOptions<V> = {}
 ) => {
   const url = getUrl
     ? await getUrl()
@@ -33,8 +40,8 @@ export const insertMedia = async <V extends Value>(
   if (!url) return;
 
   if (type === getPluginType(editor, ELEMENT_IMAGE)) {
-    insertImage(editor, url);
+    insertImage(editor, url, options);
   } else {
-    insertMediaEmbed(editor, { url });
+    insertMediaEmbed(editor, { url }, options);
   }
 };

packages/slate/src/interfaces/transforms/insertNodes.ts

@@ -1,15 +1,29 @@
 import { Modify } from '@udecode/utils';
-import { Path, Transforms } from 'slate';
+import { Path, removeNodes, Transforms, withoutNormalizing } from 'slate';
 
+import { QueryNodeOptions } from '../../types';
 import { NodeMatchOption } from '../../types/NodeMatchOption';
-import { getAboveNode, getEndPoint } from '../editor';
+import { queryNode } from '../../utils';
+import { getAboveNode, getEndPoint, isInline } from '../editor';
 import { TEditor, Value } from '../editor/TEditor';
 import { EElementOrText } from '../element/TElement';
+import { getNodeString, TDescendant } from '../node';
 
 export type InsertNodesOptions<V extends Value = Value> = Modify<
   NonNullable<Parameters<typeof Transforms.insertNodes>[2]>,
   NodeMatchOption<V>
 > & {
+  /**
+   * Remove the currect block if empty before inserting. Only applies to
+   * paragraphs by default, but can be customized by passing a
+   * QueryNodeOptions object.
+   */
+  removeEmpty?: boolean | QueryNodeOptions;
+
+  /**
+   * Insert the nodes after the currect block. Does not apply if the
+   * removeEmpty option caused the current block to be removed.
+   */
   nextBlock?: boolean;
 };
 
@@ -22,22 +36,53 @@ export const insertNodes = <
 >(
   editor: TEditor<V>,
   nodes: N | N[],
-  options?: InsertNodesOptions<V>
+  { nextBlock, removeEmpty, ...options }: InsertNodesOptions<V> = {}
 ) => {
-  if (options?.nextBlock) {
-    const at = options?.at || editor.selection;
-    if (at) {
-      const endPoint = getEndPoint(editor, at);
-      const blockEntry = getAboveNode(editor, {
-        at: endPoint,
-        block: true,
-      });
+  withoutNormalizing(editor as any, () => {
+    if (removeEmpty) {
+      const blockEntry = getAboveNode(editor, { at: options.at });
+
       if (blockEntry) {
-        const nextPath = Path.next(blockEntry[1]);
-        options.at = nextPath;
+        const queryNodeOptions: QueryNodeOptions =
+          removeEmpty === true
+            ? {
+                allow: ['p'],
+              }
+            : removeEmpty;
+
+        const { filter } = queryNodeOptions;
+
+        queryNodeOptions.filter = ([node, path]) => {
+          if (getNodeString(node)) return false;
+          const children = node.children as TDescendant[];
+          if (children.some((n) => isInline(editor, n))) return false;
+          return !filter || filter([node, path]);
+        };
+
+        if (queryNode(blockEntry, queryNodeOptions)) {
+          removeNodes(editor as any, { at: blockEntry[1] });
+          nextBlock = false;
+        }
+      }
+    }
+
+    if (nextBlock) {
+      const { at = editor.selection } = options;
+
+      if (at) {
+        const endPoint = getEndPoint(editor, at);
+
+        const blockEntry = getAboveNode(editor, {
+          at: endPoint,
+          block: true,
+        });
+
+        if (blockEntry) {
+          options.at = Path.next(blockEntry[1]);
+        }
       }
     }
-  }
 
-  Transforms.insertNodes(editor as any, nodes, options as any);
+    Transforms.insertNodes(editor as any, nodes, options as any);
+  });
 };