BUGFIX: Restore old Placeholder behavior to keep shown when focused (#…

…3864)

* BUGFIX: Restore old Placeholder behavior to keep shown when focused

In Neos 7.3.17 and before the placeholder in ckeditor would not disappear when focused. And only when typing. By switching to the native placeholder feature of ckeditor in #3558 we introduced a regression as that implementation would hide the placeholder while just clicking into.
This is especially noticeable for centered texts as the cursor needs one millisecond to adjust and its glitchy.

 This will eventually be fixed in Ckeditor 24 something. As a hotfix for our version 16 i introduce the patch of ckeditor/ckeditor5#8474 (without the css absolute change as that would make centered text uneditable). The mentioned fix was not merged directly into ckeditor but made way more complicated: ckeditor/ckeditor5#8867
 We dont need the more complicated fix as we dont use the mentioned features of the placeholder in a image description and such.

* TASK: Move cursor before the placeholer

* TASK: Hide break in placeholder context

To move the cursor to the first position, the placeholder text is moved backwards. Therefore, a change with a break is disadvantageous.

---------

Co-authored-by: Markus Günther <[email protected]>

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"