From c2cd206b429576efd1c9263a41795fd7e09059fa Mon Sep 17 00:00:00 2001 From: Nageen Chand Date: Sun, 8 Oct 2023 06:54:06 +0530 Subject: [PATCH 01/18] Delete forward on empty line before code block unwraps code line #2686 --- .../paragraph/src/createParagraphPlugin.ts | 2 ++ packages/paragraph/src/withParagraph.ts | 34 +++++++++++++++++++ 2 files changed, 36 insertions(+) create mode 100644 packages/paragraph/src/withParagraph.ts diff --git a/packages/paragraph/src/createParagraphPlugin.ts b/packages/paragraph/src/createParagraphPlugin.ts index 215d9d64e3..b71889238b 100644 --- a/packages/paragraph/src/createParagraphPlugin.ts +++ b/packages/paragraph/src/createParagraphPlugin.ts @@ -3,6 +3,7 @@ import { HotkeyPlugin, onKeyDownToggleElement, } from '@udecode/plate-common'; +import { withParagraph } from './withParagraph'; export const ELEMENT_PARAGRAPH = 'p'; @@ -15,6 +16,7 @@ export const createParagraphPlugin = createPluginFactory({ 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 new file mode 100644 index 0000000000..83fa461087 --- /dev/null +++ b/packages/paragraph/src/withParagraph.ts @@ -0,0 +1,34 @@ +import { PlateEditor, Value, isSelectionAtBlockEnd, isSelectionAtBlockStart } from '@udecode/plate-common'; +import { Editor, Path, move, removeNodes } from 'slate'; + + + + +export const withParagraph = < + V extends Value = Value, + E extends PlateEditor = PlateEditor +>( + editor: E +) => { + const { deleteForward, deleteBackward } = editor; + editor.deleteForward = (unit) => { + if (isSelectionAtBlockStart(editor) && isSelectionAtBlockEnd(editor)) { + const path = editor.selection?.focus.path; + let previousListItemPath: Path; + try { + if (path != undefined) { + previousListItemPath = Path.previous(path); + } + // Delete the current empty line and work as deleteBackward + deleteBackward(unit); + move(editor as any, { unit: "line", reverse: false }); + } catch { + removeNodes(editor as any); + } + } else { + // Perform the default deleteForward behavior + deleteForward(unit); + } + }; + return editor; +}; From f5dc0fe567868bf0b8697ca1acb1c5642b2ebf9b Mon Sep 17 00:00:00 2001 From: Nageen Chand Date: Sun, 8 Oct 2023 07:08:10 +0530 Subject: [PATCH 02/18] add changesets --- .changeset/shy-billo-bagga.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/shy-billo-bagga.md diff --git a/.changeset/shy-billo-bagga.md b/.changeset/shy-billo-bagga.md new file mode 100644 index 0000000000..5379bf3310 --- /dev/null +++ b/.changeset/shy-billo-bagga.md @@ -0,0 +1,5 @@ +--- +'@udecode/plate-paragraph': patch +--- + +With this patch, deleteForward will check if current Line is empty then current line is deleted and cursor is moved to next line \ No newline at end of file From 339354ddaecca9fad6e787118786f96096d242cb Mon Sep 17 00:00:00 2001 From: Nageen Chand <25462010+archie9211@users.noreply.github.com> Date: Sun, 8 Oct 2023 07:31:43 +0530 Subject: [PATCH 03/18] optimize the operation further --- packages/paragraph/src/withParagraph.ts | 13 +------------ 1 file changed, 1 insertion(+), 12 deletions(-) diff --git a/packages/paragraph/src/withParagraph.ts b/packages/paragraph/src/withParagraph.ts index 83fa461087..32476742bc 100644 --- a/packages/paragraph/src/withParagraph.ts +++ b/packages/paragraph/src/withParagraph.ts @@ -13,18 +13,7 @@ export const withParagraph = < const { deleteForward, deleteBackward } = editor; editor.deleteForward = (unit) => { if (isSelectionAtBlockStart(editor) && isSelectionAtBlockEnd(editor)) { - const path = editor.selection?.focus.path; - let previousListItemPath: Path; - try { - if (path != undefined) { - previousListItemPath = Path.previous(path); - } - // Delete the current empty line and work as deleteBackward - deleteBackward(unit); - move(editor as any, { unit: "line", reverse: false }); - } catch { - removeNodes(editor as any); - } + removeNodes(editor as any); } else { // Perform the default deleteForward behavior deleteForward(unit); From 14ca580699bdc8113892d79b3b946238e4d57743 Mon Sep 17 00:00:00 2001 From: Nageen Chand Date: Sun, 8 Oct 2023 16:56:48 +0530 Subject: [PATCH 04/18] use as plugin --- .../default/example/playground-demo.tsx | 7 +++- .../paragraph/src/createParagraphPlugin.ts | 2 - packages/paragraph/src/withParagraph.ts | 23 ----------- .../src/createRemoveOnDeleteForwardPlugin.ts | 22 ++++++++++ packages/select/src/index.ts | 2 + .../src/withCreateRemoveOnDeleteForward.ts | 40 +++++++++++++++++++ .../src/lib/plate/plate-plugins.ts | 10 ++++- 7 files changed, 79 insertions(+), 27 deletions(-) delete mode 100644 packages/paragraph/src/withParagraph.ts create mode 100644 packages/select/src/createRemoveOnDeleteForwardPlugin.ts create mode 100644 packages/select/src/withCreateRemoveOnDeleteForward.ts diff --git a/apps/www/src/registry/default/example/playground-demo.tsx b/apps/www/src/registry/default/example/playground-demo.tsx index 6f565f6046..767af027af 100644 --- 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 index b71889238b..215d9d64e3 100644 --- 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({ 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 deleted file mode 100644 index 32476742bc..0000000000 --- a/packages/paragraph/src/withParagraph.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { PlateEditor, Value, isSelectionAtBlockEnd, isSelectionAtBlockStart } from '@udecode/plate-common'; -import { Editor, Path, move, removeNodes } from 'slate'; - - - - -export const withParagraph = < - V extends Value = Value, - E extends PlateEditor = PlateEditor ->( - editor: E -) => { - const { deleteForward, deleteBackward } = editor; - editor.deleteForward = (unit) => { - if (isSelectionAtBlockStart(editor) && isSelectionAtBlockEnd(editor)) { - removeNodes(editor as any); - } else { - // Perform the default deleteForward behavior - deleteForward(unit); - } - }; - return editor; -}; diff --git a/packages/select/src/createRemoveOnDeleteForwardPlugin.ts b/packages/select/src/createRemoveOnDeleteForwardPlugin.ts new file mode 100644 index 0000000000..562d24c14b --- /dev/null +++ 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({ + 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 index 3a349378d0..2ecb23de68 100644 --- 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 new file mode 100644 index 0000000000..48d736d3c7 --- /dev/null +++ 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 = PlateEditor, + >( + editor: E, + { + options: { query, removeNodeIfEmpty }, + }: WithPlatePlugin + ) => { + 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; + }; + + + \ No newline at end of file diff --git a/templates/plate-playground-template/src/lib/plate/plate-plugins.ts b/templates/plate-playground-template/src/lib/plate/plate-plugins.ts index b291ef8420..32ba006ba6 100644 --- 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: [ From 71feeef52fdcfbaccde42fba0b3541831b857fcb Mon Sep 17 00:00:00 2001 From: Nageen Chand Date: Sun, 8 Oct 2023 17:42:59 +0530 Subject: [PATCH 05/18] build fix --- .../demo/plugins/removeOnDeleteForwardPlugin.ts | 14 ++++++++++++++ .../registry/default/example/playground-demo.tsx | 5 +++-- 2 files changed, 17 insertions(+), 2 deletions(-) create mode 100644 apps/www/src/lib/plate/demo/plugins/removeOnDeleteForwardPlugin.ts diff --git a/apps/www/src/lib/plate/demo/plugins/removeOnDeleteForwardPlugin.ts b/apps/www/src/lib/plate/demo/plugins/removeOnDeleteForwardPlugin.ts new file mode 100644 index 0000000000..7638504b29 --- /dev/null +++ b/apps/www/src/lib/plate/demo/plugins/removeOnDeleteForwardPlugin.ts @@ -0,0 +1,14 @@ +import { PlatePlugin } from '@udecode/plate-common'; +import { ELEMENT_HR } from '@udecode/plate-horizontal-rule'; +import { ELEMENT_IMAGE } from '@udecode/plate-media'; +import { RemoveOnDeleteForwardPlugin } from '@udecode/plate-select'; + +export const removeOnDeleteForwardPlugin: Partial< + PlatePlugin +> = { + options: { + query: { + allow: [ELEMENT_IMAGE, ELEMENT_HR], + }, + }, +}; diff --git a/apps/www/src/registry/default/example/playground-demo.tsx b/apps/www/src/registry/default/example/playground-demo.tsx index 767af027af..5375e843f6 100644 --- 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 { RemoveOnDeleteForwardPlugin, createSelectOnBackspacePlugin } from '@udecode/plate-select'; +import { 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'; @@ -100,6 +100,7 @@ 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'; +import { removeOnDeleteForwardPlugin } from '@/lib/plate/demo/plugins/removeOnDeleteForwardPlugin'; export const usePlaygroundPlugins = ({ id, @@ -218,7 +219,7 @@ export const usePlaygroundPlugins = ({ enabled: !!enabled.selectOnBackspace, }), createRemoveOnDeleteForwardPlugin({ - ...RemoveOnDeleteForwardPlugin, + ...removeOnDeleteForwardPlugin, enabled: !!enabled.selectOnBackspace, }), createSingleLinePlugin({ From 0b316e63b06da87f94b8a1a5d38bb257a55e57d7 Mon Sep 17 00:00:00 2001 From: Nageen Chand Date: Sun, 8 Oct 2023 20:58:23 +0530 Subject: [PATCH 06/18] fix plugin and add unit tests --- .../plugins/removeOnDeleteForwardPlugin.ts | 7 +- .../default/example/playground-demo.tsx | 4 +- .../select/src/createDeletePlugin.spec.tsx | 79 +++++++++++++++++++ packages/select/src/createDeletePlugin.ts | 18 +++++ .../src/createRemoveOnDeleteForwardPlugin.ts | 22 ------ packages/select/src/index.ts | 4 +- .../src/withCreateRemoveOnDeleteForward.ts | 40 ---------- packages/select/src/withDelete.ts | 77 ++++++++++++++++++ packages/select/src/withSelectOnBackspace.ts | 2 +- .../src/lib/plate/plate-plugins.ts | 7 +- 10 files changed, 187 insertions(+), 73 deletions(-) create mode 100644 packages/select/src/createDeletePlugin.spec.tsx create mode 100644 packages/select/src/createDeletePlugin.ts delete mode 100644 packages/select/src/createRemoveOnDeleteForwardPlugin.ts delete mode 100644 packages/select/src/withCreateRemoveOnDeleteForward.ts create mode 100644 packages/select/src/withDelete.ts diff --git a/apps/www/src/lib/plate/demo/plugins/removeOnDeleteForwardPlugin.ts b/apps/www/src/lib/plate/demo/plugins/removeOnDeleteForwardPlugin.ts index 7638504b29..efb80296c4 100644 --- a/apps/www/src/lib/plate/demo/plugins/removeOnDeleteForwardPlugin.ts +++ b/apps/www/src/lib/plate/demo/plugins/removeOnDeleteForwardPlugin.ts @@ -1,14 +1,15 @@ import { PlatePlugin } from '@udecode/plate-common'; import { ELEMENT_HR } from '@udecode/plate-horizontal-rule'; import { ELEMENT_IMAGE } from '@udecode/plate-media'; -import { RemoveOnDeleteForwardPlugin } from '@udecode/plate-select'; +import { ELEMENT_PARAGRAPH } from '@udecode/plate-paragraph'; +import { DeletePlugin } from '@udecode/plate-select'; export const removeOnDeleteForwardPlugin: Partial< - PlatePlugin + PlatePlugin > = { options: { query: { - allow: [ELEMENT_IMAGE, ELEMENT_HR], + allow: [ELEMENT_PARAGRAPH], }, }, }; diff --git a/apps/www/src/registry/default/example/playground-demo.tsx b/apps/www/src/registry/default/example/playground-demo.tsx index 5375e843f6..66b5bea56a 100644 --- a/apps/www/src/registry/default/example/playground-demo.tsx +++ b/apps/www/src/registry/default/example/playground-demo.tsx @@ -99,8 +99,8 @@ 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'; import { removeOnDeleteForwardPlugin } from '@/lib/plate/demo/plugins/removeOnDeleteForwardPlugin'; +import { createDeletePlugin } from '@udecode/plate-select'; export const usePlaygroundPlugins = ({ id, @@ -218,7 +218,7 @@ export const usePlaygroundPlugins = ({ ...selectOnBackspacePlugin, enabled: !!enabled.selectOnBackspace, }), - createRemoveOnDeleteForwardPlugin({ + createDeletePlugin({ ...removeOnDeleteForwardPlugin, enabled: !!enabled.selectOnBackspace, }), diff --git a/packages/select/src/createDeletePlugin.spec.tsx b/packages/select/src/createDeletePlugin.spec.tsx new file mode 100644 index 0000000000..e3e949bb63 --- /dev/null +++ b/packages/select/src/createDeletePlugin.spec.tsx @@ -0,0 +1,79 @@ +/** @jsx jsx */ + +import { createPlateEditor, PlateEditor } from '@udecode/plate-common'; +import { jsx } from '@udecode/plate-test-utils'; +import { createDeletePlugin } from './createDeletePlugin' + +jsx; + +describe('p (empty) + list when selection not in list', () => { + it('should remove the p', () => { + const input = ( + + + + + + test + test2 + + + ) as any as PlateEditor; + + const expected = ( + + + test + test2 + + + ) as any as PlateEditor; + + const editor = createPlateEditor({ + editor: input, + plugins: [createDeletePlugin()], + }); + + editor.deleteForward('character'); + + expect(editor.children).toEqual(expected.children); + }); +}); + + +describe('p (empty) + list when selection not in list', () => { + it('should remove the p', () => { + const input = ( + + + para + + + + test + test2 + + + ) as any as PlateEditor; + + const expected = ( + + + paratest + + + test2 + + + ) as any as PlateEditor; + + const editor = createPlateEditor({ + editor: input, + plugins: [createDeletePlugin()], + }); + + editor.deleteForward('character'); + + expect(editor.children).toEqual(expected.children); + }); +}); diff --git a/packages/select/src/createDeletePlugin.ts b/packages/select/src/createDeletePlugin.ts new file mode 100644 index 0000000000..ac015b25f8 --- /dev/null +++ b/packages/select/src/createDeletePlugin.ts @@ -0,0 +1,18 @@ +import { createPluginFactory, QueryNodeOptions } from '@udecode/plate-common'; + +import { withDelete } from './withDelete'; + +export type DeletePlugin = { + query?: QueryNodeOptions; +}; + +export const KEY_FORWARD_DELETE = 'forwardDeleteBeforeCodeBlock'; + +/** + * @see {@link withDelete} + */ +export const createDeletePlugin = + createPluginFactory({ + key: KEY_FORWARD_DELETE, + withOverrides: withDelete, + }); diff --git a/packages/select/src/createRemoveOnDeleteForwardPlugin.ts b/packages/select/src/createRemoveOnDeleteForwardPlugin.ts deleted file mode 100644 index 562d24c14b..0000000000 --- a/packages/select/src/createRemoveOnDeleteForwardPlugin.ts +++ /dev/null @@ -1,22 +0,0 @@ -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({ - 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 index 2ecb23de68..34528b4c9a 100644 --- a/packages/select/src/index.ts +++ b/packages/select/src/index.ts @@ -4,5 +4,5 @@ export * from './createSelectOnBackspacePlugin'; export * from './withSelectOnBackspace'; -export * from './createRemoveOnDeleteForwardPlugin'; -export * from './withCreateRemoveOnDeleteForward'; +export * from './createDeletePlugin'; +export * from './withDelete'; diff --git a/packages/select/src/withCreateRemoveOnDeleteForward.ts b/packages/select/src/withCreateRemoveOnDeleteForward.ts deleted file mode 100644 index 48d736d3c7..0000000000 --- a/packages/select/src/withCreateRemoveOnDeleteForward.ts +++ /dev/null @@ -1,40 +0,0 @@ -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 = PlateEditor, - >( - editor: E, - { - options: { query, removeNodeIfEmpty }, - }: WithPlatePlugin - ) => { - 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; - }; - - - \ No newline at end of file diff --git a/packages/select/src/withDelete.ts b/packages/select/src/withDelete.ts new file mode 100644 index 0000000000..3633ec67c0 --- /dev/null +++ b/packages/select/src/withDelete.ts @@ -0,0 +1,77 @@ +import { + deleteForward, + getNodeEntries, + getPointBefore, + isBlockAboveEmpty, + isSelectionExpanded, + PlateEditor, + queryNode, + removeNodes, + Value, + WithPlatePlugin, + } from '@udecode/plate-common'; + + import { DeletePlugin } from './createDeletePlugin'; +import Slate from 'slate'; + + /** + * Set a list of element types to select on backspace + */ + export const withDelete = < + V extends Value = Value, + E extends PlateEditor = PlateEditor, + >( + editor: E, + { + options: { query }, + }: WithPlatePlugin + ) => { + const { deleteForward } = editor; + editor.deleteForward = (unit: 'character' | 'word' | 'line' | 'block') => { + const { selection } = editor; + console.log("outer" ,query); + if(!editor.selection) return; + + + if (!isSelectionExpanded(editor) && isBlockAboveEmpty(editor)) { + console.log("asdas"); + if (query) { + //if query value is passed + const pointBefore = getPointBefore(editor, selection as Slate.Location, { + unit, + }); + + if (pointBefore) { + const [prevCell] = getNodeEntries(editor, { + match: (node) => queryNode([node, pointBefore.path], query), + at: pointBefore, + }); + if (!!prevCell && pointBefore) { + console.log("valid cell"); + removeNodes(editor as any); + + } + else { + console.log("invalid cell"); + + deleteForward(unit); + } + } + else{ + deleteForward(unit); + } + } + else{ + console.log("outside query"); + removeNodes(editor as any); + } + } else { + deleteForward(unit); + } + }; + + return editor; + }; + + + \ No newline at end of file diff --git a/packages/select/src/withSelectOnBackspace.ts b/packages/select/src/withSelectOnBackspace.ts index 8df2a894a0..6996195b2e 100644 --- a/packages/select/src/withSelectOnBackspace.ts +++ b/packages/select/src/withSelectOnBackspace.ts @@ -32,7 +32,7 @@ export const withSelectOnBackspace = < editor.deleteBackward = (unit: 'character' | 'word' | 'line' | 'block') => { const { selection } = editor; - + console.log("query", query); if (unit === 'character' && isCollapsed(selection)) { const pointBefore = getPointBefore(editor, selection as Slate.Location, { unit, diff --git a/templates/plate-playground-template/src/lib/plate/plate-plugins.ts b/templates/plate-playground-template/src/lib/plate/plate-plugins.ts index 32ba006ba6..e977e0b9c2 100644 --- 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 { createRemoveOnDeleteForwardPlugin, createSelectOnBackspacePlugin } from '@udecode/plate-select'; +import { 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'; @@ -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], @@ -322,10 +323,10 @@ export const plugins = createPlugins( }, }), - createRemoveOnDeleteForwardPlugin({ + createDeletePlugin({ options: { query: { - allow: [ELEMENT_IMAGE, ELEMENT_HR], + allow: [ELEMENT_PARAGRAPH], }, }, }), From 72aa277b6832c0d2c63026ea314730ea82615de9 Mon Sep 17 00:00:00 2001 From: Nageen Chand Date: Sun, 8 Oct 2023 21:11:08 +0530 Subject: [PATCH 07/18] changeset update: --- .changeset/shy-billo-bagga.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/shy-billo-bagga.md b/.changeset/shy-billo-bagga.md index 5379bf3310..3b32e254e7 100644 --- a/.changeset/shy-billo-bagga.md +++ b/.changeset/shy-billo-bagga.md @@ -1,5 +1,5 @@ --- -'@udecode/plate-paragraph': patch +'@udecode/plate-select': minor --- With this patch, deleteForward will check if current Line is empty then current line is deleted and cursor is moved to next line \ No newline at end of file From e931bb215f809274cba0bb8dd1c6c8986b966996 Mon Sep 17 00:00:00 2001 From: Nageen Chand Date: Sun, 8 Oct 2023 21:12:51 +0530 Subject: [PATCH 08/18] changeset update: --- .../src/lib/plate/demo/plugins/removeOnDeleteForwardPlugin.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/apps/www/src/lib/plate/demo/plugins/removeOnDeleteForwardPlugin.ts b/apps/www/src/lib/plate/demo/plugins/removeOnDeleteForwardPlugin.ts index efb80296c4..77b8259db3 100644 --- a/apps/www/src/lib/plate/demo/plugins/removeOnDeleteForwardPlugin.ts +++ b/apps/www/src/lib/plate/demo/plugins/removeOnDeleteForwardPlugin.ts @@ -1,6 +1,4 @@ import { PlatePlugin } from '@udecode/plate-common'; -import { ELEMENT_HR } from '@udecode/plate-horizontal-rule'; -import { ELEMENT_IMAGE } from '@udecode/plate-media'; import { ELEMENT_PARAGRAPH } from '@udecode/plate-paragraph'; import { DeletePlugin } from '@udecode/plate-select'; From 0be88f9712374cfbd9b74aa8def588ea155659cc Mon Sep 17 00:00:00 2001 From: Nageen Chand Date: Mon, 9 Oct 2023 01:36:24 +0530 Subject: [PATCH 09/18] linting and logic simplification --- .changeset/shy-billo-bagga.md | 2 +- ...DeleteForwardPlugin.ts => deletePlugin.ts} | 4 +- .../default/example/playground-demo.tsx | 10 +- .../select/src/createDeletePlugin.spec.tsx | 30 +++-- packages/select/src/createDeletePlugin.ts | 11 +- packages/select/src/withDelete.ts | 104 +++++++----------- packages/select/src/withSelectOnBackspace.ts | 1 - 7 files changed, 65 insertions(+), 97 deletions(-) rename apps/www/src/lib/plate/demo/plugins/{removeOnDeleteForwardPlugin.ts => deletePlugin.ts} (74%) diff --git a/.changeset/shy-billo-bagga.md b/.changeset/shy-billo-bagga.md index 3b32e254e7..85b621a445 100644 --- a/.changeset/shy-billo-bagga.md +++ b/.changeset/shy-billo-bagga.md @@ -2,4 +2,4 @@ '@udecode/plate-select': minor --- -With this patch, deleteForward will check if current Line is empty then current line is deleted and cursor is moved to next line \ No newline at end of file +Added `createDeletePlugin`. If enabled, performing a delete forward inside an empty block will remove that block without affecting the subsequent block. \ No newline at end of file diff --git a/apps/www/src/lib/plate/demo/plugins/removeOnDeleteForwardPlugin.ts b/apps/www/src/lib/plate/demo/plugins/deletePlugin.ts similarity index 74% rename from apps/www/src/lib/plate/demo/plugins/removeOnDeleteForwardPlugin.ts rename to apps/www/src/lib/plate/demo/plugins/deletePlugin.ts index 77b8259db3..7920db2500 100644 --- a/apps/www/src/lib/plate/demo/plugins/removeOnDeleteForwardPlugin.ts +++ b/apps/www/src/lib/plate/demo/plugins/deletePlugin.ts @@ -2,9 +2,7 @@ import { PlatePlugin } from '@udecode/plate-common'; import { ELEMENT_PARAGRAPH } from '@udecode/plate-paragraph'; import { DeletePlugin } from '@udecode/plate-select'; -export const removeOnDeleteForwardPlugin: Partial< - PlatePlugin -> = { +export const deletePlugin: Partial> = { options: { query: { allow: [ELEMENT_PARAGRAPH], diff --git a/apps/www/src/registry/default/example/playground-demo.tsx b/apps/www/src/registry/default/example/playground-demo.tsx index 66b5bea56a..4bf3f49f2f 100644 --- a/apps/www/src/registry/default/example/playground-demo.tsx +++ b/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'; @@ -89,6 +92,7 @@ import { HTML5Backend } from 'react-dnd-html5-backend'; import { ValueId } from '@/config/customizer-plugins'; import { captionPlugin } from '@/lib/plate/demo/plugins/captionPlugin'; +import { deletePlugin } from '@/lib/plate/demo/plugins/deletePlugin'; import { cn } from '@/lib/utils'; import { settingsStore } from '@/components/context/settings-store'; import { PlaygroundFixedToolbarButtons } from '@/components/plate-ui/playground-fixed-toolbar-buttons'; @@ -99,8 +103,6 @@ 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 { removeOnDeleteForwardPlugin } from '@/lib/plate/demo/plugins/removeOnDeleteForwardPlugin'; -import { createDeletePlugin } from '@udecode/plate-select'; export const usePlaygroundPlugins = ({ id, @@ -219,7 +221,7 @@ export const usePlaygroundPlugins = ({ enabled: !!enabled.selectOnBackspace, }), createDeletePlugin({ - ...removeOnDeleteForwardPlugin, + ...deletePlugin, enabled: !!enabled.selectOnBackspace, }), createSingleLinePlugin({ diff --git a/packages/select/src/createDeletePlugin.spec.tsx b/packages/select/src/createDeletePlugin.spec.tsx index e3e949bb63..6b5625588c 100644 --- a/packages/select/src/createDeletePlugin.spec.tsx +++ b/packages/select/src/createDeletePlugin.spec.tsx @@ -2,7 +2,8 @@ import { createPlateEditor, PlateEditor } from '@udecode/plate-common'; import { jsx } from '@udecode/plate-test-utils'; -import { createDeletePlugin } from './createDeletePlugin' + +import { createDeletePlugin } from './createDeletePlugin'; jsx; @@ -14,18 +15,18 @@ describe('p (empty) + list when selection not in list', () => { - test - test2 - + test + test2 + ) as any as PlateEditor; const expected = ( - test - test2 - + test + test2 + ) as any as PlateEditor; @@ -40,7 +41,6 @@ describe('p (empty) + list when selection not in list', () => { }); }); - describe('p (empty) + list when selection not in list', () => { it('should remove the p', () => { const input = ( @@ -50,20 +50,18 @@ describe('p (empty) + list when selection not in list', () => { - test - test2 - + test + test2 + ) as any as PlateEditor; const expected = ( - - paratest - + paratest - test2 - + test2 + ) as any as PlateEditor; diff --git a/packages/select/src/createDeletePlugin.ts b/packages/select/src/createDeletePlugin.ts index ac015b25f8..60b9c5117e 100644 --- a/packages/select/src/createDeletePlugin.ts +++ b/packages/select/src/createDeletePlugin.ts @@ -6,13 +6,12 @@ export type DeletePlugin = { query?: QueryNodeOptions; }; -export const KEY_FORWARD_DELETE = 'forwardDeleteBeforeCodeBlock'; +export const KEY_DELETE = 'delete'; /** * @see {@link withDelete} */ -export const createDeletePlugin = - createPluginFactory({ - key: KEY_FORWARD_DELETE, - withOverrides: withDelete, - }); +export const createDeletePlugin = createPluginFactory({ + key: KEY_DELETE, + withOverrides: withDelete, +}); diff --git a/packages/select/src/withDelete.ts b/packages/select/src/withDelete.ts index 3633ec67c0..5ffc49fcff 100644 --- a/packages/select/src/withDelete.ts +++ b/packages/select/src/withDelete.ts @@ -1,77 +1,49 @@ import { - deleteForward, - getNodeEntries, - getPointBefore, - isBlockAboveEmpty, - isSelectionExpanded, - PlateEditor, - queryNode, - removeNodes, - Value, - WithPlatePlugin, - } from '@udecode/plate-common'; - - import { DeletePlugin } from './createDeletePlugin'; -import Slate from 'slate'; - - /** - * Set a list of element types to select on backspace - */ - export const withDelete = < - V extends Value = Value, - E extends PlateEditor = PlateEditor, - >( - editor: E, - { - options: { query }, - }: WithPlatePlugin - ) => { - const { deleteForward } = editor; - editor.deleteForward = (unit: 'character' | 'word' | 'line' | 'block') => { - const { selection } = editor; - console.log("outer" ,query); - if(!editor.selection) return; - + 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 = PlateEditor, +>( + editor: E, + { options: { query } }: WithPlatePlugin +) => { + const { deleteForward } = editor; + editor.deleteForward = (unit: 'character' | 'word' | 'line' | 'block') => { + if (!editor.selection) return; if (!isSelectionExpanded(editor) && isBlockAboveEmpty(editor)) { - console.log("asdas"); + // check when line is empty + const isValidNode = queryNode(getAboveNode(editor), query); if (query) { - //if query value is passed - const pointBefore = getPointBefore(editor, selection as Slate.Location, { - unit, - }); - - if (pointBefore) { - const [prevCell] = getNodeEntries(editor, { - match: (node) => queryNode([node, pointBefore.path], query), - at: pointBefore, - }); - if (!!prevCell && pointBefore) { - console.log("valid cell"); - removeNodes(editor as any); - - } - else { - console.log("invalid cell"); - - deleteForward(unit); - } - } - else{ - deleteForward(unit); - } - } - else{ - console.log("outside query"); + //is query is passed + if (isValidNode) { + // cursor is in query blocks + removeNodes(editor as any); + } else { + //fallback to default behaiour + deleteForward(unit); + } + } else { + // query is not passed, then plugin is active everywhere removeNodes(editor as any); } } else { + // when line is not empty, fall back to default behavior deleteForward(unit); } }; - return editor; - }; - - - \ No newline at end of file +}; diff --git a/packages/select/src/withSelectOnBackspace.ts b/packages/select/src/withSelectOnBackspace.ts index 6996195b2e..6a4628fc10 100644 --- a/packages/select/src/withSelectOnBackspace.ts +++ b/packages/select/src/withSelectOnBackspace.ts @@ -32,7 +32,6 @@ export const withSelectOnBackspace = < editor.deleteBackward = (unit: 'character' | 'word' | 'line' | 'block') => { const { selection } = editor; - console.log("query", query); if (unit === 'character' && isCollapsed(selection)) { const pointBefore = getPointBefore(editor, selection as Slate.Location, { unit, From 48105734ef97e9ba31cf065eb308eb2dfe3e1b65 Mon Sep 17 00:00:00 2001 From: Nageen Chand Date: Mon, 9 Oct 2023 01:44:18 +0530 Subject: [PATCH 10/18] update test cases description --- packages/select/src/createDeletePlugin.spec.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/select/src/createDeletePlugin.spec.tsx b/packages/select/src/createDeletePlugin.spec.tsx index 6b5625588c..d01e1664e6 100644 --- a/packages/select/src/createDeletePlugin.spec.tsx +++ b/packages/select/src/createDeletePlugin.spec.tsx @@ -7,7 +7,7 @@ import { createDeletePlugin } from './createDeletePlugin'; jsx; -describe('p (empty) + list when selection not in list', () => { +describe('p (empty) + codeblock when selection not in code block', () => { it('should remove the p', () => { const input = ( @@ -41,7 +41,7 @@ describe('p (empty) + list when selection not in list', () => { }); }); -describe('p (empty) + list when selection not in list', () => { +describe('p (not empty) + code block when selection not in code block', () => { it('should remove the p', () => { const input = ( From 95be159bd376a20da9fefa12d00c8990829daab3 Mon Sep 17 00:00:00 2001 From: Nageen Chand Date: Mon, 9 Oct 2023 14:24:13 +0530 Subject: [PATCH 11/18] remove default conditoin and update conditions as queryNode return true when query is undefined --- .../lib/plate/demo/plugins/deletePlugin.ts | 11 -------- .../default/example/playground-demo.tsx | 2 -- packages/select/src/withDelete.ts | 26 +++++++------------ .../utils/cleanDocxImageElements.ts | 5 +++- 4 files changed, 13 insertions(+), 31 deletions(-) delete mode 100644 apps/www/src/lib/plate/demo/plugins/deletePlugin.ts diff --git a/apps/www/src/lib/plate/demo/plugins/deletePlugin.ts b/apps/www/src/lib/plate/demo/plugins/deletePlugin.ts deleted file mode 100644 index 7920db2500..0000000000 --- a/apps/www/src/lib/plate/demo/plugins/deletePlugin.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { PlatePlugin } from '@udecode/plate-common'; -import { ELEMENT_PARAGRAPH } from '@udecode/plate-paragraph'; -import { DeletePlugin } from '@udecode/plate-select'; - -export const deletePlugin: Partial> = { - options: { - query: { - allow: [ELEMENT_PARAGRAPH], - }, - }, -}; diff --git a/apps/www/src/registry/default/example/playground-demo.tsx b/apps/www/src/registry/default/example/playground-demo.tsx index 4bf3f49f2f..dc4a55c784 100644 --- a/apps/www/src/registry/default/example/playground-demo.tsx +++ b/apps/www/src/registry/default/example/playground-demo.tsx @@ -92,7 +92,6 @@ import { HTML5Backend } from 'react-dnd-html5-backend'; import { ValueId } from '@/config/customizer-plugins'; import { captionPlugin } from '@/lib/plate/demo/plugins/captionPlugin'; -import { deletePlugin } from '@/lib/plate/demo/plugins/deletePlugin'; import { cn } from '@/lib/utils'; import { settingsStore } from '@/components/context/settings-store'; import { PlaygroundFixedToolbarButtons } from '@/components/plate-ui/playground-fixed-toolbar-buttons'; @@ -221,7 +220,6 @@ export const usePlaygroundPlugins = ({ enabled: !!enabled.selectOnBackspace, }), createDeletePlugin({ - ...deletePlugin, enabled: !!enabled.selectOnBackspace, }), createSingleLinePlugin({ diff --git a/packages/select/src/withDelete.ts b/packages/select/src/withDelete.ts index 5ffc49fcff..bee76837de 100644 --- a/packages/select/src/withDelete.ts +++ b/packages/select/src/withDelete.ts @@ -24,24 +24,16 @@ export const withDelete = < const { deleteForward } = editor; editor.deleteForward = (unit: 'character' | 'word' | 'line' | 'block') => { if (!editor.selection) return; - if (!isSelectionExpanded(editor) && isBlockAboveEmpty(editor)) { - // check when line is empty - const isValidNode = queryNode(getAboveNode(editor), query); - if (query) { - //is query is passed - if (isValidNode) { - // cursor is in query blocks - removeNodes(editor as any); - } else { - //fallback to default behaiour - deleteForward(unit); - } - } else { - // query is not passed, then plugin is active everywhere - removeNodes(editor as any); - } + 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 line is not empty, fall back to default behavior + // When the line is not empty or other conditions are not met, fall back to default behavior deleteForward(unit); } }; diff --git a/packages/serializer-docx/src/docx-cleaner/utils/cleanDocxImageElements.ts b/packages/serializer-docx/src/docx-cleaner/utils/cleanDocxImageElements.ts index 904f679d5c..5a23399bbb 100644 --- a/packages/serializer-docx/src/docx-cleaner/utils/cleanDocxImageElements.ts +++ b/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; } From ec7199513e0de25d0c63bfdffd4e2731b17fa80d Mon Sep 17 00:00:00 2001 From: Nageen Chand Date: Mon, 9 Oct 2023 14:38:17 +0530 Subject: [PATCH 12/18] add plugin entry in customize section --- apps/www/src/config/customizer-items.ts | 19 ++++++++++++++++++- apps/www/src/config/customizer-list.ts | 4 +++- apps/www/src/config/descriptions.ts | 3 ++- 3 files changed, 23 insertions(+), 3 deletions(-) diff --git a/apps/www/src/config/customizer-items.ts b/apps/www/src/config/customizer-items.ts index f572ec38d2..03554dfe9d 100644 --- a/apps/www/src/config/customizer-items.ts +++ b/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,23 @@ export const customizerItems: Record = { badges: [customizerBadges.handler], route: customizerPlugins.media.route, }, + [KEY_DELETE]: { + id: KEY_DELETE, + npmPackage: '@udecode/plate-select', + pluginFactory: 'createDeletePlugin', + pluginOptions: [ + `options: {`, + ` query: {`, + ` allow: [`, + ` // ELEMENT_IMAGE, ELEMENT_HR`, + ` ],`, + ` },`, + `},`, + ], + label: 'Forward Delete Plugin', + badges: [customizerBadges.handler], + route: customizerPlugins.media.route, + }, [KEY_SINGLE_LINE]: { id: KEY_SINGLE_LINE, npmPackage: '@udecode/plate-break', diff --git a/apps/www/src/config/customizer-list.ts b/apps/www/src/config/customizer-list.ts index c7dc75b50b..d046aa42d4 100644 --- a/apps/www/src/config/customizer-list.ts +++ b/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, diff --git a/apps/www/src/config/descriptions.ts b/apps/www/src/config/descriptions.ts index 15ae6c19af..c469d429bd 100644 --- a/apps/www/src/config/descriptions.ts +++ b/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 = { [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]: 'Enable forward delete plugin', [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.', From 2fdf847c9bd4ea8abd297923e4bd27c5ef1bd63a Mon Sep 17 00:00:00 2001 From: Nageen Chand Date: Mon, 9 Oct 2023 14:59:11 +0530 Subject: [PATCH 13/18] use ELEMENT_DEFAULT --- .../plate-playground-template/src/lib/plate/plate-plugins.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/templates/plate-playground-template/src/lib/plate/plate-plugins.ts b/templates/plate-playground-template/src/lib/plate/plate-plugins.ts index e977e0b9c2..bc2461b92b 100644 --- a/templates/plate-playground-template/src/lib/plate/plate-plugins.ts +++ b/templates/plate-playground-template/src/lib/plate/plate-plugins.ts @@ -38,6 +38,7 @@ import { createComboboxPlugin } from '@udecode/plate-combobox'; import { createCommentsPlugin, MARK_COMMENT } from '@udecode/plate-comments'; import { createPlugins, + ELEMENT_DEFAULT, isBlockAboveEmpty, isSelectionAtBlockStart, PlateElement, @@ -326,7 +327,7 @@ export const plugins = createPlugins( createDeletePlugin({ options: { query: { - allow: [ELEMENT_PARAGRAPH], + allow: [ELEMENT_DEFAULT], }, }, }), From db1c9bd1a7b5621ac1885f02e82e71287250db9e Mon Sep 17 00:00:00 2001 From: Nageen Chand Date: Mon, 9 Oct 2023 15:30:44 +0530 Subject: [PATCH 14/18] review changes --- apps/www/src/config/customizer-items.ts | 14 ++------------ apps/www/src/config/descriptions.ts | 2 +- .../registry/default/example/playground-demo.tsx | 2 +- packages/select/src/createDeletePlugin.ts | 7 ++++++- packages/select/src/withDelete.ts | 2 +- .../src/lib/plate/plate-plugins.ts | 8 -------- 6 files changed, 11 insertions(+), 24 deletions(-) diff --git a/apps/www/src/config/customizer-items.ts b/apps/www/src/config/customizer-items.ts index 03554dfe9d..8b4d5499fa 100644 --- a/apps/www/src/config/customizer-items.ts +++ b/apps/www/src/config/customizer-items.ts @@ -959,20 +959,10 @@ export const customizerItems: Record = { }, [KEY_DELETE]: { id: KEY_DELETE, - npmPackage: '@udecode/plate-select', + npmPackage: '@udecode/plate-delete', pluginFactory: 'createDeletePlugin', - pluginOptions: [ - `options: {`, - ` query: {`, - ` allow: [`, - ` // ELEMENT_IMAGE, ELEMENT_HR`, - ` ],`, - ` },`, - `},`, - ], - label: 'Forward Delete Plugin', + label: 'Delete', badges: [customizerBadges.handler], - route: customizerPlugins.media.route, }, [KEY_SINGLE_LINE]: { id: KEY_SINGLE_LINE, diff --git a/apps/www/src/config/descriptions.ts b/apps/www/src/config/descriptions.ts index c469d429bd..9b4d4d766b 100644 --- a/apps/www/src/config/descriptions.ts +++ b/apps/www/src/config/descriptions.ts @@ -94,7 +94,7 @@ export const descriptions: Record = { [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]: 'Enable forward delete plugin', + [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.', diff --git a/apps/www/src/registry/default/example/playground-demo.tsx b/apps/www/src/registry/default/example/playground-demo.tsx index dc4a55c784..b9ae56dda1 100644 --- a/apps/www/src/registry/default/example/playground-demo.tsx +++ b/apps/www/src/registry/default/example/playground-demo.tsx @@ -220,7 +220,7 @@ export const usePlaygroundPlugins = ({ enabled: !!enabled.selectOnBackspace, }), createDeletePlugin({ - enabled: !!enabled.selectOnBackspace, + enabled: !!enabled.createDeletePlugin, }), createSingleLinePlugin({ enabled: id === 'singleline' || !!enabled.singleLine, diff --git a/packages/select/src/createDeletePlugin.ts b/packages/select/src/createDeletePlugin.ts index 60b9c5117e..ba166d1334 100644 --- a/packages/select/src/createDeletePlugin.ts +++ b/packages/select/src/createDeletePlugin.ts @@ -1,4 +1,4 @@ -import { createPluginFactory, QueryNodeOptions } from '@udecode/plate-common'; +import { createPluginFactory, ELEMENT_DEFAULT, QueryNodeOptions } from '@udecode/plate-common'; import { withDelete } from './withDelete'; @@ -14,4 +14,9 @@ export const KEY_DELETE = 'delete'; export const createDeletePlugin = createPluginFactory({ key: KEY_DELETE, withOverrides: withDelete, + options: { + query: { + allow: [ELEMENT_DEFAULT], + }, + }, }); diff --git a/packages/select/src/withDelete.ts b/packages/select/src/withDelete.ts index bee76837de..fe37cd1c71 100644 --- a/packages/select/src/withDelete.ts +++ b/packages/select/src/withDelete.ts @@ -22,7 +22,7 @@ export const withDelete = < { options: { query } }: WithPlatePlugin ) => { const { deleteForward } = editor; - editor.deleteForward = (unit: 'character' | 'word' | 'line' | 'block') => { + editor.deleteForward = (unit) => { if (!editor.selection) return; const isValidNode = queryNode(getAboveNode(editor), query); if ( diff --git a/templates/plate-playground-template/src/lib/plate/plate-plugins.ts b/templates/plate-playground-template/src/lib/plate/plate-plugins.ts index bc2461b92b..bb25b4920f 100644 --- a/templates/plate-playground-template/src/lib/plate/plate-plugins.ts +++ b/templates/plate-playground-template/src/lib/plate/plate-plugins.ts @@ -38,7 +38,6 @@ import { createComboboxPlugin } from '@udecode/plate-combobox'; import { createCommentsPlugin, MARK_COMMENT } from '@udecode/plate-comments'; import { createPlugins, - ELEMENT_DEFAULT, isBlockAboveEmpty, isSelectionAtBlockStart, PlateElement, @@ -324,13 +323,6 @@ export const plugins = createPlugins( }, }), - createDeletePlugin({ - options: { - query: { - allow: [ELEMENT_DEFAULT], - }, - }, - }), createSoftBreakPlugin({ options: { rules: [ From 78c9fa33dc73c5cad4b23338ced8803124a1dd6c Mon Sep 17 00:00:00 2001 From: Nageen Chand Date: Mon, 9 Oct 2023 16:04:36 +0530 Subject: [PATCH 15/18] package name typo fix --- apps/www/src/config/customizer-items.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/www/src/config/customizer-items.ts b/apps/www/src/config/customizer-items.ts index 8b4d5499fa..aef2bd67c6 100644 --- a/apps/www/src/config/customizer-items.ts +++ b/apps/www/src/config/customizer-items.ts @@ -959,7 +959,7 @@ export const customizerItems: Record = { }, [KEY_DELETE]: { id: KEY_DELETE, - npmPackage: '@udecode/plate-delete', + npmPackage: '@udecode/plate-select', pluginFactory: 'createDeletePlugin', label: 'Delete', badges: [customizerBadges.handler], From dae8ac25bfec4b7d1bda7d9502c40da875310a90 Mon Sep 17 00:00:00 2001 From: Ziad Beyens Date: Tue, 10 Oct 2023 17:37:56 +0200 Subject: [PATCH 16/18] Update apps/www/src/config/descriptions.ts --- apps/www/src/config/descriptions.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/www/src/config/descriptions.ts b/apps/www/src/config/descriptions.ts index 9b4d4d766b..a9e5adce3b 100644 --- a/apps/www/src/config/descriptions.ts +++ b/apps/www/src/config/descriptions.ts @@ -94,7 +94,7 @@ export const descriptions: Record = { [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_DELETE]: 'Remove the current block if empty when pressing delete forward', [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.', From 1b734e560bb16ac5544d9288ade0305734a98123 Mon Sep 17 00:00:00 2001 From: Nageen Chand Date: Tue, 10 Oct 2023 21:25:42 +0530 Subject: [PATCH 17/18] changes based on PR review --- apps/www/src/config/descriptions.ts | 3 ++- packages/select/src/createDeletePlugin.ts | 6 +++++- packages/select/src/withDelete.ts | 2 +- .../src/lib/plate/plate-plugins.ts | 1 - 4 files changed, 8 insertions(+), 4 deletions(-) diff --git a/apps/www/src/config/descriptions.ts b/apps/www/src/config/descriptions.ts index a9e5adce3b..44fc4ea073 100644 --- a/apps/www/src/config/descriptions.ts +++ b/apps/www/src/config/descriptions.ts @@ -94,7 +94,8 @@ export const descriptions: Record = { [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 forward', + [KEY_DELETE]: + 'Remove the current block if empty when pressing delete forward', [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.', diff --git a/packages/select/src/createDeletePlugin.ts b/packages/select/src/createDeletePlugin.ts index ba166d1334..7168d104a6 100644 --- a/packages/select/src/createDeletePlugin.ts +++ b/packages/select/src/createDeletePlugin.ts @@ -1,4 +1,8 @@ -import { createPluginFactory, ELEMENT_DEFAULT, QueryNodeOptions } from '@udecode/plate-common'; +import { + createPluginFactory, + ELEMENT_DEFAULT, + QueryNodeOptions, +} from '@udecode/plate-common'; import { withDelete } from './withDelete'; diff --git a/packages/select/src/withDelete.ts b/packages/select/src/withDelete.ts index fe37cd1c71..00fe1e48ee 100644 --- a/packages/select/src/withDelete.ts +++ b/packages/select/src/withDelete.ts @@ -24,7 +24,7 @@ export const withDelete = < const { deleteForward } = editor; editor.deleteForward = (unit) => { if (!editor.selection) return; - const isValidNode = queryNode(getAboveNode(editor), query); + const isValidNode = !query || queryNode(getAboveNode(editor), query); if ( !isSelectionExpanded(editor) && isBlockAboveEmpty(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 index bb25b4920f..f386d5ac0d 100644 --- a/templates/plate-playground-template/src/lib/plate/plate-plugins.ts +++ b/templates/plate-playground-template/src/lib/plate/plate-plugins.ts @@ -154,7 +154,6 @@ 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], From 33f41299f5f36aefa8f184b614cff229dc01fa17 Mon Sep 17 00:00:00 2001 From: Nageen Chand Date: Tue, 10 Oct 2023 22:04:06 +0530 Subject: [PATCH 18/18] update enabled key for delete plugin in playground --- apps/www/src/registry/default/example/playground-demo.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/www/src/registry/default/example/playground-demo.tsx b/apps/www/src/registry/default/example/playground-demo.tsx index b9ae56dda1..e5a1074dd0 100644 --- a/apps/www/src/registry/default/example/playground-demo.tsx +++ b/apps/www/src/registry/default/example/playground-demo.tsx @@ -220,7 +220,7 @@ export const usePlaygroundPlugins = ({ enabled: !!enabled.selectOnBackspace, }), createDeletePlugin({ - enabled: !!enabled.createDeletePlugin, + enabled: !!enabled.delete, }), createSingleLinePlugin({ enabled: id === 'singleline' || !!enabled.singleLine,