@zipify/wysiwyg 1.0.0-dev.4 → 1.0.0-dev.7

package/lib/services/ContentNormalizer.js

@@ -0,0 +1,113 @@
+export class ContentNormalizer {
+    static NORMALIZING_STYLE_BLACKLIST = ['text-align', 'line-height'];
+
+    normalize(content) {
+        if (typeof content !== 'string') return content;
+
+        return this._normalizeTextContent(content);
+    }
+
+    _normalizeTextContent(content) {
+        const parser = new DOMParser();
+        const dom = parser.parseFromString(content, 'text/html');
+
+        this._iterateNodes(dom, this._normalizeStructure.bind(this), (node) => node.tagName === 'SPAN');
+        this._iterateNodes(dom, this._normalizeStyles.bind(this), (node) => node.tagName !== 'SPAN');
+
+        return dom.body.innerHTML;
+    }
+
+    _iterateNodes(dom, handler, condition) {
+        const iterator = dom.createNodeIterator(dom.body, NodeFilter.SHOW_ELEMENT, {
+            acceptNode: (node) => condition(node) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT
+        });
+        let currentNode = iterator.nextNode();
+
+        while (currentNode) {
+            handler(currentNode);
+            currentNode = iterator.nextNode();
+        }
+    }
+
+    _normalizeStructure(element) {
+        const isTextChildren = Array.from(element.childNodes)
+            .every((node) => node.nodeType === Node.TEXT_NODE);
+
+        if (isTextChildren) return;
+
+        const cloned = element.cloneNode(true);
+        const migratingStyles = this._getMigratingStyles(element);
+        const content = [];
+
+        for (const node of cloned.childNodes) {
+            let child = node;
+
+            if (migratingStyles.length) {
+                child = this._wrapTextNode(cloned, node);
+                this._assignElementProperties(child, cloned, migratingStyles);
+            }
+
+            content.push(child);
+        }
+
+        element.replaceWith(...content);
+    }
+
+    _normalizeStyles(element) {
+        const properties = this._getMigratingStyles(element);
+
+        for (const node of element.childNodes) {
+            const child = this._wrapTextNode(element, node);
+
+            this._assignElementProperties(child, element, properties);
+        }
+
+        this._removeStyleProperties(element, properties);
+    }
+
+    _getMigratingStyles(element) {
+        const blacklist = ContentNormalizer.NORMALIZING_STYLE_BLACKLIST;
+        const properties = [];
+
+        for (let index = 0; index < element.style.length; index++) {
+            const property = element.style.item(index);
+
+            if (!blacklist.includes(property)) {
+                properties.push(property);
+            }
+        }
+
+        return properties;
+    }
+
+    _wrapTextNode(parent, node) {
+        if (node.nodeType !== Node.TEXT_NODE) return node;
+
+        const span = document.createElement('span');
+
+        span.append(node.cloneNode());
+        parent.replaceChild(span, node);
+
+        return span;
+    }
+
+    _assignElementProperties(target, source, properties) {
+        for (const property of properties) {
+            if (target.style.getPropertyValue(property)) {
+                continue;
+            }
+
+            target.style.setProperty(property, source.style.getPropertyValue(property));
+        }
+    }
+
+    _removeStyleProperties(element, properties) {
+        for (const property of properties) {
+            element.style.removeProperty(property);
+        }
+
+        if (element.style.length === 0) {
+            element.removeAttribute('style');
+        }
+    }
+}

package/lib/services/Storage.js

@@ -17,19 +17,11 @@ export class Storage {
     }
 
     getItem(key) {
-        const json = this._getItemFromStorage(key);
+        const json = this.accessToStorage((storage) => storage.getItem(this.makeKey(key)));
 
         return JsonSerializer.decode(json);
     }
 
-    removeItem(key) {
-        this.accessToStorage((storage) => storage.removeItem(this.makeKey(key)));
-    }
-
-    hasItem(key) {
-        return !!this._getItemFromStorage(key);
-    }
-
     accessToStorage(action) {
         try {
             return action(this.nativeStorage);
@@ -38,10 +30,6 @@ export class Storage {
         }
     }
 
-    _getItemFromStorage(key) {
-        return this.accessToStorage((storage) => storage.getItem(this.makeKey(key)));
-    }
-
     onPrivateModeEnabled(error) {
         // eslint-disable-next-line no-console
         console.error(error);

package/lib/services/__tests__/ContentNormalizer.test.js

@@ -0,0 +1,41 @@
+import { ContentNormalizer } from '../ContentNormalizer';
+import { NodeFactory } from '../../__tests__/utils';
+
+const normalize = (content) => new ContentNormalizer().normalize(content);
+
+describe('normalize text settings', () => {
+    test('should ignore json content', () => {
+        const content = NodeFactory.doc([NodeFactory.paragraph('Test')]);
+
+        expect(normalize(content)).toBe(content);
+    });
+
+    test('should flat structure', () => {
+        const input = '<p style="text-align: center; color: rgb(255, 255, 255);"><span style="background-color: rgb(255, 0, 0);">lore<span style="color: rgb(0, 0, 0);">m ip</span>sum</span></p>';
+        const output = '<p style="text-align: center;">' +
+            '<span style="background-color: rgb(255, 0, 0); color: rgb(255, 255, 255);">lore</span>' +
+            '<span style="color: rgb(0, 0, 0); background-color: rgb(255, 0, 0);">m ip</span>' +
+            '<span style="background-color: rgb(255, 0, 0); color: rgb(255, 255, 255);">sum</span>' +
+        '</p>';
+
+        expect(normalize(input)).toBe(output);
+    });
+
+    test('should move styles from paragraph to text', () => {
+        const input = '<p style="background-color: red;">lorem ipsum</p>';
+        const output = '<p><span style="background-color: red;">lorem ipsum</span></p>';
+
+        expect(normalize(input)).toBe(output);
+    });
+
+    test('should move styles from paragraph to unstyled text', () => {
+        const input = '<p style="background-color: red;"><span style="background-color: #000;">lorem</span> ipsum <span style="color: white;">one</span></p>';
+        const output = '<p>' +
+            '<span style="background-color: #000;">lorem</span>' +
+            '<span style="background-color: red;"> ipsum </span>' +
+            '<span style="color: white; background-color: red;">one</span' +
+        '></p>';
+
+        expect(normalize(input)).toBe(output);
+    });
+});

package/lib/services/__tests__/FavoriteColors.test.js

@@ -0,0 +1,20 @@
+import { ref } from '@vue/composition-api';
+import { FavoriteColors } from '../FavoriteColors';
+
+function createService({ colors, onUpdate }) {
+    return new FavoriteColors({
+        listRef: ref(colors ?? []),
+        triggerUpdate: onUpdate
+    });
+}
+
+describe('trigger update', () => {
+    test('should trigger colors update', () => {
+        const onUpdate = jest.fn();
+        const service = createService({ onUpdate });
+
+        service.triggerUpdate(['red']);
+
+        expect(onUpdate).toHaveBeenCalledWith(['red']);
+    });
+});

package/lib/services/__tests__/JsonSerializer.test.js

@@ -0,0 +1,23 @@
+import { JsonSerializer } from '../JsonSerializer';
+
+describe('decode', () => {
+    test('should decode json', () => {
+        const json = JsonSerializer.decode('{ "test": 1 }');
+
+        expect(json).toEqual({ test: 1 });
+    });
+
+    test('should return null on error', () => {
+        const json = JsonSerializer.decode('{ "tes');
+
+        expect(json).toBe(null);
+    });
+});
+
+describe('encode', () => {
+    test('should encode object to json', () => {
+        const json = JsonSerializer.encode({ test: 1 });
+
+        expect(json).toBe('{"test":1}');
+    });
+});

package/lib/services/__tests__/Storage.test.js

@@ -0,0 +1,79 @@
+import { Storage } from '../Storage';
+
+const createNativeStorage = (data) => ({
+    data: data ?? {},
+    setItem: jest.fn(function (key, data) {
+        this.data[key] = data;
+    }),
+    getItem: jest.fn(function (key) {
+        return this.data[key] || null;
+    })
+});
+
+function createStorage({ storage }) {
+    return new Storage(storage ?? createNativeStorage());
+}
+
+describe('get item', () => {
+    test('should return null if no data', () => {
+        const storage = createStorage({
+            storage: createNativeStorage({})
+        });
+
+        expect(storage.getItem('test')).toBe(null);
+    });
+
+    test('should parse json', () => {
+        const storage = createStorage({
+            storage: createNativeStorage({
+                'zp.test': '{ "test": 1 }'
+            })
+        });
+
+        expect(storage.getItem('test')).toEqual({ test: 1 });
+    });
+
+    test('should handle error in private mode', () => {
+        const nativeStorage = createNativeStorage({});
+        const storage = createStorage({ storage: nativeStorage });
+        const error = new Error('private mode');
+
+        nativeStorage.getItem.mockImplementation(() => { throw error; });
+        storage.getItem('test');
+
+        // eslint-disable-next-line no-console
+        expect(console.error).toHaveBeenCalledWith(error);
+    });
+});
+
+describe('set item', () => {
+    test('should set item to storage', () => {
+        const nativeStorage = createNativeStorage({});
+        const storage = createStorage({ storage: nativeStorage });
+
+        storage.setItem('test', 'hello');
+
+        expect(nativeStorage.data).toEqual({ 'zp.test': '"hello"' });
+    });
+
+    test('should stringify json', () => {
+        const nativeStorage = createNativeStorage({});
+        const storage = createStorage({ storage: nativeStorage });
+
+        storage.setItem('test', { test: 1 });
+
+        expect(nativeStorage.data).toEqual({ 'zp.test': '{"test":1}' });
+    });
+
+    test('should handle error in private mode', () => {
+        const nativeStorage = createNativeStorage({});
+        const storage = createStorage({ storage: nativeStorage });
+        const error = new Error('private mode');
+
+        nativeStorage.getItem.mockImplementation(() => { throw error; });
+        storage.setItem('test', 'test');
+
+        // eslint-disable-next-line no-console
+        expect(console.error).toHaveBeenCalledWith(error);
+    });
+});

package/lib/services/index.js

@@ -1,3 +1,4 @@
 export { JsonSerializer } from './JsonSerializer';
 export { Storage } from './Storage';
 export { FavoriteColors } from './FavoriteColors';
+export { ContentNormalizer } from './ContentNormalizer';

package/lib/utils/__tests__/convertColor.test.js

@@ -0,0 +1,19 @@
+import { convertColor } from '../convertColor';
+
+describe('convert color', () => {
+    test('should convert alias to color', () => {
+        expect(convertColor('red')).toBe('#FF0000');
+    });
+
+    test('should convert short hex to full', () => {
+        expect(convertColor('#F00')).toBe('#FF0000');
+    });
+
+    test('should convert short hex with alpha to rgba', () => {
+        expect(convertColor('#F003')).toBe('rgba(255, 0, 0, 20%)');
+    });
+
+    test('should convert rgba from float to percent', () => {
+        expect(convertColor('rgba(255, 0, 0, 0.2)')).toBe('rgba(255, 0, 0, 20%)');
+    });
+});

package/lib/utils/__tests__/createKeyboardShortcut.test.js

@@ -0,0 +1,25 @@
+import { createKeyboardShortcut } from '../createKeyboardShortcut';
+
+describe('create shortcut', () => {
+    test('should bind command', () => {
+        const editor = {
+            commands: { toggleBold: jest.fn() }
+        };
+        const shortcut = createKeyboardShortcut('toggleBold');
+
+        shortcut({ editor });
+
+        expect(editor.commands.toggleBold).toHaveBeenCalled();
+    });
+
+    test('should bind command with arguments', () => {
+        const editor = {
+            commands: { applyAlignment: jest.fn() }
+        };
+        const shortcut = createKeyboardShortcut('applyAlignment', 'left');
+
+        shortcut({ editor });
+
+        expect(editor.commands.applyAlignment).toHaveBeenCalledWith('left');
+    });
+});

package/lib/utils/__tests__/renderInlineSetting.test.js

@@ -27,6 +27,16 @@ describe('render settings', () => {
         expect(result).toMatchSnapshot();
     });
 
+    test('should render no attributes if all styles empty', () => {
+        const result = renderMark({
+            mobile_font_size: null,
+            tablet_font_size: null,
+            desktop_font_size: null
+        });
+
+        expect(result[1]).toEqual({});
+    });
+
     test('should render unwrapped styles', () => {
         const result = renderInlineSetting({
             mobile_font_size: '',
@@ -36,4 +46,20 @@ describe('render settings', () => {
 
         expect(result).toMatchSnapshot();
     });
+
+    test('should return null if no styles', () => {
+        const result = renderInlineSetting({});
+
+        expect(result).toBe(null);
+    });
+
+    test('should return null if all styles empty', () => {
+        const result = renderInlineSetting({
+            mobile_font_size: null,
+            tablet_font_size: null,
+            desktop_font_size: null
+        });
+
+        expect(result).toBe(null);
+    });
 });

package/lib/utils/convertColor.js

@@ -0,0 +1,7 @@
+import { ColorModel } from 'zipify-colorpicker';
+
+export function convertColor(raw) {
+    const model = ColorModel.create(raw);
+
+    return model.alpha === 1 ? model.toHexString() : model.toRgbaString();
+}

package/lib/utils/importIcon.js

@@ -0,0 +1,12 @@
+// register all icons in webpack module loader
+const importFile = require.context('../assets/icons', true, /\.svg/);
+
+export function importIcon(name) {
+    try {
+        return importFile(`./${name}.svg`);
+    } catch (error) {
+        // eslint-disable-next-line no-console
+        console.warn('Cannot resolve wysiwyg icon', error);
+        return '';
+    }
+}

package/lib/utils/index.js

@@ -2,3 +2,5 @@ export { createCommand } from './createCommand';
 export { renderInlineSetting, renderMark } from './renderInlineSetting';
 export { capitalize } from './capitalize';
 export { createKeyboardShortcut } from './createKeyboardShortcut';
+export { convertColor } from './convertColor';
+export { importIcon } from './importIcon';

package/lib/utils/renderInlineSetting.js

@@ -13,5 +13,5 @@ export function renderInlineSetting(setting) {
 export function renderMark(setting) {
     const attrs = renderInlineSetting(setting);
 
-    return ['span', attrs ? { ...attrs, class: 'zw-style' } : null, 0];
+    return ['span', attrs ? { ...attrs, class: 'zw-style' } : {}, 0];
 }

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@zipify/wysiwyg",
-  "version": "1.0.0-dev.4",
+  "version": "1.0.0-dev.7",
   "description": "Zipify modification of TipTap text editor",
-  "main": "lib/index.js",
+  "main": "dist/wysiwyg.js",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ZipifyApps/ZipifyWysiwyg.git"
@@ -14,6 +14,7 @@
     "url": "https://github.com/ZipifyApps/ZipifyWysiwyg/issues"
   },
   "scripts": {
+    "lib:build": "webpack --config ./config/webpack/lib.config.js",
     "example:start": "NODE_ENV=development webpack serve --config ./config/webpack/example.config.js",
     "example:build": "NODE_ENV=production webpack --config ./config/webpack/example.config.js",
     "test:unit": "jest .",
@@ -45,7 +46,6 @@
     "@babel/plugin-transform-runtime": "^7.18.6",
     "@babel/preset-env": "^7.18.6",
     "@babel/runtime": "^7.18.6",
-    "@vue/composition-api": "^1.7.0",
     "@vue/test-utils": "^1.3.0",
     "@vue/vue2-jest": "^28.0.1",
     "babel-jest": "^28.1.2",
@@ -60,18 +60,17 @@
     "jest": "^28.1.3",
     "jest-environment-jsdom": "^28.1.3",
     "lint-staged": "^13.0.3",
+    "mini-css-extract-plugin": "^2.6.1",
     "postcss-html": "^1.5.0",
     "release-it": "^15.1.2",
     "style-loader": "^3.3.1",
     "stylelint": "^14.9.1",
     "svgo": "^2.8.0",
-    "vue": "^2.6.14",
     "vue-loader": "^15.9.8",
     "vue-template-compiler": "^2.6.14",
     "webpack": "^5.73.0",
     "webpack-bundle-analyzer": "^4.5.0",
     "webpack-cli": "^4.10.0",
-    "webpack-dev-server": "^4.9.3",
-    "zipify-colorpicker": "^1.0.28"
+    "webpack-dev-server": "^4.9.3"
   }
 }

package/lib/assets/icons.svg

@@ -1,69 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg">
-    <defs>
-        <symbol id="arrow" fill="none" viewBox="0 0 8 8">
-            <path fill="var(--zw-icon-foreground)" fill-rule="evenodd" d="m4 6.934 4-5H0l4 5Z" clip-rule="evenodd"/>
-        </symbol>
-        <symbol id="reset-styles" fill="none" viewBox="0 0 28 28">
-            <path fill="var(--zw-icon-foreground)" d="M14 9.333V6.666l-3.334 3.333L14 13.333v-2.667c2.206 0 4 1.793 4 4s-1.794 4-4 4c-2.207 0-4-1.793-4-4H8.666A5.332 5.332 0 0 0 14 19.999a5.332 5.332 0 0 0 5.333-5.333A5.332 5.332 0 0 0 14 9.333Z"/>
-        </symbol>
-        <symbol id="font-color" fill="none" viewBox="0 0 28 28">
-            <path fill="var(--zw-icon-foreground)" fill-rule="evenodd" d="M22 20.62a2.42 2.42 0 0 1-4.84 0c0-1.25 2.42-4.54 2.42-4.54S22 19.37 22 20.62ZM9.92 15.425l1.452-3.951c.071-.182.145-.394.219-.636.074-.242.149-.503.226-.783a17.223 17.223 0 0 0 .454 1.402l1.452 3.968H9.919Zm5.411 4.199c.226-.795.658-1.684 1.184-2.562L12.955 8h-2.269L6 19.93h1.725a.736.736 0 0 0 .474-.157.792.792 0 0 0 .26-.347l.891-2.434h4.941l.891 2.434c.031.079.097.134.148.198Z" clip-rule="evenodd"/>
-        </symbol>
-        <symbol id="background-color" fill="none" viewBox="0 0 28 28">
-            <path fill="#fff" stroke="#B3B3B3" d="M4.5 4.5h19v19h-19z"/>
-            <path fill="#3B3B3B" d="M26 20.7a2.51 2.51 0 0 1-5 0c0-1.31 2.5-4.7 2.5-4.7s2.5 3.39 2.5 4.7Z"/>
-            <path fill="#3B3B3B" fill-rule="evenodd" d="M19.64 19.93h-1.715a.75.75 0 0 1-.475-.145.82.82 0 0 1-.268-.359l-.89-2.433h-4.943l-.89 2.433a.78.78 0 0 1-.26.347.73.73 0 0 1-.475.157H8L12.686 8h2.269l4.686 11.93Zm-7.721-4.505h3.803l-1.452-3.968a18.048 18.048 0 0 1-.219-.623c-.08-.24-.158-.5-.235-.78-.077.28-.152.542-.227.784a8.742 8.742 0 0 1-.218.635l-1.452 3.952Z" clip-rule="evenodd"/>
-        </symbol>
-        <symbol id="italic" fill="none" viewBox="0 0 28 28">
-            <path fill="var(--zw-icon-foreground)" d="M18 9V7h-7v2h2.64l-1.22 10H10v2h7v-2h-2.83L15.4 9H18Z"/>
-        </symbol>
-        <symbol id="underline" fill="none" viewBox="0 0 28 28">
-            <path fill="var(--zw-icon-foreground)" fill-rule="evenodd" d="M15.4 16.06a3.3 3.3 0 0 1-1.4.29 3.12 3.12 0 0 1-1.39-.29 2.88 2.88 0 0 1-1.05-.81 3.711 3.711 0 0 1-.65-1.25 5.659 5.659 0 0 1-.22-1.6V7H9v5.41a6.89 6.89 0 0 0 .34 2.22 5.29 5.29 0 0 0 1 1.77c.437.501.975.904 1.58 1.18A5 5 0 0 0 14 18a5 5 0 0 0 2.08-.42 4.61 4.61 0 0 0 1.57-1.18 5.27 5.27 0 0 0 1-1.77 6.89 6.89 0 0 0 .35-2.22V7h-1.69v5.41a5.659 5.659 0 0 1-.22 1.59 3.71 3.71 0 0 1-.69 1.25c-.27.34-.61.617-1 .81ZM20 19H8v2h12v-2Z" clip-rule="evenodd"/>
-        </symbol>
-        <symbol id="strike-through" fill="none" viewBox="0 0 28 28">
-            <path fill="var(--zw-icon-foreground)" fill-rule="evenodd" d="m14 12.731.77.27H20v2H8v-2h2.84a2.892 2.892 0 0 1-.46-.71 3.61 3.61 0 0 1-.29-1.52c0-.484.1-.964.29-1.41a3.5 3.5 0 0 1 .83-1.2 4 4 0 0 1 1.35-.84 4.74 4.74 0 0 1 1.83-.32 6 6 0 0 1 2.11.41 5 5 0 0 1 1.68 1l-.46.88a.69.69 0 0 1-.18.22.41.41 0 0 1-.25.07.69.69 0 0 1-.39-.16 5.551 5.551 0 0 0-.56-.36 4.641 4.641 0 0 0-.8-.36 3.44 3.44 0 0 0-1.14-.16 3.16 3.16 0 0 0-1.11.17 2.29 2.29 0 0 0-.8.45 1.87 1.87 0 0 0-.49.67 2.138 2.138 0 0 0-.11.79c-.023.357.08.711.29 1 .206.267.465.489.76.65.338.187.693.34 1.06.46Zm1.99 6.06c.24-.22.427-.49.55-.79.135-.315.2-.657.19-1h1.74a4.58 4.58 0 0 1-.25 1.38 4 4 0 0 1-.91 1.37 4.231 4.231 0 0 1-1.46.92 5.503 5.503 0 0 1-2 .33 6.13 6.13 0 0 1-2.5-.46 5.66 5.66 0 0 1-1.89-1.31l.54-.88a.61.61 0 0 1 .19-.17.45.45 0 0 1 .25-.07.5.5 0 0 1 .28.1c.128.077.251.16.37.25l.46.33c.19.13.391.243.6.34.245.107.5.191.76.25.328.076.664.11 1 .1a3.67 3.67 0 0 0 1.19-.18c.328-.109.63-.282.89-.51Z" clip-rule="evenodd"/>
-        </symbol>
-        <symbol id="case-style" fill="none" viewBox="0 0 28 28">
-            <path fill="var(--zw-icon-foreground)" fill-rule="evenodd" d="M16.64 19.93h-1.715a.75.75 0 0 1-.475-.145.82.82 0 0 1-.268-.359l-.89-2.433H8.35l-.891 2.433a.78.78 0 0 1-.26.347.73.73 0 0 1-.475.157H5L9.686 8h2.269l4.686 11.93Zm-7.72-4.505h3.803l-1.452-3.968a18.048 18.048 0 0 1-.219-.623c-.08-.24-.158-.5-.235-.78-.077.28-.152.542-.227.784a8.742 8.742 0 0 1-.218.635L8.92 15.425Zm14.968 4.505h-.915a.987.987 0 0 1-.454-.087c-.11-.058-.192-.175-.248-.35l-.181-.603a7.005 7.005 0 0 1-.631.507c-.206.146-.42.269-.64.368a3.26 3.26 0 0 1-.7.222c-.248.05-.523.075-.826.075-.357 0-.687-.049-.99-.145a2.134 2.134 0 0 1-.78-.433 1.967 1.967 0 0 1-.507-.718 2.545 2.545 0 0 1-.181-.998c0-.319.084-.634.251-.945.168-.31.447-.59.838-.841.39-.25.91-.458 1.559-.623.649-.165 1.455-.258 2.417-.28v-.495c0-.567-.12-.986-.359-1.259-.239-.272-.587-.408-1.043-.408-.33 0-.605.039-.825.116a3.17 3.17 0 0 0-.574.26 25.11 25.11 0 0 1-.45.26.912.912 0 0 1-.453.115.59.59 0 0 1-.355-.107.843.843 0 0 1-.239-.264l-.371-.652c.973-.891 2.148-1.337 3.523-1.337.494 0 .936.081 1.324.244.387.162.716.387.985.676.27.289.475.634.615 1.036.14.401.21.841.21 1.32v5.346Zm-3.96-1.271c.21 0 .402-.02.578-.058.176-.038.342-.096.5-.173.156-.077.307-.172.453-.285a4.13 4.13 0 0 0 .441-.4v-1.427c-.594.027-1.09.078-1.489.153a3.967 3.967 0 0 0-.961.284c-.242.116-.414.25-.516.404a.894.894 0 0 0-.152.504c0 .357.106.613.317.767.212.154.489.231.83.231Z" clip-rule="evenodd"/>
-        </symbol>
-        <symbol id="superscript" fill="none" viewBox="0 0 28 28">
-            <path fill="var(--zw-icon-foreground)" d="M21.985 8.625h-1.75V9.5h2.625v.875h-3.5v-1.75c0-.481.394-.875.875-.875h1.75v-.875H19.36V6h2.625c.481 0 .875.394.875.875v.875a.878.878 0 0 1-.875.875ZM7.88 20h2.327l2.975-4.742h.105L16.262 20h2.328l-4.069-6.361L18.32 7.75h-2.345l-2.687 4.366h-.105L10.48 7.75H8.15l3.78 5.889L7.88 20Z"/>
-        </symbol>
-        <symbol id="alignment-left" fill="none" viewBox="0 0 28 28">
-            <path fill="var(--zw-icon-foreground)" fill-rule="evenodd" d="M23 7H5v2h18V7Zm-6 4H5v2h12v-2Zm6 4H5v2h18v-2ZM5 19h12v2H5v-2Z" clip-rule="evenodd"/>
-        </symbol>
-        <symbol id="alignment-center" fill="none" viewBox="0 0 28 28">
-            <path fill="var(--zw-icon-foreground)" fill-rule="evenodd" d="M23 7H5v2h18V7Zm-3 4H8v2h12v-2Zm3 4H5v2h18v-2ZM8 19h12v2H8v-2Z" clip-rule="evenodd"/>
-        </symbol>
-        <symbol id="alignment-right" fill="none" viewBox="0 0 28 28">
-            <path fill="var(--zw-icon-foreground)" fill-rule="evenodd" d="M23 7H5v2h18V7Zm0 4H11v2h12v-2Zm0 4H5v2h18v-2Zm-12 4h12v2H11v-2Z" clip-rule="evenodd"/>
-        </symbol>
-        <symbol id="alignment-justify" fill="none" viewBox="0 0 28 28">
-            <path fill="var(--zw-icon-foreground)" fill-rule="evenodd" d="M23 7H5v2h18V7Zm0 4H5v2h18v-2Zm0 4H5v2h18v-2ZM5 19h18v2H5v-2Z" clip-rule="evenodd"/>
-        </symbol>
-        <symbol id="line-height" fill="none" viewBox="0 0 28 28">
-            <path fill="var(--zw-icon-foreground)" fill-rule="evenodd" d="m5 10 3-3 3 3H9v8h2l-3 3-3-3h2v-8H5Zm8-3h10v2H13V7Zm10 6H13v2h10v-2Zm0 6H13v2h10v-2Z" clip-rule="evenodd"/>
-        </symbol>
-        <symbol id="list-disc" fill="none" viewBox="0 0 28 28">
-            <rect width="10" height="10" x="9" y="9" fill="var(--zw-icon-foreground)" rx="5"/>
-        </symbol>
-        <symbol id="list-circle" fill="none" viewBox="0 0 28 28">
-            <rect width="9" height="9" x="9.5" y="9.5" stroke="var(--zw-icon-foreground)" rx="4.5"/>
-        </symbol>
-        <symbol id="list-square" fill="none" viewBox="0 0 28 28">
-            <path fill="var(--zw-icon-foreground)" d="M9 9h10v10H9z"/>
-        </symbol>
-        <symbol id="list-decimal" fill="none" viewBox="0 0 28 28">
-            <path fill="var(--zw-icon-foreground)" d="M15.108 18.184V19H10.5v-.816h1.842v-5.862c0-.176.006-.354.018-.534l-1.53 1.314a.375.375 0 0 1-.156.084.373.373 0 0 1-.27-.048.318.318 0 0 1-.084-.078l-.336-.462 2.562-2.214h.87v7.8h1.692Zm1.519.156a.8.8 0 0 1 .054-.294.829.829 0 0 1 .156-.24.77.77 0 0 1 .534-.222.77.77 0 0 1 .696.462c.04.092.06.19.06.294a.744.744 0 0 1-.222.534.692.692 0 0 1-.24.156.73.73 0 0 1-.294.06.73.73 0 0 1-.294-.06.692.692 0 0 1-.396-.39.816.816 0 0 1-.054-.3Z"/>
-        </symbol>
-        <symbol id="list-roman" fill="none" viewBox="0 0 28 28">
-            <path fill="var(--zw-icon-foreground)" d="m13.664 15.808-1.35-3.498a7.11 7.11 0 0 1-.252-.804c-.084.324-.17.594-.258.81l-1.35 3.492h3.21ZM16.088 19h-.9a.387.387 0 0 1-.252-.078.48.48 0 0 1-.144-.198l-.804-2.076H10.13l-.804 2.076a.421.421 0 0 1-.138.192.383.383 0 0 1-.252.084h-.9l3.438-8.598h1.176L16.088 19Zm.7-.66a.8.8 0 0 1 .053-.294.829.829 0 0 1 .156-.24.77.77 0 0 1 .534-.222.77.77 0 0 1 .696.462c.04.092.06.19.06.294a.744.744 0 0 1-.222.534.692.692 0 0 1-.24.156.73.73 0 0 1-.294.06.73.73 0 0 1-.294-.06.692.692 0 0 1-.396-.39.816.816 0 0 1-.054-.3Z"/>
-        </symbol>
-        <symbol id="list-latin" fill="none" viewBox="0 0 28 28">
-            <path fill="var(--zw-icon-foreground)" d="M12.086 9.802h.834v11.292h-.834V9.802Zm2.592 8.538a.8.8 0 0 1 .054-.294.829.829 0 0 1 .156-.24.77.77 0 0 1 .534-.222.77.77 0 0 1 .696.462c.04.092.06.19.06.294a.744.744 0 0 1-.222.534.692.692 0 0 1-.24.156.73.73 0 0 1-.294.06.73.73 0 0 1-.294-.06.692.692 0 0 1-.396-.39.816.816 0 0 1-.054-.3Z"/>
-        </symbol>
-        <symbol id="remove-format" fill="none" viewBox="0 0 28 28">
-            <path fill="var(--zw-icon-foreground)" fill-rule="evenodd" d="M14.089 6.726a1 1 0 0 1 1.425-.003l6.8 6.882a1 1 0 0 1 .007 1.398L17.2 20.3l-.2.2c-2.2 2.1-5.7 2-7.8-.2l-3.516-3.6a1 1 0 0 1 0-1.399l8.405-8.575Zm1.81 12.674c.1 0 .2 0 .2-.1l4.8-5-6.1-6.2-5 5.1 6.1 6.2Z" clip-rule="evenodd"/>
-        </symbol>
-    </defs>
-</svg>