Merge remote-tracking branch 'origin/8.4' into 9.0

# Conflicts:
#	README.md

README.md

@@ -49,7 +49,7 @@ And on Packagist available via: `neos/neos-ui`
 
 ### Updating
 
-```
+```bash
 composer update neos/neos-ui
 ```
 
@@ -59,14 +59,33 @@ For trying out the new UI, we recommend you to run the regularly  released beta
 However, if you want to stay on bleeding-edge, or want to help out developing, you'll
 need the `9.0.x-dev` release. You can install the latest release using:
 
-```
+
+```bash
 composer require neos/neos-ui-compiled:9.0.x-dev neos/neos-ui:9.0.x-dev
 ```
 
 ## Contributing
 
 Please follow the respective guides for contributing on OSX and on Linux.
 
+To start developing the Neos Ui you will need a running Neos instance locally.
+You can use 
+* one of your own, local Neos 8.3 instances,
+* create a new one with `composer create-project neos/neos-base-distribution neos-ui-development-instance`,
+* or use the docker compose setup in this repository (see instructions below).
+
+### Setup Source Files and Git
+To install the source files and setup git, run:
+
+```bash
+composer require neos/neos-ui-compiled:8.4.x-dev neos/neos-ui:8.4.x-dev --prefer-source
+```
+
+This will sync the git repository of Neos Ui into `Packages/Application/Neos.Neos.Ui` (this might take a while).
+To push your changes to GitHub you need to fork the Neos Ui and change the git remote to your fork (check with `git remove -v`).
+
+Run `make setup`. To check what commands are executed have a look at the `Makefile` in the root of this repository.
+
 ### on Windows
 
 1) Ensure you have the relevant version installed (see above).

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;
+}

packages/neos-ui-editors/src/Library/LinkInput.js

@@ -148,6 +148,12 @@ export default class LinkInput extends PureComponent {
     }
 
     handleSearchTermChange = searchTerm => {
+        // trim leading whitespace as it can cause issues
+        // with the further processing
+        if (typeof searchTerm === 'string') {
+            searchTerm = searchTerm.trimStart();
+        }
+
         this.setState({searchTerm});
 
         if (isUriOrInternalLink(searchTerm)) {
@@ -268,9 +274,16 @@ export default class LinkInput extends PureComponent {
     }
 
     handleManualSetLink = () => {
-        this.props.onLinkChange(this.state.searchTerm);
+        let {searchTerm} = this.state;
+        // trim tailing whitespace as it can cause issues
+        if (typeof searchTerm === 'string') {
+            searchTerm = searchTerm.trim();
+            this.setState({searchTerm});
+        }
+
+        this.props.onLinkChange(searchTerm);
         this.setState({
-            isEditMode: !this.state.searchTerm
+            isEditMode: !searchTerm
         });
     }
 

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"