Delete forward on empty line before code block unwraps code line #2686

.changeset/shy-billo-bagga.md

@@ -0,0 +1,5 @@
+---
+'@udecode/plate-select': minor
+---
+
+Added `createDeletePlugin`. If enabled, performing a delete forward inside an empty block will remove that block without affecting the subsequent block.

apps/www/src/config/customizer-items.ts

@@ -39,7 +39,7 @@ import { KEY_NODE_ID } from '@udecode/plate-node-id';
 import { KEY_NORMALIZE_TYPES } from '@udecode/plate-normalizers';
 import { ELEMENT_PARAGRAPH } from '@udecode/plate-paragraph';
 import { KEY_RESET_NODE } from '@udecode/plate-reset-node';
-import { KEY_SELECT_ON_BACKSPACE } from '@udecode/plate-select';
+import { KEY_DELETE, KEY_SELECT_ON_BACKSPACE } from '@udecode/plate-select';
 import { KEY_BLOCK_SELECTION } from '@udecode/plate-selection';
 import { KEY_DESERIALIZE_CSV } from '@udecode/plate-serializer-csv';
 import { KEY_DESERIALIZE_DOCX } from '@udecode/plate-serializer-docx';
@@ -957,6 +957,13 @@ export const customizerItems: Record<string, SettingPlugin> = {
     badges: [customizerBadges.handler],
     route: customizerPlugins.media.route,
   },
+  [KEY_DELETE]: {
+    id: KEY_DELETE,
+    npmPackage: '@udecode/plate-select',
+    pluginFactory: 'createDeletePlugin',
+    label: 'Delete',
+    badges: [customizerBadges.handler],
+  },
   [KEY_SINGLE_LINE]: {
     id: KEY_SINGLE_LINE,
     npmPackage: '@udecode/plate-break',

apps/www/src/config/customizer-list.ts

@@ -39,7 +39,7 @@ import { KEY_NODE_ID } from '@udecode/plate-node-id';
 import { KEY_NORMALIZE_TYPES } from '@udecode/plate-normalizers';
 import { ELEMENT_PARAGRAPH } from '@udecode/plate-paragraph';
 import { KEY_RESET_NODE } from '@udecode/plate-reset-node';
-import { KEY_SELECT_ON_BACKSPACE } from '@udecode/plate-select';
+import { KEY_DELETE, KEY_SELECT_ON_BACKSPACE } from '@udecode/plate-select';
 import { KEY_BLOCK_SELECTION } from '@udecode/plate-selection';
 import { KEY_DESERIALIZE_CSV } from '@udecode/plate-serializer-csv';
 import { KEY_DESERIALIZE_DOCX } from '@udecode/plate-serializer-docx';
@@ -117,6 +117,7 @@ export const customizerList = [
       customizerItems[KEY_NORMALIZE_TYPES],
       customizerItems[KEY_RESET_NODE],
       customizerItems[KEY_SELECT_ON_BACKSPACE],
+      customizerItems[KEY_DELETE],
       customizerItems[KEY_SINGLE_LINE],
       customizerItems[KEY_SOFT_BREAK],
       customizerItems[KEY_TABBABLE],
@@ -182,6 +183,7 @@ export const orderedPluginKeys = [
   KEY_NORMALIZE_TYPES,
   KEY_RESET_NODE,
   KEY_SELECT_ON_BACKSPACE,
+  KEY_DELETE,
   KEY_SINGLE_LINE,
   KEY_SOFT_BREAK,
   KEY_TABBABLE,

apps/www/src/config/descriptions.ts

@@ -37,7 +37,7 @@ import { KEY_NODE_ID } from '@udecode/plate-node-id';
 import { KEY_NORMALIZE_TYPES } from '@udecode/plate-normalizers';
 import { ELEMENT_PARAGRAPH } from '@udecode/plate-paragraph';
 import { KEY_RESET_NODE } from '@udecode/plate-reset-node';
-import { KEY_SELECT_ON_BACKSPACE } from '@udecode/plate-select';
+import { KEY_DELETE, KEY_SELECT_ON_BACKSPACE } from '@udecode/plate-select';
 import { KEY_BLOCK_SELECTION } from '@udecode/plate-selection';
 import { KEY_DESERIALIZE_CSV } from '@udecode/plate-serializer-csv';
 import { KEY_DESERIALIZE_DOCX } from '@udecode/plate-serializer-docx';
@@ -94,6 +94,7 @@ export const descriptions: Record<string, string> = {
   [KEY_RESET_NODE]: 'Reset the block type using rules.',
   [KEY_SELECT_ON_BACKSPACE]:
     'Select the preceding block instead of deleting when pressing backspace.',
+  [KEY_DELETE]: 'Remove the current block if empty when pressing delete foward',
   [KEY_SINGLE_LINE]: 'Restrict the editor to a single block.',
   [KEY_SOFT_BREAK]:
     'Insert line breaks within a block of text without starting a new block.',

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

@@ -77,7 +77,10 @@ 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 {
+  createDeletePlugin,
+  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';
@@ -216,6 +219,9 @@ export const usePlaygroundPlugins = ({
             ...selectOnBackspacePlugin,
             enabled: !!enabled.selectOnBackspace,
           }),
+          createDeletePlugin({
+            enabled: !!enabled.createDeletePlugin,
+          }),
           createSingleLinePlugin({
             enabled: id === 'singleline' || !!enabled.singleLine,
           }),

packages/select/src/createDeletePlugin.spec.tsx

@@ -0,0 +1,77 @@
+/** @jsx jsx */
+
+import { createPlateEditor, PlateEditor } from '@udecode/plate-common';
+import { jsx } from '@udecode/plate-test-utils';
+
+import { createDeletePlugin } from './createDeletePlugin';
+
+jsx;
+
+describe('p (empty) + codeblock when selection not in code block', () => {
+  it('should remove the p', () => {
+    const input = (
+      <editor>
+        <hp>
+          <cursor />
+        </hp>
+        <hcodeblock>
+          <hcodeline>test</hcodeline>
+          <hcodeline>test2</hcodeline>
+        </hcodeblock>
+      </editor>
+    ) as any as PlateEditor;
+
+    const expected = (
+      <editor>
+        <hcodeblock>
+          <hcodeline>test</hcodeline>
+          <hcodeline>test2</hcodeline>
+        </hcodeblock>
+      </editor>
+    ) as any as PlateEditor;
+
+    const editor = createPlateEditor({
+      editor: input,
+      plugins: [createDeletePlugin()],
+    });
+
+    editor.deleteForward('character');
+
+    expect(editor.children).toEqual(expected.children);
+  });
+});
+
+describe('p (not empty) + code block when selection not in code block', () => {
+  it('should remove the p', () => {
+    const input = (
+      <editor>
+        <hp>
+          para
+          <cursor />
+        </hp>
+        <hcodeblock>
+          <hcodeline>test</hcodeline>
+          <hcodeline>test2</hcodeline>
+        </hcodeblock>
+      </editor>
+    ) as any as PlateEditor;
+
+    const expected = (
+      <editor>
+        <hp>paratest</hp>
+        <hcodeblock>
+          <hcodeline>test2</hcodeline>
+        </hcodeblock>
+      </editor>
+    ) as any as PlateEditor;
+
+    const editor = createPlateEditor({
+      editor: input,
+      plugins: [createDeletePlugin()],
+    });
+
+    editor.deleteForward('character');
+
+    expect(editor.children).toEqual(expected.children);
+  });
+});

packages/select/src/createDeletePlugin.ts

@@ -0,0 +1,22 @@
+import { createPluginFactory, ELEMENT_DEFAULT, QueryNodeOptions } from '@udecode/plate-common';
+
+import { withDelete } from './withDelete';
+
+export type DeletePlugin = {
+  query?: QueryNodeOptions;
+};
+
+export const KEY_DELETE = 'delete';
+
+/**
+ * @see {@link withDelete}
+ */
+export const createDeletePlugin = createPluginFactory<DeletePlugin>({
+  key: KEY_DELETE,
+  withOverrides: withDelete,
+  options: {
+    query: {
+      allow: [ELEMENT_DEFAULT],
+    },
+  },
+});

packages/select/src/index.ts

@@ -4,3 +4,5 @@
 
 export * from './createSelectOnBackspacePlugin';
 export * from './withSelectOnBackspace';
+export * from './createDeletePlugin';
+export * from './withDelete';

packages/select/src/withDelete.ts

@@ -0,0 +1,41 @@
+import {
+  getAboveNode,
+  isBlockAboveEmpty,
+  isSelectionExpanded,
+  PlateEditor,
+  queryNode,
+  removeNodes,
+  Value,
+  WithPlatePlugin,
+} from '@udecode/plate-common';
+
+import { DeletePlugin } from './createDeletePlugin';
+
+/**
+ * Set a list of element types to select on backspace
+ */
+export const withDelete = <
+  V extends Value = Value,
+  E extends PlateEditor<V> = PlateEditor<V>,
+>(
+  editor: E,
+  { options: { query } }: WithPlatePlugin<DeletePlugin, V, E>
+) => {
+  const { deleteForward } = editor;
+  editor.deleteForward = (unit) => {
+    if (!editor.selection) return;
+    const isValidNode = queryNode(getAboveNode(editor), query);
+    if (
+      !isSelectionExpanded(editor) &&
+      isBlockAboveEmpty(editor) &&
+      isValidNode
+    ) {
+      // Cursor is in query blocks and line is empty
+      removeNodes(editor as any);
+    } else {
+      // When the line is not empty or other conditions are not met, fall back to default behavior
+      deleteForward(unit);
+    }
+  };
+  return editor;
+};

packages/select/src/withSelectOnBackspace.ts

@@ -32,7 +32,6 @@ export const withSelectOnBackspace = <
 
   editor.deleteBackward = (unit: 'character' | 'word' | 'line' | 'block') => {
     const { selection } = editor;
-
     if (unit === 'character' && isCollapsed(selection)) {
       const pointBefore = getPointBefore(editor, selection as Slate.Location, {
         unit,

packages/serializer-docx/src/docx-cleaner/utils/cleanDocxImageElements.ts

@@ -30,7 +30,10 @@ export const cleanDocxImageElements = (
 
       const alt = element.getAttribute('alt');
 
-      if (typeof alt === 'string' && validator.isURL(alt, { require_protocol: true })) {
+      if (
+        typeof alt === 'string' &&
+        validator.isURL(alt, { require_protocol: true })
+      ) {
         element.setAttribute('src', alt);
         return true;
       }

templates/plate-playground-template/src/lib/plate/plate-plugins.ts

@@ -154,6 +154,7 @@ import { TableRowElement } from '@/components/plate-ui/table-row-element';
 import { TodoListElement } from '@/components/plate-ui/todo-list-element';
 import { withDraggables } from '@/components/plate-ui/with-draggables';
 import { TabbableElement } from '@/components/tabbable-element';
+import { createDeletePlugin } from '@udecode/plate-select';
 
 const resetBlockTypesCommonRule = {
   types: [ELEMENT_BLOCKQUOTE, ELEMENT_TODO_LI],
@@ -321,6 +322,7 @@ export const plugins = createPlugins(
         },
       },
     }),
+
     createSoftBreakPlugin({
       options: {
         rules: [