Rich Text: Add missing keep placeholder on focus prop. (#17439)

* Rich Text: Add missing keep placeholder on focus prop.

* Use text cursor for the placeholder

* Turns out the cursor prop is not needed if the pointer-events prop is on the span instead of on the pseudo element

packages/block-editor/src/components/rich-text/index.js

@@ -336,6 +336,7 @@ class RichTextWrapper extends Component {
 			didAutomaticChange,
 			undo,
 			placeholder,
+			keepPlaceholderOnFocus,
 			// eslint-disable-next-line no-unused-vars
 			allowedFormats,
 			withoutInteractiveFormatting,
@@ -383,7 +384,10 @@ class RichTextWrapper extends Component {
 				selectionEnd={ selectionEnd }
 				onSelectionChange={ onSelectionChange }
 				tagName={ tagName }
-				className={ classnames( classes, className, { 'is-selected': originalIsSelected } ) }
+				className={ classnames( classes, className, {
+					'is-selected': originalIsSelected,
+					'keep-placeholder-on-focus': keepPlaceholderOnFocus,
+				} ) }
 				placeholder={ placeholder }
 				allowedFormats={ adjustedAllowedFormats }
 				withoutInteractiveFormatting={ withoutInteractiveFormatting }

packages/block-editor/src/components/rich-text/style.scss

@@ -34,16 +34,19 @@
 		}
 	}
 
+	[data-rich-text-placeholder] {
+		pointer-events: none;
+	}
+
 	[data-rich-text-placeholder]::after {
 		content: attr(data-rich-text-placeholder);
-		pointer-events: none;
 		// Use opacity to work in various editor styles.
 		// We don't specify the color here, because blocks or editor styles might provide their own.
 		opacity: 0.62;
 	}
 
 	// Could be unset for individual rich text instances.
-	&.is-selected [data-rich-text-placeholder]::after {
+	&.is-selected:not(.keep-placeholder-on-focus) [data-rich-text-placeholder]::after {
 		display: none;
 	}
 }