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

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

@@ -14,7 +14,9 @@ Object {
           "content": Array [
             Object {
               "attrs": Object {
-                "preset": null,
+                "preset": Object {
+                  "id": "regular-1",
+                },
               },
               "content": Array [
                 Object {
@@ -49,7 +51,9 @@ Object {
           "content": Array [
             Object {
               "attrs": Object {
-                "preset": null,
+                "preset": Object {
+                  "id": "regular-1",
+                },
               },
               "content": Array [
                 Object {
@@ -66,7 +70,9 @@ Object {
           "content": Array [
             Object {
               "attrs": Object {
-                "preset": null,
+                "preset": Object {
+                  "id": "regular-1",
+                },
               },
               "content": Array [
                 Object {
@@ -92,7 +98,9 @@ Object {
   "content": Array [
     Object {
       "attrs": Object {
-        "preset": null,
+        "preset": Object {
+          "id": "regular-1",
+        },
       },
       "content": Array [
         Object {
@@ -104,7 +112,9 @@ Object {
     },
     Object {
       "attrs": Object {
-        "preset": null,
+        "preset": Object {
+          "id": "regular-1",
+        },
       },
       "content": Array [
         Object {
@@ -133,7 +143,9 @@ Object {
           "content": Array [
             Object {
               "attrs": Object {
-                "preset": null,
+                "preset": Object {
+                  "id": "regular-1",
+                },
               },
               "content": Array [
                 Object {
@@ -150,7 +162,9 @@ Object {
           "content": Array [
             Object {
               "attrs": Object {
-                "preset": null,
+                "preset": Object {
+                  "id": "regular-1",
+                },
               },
               "content": Array [
                 Object {
@@ -221,7 +235,9 @@ Object {
           "content": Array [
             Object {
               "attrs": Object {
-                "preset": null,
+                "preset": Object {
+                  "id": "regular-1",
+                },
               },
               "content": Array [
                 Object {
@@ -256,7 +272,9 @@ Object {
           "content": Array [
             Object {
               "attrs": Object {
-                "preset": null,
+                "preset": Object {
+                  "id": "regular-1",
+                },
               },
               "content": Array [
                 Object {
@@ -291,7 +309,9 @@ Object {
           "content": Array [
             Object {
               "attrs": Object {
-                "preset": null,
+                "preset": Object {
+                  "id": "regular-1",
+                },
               },
               "content": Array [
                 Object {
@@ -326,7 +346,9 @@ Object {
           "content": Array [
             Object {
               "attrs": Object {
-                "preset": null,
+                "preset": Object {
+                  "id": "regular-1",
+                },
               },
               "content": Array [
                 Object {
@@ -361,7 +383,9 @@ Object {
           "content": Array [
             Object {
               "attrs": Object {
-                "preset": null,
+                "preset": Object {
+                  "id": "regular-1",
+                },
               },
               "content": Array [
                 Object {
@@ -396,7 +420,9 @@ Object {
           "content": Array [
             Object {
               "attrs": Object {
-                "preset": null,
+                "preset": Object {
+                  "id": "regular-1",
+                },
               },
               "content": Array [
                 Object {
@@ -431,7 +457,9 @@ Object {
           "content": Array [
             Object {
               "attrs": Object {
-                "preset": null,
+                "preset": Object {
+                  "id": "regular-1",
+                },
               },
               "content": Array [
                 Object {
@@ -466,7 +494,9 @@ Object {
           "content": Array [
             Object {
               "attrs": Object {
-                "preset": null,
+                "preset": Object {
+                  "id": "regular-1",
+                },
               },
               "content": Array [
                 Object {
@@ -501,7 +531,9 @@ Object {
           "content": Array [
             Object {
               "attrs": Object {
-                "preset": null,
+                "preset": Object {
+                  "id": "regular-1",
+                },
               },
               "content": Array [
                 Object {
@@ -536,7 +568,9 @@ Object {
           "content": Array [
             Object {
               "attrs": Object {
-                "preset": null,
+                "preset": Object {
+                  "id": "regular-1",
+                },
               },
               "content": Array [
                 Object {
@@ -571,7 +605,9 @@ Object {
           "content": Array [
             Object {
               "attrs": Object {
-                "preset": null,
+                "preset": Object {
+                  "id": "regular-1",
+                },
               },
               "content": Array [
                 Object {
@@ -606,7 +642,9 @@ Object {
           "content": Array [
             Object {
               "attrs": Object {
-                "preset": null,
+                "preset": Object {
+                  "id": "regular-1",
+                },
               },
               "content": Array [
                 Object {
@@ -641,7 +679,9 @@ Object {
           "content": Array [
             Object {
               "attrs": Object {
-                "preset": null,
+                "preset": Object {
+                  "id": "regular-1",
+                },
               },
               "content": Array [
                 Object {

package/lib/index.js

@@ -1 +1,3 @@
 export { default as Wysiwyg } from './Wysiwyg';
+export { NodeFactory } from './services';
+export { NodeTypes, TextSettings, Alignments } from './enums';

package/lib/injectionTokens.js

@@ -3,5 +3,7 @@ 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'),
+    POPUP_MODE: Symbol('popupMode')
 });

package/lib/services/ContentNormalizer.js

@@ -1,42 +1,112 @@
+import { ContextWindow } from './ContextWidnow';
+
 export class ContentNormalizer {
-    static NORMALIZING_STYLE_BLACKLIST = ['text-align', 'line-height'];
+    static PARSER = new DOMParser();
+    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(.+)?/
+        }
+    ];
+
+    static normalize(content) {
+        const options = {
+            content,
+            parser: ContentNormalizer.PARSER
+        };
+
+        return new ContentNormalizer(options).normalize();
+    }
 
-    normalize(content) {
-        if (typeof content !== 'string') return content;
+    constructor({ content, parser }) {
+        this._content = content;
+        this._parser = parser;
+        this._dom = null;
+    }
 
-        return this._normalizeTextContent(content);
+    normalize() {
+        if (typeof this._content !== 'string') {
+            return this._content;
+        }
+        return this._normalizeTextContent();
     }
 
-    _normalizeTextContent(content) {
-        const parser = new DOMParser();
-        const dom = parser.parseFromString(content, 'text/html');
+    _normalizeTextContent() {
+        this._dom = this._parser.parseFromString(this._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');
+        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 dom.body.innerHTML;
+        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.innerHTML.replace(/\n/g, '').trim()) {
+            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);
+        };
+
+        this._assignElementProperties(itemEl, itemEl.parentElement, ContentNormalizer.BLOCK_STYLES);
+
+        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 +124,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 +139,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 +166,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 +176,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/{__tests__/utils → services}/NodeFactory.js

@@ -1,4 +1,4 @@
-import { NodeTypes } from '../../enums';
+import { NodeTypes } from '../enums';
 
 export class NodeFactory {
     static doc(content) {
@@ -64,4 +64,8 @@ export class NodeFactory {
     static mark(type, attrs) {
         return { type, attrs };
     }
+
+    static populateAllDevices(value) {
+        return { mobile: value, tablet: value, desktop: value };
+    }
 }

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

@@ -1,13 +1,11 @@
 import { ContentNormalizer } from '../ContentNormalizer';
-import { NodeFactory } from '../../__tests__/utils';
+import { NodeFactory } from '../NodeFactory';
 
-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,97 @@ 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 ignore space only 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 ignore newline chapters only nodes', () => {
+        const input = '<p>lorem ipsum 1</p><p>\n</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);
+    });
+
+    test('should assign block styles from list to paragraph', () => {
+        const input = '<ul style="line-height: 2;"><li>lorem ipsum</li></ul>';
+        const output = '<ul style="line-height: 2;"><li><p style="line-height: 2;">lorem ipsum</p></li></ul>';
+
+        expect(ContentNormalizer.normalize(input)).toBe(output);
     });
 });

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

@@ -1,4 +1,4 @@
-import { ref } from '@vue/composition-api';
+import { ref } from 'vue';
 import { FavoriteColors } from '../FavoriteColors';
 
 function createService({ colors, onUpdate }) {

package/lib/services/index.js

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