fix: Custom inline content placeholder bug and enter handling (#784)

* Fixed custom inline content placeholder bug and enter handling

* Improved code clarity

Author: matthewlipski

packages/core/src/blocks/ListItemBlockContent/ListItemKeyboardShortcuts.ts

@@ -2,7 +2,7 @@ import { Editor } from "@tiptap/core";
 import { getBlockInfoFromPos } from "../../api/getBlockInfoFromPos";
 
 export const handleEnter = (editor: Editor) => {
-  const { node, contentType } = getBlockInfoFromPos(
+  const { contentNode, contentType } = getBlockInfoFromPos(
     editor.state.doc,
     editor.state.selection.from
   )!;
@@ -23,9 +23,9 @@ export const handleEnter = (editor: Editor) => {
 
   return editor.commands.first(({ state, chain, commands }) => [
     () =>
-      // Changes list item block to a text block if the content is empty.
+      // Changes list item block to a paragraph block if the content is empty.
       commands.command(() => {
-        if (node.textContent.length === 0) {
+        if (contentNode.childCount === 0) {
           return commands.BNUpdateBlock(state.selection.from, {
             type: "paragraph",
             props: {},
@@ -36,10 +36,10 @@ export const handleEnter = (editor: Editor) => {
       }),
 
     () =>
-      // Splits the current block, moving content inside that's after the cursor to a new block of the same type
-      // below.
+      // Splits the current block, moving content inside that's after the cursor
+      // to a new block of the same type below.
       commands.command(() => {
-        if (node.textContent.length > 0) {
+        if (contentNode.childCount > 0) {
           chain()
             .deleteSelection()
             .BNSplitBlock(state.selection.from, true)

packages/core/src/blocks/ParagraphBlockContent/ParagraphBlockContent.ts

@@ -4,7 +4,6 @@ import {
 } from "../../schema";
 import { createDefaultBlockDOMOutputSpec } from "../defaultBlockHelpers";
 import { defaultProps } from "../defaultProps";
-import { handleEnter } from "../ListItemBlockContent/ListItemKeyboardShortcuts";
 import { getCurrentBlockContentType } from "../../api/getCurrentBlockContentType";
 
 export const paragraphPropSchema = {
@@ -18,7 +17,6 @@ export const ParagraphBlockContent = createStronglyTypedTiptapNode({
 
   addKeyboardShortcuts() {
     return {
-      Enter: () => handleEnter(this.editor),
       "Mod-Alt-0": () => {
         if (getCurrentBlockContentType(this.editor) !== "inline*") {
           return true;

packages/core/src/editor/Block.css

@@ -363,7 +363,7 @@ NESTED BLOCKS
 }
 
 /* PLACEHOLDERS*/
-.bn-inline-content:has(> .ProseMirror-trailingBreak):before {
+.bn-inline-content:has(> .ProseMirror-trailingBreak:only-child):before {
   /*float: left; */
   pointer-events: none;
   height: 0;

packages/core/src/extensions/Placeholder/PlaceholderPlugin.ts

@@ -16,7 +16,7 @@ export const PlaceholderPlugin = (
       const styleSheet = styleEl.sheet!;
 
       const getBaseSelector = (additionalSelectors = "") =>
-        `.bn-block-content${additionalSelectors} .bn-inline-content:has(> .ProseMirror-trailingBreak):before`;
+        `.bn-block-content${additionalSelectors} .bn-inline-content:has(> .ProseMirror-trailingBreak:only-child):before`;
 
       const getSelector = (
         blockType: string | "default",

packages/core/src/pm-nodes/BlockContainer.ts

@@ -611,7 +611,7 @@ export const BlockContainer = Node.create<{
         // of the block.
         () =>
           commands.command(({ state }) => {
-            const { node, depth } = getBlockInfoFromPos(
+            const { contentNode, depth } = getBlockInfoFromPos(
               state.doc,
               state.selection.from
             )!;
@@ -620,7 +620,7 @@ export const BlockContainer = Node.create<{
               state.selection.$anchor.parentOffset === 0;
             const selectionEmpty =
               state.selection.anchor === state.selection.head;
-            const blockEmpty = node.textContent.length === 0;
+            const blockEmpty = contentNode.childCount === 0;
             const blockIndented = depth > 2;
 
             if (
@@ -638,7 +638,7 @@ export const BlockContainer = Node.create<{
         // empty & at the start of the block.
         () =>
           commands.command(({ state, chain }) => {
-            const { node, endPos } = getBlockInfoFromPos(
+            const { contentNode, endPos } = getBlockInfoFromPos(
               state.doc,
               state.selection.from
             )!;
@@ -647,7 +647,7 @@ export const BlockContainer = Node.create<{
               state.selection.$anchor.parentOffset === 0;
             const selectionEmpty =
               state.selection.anchor === state.selection.head;
-            const blockEmpty = node.textContent.length === 0;
+            const blockEmpty = contentNode.childCount === 0;
 
             if (selectionAtBlockStart && selectionEmpty && blockEmpty) {
               const newBlockInsertionPos = endPos + 1;
@@ -667,14 +667,14 @@ export const BlockContainer = Node.create<{
         // deletes the selection beforehand, if it's not empty.
         () =>
           commands.command(({ state, chain }) => {
-            const { node } = getBlockInfoFromPos(
+            const { contentNode } = getBlockInfoFromPos(
               state.doc,
               state.selection.from
             )!;
 
             const selectionAtBlockStart =
               state.selection.$anchor.parentOffset === 0;
-            const blockEmpty = node.textContent.length === 0;
+            const blockEmpty = contentNode.childCount === 0;
 
             if (!blockEmpty) {
               chain()