BUGFIX: Restore old Placeholder behavior to keep shown when focused

package.json

@@ -9,7 +9,8 @@
     "moment": "^2.20.1",
     "vfile-message": "^2.0.2",
     "[email protected]": "patch:isemail@npm:3.2.0#./patches/isemail-npm-3.2.0-browserified.patch",
-    "[email protected]": "patch:react-codemirror2@npm:7.2.1#./patches/react-codemirror2-npm-7.2.1-browserified.patch"
+    "[email protected]": "patch:react-codemirror2@npm:7.2.1#./patches/react-codemirror2-npm-7.2.1-browserified.patch",
+    "@ckeditor/ckeditor5-engine@^16.0.0": "patch:@ckeditor/ckeditor5-engine@npm:16.0.0#./patches/@ckeditor-ckeditor5-engine-npm-16.0.0-placeholder.patch"
   },
   "scripts": {
     "lint": "tsc --noemit && stylelint 'packages/*/src/**/*.css' && yarn eslint 'packages/*/src/**/*.{js,jsx,ts,tsx}'",

packages/neos-ui-ckeditor5-bindings/src/ckEditorApi.js

@@ -2,6 +2,7 @@ import debounce from 'lodash.debounce';
 import DecoupledEditor from '@ckeditor/ckeditor5-editor-decoupled/src/decouplededitor';
 import {actions} from '@neos-project/neos-ui-redux-store';
 import {cleanupContentBeforeCommit} from './cleanupContentBeforeCommit'
+// FIXME import from @ckeditor/ckeditor5-engine/theme/placeholder.css instead! (Needs build setup configuration)
 import './placeholder.vanilla-css';
 
 let currentEditor = null;

packages/neos-ui-ckeditor5-bindings/src/placeholder.vanilla-css

@@ -1,8 +1,17 @@
-.ck.ck-placeholder:before, .ck .ck-placeholder:before {
-    content: attr(data-placeholder);
+.ck.ck-placeholder:after, .ck .ck-placeholder {
+    display: inline-flex;
+}
 
-    /* See ckeditor/ckeditor5#469. */
-    pointer-events: none;
+.ck .ck-placeholder br[data-cke-filler="true"] {
+    display: none;
+}
 
+.ck.ck-placeholder:after, .ck .ck-placeholder:after {
+    content: attr(data-placeholder);
+    pointer-events: none;
     color: #999;
 }
+
+.ck.ck-read-only .ck-placeholder:after {
+    display: none;
+}

patches/@ckeditor-ckeditor5-engine-npm-16.0.0-placeholder.patch

@@ -0,0 +1,22 @@
+diff --git a/src/view/placeholder.js b/src/view/placeholder.js
+index ec83640d4f7d12d8278c921a3c641917543ca859..09e96933b392f38d079ac3126ead49690e408228 100755
+--- a/src/view/placeholder.js
++++ b/src/view/placeholder.js
+@@ -155,16 +155,7 @@ export function needsPlaceholder( element ) {
+ 	const isEmptyish = !Array.from( element.getChildren() )
+ 		.some( element => !element.is( 'uiElement' ) );
+
+-	// If the element is empty and the document is blurred.
+-	if ( !doc.isFocused && isEmptyish ) {
+-		return true;
+-	}
+-
+-	const viewSelection = doc.selection;
+-	const selectionAnchor = viewSelection.anchor;
+-
+-	// If document is focused and the element is empty but the selection is not anchored inside it.
+-	if ( isEmptyish && selectionAnchor && selectionAnchor.parent !== element ) {
++	if ( isEmptyish ) {
+ 		return true;
+ 	}
+

yarn.lock

@@ -2037,7 +2037,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@ckeditor/ckeditor5-engine@npm:^16.0.0":
+"@ckeditor/ckeditor5-engine@npm:16.0.0":
   version: 16.0.0
   resolution: "@ckeditor/ckeditor5-engine@npm:16.0.0"
   dependencies:
@@ -2047,6 +2047,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@ckeditor/ckeditor5-engine@patch:@ckeditor/ckeditor5-engine@npm:16.0.0#./patches/@ckeditor-ckeditor5-engine-npm-16.0.0-placeholder.patch::locator=root-workspace-0b6124%40workspace%3A.":
+  version: 16.0.0
+  resolution: "@ckeditor/ckeditor5-engine@patch:@ckeditor/ckeditor5-engine@npm%3A16.0.0#./patches/@ckeditor-ckeditor5-engine-npm-16.0.0-placeholder.patch::version=16.0.0&hash=582e01&locator=root-workspace-0b6124%40workspace%3A."
+  dependencies:
+    "@ckeditor/ckeditor5-utils": ^16.0.0
+    lodash-es: ^4.17.10
+  checksum: 0ca241d6d28da9d7104c943d9ff2bf88591eb2e2726189029c3c43f8d59f726a10decc2aeb21db95a7e0242a4fc37fc480270869ca5a2f7d5db381107a385e38
+  languageName: node
+  linkType: hard
+
 "@ckeditor/ckeditor5-enter@npm:^16.0.0":
   version: 16.0.0
   resolution: "@ckeditor/ckeditor5-enter@npm:16.0.0"