From 8893bccc4d0dcf26291673d46aed5c5ab01fd3c7 Mon Sep 17 00:00:00 2001
From: Matthew Lipski <matthewlipski@gmail.com>
Date: Wed, 29 Nov 2023 21:37:24 +0100
Subject: [PATCH 1/4] Fixed parsing error for styles/inline content where `dom`
 was the same as `contentDOM`

---
 .../fontSize/basic/external.html              |  2 +-
 .../fontSize/basic/internal.html              |  2 +-
 .../__snapshots__/mention/basic/external.html |  2 +-
 .../__snapshots__/small/basic/external.html   |  2 +-
 .../Blocks/api/inlineContent/createSpec.ts    | 19 ++++++++++++++-----
 .../Blocks/api/styles/createSpec.ts           | 10 +++++++++-
 6 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/packages/core/src/api/exporters/html/__snapshots__/fontSize/basic/external.html b/packages/core/src/api/exporters/html/__snapshots__/fontSize/basic/external.html
index 49b9ce6858..bc3cb38f5c 100644
--- a/packages/core/src/api/exporters/html/__snapshots__/fontSize/basic/external.html
+++ b/packages/core/src/api/exporters/html/__snapshots__/fontSize/basic/external.html
@@ -1 +1 @@
-<p class="bn-inline-content"><span style="font-size: 18px" class="bn-style" data-style-type="fontSize" data-value="18px">This is text with a custom fontSize</span></p>
\ No newline at end of file
+<p class="bn-inline-content"><span style="font-size: 18px" data-style-type="fontSize" data-value="18px" data-editable="">This is text with a custom fontSize</span></p>
\ No newline at end of file
diff --git a/packages/core/src/api/exporters/html/__snapshots__/fontSize/basic/internal.html b/packages/core/src/api/exporters/html/__snapshots__/fontSize/basic/internal.html
index 3fe864246c..717b1ad7d4 100644
--- a/packages/core/src/api/exporters/html/__snapshots__/fontSize/basic/internal.html
+++ b/packages/core/src/api/exporters/html/__snapshots__/fontSize/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"><span style="font-size: 18px" class="bn-style" data-style-type="fontSize" data-value="18px">This is text with a custom fontSize</span></p></div></div></div></div>
\ No newline at end of file
+<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"><span style="font-size: 18px" data-style-type="fontSize" data-value="18px" data-editable="">This is text with a custom fontSize</span></p></div></div></div></div>
\ No newline at end of file
diff --git a/packages/core/src/api/exporters/html/__snapshots__/mention/basic/external.html b/packages/core/src/api/exporters/html/__snapshots__/mention/basic/external.html
index 2e6f533ca1..dbec651469 100644
--- a/packages/core/src/api/exporters/html/__snapshots__/mention/basic/external.html
+++ b/packages/core/src/api/exporters/html/__snapshots__/mention/basic/external.html
@@ -1 +1 @@
-<p class="bn-inline-content">I enjoy working with<span class="bn-inline-content-section" data-inline-content-type="mention" data-user="Matthew">@Matthew</span></p>
\ No newline at end of file
+<p class="bn-inline-content">I enjoy working with<span data-inline-content-type="mention" data-user="Matthew">@Matthew</span></p>
\ No newline at end of file
diff --git a/packages/core/src/api/exporters/html/__snapshots__/small/basic/external.html b/packages/core/src/api/exporters/html/__snapshots__/small/basic/external.html
index 35c3d5c232..50ef98b2ce 100644
--- a/packages/core/src/api/exporters/html/__snapshots__/small/basic/external.html
+++ b/packages/core/src/api/exporters/html/__snapshots__/small/basic/external.html
@@ -1 +1 @@
-<p class="bn-inline-content"><small class="bn-style" data-style-type="small">This is a small text</small></p>
\ No newline at end of file
+<p class="bn-inline-content"><small data-style-type="small" data-editable="">This is a small text</small></p>
\ No newline at end of file
diff --git a/packages/core/src/extensions/Blocks/api/inlineContent/createSpec.ts b/packages/core/src/extensions/Blocks/api/inlineContent/createSpec.ts
index 7408ab81bc..ca2989c899 100644
--- a/packages/core/src/extensions/Blocks/api/inlineContent/createSpec.ts
+++ b/packages/core/src/extensions/Blocks/api/inlineContent/createSpec.ts
@@ -49,7 +49,15 @@ export function getInlineContentParseRules(
   return [
     {
       tag: `[data-inline-content-type="${config.type}"]`,
-      contentElement: "[data-editable]",
+      contentElement: (element) => {
+        const htmlElement = element as HTMLElement;
+
+        if (htmlElement.matches("[data-editable]")) {
+          return htmlElement;
+        }
+
+        return htmlElement.querySelector("[data-editable]") || htmlElement;
+      },
     },
   ];
 }
@@ -65,10 +73,11 @@ export function createInlineContentSpec<
     name: inlineContentConfig.type,
     inline: true,
     group: "inline",
-    content:
-      inlineContentConfig.content === "styled"
-        ? "inline*"
-        : ("inline" as T["content"] extends "styled" ? "inline*" : "inline"),
+    selectable: inlineContentConfig.content === "styled",
+    atom: inlineContentConfig.content === "none",
+    content: (inlineContentConfig.content === "styled"
+      ? "inline*"
+      : "") as T["content"] extends "styled" ? "inline*" : "",
 
     addAttributes() {
       return propsToAttributes(inlineContentConfig.propSchema);
diff --git a/packages/core/src/extensions/Blocks/api/styles/createSpec.ts b/packages/core/src/extensions/Blocks/api/styles/createSpec.ts
index 5f69980656..49015a30df 100644
--- a/packages/core/src/extensions/Blocks/api/styles/createSpec.ts
+++ b/packages/core/src/extensions/Blocks/api/styles/createSpec.ts
@@ -26,7 +26,15 @@ export function getStyleParseRules(config: StyleConfig): ParseRule[] {
   return [
     {
       tag: `[data-style-type="${config.type}"]`,
-      contentElement: "[data-editable]",
+      contentElement: (element) => {
+        const htmlElement = element as HTMLElement;
+
+        if (htmlElement.matches("[data-editable]")) {
+          return htmlElement;
+        }
+
+        return htmlElement.querySelector("[data-editable]") || htmlElement;
+      },
     },
   ];
 }

From 3b92e0df59ca06929afd2f9bcf3d4bd0e0056843 Mon Sep 17 00:00:00 2001
From: Matthew Lipski <matthewlipski@gmail.com>
Date: Wed, 29 Nov 2023 22:13:26 +0100
Subject: [PATCH 2/4] Updated react snapshots

---
 .../react/src/test/__snapshots__/fontSize/basic/external.html   | 2 +-
 .../react/src/test/__snapshots__/fontSize/basic/internal.html   | 2 +-
 .../react/src/test/__snapshots__/mention/basic/external.html    | 2 +-
 .../react/src/test/__snapshots__/mention/basic/internal.html    | 2 +-
 .../test/__snapshots__/reactCustomParagraph/basic/internal.html | 2 +-
 .../__snapshots__/reactCustomParagraph/nested/internal.html     | 2 +-
 .../__snapshots__/reactCustomParagraph/styled/internal.html     | 2 +-
 .../simpleReactCustomParagraph/basic/external.html              | 2 +-
 .../simpleReactCustomParagraph/basic/internal.html              | 2 +-
 .../simpleReactCustomParagraph/nested/external.html             | 2 +-
 .../simpleReactCustomParagraph/nested/internal.html             | 2 +-
 .../simpleReactCustomParagraph/styled/external.html             | 2 +-
 .../simpleReactCustomParagraph/styled/internal.html             | 2 +-
 packages/react/src/test/__snapshots__/small/basic/external.html | 2 +-
 packages/react/src/test/__snapshots__/small/basic/internal.html | 2 +-
 packages/react/src/test/__snapshots__/tag/basic/external.html   | 2 +-
 packages/react/src/test/__snapshots__/tag/basic/internal.html   | 2 +-
 17 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/packages/react/src/test/__snapshots__/fontSize/basic/external.html b/packages/react/src/test/__snapshots__/fontSize/basic/external.html
index 6c8910692f..0271307b91 100644
--- a/packages/react/src/test/__snapshots__/fontSize/basic/external.html
+++ b/packages/react/src/test/__snapshots__/fontSize/basic/external.html
@@ -1 +1 @@
-<p class="bn-inline-content"><span style="font-size: 18px;" class="bn-style" data-style-type="fontSize" data-value="18px">This is text with a custom fontSize</span></p>
\ No newline at end of file
+<p class="bn-inline-content"><span style="font-size: 18px;" data-style-type="fontSize" data-value="18px" data-editable="">This is text with a custom fontSize</span></p>
\ No newline at end of file
diff --git a/packages/react/src/test/__snapshots__/fontSize/basic/internal.html b/packages/react/src/test/__snapshots__/fontSize/basic/internal.html
index 998d9bcf8b..4b0f00259b 100644
--- a/packages/react/src/test/__snapshots__/fontSize/basic/internal.html
+++ b/packages/react/src/test/__snapshots__/fontSize/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"><span style="font-size: 18px;" class="bn-style" data-style-type="fontSize" data-value="18px">This is text with a custom fontSize</span></p></div></div></div></div>
\ No newline at end of file
+<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"><span style="font-size: 18px;" data-style-type="fontSize" data-value="18px" data-editable="">This is text with a custom fontSize</span></p></div></div></div></div>
\ No newline at end of file
diff --git a/packages/react/src/test/__snapshots__/mention/basic/external.html b/packages/react/src/test/__snapshots__/mention/basic/external.html
index 2e6f533ca1..dbec651469 100644
--- a/packages/react/src/test/__snapshots__/mention/basic/external.html
+++ b/packages/react/src/test/__snapshots__/mention/basic/external.html
@@ -1 +1 @@
-<p class="bn-inline-content">I enjoy working with<span class="bn-inline-content-section" data-inline-content-type="mention" data-user="Matthew">@Matthew</span></p>
\ No newline at end of file
+<p class="bn-inline-content">I enjoy working with<span data-inline-content-type="mention" data-user="Matthew">@Matthew</span></p>
\ No newline at end of file
diff --git a/packages/react/src/test/__snapshots__/mention/basic/internal.html b/packages/react/src/test/__snapshots__/mention/basic/internal.html
index 6ca7d81c2c..3e00d69a9c 100644
--- a/packages/react/src/test/__snapshots__/mention/basic/internal.html
+++ b/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 class="bn-inline-content-section" data-inline-content-type="mention" data-user="Matthew">@Matthew</span></p></div></div></div></div>
\ No newline at end of file
+<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>
\ No newline at end of file
diff --git a/packages/react/src/test/__snapshots__/reactCustomParagraph/basic/internal.html b/packages/react/src/test/__snapshots__/reactCustomParagraph/basic/internal.html
index edde3826ef..c9e89afa27 100644
--- a/packages/react/src/test/__snapshots__/reactCustomParagraph/basic/internal.html
+++ b/packages/react/src/test/__snapshots__/reactCustomParagraph/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="reactCustomParagraph" data-node-view-wrapper="" style="white-space: normal;"><p class="react-custom-paragraph">React Custom Paragraph</p></div></div></div></div>
\ No newline at end of file
+<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="reactCustomParagraph" data-node-view-wrapper="" style="white-space: normal;"><p class="react-custom-paragraph" data-editable="">React Custom Paragraph</p></div></div></div></div>
\ No newline at end of file
diff --git a/packages/react/src/test/__snapshots__/reactCustomParagraph/nested/internal.html b/packages/react/src/test/__snapshots__/reactCustomParagraph/nested/internal.html
index faec73f053..a1c64daac7 100644
--- a/packages/react/src/test/__snapshots__/reactCustomParagraph/nested/internal.html
+++ b/packages/react/src/test/__snapshots__/reactCustomParagraph/nested/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="reactCustomParagraph" data-node-view-wrapper="" style="white-space: normal;"><p class="react-custom-paragraph">React Custom Paragraph</p></div><div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="2"><div class="bn-block" data-node-type="blockContainer" data-id="2"><div class="bn-block-content" data-content-type="reactCustomParagraph" data-node-view-wrapper="" style="white-space: normal;"><p class="react-custom-paragraph">Nested React Custom Paragraph 1</p></div></div></div><div class="bn-block-outer" data-node-type="blockOuter" data-id="3"><div class="bn-block" data-node-type="blockContainer" data-id="3"><div class="bn-block-content" data-content-type="reactCustomParagraph" data-node-view-wrapper="" style="white-space: normal;"><p class="react-custom-paragraph">Nested React Custom Paragraph 2</p></div></div></div></div></div></div></div>
\ No newline at end of file
+<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="reactCustomParagraph" data-node-view-wrapper="" style="white-space: normal;"><p class="react-custom-paragraph" data-editable="">React Custom Paragraph</p></div><div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="2"><div class="bn-block" data-node-type="blockContainer" data-id="2"><div class="bn-block-content" data-content-type="reactCustomParagraph" data-node-view-wrapper="" style="white-space: normal;"><p class="react-custom-paragraph" data-editable="">Nested React Custom Paragraph 1</p></div></div></div><div class="bn-block-outer" data-node-type="blockOuter" data-id="3"><div class="bn-block" data-node-type="blockContainer" data-id="3"><div class="bn-block-content" data-content-type="reactCustomParagraph" data-node-view-wrapper="" style="white-space: normal;"><p class="react-custom-paragraph" data-editable="">Nested React Custom Paragraph 2</p></div></div></div></div></div></div></div>
\ No newline at end of file
diff --git a/packages/react/src/test/__snapshots__/reactCustomParagraph/styled/internal.html b/packages/react/src/test/__snapshots__/reactCustomParagraph/styled/internal.html
index dd2e249332..eebeaab1cb 100644
--- a/packages/react/src/test/__snapshots__/reactCustomParagraph/styled/internal.html
+++ b/packages/react/src/test/__snapshots__/reactCustomParagraph/styled/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" data-text-color="orange" data-background-color="pink"><div class="bn-block" data-node-type="blockContainer" data-id="1" data-text-color="orange" data-background-color="pink"><div class="bn-block-content" data-content-type="reactCustomParagraph" data-text-alignment="center" data-node-view-wrapper="" style="white-space: normal;"><p class="react-custom-paragraph">Plain <span data-text-color="red">Red Text </span><span data-background-color="blue">Blue Background </span><span data-text-color="red"><span data-background-color="blue">Mixed Colors</span></span></p></div></div></div></div>
\ No newline at end of file
+<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1" data-text-color="orange" data-background-color="pink"><div class="bn-block" data-node-type="blockContainer" data-id="1" data-text-color="orange" data-background-color="pink"><div class="bn-block-content" data-content-type="reactCustomParagraph" data-text-alignment="center" data-node-view-wrapper="" style="white-space: normal;"><p class="react-custom-paragraph" data-editable="">Plain <span data-text-color="red">Red Text </span><span data-background-color="blue">Blue Background </span><span data-text-color="red"><span data-background-color="blue">Mixed Colors</span></span></p></div></div></div></div>
\ No newline at end of file
diff --git a/packages/react/src/test/__snapshots__/simpleReactCustomParagraph/basic/external.html b/packages/react/src/test/__snapshots__/simpleReactCustomParagraph/basic/external.html
index a12e18e1e3..e60c23faa1 100644
--- a/packages/react/src/test/__snapshots__/simpleReactCustomParagraph/basic/external.html
+++ b/packages/react/src/test/__snapshots__/simpleReactCustomParagraph/basic/external.html
@@ -1 +1 @@
-<p class="simple-react-custom-paragraph">React Custom Paragraph</p>
\ No newline at end of file
+<p class="simple-react-custom-paragraph" data-editable="">React Custom Paragraph</p>
\ No newline at end of file
diff --git a/packages/react/src/test/__snapshots__/simpleReactCustomParagraph/basic/internal.html b/packages/react/src/test/__snapshots__/simpleReactCustomParagraph/basic/internal.html
index ef4a1496c0..10e606f71a 100644
--- a/packages/react/src/test/__snapshots__/simpleReactCustomParagraph/basic/internal.html
+++ b/packages/react/src/test/__snapshots__/simpleReactCustomParagraph/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="simpleReactCustomParagraph" data-node-view-wrapper="" style="white-space: normal;"><p class="simple-react-custom-paragraph">React Custom Paragraph</p></div></div></div></div>
\ No newline at end of file
+<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="simpleReactCustomParagraph" data-node-view-wrapper="" style="white-space: normal;"><p class="simple-react-custom-paragraph" data-editable="">React Custom Paragraph</p></div></div></div></div>
\ No newline at end of file
diff --git a/packages/react/src/test/__snapshots__/simpleReactCustomParagraph/nested/external.html b/packages/react/src/test/__snapshots__/simpleReactCustomParagraph/nested/external.html
index f34364cb2a..a8354335ca 100644
--- a/packages/react/src/test/__snapshots__/simpleReactCustomParagraph/nested/external.html
+++ b/packages/react/src/test/__snapshots__/simpleReactCustomParagraph/nested/external.html
@@ -1 +1 @@
-<p class="simple-react-custom-paragraph">Custom React Paragraph</p><p class="simple-react-custom-paragraph">Nested React Custom Paragraph 1</p><p class="simple-react-custom-paragraph">Nested React Custom Paragraph 2</p>
\ No newline at end of file
+<p class="simple-react-custom-paragraph" data-editable="">Custom React Paragraph</p><p class="simple-react-custom-paragraph" data-editable="">Nested React Custom Paragraph 1</p><p class="simple-react-custom-paragraph" data-editable="">Nested React Custom Paragraph 2</p>
\ No newline at end of file
diff --git a/packages/react/src/test/__snapshots__/simpleReactCustomParagraph/nested/internal.html b/packages/react/src/test/__snapshots__/simpleReactCustomParagraph/nested/internal.html
index b036c67a6d..17437945b5 100644
--- a/packages/react/src/test/__snapshots__/simpleReactCustomParagraph/nested/internal.html
+++ b/packages/react/src/test/__snapshots__/simpleReactCustomParagraph/nested/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="simpleReactCustomParagraph" data-node-view-wrapper="" style="white-space: normal;"><p class="simple-react-custom-paragraph">Custom React Paragraph</p></div><div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="2"><div class="bn-block" data-node-type="blockContainer" data-id="2"><div class="bn-block-content" data-content-type="simpleReactCustomParagraph" data-node-view-wrapper="" style="white-space: normal;"><p class="simple-react-custom-paragraph">Nested React Custom Paragraph 1</p></div></div></div><div class="bn-block-outer" data-node-type="blockOuter" data-id="3"><div class="bn-block" data-node-type="blockContainer" data-id="3"><div class="bn-block-content" data-content-type="simpleReactCustomParagraph" data-node-view-wrapper="" style="white-space: normal;"><p class="simple-react-custom-paragraph">Nested React Custom Paragraph 2</p></div></div></div></div></div></div></div>
\ No newline at end of file
+<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="simpleReactCustomParagraph" data-node-view-wrapper="" style="white-space: normal;"><p class="simple-react-custom-paragraph" data-editable="">Custom React Paragraph</p></div><div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="2"><div class="bn-block" data-node-type="blockContainer" data-id="2"><div class="bn-block-content" data-content-type="simpleReactCustomParagraph" data-node-view-wrapper="" style="white-space: normal;"><p class="simple-react-custom-paragraph" data-editable="">Nested React Custom Paragraph 1</p></div></div></div><div class="bn-block-outer" data-node-type="blockOuter" data-id="3"><div class="bn-block" data-node-type="blockContainer" data-id="3"><div class="bn-block-content" data-content-type="simpleReactCustomParagraph" data-node-view-wrapper="" style="white-space: normal;"><p class="simple-react-custom-paragraph" data-editable="">Nested React Custom Paragraph 2</p></div></div></div></div></div></div></div>
\ No newline at end of file
diff --git a/packages/react/src/test/__snapshots__/simpleReactCustomParagraph/styled/external.html b/packages/react/src/test/__snapshots__/simpleReactCustomParagraph/styled/external.html
index df6c3a0e11..970057fffe 100644
--- a/packages/react/src/test/__snapshots__/simpleReactCustomParagraph/styled/external.html
+++ b/packages/react/src/test/__snapshots__/simpleReactCustomParagraph/styled/external.html
@@ -1 +1 @@
-<p class="simple-react-custom-paragraph">Plain <span data-text-color="red">Red Text </span><span data-background-color="blue">Blue Background </span><span data-text-color="red"><span data-background-color="blue">Mixed Colors</span></span></p>
\ No newline at end of file
+<p class="simple-react-custom-paragraph" data-editable="">Plain <span data-text-color="red">Red Text </span><span data-background-color="blue">Blue Background </span><span data-text-color="red"><span data-background-color="blue">Mixed Colors</span></span></p>
\ No newline at end of file
diff --git a/packages/react/src/test/__snapshots__/simpleReactCustomParagraph/styled/internal.html b/packages/react/src/test/__snapshots__/simpleReactCustomParagraph/styled/internal.html
index fdc04d2f52..4d9598bcca 100644
--- a/packages/react/src/test/__snapshots__/simpleReactCustomParagraph/styled/internal.html
+++ b/packages/react/src/test/__snapshots__/simpleReactCustomParagraph/styled/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" data-text-color="orange" data-background-color="pink"><div class="bn-block" data-node-type="blockContainer" data-id="1" data-text-color="orange" data-background-color="pink"><div class="bn-block-content" data-content-type="simpleReactCustomParagraph" data-text-alignment="center" data-node-view-wrapper="" style="white-space: normal;"><p class="simple-react-custom-paragraph">Plain <span data-text-color="red">Red Text </span><span data-background-color="blue">Blue Background </span><span data-text-color="red"><span data-background-color="blue">Mixed Colors</span></span></p></div></div></div></div>
\ No newline at end of file
+<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1" data-text-color="orange" data-background-color="pink"><div class="bn-block" data-node-type="blockContainer" data-id="1" data-text-color="orange" data-background-color="pink"><div class="bn-block-content" data-content-type="simpleReactCustomParagraph" data-text-alignment="center" data-node-view-wrapper="" style="white-space: normal;"><p class="simple-react-custom-paragraph" data-editable="">Plain <span data-text-color="red">Red Text </span><span data-background-color="blue">Blue Background </span><span data-text-color="red"><span data-background-color="blue">Mixed Colors</span></span></p></div></div></div></div>
\ No newline at end of file
diff --git a/packages/react/src/test/__snapshots__/small/basic/external.html b/packages/react/src/test/__snapshots__/small/basic/external.html
index 35c3d5c232..50ef98b2ce 100644
--- a/packages/react/src/test/__snapshots__/small/basic/external.html
+++ b/packages/react/src/test/__snapshots__/small/basic/external.html
@@ -1 +1 @@
-<p class="bn-inline-content"><small class="bn-style" data-style-type="small">This is a small text</small></p>
\ No newline at end of file
+<p class="bn-inline-content"><small data-style-type="small" data-editable="">This is a small text</small></p>
\ No newline at end of file
diff --git a/packages/react/src/test/__snapshots__/small/basic/internal.html b/packages/react/src/test/__snapshots__/small/basic/internal.html
index 73836f647d..2c4b0446df 100644
--- a/packages/react/src/test/__snapshots__/small/basic/internal.html
+++ b/packages/react/src/test/__snapshots__/small/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"><small class="bn-style" data-style-type="small">This is a small text</small></p></div></div></div></div>
\ No newline at end of file
+<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"><small data-style-type="small" data-editable="">This is a small text</small></p></div></div></div></div>
\ No newline at end of file
diff --git a/packages/react/src/test/__snapshots__/tag/basic/external.html b/packages/react/src/test/__snapshots__/tag/basic/external.html
index b8387e9a55..c243b63eb2 100644
--- a/packages/react/src/test/__snapshots__/tag/basic/external.html
+++ b/packages/react/src/test/__snapshots__/tag/basic/external.html
@@ -1 +1 @@
-<p class="bn-inline-content">I love <span class="bn-inline-content-section" data-inline-content-type="tag">#<span>BlockNote</span></span></p>
\ No newline at end of file
+<p class="bn-inline-content">I love <span data-inline-content-type="tag">#<span data-editable="">BlockNote</span></span></p>
\ No newline at end of file
diff --git a/packages/react/src/test/__snapshots__/tag/basic/internal.html b/packages/react/src/test/__snapshots__/tag/basic/internal.html
index bac28633b0..dcb80c2f33 100644
--- a/packages/react/src/test/__snapshots__/tag/basic/internal.html
+++ b/packages/react/src/test/__snapshots__/tag/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 love <span class="bn-inline-content-section" data-inline-content-type="tag">#<span>BlockNote</span></span></p></div></div></div></div>
\ No newline at end of file
+<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 love <span data-inline-content-type="tag">#<span data-editable="">BlockNote</span></span></p></div></div></div></div>
\ No newline at end of file

From 0dc29087c8dc9c5780f332b4cf4ba177d315b88b Mon Sep 17 00:00:00 2001
From: Matthew Lipski <matthewlipski@gmail.com>
Date: Thu, 30 Nov 2023 23:18:29 +0100
Subject: [PATCH 3/4] Blocked backspace at start of custom editable inline
 content

---
 .../Blocks/api/inlineContent/createSpec.ts    |  5 ++++
 .../Blocks/api/inlineContent/internal.ts      | 23 ++++++++++++++++++-
 packages/react/src/ReactInlineContentSpec.tsx |  5 ++++
 3 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/packages/core/src/extensions/Blocks/api/inlineContent/createSpec.ts b/packages/core/src/extensions/Blocks/api/inlineContent/createSpec.ts
index ca2989c899..3528f080fb 100644
--- a/packages/core/src/extensions/Blocks/api/inlineContent/createSpec.ts
+++ b/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);
     },
diff --git a/packages/core/src/extensions/Blocks/api/inlineContent/internal.ts b/packages/core/src/extensions/Blocks/api/inlineContent/internal.ts
index 01f70125c3..83910155ca 100644
--- a/packages/core/src/extensions/Blocks/api/inlineContent/internal.ts
+++ b/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 {
+  CustomInlineContentConfig,
   InlineContentConfig,
   InlineContentImplementation,
   InlineContentSchemaFromSpecs,
@@ -45,6 +46,26 @@ export function addInlineContentAttributes<
   return element;
 }
 
+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>(
diff --git a/packages/react/src/ReactInlineContentSpec.tsx b/packages/react/src/ReactInlineContentSpec.tsx
index 1a6fb38d0e..e5a40056c4 100644
--- a/packages/react/src/ReactInlineContentSpec.tsx
+++ b/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);
     },

From e1874d066e289ae24ef12462903db6c6af2a47ec Mon Sep 17 00:00:00 2001
From: yousefed <yousefdardiry@gmail.com>
Date: Fri, 1 Dec 2023 10:30:01 +0100
Subject: [PATCH 4/4] add comment

---
 .../core/src/extensions/Blocks/api/inlineContent/internal.ts   | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/core/src/extensions/Blocks/api/inlineContent/internal.ts b/packages/core/src/extensions/Blocks/api/inlineContent/internal.ts
index 83910155ca..1e0106f520 100644
--- a/packages/core/src/extensions/Blocks/api/inlineContent/internal.ts
+++ b/packages/core/src/extensions/Blocks/api/inlineContent/internal.ts
@@ -1,6 +1,6 @@
 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,
@@ -46,6 +46,7 @@ export function addInlineContentAttributes<
   return element;
 }
 
+// see https://github.com/TypeCellOS/BlockNote/pull/435
 export function addInlineContentKeyboardShortcuts<
   T extends CustomInlineContentConfig
 >(