!!! TASK: Update to CKEditor5 12.X

If you did use the following statement in your custom UI plugin, this change is breaking, as UpcastConverters and DowncastConverters is not exported anymore: `import {UpcastConverters, DowncastConverters} from 'ckeditor5-exports'` *Background:* CKEditor5 12.x removed this API as explained in their [Upgrade Guide in section "Conversion helpers"](ckeditor/ckeditor5#1582) *How to fix:* Use the new API as described in the upgrade guide of CKEditor5. *Severity*: Running a search for this on GitHub just shows very few public packages affected - so this should be safe for most users.
neos · Jun 15, 2019 · 5f11dd0 · 5f11dd0
1 parent caddee4
commit 5f11dd0
Show file tree

Hide file tree

Showing 8 changed files with 785 additions and 208 deletions.
diff --git a/package.json b/package.json
@@ -90,16 +90,16 @@
     "webpack-merge": "^4.2.1"
   },
   "dependencies": {
-    "@ckeditor/ckeditor5-alignment": "^10.0.3",
-    "@ckeditor/ckeditor5-basic-styles": "^10.0.3",
-    "@ckeditor/ckeditor5-editor-decoupled": "^11.0.1",
-    "@ckeditor/ckeditor5-engine": "^11.0",
-    "@ckeditor/ckeditor5-essentials": "^10.1.2",
-    "@ckeditor/ckeditor5-heading": "^10.1.0",
-    "@ckeditor/ckeditor5-link": "^10.0.4",
-    "@ckeditor/ckeditor5-list": "^11.0.2",
-    "@ckeditor/ckeditor5-paragraph": "^10.0.3",
-    "@ckeditor/ckeditor5-table": "^11.0.0",
+    "@ckeditor/ckeditor5-alignment": "^11.1.1",
+    "@ckeditor/ckeditor5-basic-styles": "^11.1.1",
+    "@ckeditor/ckeditor5-editor-decoupled": "^12.1.1",
+    "@ckeditor/ckeditor5-engine": "^13.1.1",
+    "@ckeditor/ckeditor5-essentials": "^11.0.2",
+    "@ckeditor/ckeditor5-heading": "^11.0.2",
+    "@ckeditor/ckeditor5-link": "^11.0.2",
+    "@ckeditor/ckeditor5-list": "^12.0.2",
+    "@ckeditor/ckeditor5-paragraph": "^11.0.2",
+    "@ckeditor/ckeditor5-table": "^13.0.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.18",
     "@fortawesome/free-brands-svg-icons": "^5.8.0",
     "@fortawesome/free-regular-svg-icons": "^5.8.0",

diff --git a/packages/build-essentials/package.json b/packages/build-essentials/package.json
@@ -20,7 +20,7 @@
     "@neos-project/babel-preset-neos-ui": "2.5.0"
   },
   "dependencies": {
-    "@ckeditor/ckeditor5-dev-utils": "^9.0",
+    "@ckeditor/ckeditor5-dev-utils": "^12.0.1",
     "babel-core": "^6.13.2",
     "babel-eslint": "^7.1.1",
     "babel-loader": "^7.1.2",

diff --git a/packages/neos-ui-ckeditor5-bindings/package.json b/packages/neos-ui-ckeditor5-bindings/package.json
@@ -10,15 +10,15 @@
     "@neos-project/jest-preset-neos-ui": "2.5.0"
   },
   "dependencies": {
-    "@ckeditor/ckeditor5-alignment": "^10.0.3",
-    "@ckeditor/ckeditor5-basic-styles": "^10.0.3",
-    "@ckeditor/ckeditor5-editor-decoupled": "^11.0.1",
-    "@ckeditor/ckeditor5-essentials": "^10.1.2",
-    "@ckeditor/ckeditor5-heading": "^10.1.0",
-    "@ckeditor/ckeditor5-link": "^10.0.4",
-    "@ckeditor/ckeditor5-list": "^11.0.2",
-    "@ckeditor/ckeditor5-paragraph": "^10.0.3",
-    "@ckeditor/ckeditor5-table": "^11.0",
+    "@ckeditor/ckeditor5-alignment": "^11.1.1",
+    "@ckeditor/ckeditor5-basic-styles": "^11.1.1",
+    "@ckeditor/ckeditor5-editor-decoupled": "^12.1.1",
+    "@ckeditor/ckeditor5-essentials": "^11.0.2",
+    "@ckeditor/ckeditor5-heading": "^11.0.2",
+    "@ckeditor/ckeditor5-link": "^11.0.2",
+    "@ckeditor/ckeditor5-list": "^12.0.2",
+    "@ckeditor/ckeditor5-paragraph": "^11.0.2",
+    "@ckeditor/ckeditor5-table": "^13.0.0",
     "@neos-project/neos-ui-backend-connector": "2.5.0",
     "@neos-project/neos-ui-decorators": "2.5.0",
     "@neos-project/neos-ui-extensibility": "2.5.0",

diff --git a/packages/neos-ui-ckeditor5-bindings/src/plugins/linkAttributeCommand.js b/packages/neos-ui-ckeditor5-bindings/src/plugins/linkAttributeCommand.js
@@ -27,15 +27,15 @@ export default class LinkAttributeCommand extends Command {
         model.change(writer => {
             if (toggleMode && !value) {
                 const rangesToUnset = selection.isCollapsed ?
-                    [findLinkRange(selection.getFirstPosition(), selection.getAttribute('linkHref'))] : selection.getRanges();
+                    [findLinkRange(selection.getFirstPosition(), selection.getAttribute('linkHref'), model)] : selection.getRanges();
                 for (const range of rangesToUnset) {
                     writer.removeAttribute(this.attributeKey, range);
                 }
             } else if (selection.isCollapsed) {
                 const position = selection.getFirstPosition();
 
                 if (selection.hasAttribute('linkHref')) {
-                    const linkRange = findLinkRange(selection.getFirstPosition(), selection.getAttribute('linkHref'));
+                    const linkRange = findLinkRange(selection.getFirstPosition(), selection.getAttribute('linkHref'), model);
                     if (value === false) {
                         writer.removeAttribute(this.attributeKey, linkRange);
                     } else {

diff --git a/packages/neos-ui-ckeditor5-bindings/src/plugins/linkTitle.js b/packages/neos-ui-ckeditor5-bindings/src/plugins/linkTitle.js
@@ -1,28 +1,28 @@
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import LinkAttributeCommand from './linkAttributeCommand';
-import {downcastAttributeToElement} from '@ckeditor/ckeditor5-engine/src/conversion/downcast-converters';
-import {upcastElementToAttribute} from '@ckeditor/ckeditor5-engine/src/conversion/upcast-converters';
 
 const TITLE = 'linkTitle';
 
 export default class LinkTitle extends Plugin {
     static get pluginName() {
         return 'LinkTitle';
     }
+
     init() {
         const editor = this.editor;
         editor.model.schema.extend('$text', {allowAttributes: TITLE});
-        editor.conversion.for('downcast').add(downcastAttributeToElement({
+
+        editor.conversion.for('downcast').attributeToElement({
             model: TITLE,
             view: (title, writer) => {
                 // the priority has got to be the same as here so the elements would get merged:
                 // https://github.com/ckeditor/ckeditor5-link/blob/20e96361014fd13bfb93620f5eb5f528e6b1fe6d/src/utils.js#L33
                 const linkElement = writer.createAttributeElement('a', {title}, {priority: 5});
                 return linkElement;
             }
-        }));
+        });
         editor.conversion.for('upcast')
-            .add(upcastElementToAttribute({
+            .elementToAttribute({
                 view: {
                     name: 'a',
                     attributes: {
@@ -33,7 +33,7 @@ export default class LinkTitle extends Plugin {
                     key: TITLE,
                     value: viewElement => viewElement.getAttribute('title')
                 }
-            }));
+            });
         editor.commands.add(TITLE, new LinkAttributeCommand(this.editor, TITLE));
     }
 }
diff --git a/packages/neos-ui-ckeditor5-bindings/src/plugins/neosPlaceholder.js b/packages/neos-ui-ckeditor5-bindings/src/plugins/neosPlaceholder.js
@@ -38,15 +38,19 @@ export default class NeosPlaceholder extends Plugin {
     }
 
     addPlaceholder() {
-        this.editor.sourceElement.dataset.neosPlaceholder = this.getPlaceholder();
+        this.editor.editing.view.change(writer => {
+            writer.setAttribute('data-neos-placeholder', this.getPlaceholder(), this.editor.editing.view.document.getRoot());
+        });
     }
 
     removePlaceholder() {
-        delete this.editor.sourceElement.dataset.neosPlaceholder;
+        this.editor.editing.view.change(writer => {
+            writer.removeAttribute('data-neos-placeholder', this.editor.editing.view.document.getRoot());
+        });
     }
 
     updatePlaceholder() {
-        if (htmlIsEmptyish(this.editor.getData()) && !this.editor.ui.focusTracker.isFocused) {
+        if (htmlIsEmptyish(this.editor.getData({trim: 'none'})) && !this.editor.ui.focusTracker.isFocused) {
             this.addPlaceholder();
         } else {
             this.removePlaceholder();

diff --git a/packages/neos-ui/src/apiExposureMap.js b/packages/neos-ui/src/apiExposureMap.js
@@ -68,10 +68,7 @@ import ViewUIElement from '@ckeditor/ckeditor5-engine/src/view/uielement.js';
 import View from '@ckeditor/ckeditor5-engine/src/view/view.js';
 import DownCastWriter from '@ckeditor/ckeditor5-engine/src/view/downcastwriter';
 
-import * as UpcastConverters from '@ckeditor/ckeditor5-engine/src/conversion/upcast-converters';
-import * as DowncastConverters from '@ckeditor/ckeditor5-engine/src/conversion/downcast-converters';
-
-const CkEditor5 = {Plugin, Command, UpcastConverters, DowncastConverters, ModelDocument, ModelDocumentFragment, ModelDocumentSelection, ModelElement, ModelNode, ModelNodeList, ModelPosition, ModelRange, ModelSchema, ModelSelection, ModelText, ModelTextProxy, ModelTreeWalker, ModelWriter, ViewAttributeElement, ViewContainerElement, ViewDocument, ViewDocumentFragment, ViewDocumentSelection, ViewDOMConverter, ViewEditableElement, ViewElement, ViewEmptyElement, ViewFiller, ViewMatcher, ViewNode, ViewPlaceholder, ViewPosition, ViewRange, ViewRenderer, ViewSelection, ViewText, ViewTextProxy, ViewTreeWalker, ViewUIElement, View, DownCastWriter};
+const CkEditor5 = {Plugin, Command, ModelDocument, ModelDocumentFragment, ModelDocumentSelection, ModelElement, ModelNode, ModelNodeList, ModelPosition, ModelRange, ModelSchema, ModelSelection, ModelText, ModelTextProxy, ModelTreeWalker, ModelWriter, ViewAttributeElement, ViewContainerElement, ViewDocument, ViewDocumentFragment, ViewDocumentSelection, ViewDOMConverter, ViewEditableElement, ViewElement, ViewEmptyElement, ViewFiller, ViewMatcher, ViewNode, ViewPlaceholder, ViewPosition, ViewRange, ViewRenderer, ViewSelection, ViewText, ViewTextProxy, ViewTreeWalker, ViewUIElement, View, DownCastWriter};
 
 export default {
     '@vendor': () => ({