DRAFT: Test CKEditor update with testcafe 3.7.1 RC

package.json

@@ -9,8 +9,7 @@
     "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",
-    "@ckeditor/ckeditor5-engine@^16.0.0": "patch:@ckeditor/ckeditor5-engine@npm:16.0.0#./patches/@ckeditor-ckeditor5-engine-npm-16.0.0-placeholder.patch"
+    "[email protected]": "patch:react-codemirror2@npm:7.2.1#./patches/react-codemirror2-npm-7.2.1-browserified.patch"
   },
   "scripts": {
     "lint": "tsc --noemit && stylelint 'packages/*/src/**/*.css' && yarn eslint 'packages/*/src/**/*.{js,jsx,ts,tsx}'",

packages/neos-ui-ckeditor5-bindings/package.json

@@ -5,20 +5,20 @@
   "private": true,
   "main": "./src/manifest.js",
   "dependencies": {
-    "@ckeditor/ckeditor5-alignment": "^16.0.0",
-    "@ckeditor/ckeditor5-basic-styles": "^16.0.0",
-    "@ckeditor/ckeditor5-core": "^16.0.0",
-    "@ckeditor/ckeditor5-editor-decoupled": "^16.0.0",
-    "@ckeditor/ckeditor5-engine": "^16.0.0",
-    "@ckeditor/ckeditor5-essentials": "^16.0.0",
-    "@ckeditor/ckeditor5-heading": "^16.0.0",
-    "@ckeditor/ckeditor5-link": "^16.0.0",
-    "@ckeditor/ckeditor5-list": "^16.0.0",
-    "@ckeditor/ckeditor5-paragraph": "^16.0.0",
-    "@ckeditor/ckeditor5-remove-format": "^16.0.0",
-    "@ckeditor/ckeditor5-table": "^16.0.0",
-    "@ckeditor/ckeditor5-utils": "^16.0.0",
-    "@ckeditor/ckeditor5-widget": "^16.0.0",
+    "@ckeditor/ckeditor5-alignment": "^44.0.0",
+    "@ckeditor/ckeditor5-basic-styles": "^44.0.0",
+    "@ckeditor/ckeditor5-core": "^44.0.0",
+    "@ckeditor/ckeditor5-editor-decoupled": "^44.0.0",
+    "@ckeditor/ckeditor5-engine": "^44.0.0",
+    "@ckeditor/ckeditor5-essentials": "^44.0.0",
+    "@ckeditor/ckeditor5-heading": "^44.0.0",
+    "@ckeditor/ckeditor5-link": "^44.0.0",
+    "@ckeditor/ckeditor5-list": "^44.0.0",
+    "@ckeditor/ckeditor5-paragraph": "^44.0.0",
+    "@ckeditor/ckeditor5-remove-format": "^44.0.0",
+    "@ckeditor/ckeditor5-table": "^44.0.0",
+    "@ckeditor/ckeditor5-utils": "^44.0.0",
+    "@ckeditor/ckeditor5-widget": "^44.0.0",
     "@neos-project/neos-ui-decorators": "workspace:*",
     "@neos-project/neos-ui-editors": "workspace:*",
     "@neos-project/neos-ui-extensibility": "workspace:*",

packages/neos-ui-ckeditor5-bindings/src/EditorToolbar/TableDropDown.js

@@ -3,6 +3,7 @@ import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
 
 import {neos} from '@neos-project/neos-ui-decorators';
+import {svgToDataUri} from '@neos-project/utils-helpers';
 import ckeIcons from './icons';
 
 import style from './TableDropDown.module.css';
@@ -39,12 +40,14 @@ export default class TableDropDownButton extends PureComponent {
     }
 
     render() {
+        const iconDataUri = svgToDataUri(ckeIcons[this.props.icon]);
+        console.log({iconDataUri});
         return (
             <DropDown
                 padded={false}
             >
                 <DropDown.Header title={this.props.i18nRegistry.translate(this.props.tooltip)}>
-                    <img style={{verticalAlign: 'text-top'}} src={ckeIcons[this.props.icon]} alt={this.props.i18nRegistry.translate(this.props.tooltip)} />
+                    <img style={{verticalAlign: 'text-top'}} src={iconDataUri} alt={this.props.i18nRegistry.translate(this.props.tooltip)} />
                 </DropDown.Header>
                 <DropDown.Contents className={style.contents} scrollable={false}>
                     {this.props.options.map(item => item.type === 'checkBox' ? (

packages/neos-ui-ckeditor5-bindings/src/EditorToolbar/TableStyles.vanilla-css

@@ -163,3 +163,10 @@
     font-weight:700;
     background:#fafafa
 }
+
+/* The type around buttons has been added in CKEditor and has been not implemented yet in
+the neos-ui. We maybe also don't need it at the moment.
+*/
+.ck .ck-widget .ck-widget__type-around__button {
+    display: none;
+}

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

@@ -3,6 +3,7 @@ import DecoupledEditor from '@ckeditor/ckeditor5-editor-decoupled/src/decouplede
 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 './cke-overwrites.vanilla-css';
 import './placeholder.vanilla-css';
 
 let currentEditor = null;

packages/neos-ui-ckeditor5-bindings/src/cke-overwrites.vanilla-css

@@ -0,0 +1,13 @@
+/**
+* Overwriting CKEditor 5 styles for the general rendering in the Neos UI
+*/
+
+/* hides buggy powered-by logo (credits on https://www.neos.io via "Editor Tools") */
+.ck-powered-by-balloon {
+    display: none;
+}
+
+/* hides bar below neos ui */
+.ck-aria-live-announcer {
+    display: none;
+}

packages/neos-ui-ckeditor5-bindings/src/manifest.config.js

@@ -97,7 +97,8 @@ export default ckEditorRegistry => {
             ...ckEditorConfiguration,
             // stripTags, because we allow `<p>Edit text here</p>` as placeholder for legacy
             placeholder: placeholder ? stripTags(i18nRegistry.translate(placeholder)) : undefined,
-            language: String(userPreferences?.interfaceLanguage)
+            language: String(userPreferences?.interfaceLanguage),
+            licenseKey: 'GPL'
         };
     });
 

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

@@ -1,4 +1,4 @@
-.ck.ck-placeholder:after, .ck .ck-placeholder {
+.ck.ck-placeholder:after {
     display: inline-flex;
 }
 

packages/neos-ui-ckeditor5-bindings/src/plugins/insideTable.js

@@ -1,11 +1,10 @@
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import Command from '@ckeditor/ckeditor5-core/src/command';
-import {findAncestor} from '@ckeditor/ckeditor5-table/src/commands/utils';
 
 class InsideTableCommand extends Command {
     refresh() {
         const {selection} = this.editor.model.document;
-        const tableParent = findAncestor('table', selection.getFirstPosition());
+        const tableParent = selection.getFirstPosition().findAncestor('table');
         this.value = Boolean(tableParent);
     }
 

packages/neos-ui-ckeditor5-bindings/src/plugins/linkAttributeCommand.js

@@ -1,5 +1,5 @@
 import Command from '@ckeditor/ckeditor5-core/src/command';
-import findLinkRange from '@ckeditor/ckeditor5-link/src/findlinkrange';
+import {findAttributeRange} from '@ckeditor/ckeditor5-typing';
 import toMap from '@ckeditor/ckeditor5-utils/src/tomap';
 
 export default class LinkAttributeCommand extends Command {
@@ -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'), model)] : selection.getRanges();
+                    [findAttributeRange(selection.getFirstPosition(), 'linkHref', 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'), model);
+                    const linkRange = findAttributeRange(selection.getFirstPosition(), 'linkHref', selection.getAttribute('linkHref'), model);
                     if (value === false) {
                         writer.removeAttribute(this.attributeKey, linkRange);
                     } else {

packages/neos-ui/package.json

@@ -11,7 +11,7 @@
     "typescript": "^4.6.4"
   },
   "dependencies": {
-    "@ckeditor/ckeditor5-highlight": "16.0.0",
+    "@ckeditor/ckeditor5-highlight": "^44.0.0",
     "@fortawesome/fontawesome-svg-core": "^6.5.2",
     "@fortawesome/free-brands-svg-icons": "^6.5.2",
     "@fortawesome/free-regular-svg-icons": "^6.5.2",

packages/utils-helpers/src/index.ts

@@ -8,6 +8,7 @@ import isEmail from './isEmail';
 import {isUri} from './isUri';
 import isEqualSet from './isEqualSet';
 import isNil from './isNil';
+import svgToDataUri from './svgToDataUri';
 
 export {
     decodeHtml,
@@ -19,6 +20,7 @@ export {
     isEqualSet,
     stripTags,
     stripTagsEncoded,
+    svgToDataUri,
     cancelIdleCallback,
     requestIdleCallback
 };

packages/utils-helpers/src/svgToDataUri.ts

@@ -0,0 +1,47 @@
+const REGEX = {
+    whitespace: /\s+/g,
+    urlHexPairs: /%[\dA-F]{2}/g,
+    quotes: /"/g
+};
+
+// Function to collapse whitespace in a string
+const collapseWhitespace = (str: string): string =>
+    str.trim().replace(REGEX.whitespace, ' ');
+
+// Function to encode data for a URI payload
+const dataURIPayload = (string: string): string =>
+    encodeURIComponent(string).replace(REGEX.urlHexPairs, specialHexEncode);
+
+// Function to handle special hex encoding
+const specialHexEncode = (match: string): string => {
+    switch (match) {
+        case '%20':
+            return ' ';
+        case '%3D':
+            return '=';
+        case '%3A':
+            return ':';
+        case '%2F':
+            return '/';
+        default:
+            return match.toLowerCase(); // Compresses better
+    }
+};
+
+// Function to convert an SVG string to a tiny data URI
+const svgToDataUri = (svgString: string): string => {
+    // Strip the Byte-Order Mark if the SVG has one
+    if (svgString.charCodeAt(0) === 0xfeff) {
+        svgString = svgString.slice(1);
+    }
+
+    const body = collapseWhitespace(svgString);
+    return `data:image/svg+xml,${dataURIPayload(body)}`;
+};
+
+// Add a static method to handle srcset conversions
+svgToDataUri.toSrcset = (svgString: string): string =>
+    svgToDataUri(svgString).replace(/ /g, '%20');
+
+// Export the function as the default export
+export default svgToDataUri;