fix(core): implement deleteCurrentNode command & fix node joining on …

…Delete key (#3192)

* fix(core): 🐛 fix delete on empty nodes joining next node incorrectly

This PR implements a "deleteCurrentNode" action in combination with registering this command inside the keymap for the delete key. This way, we editor will check, if the current node is empty before joining - if the current node is empty, the node will be removed. Joining will still work if the current node is not empty and the selection is at the end of the current node

2924

* refactor(core): ♻️ remove unnecessary return on handleDelete keymap

packages/core/src/commands/deleteCurrentNode.ts

@@ -0,0 +1,41 @@
+import { RawCommands } from '../types'
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    deleteCurrentNode: {
+      /**
+       * Delete the node that currently has the selection anchor.
+       */
+      deleteCurrentNode: () => ReturnType,
+    }
+  }
+}
+
+export const deleteCurrentNode: RawCommands['deleteCurrentNode'] = () => ({ tr, dispatch }) => {
+  const { selection } = tr
+  const currentNode = selection.$anchor.node()
+
+  // if there is content inside the current node, break out of this command
+  if (currentNode.content.size > 0) {
+    return false
+  }
+
+  const $pos = tr.selection.$anchor
+
+  for (let depth = $pos.depth; depth > 0; depth -= 1) {
+    const node = $pos.node(depth)
+
+    if (node.type === currentNode.type) {
+      if (dispatch) {
+        const from = $pos.before(depth)
+        const to = $pos.after(depth)
+
+        tr.delete(from, to).scrollIntoView()
+      }
+
+      return true
+    }
+  }
+
+  return false
+}

packages/core/src/commands/index.ts

@@ -3,6 +3,7 @@ export * from './clearContent'
 export * from './clearNodes'
 export * from './command'
 export * from './createParagraphNear'
+export * from './deleteCurrentNode'
 export * from './deleteNode'
 export * from './deleteRange'
 export * from './deleteSelection'

packages/core/src/extensions/keymap.ts

@@ -37,6 +37,7 @@ export const Keymap = Extension.create({
 
     const handleDelete = () => this.editor.commands.first(({ commands }) => [
       () => commands.deleteSelection(),
+      () => commands.deleteCurrentNode(),
       () => commands.joinForward(),
       () => commands.selectNodeForward(),
     ])

packages/core/src/types.ts

@@ -252,3 +252,5 @@ export type TextSerializer = (props: {
 export type ExtendedRegExpMatchArray = RegExpMatchArray & {
   data?: Record<string, any>,
 }
+
+export type Dispatch = ((args?: any) => any) | undefined