CKEditor Update

Tests/IntegrationTests/Fixtures/1Dimension/createNewNodes.e2e.js

@@ -170,9 +170,14 @@ test('Can create content node from inside InlineUI', async t => {
 
     subSection('Type something inside of it');
     await Page.waitForIframeLoading(t);
+
+    // This is a workaround for the fact that the contenteditable element is not directly selectable
+    // for more information see https://testcafe.io/documentation/402688/reference/test-api/testcontroller/selecteditablecontent
+    const lastEditableElement = Selector('.test-headline [contenteditable="true"]').nth(-1);
     await t
         .switchToIframe(contentIframeSelector)
-        .typeText(Selector('.test-headline h1'), headlineTitle)
+        .selectEditableContent(lastEditableElement, lastEditableElement)
+        .pressKey(headlineTitle.split('').join(' '))
         .expect(Selector('.neos-contentcollection').withText(headlineTitle).exists).ok('Typed headline text exists');
 
     subSection('Inline validation');
@@ -219,12 +224,22 @@ test('Inline CKEditor mode `paragraph: false` works as expected', async t => {
     subSection('Insert text into the inline text and press enter');
 
     await Page.waitForIframeLoading(t);
+
+    // This is a workaround for the fact that the contenteditable element is not directly selectable
+    // for more information see https://testcafe.io/documentation/402688/reference/test-api/testcontroller/selecteditablecontent
+    const editableElement = Selector('.test-inline-headline [contenteditable="true"]');
     await t
         .switchToIframe(contentIframeSelector)
-        .typeText(Selector('.test-inline-headline [contenteditable="true"]'), 'Foo Bar')
-        .click(Selector('.test-inline-headline [contenteditable="true"]'))
+        .selectEditableContent(editableElement, editableElement)
+        .pressKey('F o o')
+        .pressKey('space')
+        .pressKey('B a r')
+        // .typeText(Selector('.test-inline-headline [contenteditable="true"]'), 'Foo Bar')
+        .click(editableElement)
         .pressKey('enter')
-        .typeText(Selector('.test-inline-headline [contenteditable="true"]'), 'Bun Buz')
+        .pressKey('B u n')
+        .pressKey('space')
+        .pressKey('B u z')
         .expect(Selector('.neos-contentcollection').withText('Foo Bar').exists).ok('Inserted text exists');
 
     await t.switchToMainWindow();

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": "^43.3.1",
+    "@ckeditor/ckeditor5-basic-styles": "^43.3.1",
+    "@ckeditor/ckeditor5-core": "^43.3.1",
+    "@ckeditor/ckeditor5-editor-decoupled": "^43.3.1",
+    "@ckeditor/ckeditor5-engine": "^43.3.1",
+    "@ckeditor/ckeditor5-essentials": "^43.3.1",
+    "@ckeditor/ckeditor5-heading": "^43.3.1",
+    "@ckeditor/ckeditor5-link": "^43.3.1",
+    "@ckeditor/ckeditor5-list": "^43.3.1",
+    "@ckeditor/ckeditor5-paragraph": "^43.3.1",
+    "@ckeditor/ckeditor5-remove-format": "^43.3.1",
+    "@ckeditor/ckeditor5-table": "^43.3.1",
+    "@ckeditor/ckeditor5-utils": "^43.3.1",
+    "@ckeditor/ckeditor5-widget": "^43.3.1",
     "@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/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": "^43.3.1",
     "@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;