Block backspace key event at start of custom editable inline content

packages/core/src/api/exporters/html/__snapshots__/mention/basic/external.html

@@ -1 +1 @@
-<p class="bn-inline-content">I enjoy working with <span data-inline-content-type="mention" data-user="Matthew">@Matthew</span></p>
+<p class="bn-inline-content">I enjoy working with <span data-inline-content-type="mention" data-user="Matthew">@Matthew</span></p>

packages/core/src/extensions/Blocks/api/inlineContent/createSpec.ts

@@ -6,6 +6,7 @@ import { Props } from "../blocks/types";
 import { StyleSchema } from "../styles/types";
 import {
   addInlineContentAttributes,
+  addInlineContentKeyboardShortcuts,
   createInlineContentSpecFromTipTapNode,
 } from "./internal";
 import {
@@ -83,6 +84,10 @@ export function createInlineContentSpec<
       return propsToAttributes(inlineContentConfig.propSchema);
     },
 
+    addKeyboardShortcuts() {
+      return addInlineContentKeyboardShortcuts(inlineContentConfig);
+    },
+
     parseHTML() {
       return getInlineContentParseRules(inlineContentConfig);
     },

packages/core/src/extensions/Blocks/api/inlineContent/internal.ts

@@ -1,7 +1,8 @@
-import { Node } from "@tiptap/core";
+import { KeyboardShortcutCommand, Node } from "@tiptap/core";
 import { camelToDataKebab } from "../blocks/internal";
-import { Props, PropSchema } from "../blocks/types";
+import { PropSchema, Props } from "../blocks/types";
 import {
+  CustomInlineContentConfig,
   InlineContentConfig,
   InlineContentImplementation,
   InlineContentSchemaFromSpecs,
@@ -45,6 +46,27 @@ export function addInlineContentAttributes<
   return element;
 }
 
+// see https://github.com/TypeCellOS/BlockNote/pull/435
+export function addInlineContentKeyboardShortcuts<
+  T extends CustomInlineContentConfig
+>(
+  config: T
+): {
+  [p: string]: KeyboardShortcutCommand;
+} {
+  return {
+    Backspace: ({ editor }) => {
+      const resolvedPos = editor.state.selection.$from;
+
+      return (
+        editor.state.selection.empty &&
+        resolvedPos.node().type.name === config.type &&
+        resolvedPos.parentOffset === 0
+      );
+    },
+  };
+}
+
 // This helper function helps to instantiate a InlineContentSpec with a
 // config and implementation that conform to the type of Config
 export function createInternalInlineContentSpec<T extends InlineContentConfig>(

packages/react/src/ReactInlineContentSpec.tsx

@@ -1,5 +1,6 @@
 import {
   addInlineContentAttributes,
+  addInlineContentKeyboardShortcuts,
   camelToDataKebab,
   createInternalInlineContentSpec,
   createStronglyTypedTiptapNode,
@@ -100,6 +101,10 @@ export function createReactInlineContentSpec<
       return propsToAttributes(inlineContentConfig.propSchema);
     },
 
+    addKeyboardShortcuts() {
+      return addInlineContentKeyboardShortcuts(inlineContentConfig);
+    },
+
     parseHTML() {
       return getInlineContentParseRules(inlineContentConfig);
     },

packages/react/src/test/__snapshots__/mention/basic/external.html

@@ -1 +1 @@
-<p class="bn-inline-content">I enjoy working with <span data-inline-content-type="mention" data-user="Matthew">@Matthew</span></p>
+<p class="bn-inline-content">I enjoy working with <span data-inline-content-type="mention" data-user="Matthew">@Matthew</span></p>

packages/react/src/test/__snapshots__/mention/basic/internal.html

@@ -1 +1 @@
-<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="paragraph"><p class="bn-inline-content">I enjoy working with <span data-inline-content-type="mention" data-user="Matthew">@Matthew</span></p></div></div></div></div>
+<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="paragraph"><p class="bn-inline-content">I enjoy working with <span data-inline-content-type="mention" data-user="Matthew">@Matthew</span></p></div></div></div></div>