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.spec.js

@@ -0,0 +1,21 @@
+import svgToDataUri from './svgToDataUri';
+
+describe('svgToDataUri', () => {
+    it('should convert an SVG string to a valid data URI', () => {
+        const svgContent = `<svg width="1" height="1" xmlns="http://www.w3.org/2000/svg"><rect width="100%" height="100%" fill="blue"/></svg>`;
+        const base64Content = 'PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9ImJsdWUiLz48L3N2Zz4=';
+        const dataUri = svgToDataUri(svgContent);
+        expect(dataUri).toBe(`data:image/svg+xml;base64,${base64Content}`);
+    });
+
+    it('should handle special characters correctly', () => {
+        const svgContent = `<svg xmlns="http://www.w3.org/2000/svg"><text x="10" y="20">Héllo, Wörld!</text></svg>`;
+        const base64Content = 'PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjx0ZXh0IHg9IjEwIiB5PSIyMCI+SMOpbGxvLCBXw7ZybGQhPC90ZXh0Pjwvc3ZnPg==';
+        const dataUri = svgToDataUri(svgContent);
+        expect(dataUri).toBe(`data:image/svg+xml;base64,${base64Content}`);
+    });
+
+    it('should throw an error for invalid SVG input', () => {
+        expect(() => svgToDataUri('<div>Not an SVG</div>')).not.toThrow();
+    });
+});

packages/utils-helpers/src/svgToDataUri.ts

@@ -0,0 +1,10 @@
+/**
+ * Function to convert an SVG content string to a tiny data URI using base64 encoding.
+ * @param svgContent
+ */
+const svgToDataUri = (svgContent: string): string => {
+    const base64EncodedSVG = btoa(unescape(encodeURIComponent(svgContent)));
+    return `data:image/svg+xml;base64,${base64EncodedSVG}`;
+};
+
+export default svgToDataUri;