fix: placeholder when overflowing now wraps (#2291)

Author: matthewlipski

packages/core/src/editor/Block.css

@@ -41,7 +41,6 @@ BASIC STYLES
 }
 
 .bn-inline-content {
-  width: 100%;
   /* Ensure pre-wrap even when a parent node view wrapper (e.g. tiptap's
      NodeViewWrapper) resets white-space to "normal". Without this, browsers
      normalize trailing spaces to NBSP on input, which causes ProseMirror to
@@ -552,15 +551,13 @@ NESTED BLOCKS
 }
 
 /* PLACEHOLDERS*/
-.bn-inline-content:has(> .ProseMirror-trailingBreak:only-child):before {
-  /*float: left; */
-  pointer-events: none;
-  height: 0;
-  /* width: 0; */
-  position: absolute;
+.bn-block-content:has(.ProseMirror-trailingBreak:only-child):after {
   font-style: italic;
+  /* Removes text cursor offset. */
+  margin-inline: -2px;
+  pointer-events: none;
+  max-width: 100%;
 }
-/* TODO: should this be here? */
 
 /* TEXT COLORS */
 [data-style-type="textColor"][data-value="gray"],

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

@@ -41,7 +41,7 @@ export const PlaceholderExtension = createExtension(
             const styleSheet = styleEl.sheet!;
 
             const getSelector = (additionalSelectors = "") =>
-              `.${uniqueEditorSelector} .bn-block-content${additionalSelectors} .bn-inline-content:has(> .ProseMirror-trailingBreak:only-child):before`;
+              `.${uniqueEditorSelector} .bn-block-content${additionalSelectors}:has(.ProseMirror-trailingBreak:only-child):after`;
 
             try {
               // FIXME: the names "default" and "emptyDocument" are hardcoded

packages/react/src/editor/styles.css

@@ -120,7 +120,7 @@
 }
 
 /* Placeholder styling */
-.bn-inline-content:has(> .ProseMirror-trailingBreak):before {
+.bn-block-content:has(.ProseMirror-trailingBreak:only-child):after {
   color: var(--bn-colors-side-menu);
 }