use as plugin

udecode · Oct 8, 2023 · 690a3f3 · 690a3f3
1 parent 51b62e7
commit 690a3f3
Show file tree

Hide file tree

Showing 7 changed files with 79 additions and 27 deletions.
diff --git a/apps/www/src/registry/default/example/playground-demo.tsx b/apps/www/src/registry/default/example/playground-demo.tsx
@@ -77,7 +77,7 @@ import { createNodeIdPlugin } from '@udecode/plate-node-id';
 import { createNormalizeTypesPlugin } from '@udecode/plate-normalizers';
 import { createParagraphPlugin } from '@udecode/plate-paragraph';
 import { createResetNodePlugin } from '@udecode/plate-reset-node';
-import { createSelectOnBackspacePlugin } from '@udecode/plate-select';
+import { RemoveOnDeleteForwardPlugin, createSelectOnBackspacePlugin } from '@udecode/plate-select';
 import { createBlockSelectionPlugin } from '@udecode/plate-selection';
 import { createDeserializeDocxPlugin } from '@udecode/plate-serializer-docx';
 import { createDeserializeMdPlugin } from '@udecode/plate-serializer-md';
@@ -99,6 +99,7 @@ import { Editor } from '@/registry/default/plate-ui/editor';
 import { FixedToolbar } from '@/registry/default/plate-ui/fixed-toolbar';
 import { FloatingToolbar } from '@/registry/default/plate-ui/floating-toolbar';
 import { MentionCombobox } from '@/registry/default/plate-ui/mention-combobox';
+import { createRemoveOnDeleteForwardPlugin } from '@udecode/plate-select';
 
 export const usePlaygroundPlugins = ({
   id,
@@ -216,6 +217,10 @@ export const usePlaygroundPlugins = ({
             ...selectOnBackspacePlugin,
             enabled: !!enabled.selectOnBackspace,
           }),
+          createRemoveOnDeleteForwardPlugin({
+            ...RemoveOnDeleteForwardPlugin,
+            enabled: !!enabled.selectOnBackspace,
+          }),
           createSingleLinePlugin({
             enabled: id === 'singleline' || !!enabled.singleLine,
           }),

diff --git a/packages/paragraph/src/createParagraphPlugin.ts b/packages/paragraph/src/createParagraphPlugin.ts
@@ -3,7 +3,6 @@ import {
   HotkeyPlugin,
   onKeyDownToggleElement,
 } from '@udecode/plate-common';
-import { withParagraph } from './withParagraph';
 
 export const ELEMENT_PARAGRAPH = 'p';
 
@@ -16,7 +15,6 @@ export const createParagraphPlugin = createPluginFactory<HotkeyPlugin>({
   handlers: {
     onKeyDown: onKeyDownToggleElement,
   },
-  withOverrides: withParagraph,
   options: {
     hotkey: ['mod+opt+0', 'mod+shift+0'],
   },

diff --git a/packages/paragraph/src/withParagraph.ts b/packages/paragraph/src/withParagraph.ts
diff --git a/packages/select/src/createRemoveOnDeleteForwardPlugin.ts b/packages/select/src/createRemoveOnDeleteForwardPlugin.ts
@@ -0,0 +1,22 @@
+import { createPluginFactory, QueryNodeOptions } from '@udecode/plate-common';
+
+import { withCreateRemoveOnDeleteForward } from './withCreateRemoveOnDeleteForward';
+
+export type RemoveOnDeleteForwardPlugin = {
+  query?: QueryNodeOptions;
+  removeNodeIfEmpty?: boolean;
+};
+
+export const KEY_FORWARD_DELETE_BEFORE_CODE_BLOCK = 'forwardDeleteBeforeCodeBlock';
+
+/**
+ * @see {@link withCreateRemoveOnDeleteForward}
+ */
+export const createRemoveOnDeleteForwardPlugin =
+  createPluginFactory<RemoveOnDeleteForwardPlugin>({
+    key: KEY_FORWARD_DELETE_BEFORE_CODE_BLOCK,
+    withOverrides: withCreateRemoveOnDeleteForward,
+    options: {
+      removeNodeIfEmpty: true,
+    },
+  });
diff --git a/packages/select/src/index.ts b/packages/select/src/index.ts
@@ -4,3 +4,5 @@
 
 export * from './createSelectOnBackspacePlugin';
 export * from './withSelectOnBackspace';
+export * from './createRemoveOnDeleteForwardPlugin';
+export * from './withCreateRemoveOnDeleteForward';
diff --git a/packages/select/src/withCreateRemoveOnDeleteForward.ts b/packages/select/src/withCreateRemoveOnDeleteForward.ts
@@ -0,0 +1,40 @@
+import {
+    isBlockAboveEmpty,
+    isSelectionExpanded,
+    PlateEditor,
+    removeNodes,
+    Value,
+    WithPlatePlugin,
+  } from '@udecode/plate-common';
+
+  import { RemoveOnDeleteForwardPlugin } from './createRemoveOnDeleteForwardPlugin';
+
+  /**
+   * Set a list of element types to select on backspace
+   */
+  export const withCreateRemoveOnDeleteForward = <
+    V extends Value = Value,
+    E extends PlateEditor<V> = PlateEditor<V>,
+  >(
+    editor: E,
+    {
+      options: { query, removeNodeIfEmpty },
+    }: WithPlatePlugin<RemoveOnDeleteForwardPlugin, V, E>
+  ) => {
+    const { deleteForward } = editor;
+
+    editor.deleteForward = (unit: 'character' | 'word' | 'line' | 'block') => {
+      const { selection } = editor; 
+      if(!editor.selection) return;
+      if (!isSelectionExpanded(editor) && isBlockAboveEmpty(editor)) {
+        removeNodes(editor as any);
+      } else {
+        deleteForward(unit);
+      }
+    };
+
+    return editor;
+  };
+
+
+
diff --git a/templates/plate-playground-template/src/lib/plate/plate-plugins.ts b/templates/plate-playground-template/src/lib/plate/plate-plugins.ts
@@ -108,7 +108,7 @@ import {
   ELEMENT_PARAGRAPH,
 } from '@udecode/plate-paragraph';
 import { createResetNodePlugin } from '@udecode/plate-reset-node';
-import { createSelectOnBackspacePlugin } from '@udecode/plate-select';
+import { createRemoveOnDeleteForwardPlugin, createSelectOnBackspacePlugin } from '@udecode/plate-select';
 import { createBlockSelectionPlugin } from '@udecode/plate-selection';
 import { createDeserializeDocxPlugin } from '@udecode/plate-serializer-docx';
 import { createDeserializeMdPlugin } from '@udecode/plate-serializer-md';
@@ -321,6 +321,14 @@ export const plugins = createPlugins(
         },
       },
     }),
+
+    createRemoveOnDeleteForwardPlugin({
+      options: {
+        query: {
+          allow: [ELEMENT_IMAGE, ELEMENT_HR],
+        },
+      },
+    }),
     createSoftBreakPlugin({
       options: {
         rules: [