@zipify/wysiwyg 1.0.0-dev.5 → 1.0.0-dev.52

package/lib/extensions/index.js

@@ -1,5 +1,3 @@
-import History from '@tiptap/extension-history';
-import { CORE_EXTENSIONS } from './core';
 import { FontFamily } from './FontFamily';
 import { StylePreset } from './StylePreset';
 import { FontWeight } from './FontWeight';
@@ -13,38 +11,52 @@ import { CaseStyle } from './CaseStyle';
 import { Alignment } from './Alignment';
 import { LineHeight } from './LineHeight';
 import { List } from './list';
+import { Link } from './Link';
 import { Superscript } from './Superscript';
+import { buildCoreExtensions } from './core';
 
-export { CORE_EXTENSIONS };
+export function buildExtensions(options) {
+    const getPresetById = (id) => options.presetsRef.value.find((preset) => preset.id === id);
+    const defaultPreset = getPresetById(options.defaultPresetId);
+    const linkPreset = getPresetById('link');
 
-export const getExtensions = (options) => CORE_EXTENSIONS.concat([
-    History,
-    StylePreset.configure({
-        presetsRef: options.presetsRef,
-        defaultId: options.defaultPresetId,
-        baseClass: options.basePresetClass,
-        makeVariable: options.makePresetVariable
-    }),
-    List.configure({
-        baseClass: options.baseListClass
-    }),
-    DeviceManager.configure({
-        deviceRef: options.deviceRef
-    }),
-    FontFamily.configure({
-        fonts: options.fonts
-    }),
-    FontWeight,
-    FontSize.configure({
-        minSize: options.minFontSize,
-        maxSize: options.maxFontSize
-    }),
-    FontColor,
-    BackgroundColor,
-    FontStyle,
-    TextDecoration,
-    CaseStyle,
-    Superscript,
-    Alignment,
-    LineHeight
-]);
+    return buildCoreExtensions(options).concat([
+        StylePreset.configure({
+            presetsRef: options.presetsRef,
+            defaultId: options.defaultPresetId,
+            baseClass: options.basePresetClass,
+            makeVariable: options.makePresetVariable
+        }),
+        List.configure({
+            baseClass: options.baseListClass
+        }),
+        DeviceManager.configure({
+            deviceRef: options.deviceRef
+        }),
+        FontFamily.configure({
+            fonts: options.fonts,
+            defaultFont: defaultPreset.common.font_family
+        }),
+        FontWeight,
+        FontSize.configure({
+            minSize: options.minFontSize,
+            maxSize: options.maxFontSize,
+            wrapperRef: options.wrapperRef
+        }),
+        FontColor,
+        BackgroundColor,
+        FontStyle,
+        TextDecoration,
+        CaseStyle,
+        Superscript,
+        Alignment,
+        LineHeight.configure({
+            wrapperRef: options.wrapperRef
+        }),
+        Link.configure({
+            preset: linkPreset,
+            basePresetClass: options.basePresetClass,
+            pageBlocksRef: options.pageBlocksRef
+        })
+    ]);
+}

package/lib/extensions/list/__tests__/List.test.js

@@ -2,18 +2,16 @@ import { Editor } from '@tiptap/vue-2';
 import { ref } from '@vue/composition-api';
 import { NodeFactory } from '../../../__tests__/utils';
 import { ListTypes } from '../../../enums';
-import { CORE_EXTENSIONS } from '../../core';
 import { StylePreset } from '../../StylePreset';
 import { List } from '../List';
 import { ContentNormalizer } from '../../../services';
+import { buildCoreExtensions } from '../../core';
 
 function createEditor({ content }) {
-    const normalizer = new ContentNormalizer();
-
     return new Editor({
-        content: normalizer.normalize(content),
+        content: ContentNormalizer.normalize(content),
         element: document.createElement('div'),
-        extensions: CORE_EXTENSIONS.concat(
+        extensions: buildCoreExtensions().concat(
             List.configure({
                 baseClass: 'zw-list--'
             }),

package/lib/extensions/list/__tests__/__snapshots__/List.test.js.snap

@@ -92,7 +92,9 @@ Object {
   "content": Array [
     Object {
       "attrs": Object {
-        "preset": null,
+        "preset": Object {
+          "id": "regular-1",
+        },
       },
       "content": Array [
         Object {
@@ -104,7 +106,9 @@ Object {
     },
     Object {
       "attrs": Object {
-        "preset": null,
+        "preset": Object {
+          "id": "regular-1",
+        },
       },
       "content": Array [
         Object {
@@ -221,7 +225,9 @@ Object {
           "content": Array [
             Object {
               "attrs": Object {
-                "preset": null,
+                "preset": Object {
+                  "id": "regular-1",
+                },
               },
               "content": Array [
                 Object {
@@ -256,7 +262,9 @@ Object {
           "content": Array [
             Object {
               "attrs": Object {
-                "preset": null,
+                "preset": Object {
+                  "id": "regular-1",
+                },
               },
               "content": Array [
                 Object {
@@ -291,7 +299,9 @@ Object {
           "content": Array [
             Object {
               "attrs": Object {
-                "preset": null,
+                "preset": Object {
+                  "id": "regular-1",
+                },
               },
               "content": Array [
                 Object {
@@ -326,7 +336,9 @@ Object {
           "content": Array [
             Object {
               "attrs": Object {
-                "preset": null,
+                "preset": Object {
+                  "id": "regular-1",
+                },
               },
               "content": Array [
                 Object {
@@ -361,7 +373,9 @@ Object {
           "content": Array [
             Object {
               "attrs": Object {
-                "preset": null,
+                "preset": Object {
+                  "id": "regular-1",
+                },
               },
               "content": Array [
                 Object {
@@ -396,7 +410,9 @@ Object {
           "content": Array [
             Object {
               "attrs": Object {
-                "preset": null,
+                "preset": Object {
+                  "id": "regular-1",
+                },
               },
               "content": Array [
                 Object {
@@ -431,7 +447,9 @@ Object {
           "content": Array [
             Object {
               "attrs": Object {
-                "preset": null,
+                "preset": Object {
+                  "id": "regular-1",
+                },
               },
               "content": Array [
                 Object {
@@ -466,7 +484,9 @@ Object {
           "content": Array [
             Object {
               "attrs": Object {
-                "preset": null,
+                "preset": Object {
+                  "id": "regular-1",
+                },
               },
               "content": Array [
                 Object {
@@ -501,7 +521,9 @@ Object {
           "content": Array [
             Object {
               "attrs": Object {
-                "preset": null,
+                "preset": Object {
+                  "id": "regular-1",
+                },
               },
               "content": Array [
                 Object {
@@ -536,7 +558,9 @@ Object {
           "content": Array [
             Object {
               "attrs": Object {
-                "preset": null,
+                "preset": Object {
+                  "id": "regular-1",
+                },
               },
               "content": Array [
                 Object {
@@ -571,7 +595,9 @@ Object {
           "content": Array [
             Object {
               "attrs": Object {
-                "preset": null,
+                "preset": Object {
+                  "id": "regular-1",
+                },
               },
               "content": Array [
                 Object {
@@ -606,7 +632,9 @@ Object {
           "content": Array [
             Object {
               "attrs": Object {
-                "preset": null,
+                "preset": Object {
+                  "id": "regular-1",
+                },
               },
               "content": Array [
                 Object {
@@ -641,7 +669,9 @@ Object {
           "content": Array [
             Object {
               "attrs": Object {
-                "preset": null,
+                "preset": Object {
+                  "id": "regular-1",
+                },
               },
               "content": Array [
                 Object {

package/lib/injectionTokens.js

@@ -3,5 +3,6 @@ export const InjectionTokens = Object.freeze({
     FONT_SIZES: Symbol('fontSizes'),
     EDITOR: Symbol('editor'),
     LOCAL_STORAGE: Symbol('localStorage'),
-    FAVORITE_COLORS: Symbol('favoriteColors')
+    FAVORITE_COLORS: Symbol('favoriteColors'),
+    PAGE_BLOCKS: Symbol('pageBlocks')
 });

package/lib/services/ContentNormalizer.js

@@ -1,42 +1,103 @@
+import { ContextWindow } from './ContextWidnow';
+
 export class ContentNormalizer {
-    static NORMALIZING_STYLE_BLACKLIST = ['text-align', 'line-height'];
+    static BLOCK_STYLES = ['text-align', 'line-height'];
+    static BLOCK_NODE_NAMES = ['P', 'H1', 'H2', 'H3', 'H4'];
+
+    static ASSIGN_STYLE_RULES = [
+        {
+            tag: /^(b|strong)$/,
+            ignore: /font-weight/
+        },
+        {
+            tag: /^i$/,
+            ignore: /font-style/
+        },
+        {
+            tag: /^s$/,
+            ignore: /text-decoration(.+)?/
+        }
+    ];
 
-    normalize(content) {
-        if (typeof content !== 'string') return content;
+    static normalize(content) {
+        return new ContentNormalizer(content).normalize();
+    }
 
-        return this._normalizeTextContent(content);
+    constructor(content) {
+        this._content = content;
+        this._dom = null;
     }
 
-    _normalizeTextContent(content) {
-        const parser = new DOMParser();
-        const dom = parser.parseFromString(content, 'text/html');
+    normalize() {
+        if (typeof this._content !== 'string') {
+            return this._content;
+        }
+        return this._normalizeTextContent();
+    }
 
-        this._iterateNodes(dom, this._normalizeStructure.bind(this), (node) => node.tagName === 'SPAN');
-        this._iterateNodes(dom, this._normalizeStyles.bind(this), (node) => node.tagName !== 'SPAN');
+    _normalizeTextContent() {
+        this._dom = new DOMParser().parseFromString(this._content, 'text/html');
 
-        return dom.body.innerHTML;
+        this._iterateNodes(this._removeEmptyNodes, this._isBlockNode);
+        this._iterateNodes(this._normalizeListItems, (node) => node.tagName === 'LI');
+        this._iterateNodes(this._normalizeSettingsStructure, (node) => node.tagName === 'SPAN');
+        this._iterateNodes(this._normalizeStyles, (node) => node.tagName !== 'SPAN');
+
+        return this._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
+    _iterateNodes(handler, condition = () => true) {
+        const iterator = this._dom.createNodeIterator(this._dom.body, NodeFilter.SHOW_ELEMENT, {
+            acceptNode: (node) => condition.call(this, node) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT
         });
         let currentNode = iterator.nextNode();
 
         while (currentNode) {
-            handler(currentNode);
+            handler.call(this, currentNode);
             currentNode = iterator.nextNode();
         }
     }
 
-    _normalizeStructure(element) {
-        const isTextChildren = Array.from(element.childNodes)
-            .every((node) => node.nodeType === Node.TEXT_NODE);
+    _removeEmptyNodes(node) {
+        if (node.childNodes.length === 0) {
+            node.remove();
+        }
+    }
+
+    _normalizeListItems(itemEl) {
+        const fragment = new DocumentFragment();
+        const children = Array.from(itemEl.childNodes);
+        let capturingParagraph;
 
-        if (isTextChildren) return;
+        const append = (node) => {
+            this._assignElementProperties(node, itemEl, ContentNormalizer.BLOCK_STYLES);
+            fragment.append(node);
+        };
+
+        for (const node of children) {
+            if (node.tagName === 'P') {
+                append(node);
+                capturingParagraph = null;
+                continue;
+            }
+
+            if (!capturingParagraph) {
+                capturingParagraph = document.createElement('p');
+                append(capturingParagraph);
+            }
+
+            capturingParagraph.append(node);
+        }
+
+        itemEl.append(fragment);
+        this._removeStyleProperties(itemEl, ContentNormalizer.BLOCK_STYLES);
+    }
+
+    _normalizeSettingsStructure(element) {
+        if (this._isOnlyTextContent(element)) return;
 
         const cloned = element.cloneNode(true);
-        const migratingStyles = this._getMigratingStyles(element);
+        const migratingStyles = this._getMigratingStyles(element, { customProperties: true });
         const content = [];
 
         for (const node of cloned.childNodes) {
@@ -54,8 +115,12 @@ export class ContentNormalizer {
     }
 
     _normalizeStyles(element) {
+        if (!this._isBlockNode(element) && this._isOnlyTextContent(element)) return;
+
         const properties = this._getMigratingStyles(element);
 
+        if (!properties.length) return;
+
         for (const node of element.childNodes) {
             const child = this._wrapTextNode(element, node);
 
@@ -65,16 +130,25 @@ export class ContentNormalizer {
         this._removeStyleProperties(element, properties);
     }
 
-    _getMigratingStyles(element) {
-        const blacklist = ContentNormalizer.NORMALIZING_STYLE_BLACKLIST;
+    _isOnlyTextContent(node) {
+        return Array.from(node.childNodes).every((node) => node.nodeType === Node.TEXT_NODE);
+    }
+
+    _isBlockNode(node) {
+        return ContentNormalizer.BLOCK_NODE_NAMES.includes(node.tagName);
+    }
+
+    _getMigratingStyles(element, { customProperties } = {}) {
+        const blacklist = ContentNormalizer.BLOCK_STYLES;
         const properties = [];
 
         for (let index = 0; index < element.style.length; index++) {
             const property = element.style.item(index);
 
-            if (!blacklist.includes(property)) {
-                properties.push(property);
-            }
+            if (blacklist.includes(property)) continue;
+            if (!customProperties && property.startsWith('--')) continue;
+
+            properties.push(property);
         }
 
         return properties;
@@ -83,7 +157,7 @@ export class ContentNormalizer {
     _wrapTextNode(parent, node) {
         if (node.nodeType !== Node.TEXT_NODE) return node;
 
-        const span = document.createElement('span');
+        const span = ContextWindow.document.createElement('span');
 
         span.append(node.cloneNode());
         parent.replaceChild(span, node);
@@ -93,14 +167,24 @@ export class ContentNormalizer {
 
     _assignElementProperties(target, source, properties) {
         for (const property of properties) {
-            if (target.style.getPropertyValue(property)) {
-                continue;
-            }
+            const value = source.style.getPropertyValue(property);
 
-            target.style.setProperty(property, source.style.getPropertyValue(property));
+            if (value && this._canAssignElementProperty(target, source, property)) {
+                target.style.setProperty(property, value);
+            }
         }
     }
 
+    _canAssignElementProperty(target, source, property) {
+        if (target.style.getPropertyValue(property)) return false;
+
+        return ContentNormalizer.ASSIGN_STYLE_RULES.every((rule) => {
+            if (!rule.tag.test(target.tagName.toLowerCase())) return true;
+
+            return !rule.ignore.test(property);
+        });
+    }
+
     _removeStyleProperties(element, properties) {
         for (const property of properties) {
             element.style.removeProperty(property);

package/lib/services/ContextWidnow.js

@@ -0,0 +1,23 @@
+export class ContextWindow {
+    static window = window;
+
+    static use(window) {
+        this.window = window;
+    }
+
+    static get document() {
+        return this.window.document;
+    }
+
+    static get body() {
+        return this.document.body;
+    }
+
+    static get head() {
+        return this.document.head;
+    }
+
+    static getComputedStyle(element) {
+        return this.window.getComputedStyle(element);
+    }
+}

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

@@ -1,13 +1,11 @@
 import { ContentNormalizer } from '../ContentNormalizer';
 import { NodeFactory } from '../../__tests__/utils';
 
-const normalize = (content) => new ContentNormalizer().normalize(content);
-
-describe('normalize text settings', () => {
+describe('normalize text content', () => {
     test('should ignore json content', () => {
         const content = NodeFactory.doc([NodeFactory.paragraph('Test')]);
 
-        expect(normalize(content)).toBe(content);
+        expect(ContentNormalizer.normalize(content)).toBe(content);
     });
 
     test('should flat structure', () => {
@@ -18,14 +16,14 @@ describe('normalize text settings', () => {
             '<span style="background-color: rgb(255, 0, 0); color: rgb(255, 255, 255);">sum</span>' +
         '</p>';
 
-        expect(normalize(input)).toBe(output);
+        expect(ContentNormalizer.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);
+        expect(ContentNormalizer.normalize(input)).toBe(output);
     });
 
     test('should move styles from paragraph to unstyled text', () => {
@@ -36,6 +34,76 @@ describe('normalize text settings', () => {
             '<span style="color: white; background-color: red;">one</span' +
         '></p>';
 
-        expect(normalize(input)).toBe(output);
+        expect(ContentNormalizer.normalize(input)).toBe(output);
+    });
+
+    test('should wrap list content in paragraph', () => {
+        const input = '<ul><li style="line-height: 2;">lorem impsum</li></ul>';
+        const output = '<ul><li><p style="line-height: 2;">lorem impsum</p></li></ul>';
+
+        expect(ContentNormalizer.normalize(input)).toBe(output);
+    });
+
+    test('should keep order in list nodes', () => {
+        const input = '<ul><li style="line-height: 2;"><span style="font-weight: 700">lorem</span> impsum</li></ul>';
+        const output = '<ul>' +
+            '<li>' +
+                '<p style="line-height: 2;"><span style="font-weight: 700">lorem</span> impsum</p>' +
+            '</li>' +
+        '</ul>';
+
+        expect(ContentNormalizer.normalize(input)).toBe(output);
+    });
+
+    test('should wrap non paragraph list content', () => {
+        const input = '<ul>' +
+            '<li style="line-height: 2;">' +
+                '<span style="font-weight: 700">lorem</span> impsum' +
+                '<p>paragraph text</p>' +
+            '</li>' +
+        '</ul>';
+        const output = '<ul>' +
+            '<li>' +
+            '<p style="line-height: 2;"><span style="font-weight: 700">lorem</span> impsum</p>' +
+            '<p style="line-height: 2;">paragraph text</p>' +
+            '</li>' +
+        '</ul>';
+
+        expect(ContentNormalizer.normalize(input)).toBe(output);
+    });
+
+    test('should ignore empty nodes', () => {
+        const input = '<p>lorem ipsum 1</p><p></p><p>lorem ipsum 2</p>';
+        const output = '<p>lorem ipsum 1</p><p>lorem ipsum 2</p>';
+
+        expect(ContentNormalizer.normalize(input)).toBe(output);
+    });
+
+    test('should not ignore setting', () => {
+        const input = '<p style="text-decoration-line: underline;">lorem ipsum</p>';
+        const output = '<p><span style="text-decoration-line: underline;">lorem ipsum</span></p>';
+
+        expect(ContentNormalizer.normalize(input)).toBe(output);
+    });
+
+    test('should not assign font-weight to b tag', () => {
+        const input = '<p style="font-weight: 400;"><b>lorem ipsum</b></p>';
+        const output = '<p><b>lorem ipsum</b></p>';
+
+        expect(ContentNormalizer.normalize(input)).toBe(output);
+    });
+
+    test('should not assign font-style to i tag', () => {
+        const input = '<p style="font-style: normal;"><i>lorem ipsum</i></p>';
+        const output = '<p><i>lorem ipsum</i></p>';
+
+        expect(ContentNormalizer.normalize(input)).toBe(output);
+    });
+
+    test('should not assign text-decoration to s tag', () => {
+        const input = '<p style="text-decoration-line: initial;"><s>lorem ipsum</s></p>';
+        const output = '<p><s>lorem ipsum</s></p>';
+
+        expect(ContentNormalizer.normalize(input)).toBe(output);
     });
 });

package/lib/services/index.js

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