BUGFIX: Render table dropdowns with correct icons

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

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import {$get} from 'plow-js';
 
 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';
@@ -40,12 +41,13 @@ export default class TableDropDownButton extends PureComponent {
     }
 
     render() {
+        const iconDataUri = svgToDataUri(ckeIcons[this.props.icon]);
         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/utils-helpers/src/index.ts

@@ -10,6 +10,7 @@ import isEmail from './isEmail';
 import {isUri} from './isUri';
 import isEqualSet from './isEqualSet';
 import isNil from './isNil';
+import svgToDataUri from './svgToDataUri';
 
 export {
     delay,
@@ -23,6 +24,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;