diff --git a/packages/neos-ui-ckeditor5-bindings/src/EditorToolbar/TableDropDown.js b/packages/neos-ui-ckeditor5-bindings/src/EditorToolbar/TableDropDown.js index 8a22a87873..74f99cec8b 100644 --- a/packages/neos-ui-ckeditor5-bindings/src/EditorToolbar/TableDropDown.js +++ b/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 ( - {this.props.i18nRegistry.translate(this.props.tooltip)} + {this.props.i18nRegistry.translate(this.props.tooltip)} {this.props.options.map(item => item.type === 'checkBox' ? ( diff --git a/packages/utils-helpers/src/index.ts b/packages/utils-helpers/src/index.ts index ba97471a21..dda8382540 100644 --- a/packages/utils-helpers/src/index.ts +++ b/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 }; diff --git a/packages/utils-helpers/src/svgToDataUri.spec.js b/packages/utils-helpers/src/svgToDataUri.spec.js new file mode 100644 index 0000000000..662040a8eb --- /dev/null +++ b/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 = ``; + const base64Content = 'PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9ImJsdWUiLz48L3N2Zz4='; + const dataUri = svgToDataUri(svgContent); + expect(dataUri).toBe(`data:image/svg+xml;base64,${base64Content}`); + }); + + it('should handle special characters correctly', () => { + const svgContent = `Héllo, Wörld!`; + 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('
Not an SVG
')).not.toThrow(); + }); +}); diff --git a/packages/utils-helpers/src/svgToDataUri.ts b/packages/utils-helpers/src/svgToDataUri.ts new file mode 100644 index 0000000000..de56ffa1cd --- /dev/null +++ b/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;