@zipify/wysiwyg 1.0.0-dev.10 → 1.0.0-dev.100

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,4 @@
 export { default as Wysiwyg } from './Wysiwyg';
+export { NodeFactory } from './services';
+export { NodeTypes, TextSettings, Alignments } from './enums';
+export { isWysiwygContent } from './utils';

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,141 @@
 export class ContentNormalizer {
-    static NORMALIZING_STYLE_BLACKLIST = ['text-align', 'line-height'];
+    static PARSER = new DOMParser();
+    static BLOCK_NODE_NAMES = ['P', 'H1', 'H2', 'H3', 'H4'];
 
-    normalize(content) {
-        if (typeof content !== 'string') return content;
+    static BLOCK_STYLES = [
+        'text-align',
+        'line-height',
+        'margin',
+        'margin-top',
+        'margin-bottom',
+        'margin-left',
+        'margin-right'
+    ];
 
-        return this._normalizeTextContent(content);
+    static ASSIGN_STYLE_RULES = [
+        {
+            tag: /^(b|strong)$/,
+            ignore: /font-weight/
+        },
+        {
+            tag: /^i$/,
+            ignore: /font-style/
+        },
+        {
+            tag: /^s$/,
+            ignore: /text-decoration(.+)?/
+        }
+    ];
+
+    static build(content) {
+        return new ContentNormalizer({
+            parser: ContentNormalizer.PARSER,
+            content
+        });
+    }
+
+    static normalize(content) {
+        return ContentNormalizer.build(content).normalize();
+    }
+
+    constructor({ content, parser }) {
+        this._content = content;
+        this._parser = parser;
+        this.dom = null;
+    }
+
+    normalize() {
+        if (typeof this._content !== 'string') {
+            return this._content;
+        }
+        this.normalizeHTML();
+        return this.normalizedHTML;
+    }
+
+    normalizeHTML() {
+        this.dom = this._parser.parseFromString(this._content.replace(/(\r)?\n/g, ''), 'text/html');
+
+        this._removeComments();
+        this.iterateNodes(this._normalizeBreakLines, (node) => node.tagName === 'BR');
+        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');
+    }
+
+    get normalizedHTML() {
+        return this.dom.body.innerHTML;
     }
 
-    _normalizeTextContent(content) {
-        const parser = new DOMParser();
-        const dom = parser.parseFromString(content, 'text/html');
+    _removeComments() {
+        const iterator = this.createNodeIterator(NodeFilter.SHOW_COMMENT);
 
-        this._iterateNodes(dom, this._normalizeStructure.bind(this), (node) => node.tagName === 'SPAN');
-        this._iterateNodes(dom, this._normalizeStyles.bind(this), (node) => node.tagName !== 'SPAN');
+        this.runIterator(iterator, (node) => node.remove());
+    }
 
-        return dom.body.innerHTML;
+    createNodeIterator(whatToShow, filter) {
+        return this.dom.createNodeIterator(this.dom.body, whatToShow, filter);
     }
 
-    _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 checkCondition = (node) => node.tagName !== 'BODY' && condition.call(this, node);
+
+        const iterator = this.createNodeIterator(NodeFilter.SHOW_ELEMENT, {
+            acceptNode: (node) => checkCondition(node) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT
         });
+
+        this.runIterator(iterator, handler);
+    }
+
+    runIterator(iterator, handler) {
         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.trim()) node.remove();
+    }
+
+    _normalizeListItems(itemEl) {
+        const fragment = new DocumentFragment();
+        const children = Array.from(itemEl.childNodes);
+        let capturingParagraph;
+
+        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 (this._isBlockNode(node)) {
+                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);
+    }
 
-        if (isTextChildren) return;
+    _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 +153,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 +168,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;
@@ -93,14 +205,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);
@@ -110,4 +232,34 @@ export class ContentNormalizer {
             element.removeAttribute('style');
         }
     }
+
+    _normalizeBreakLines({ parentElement }) {
+        if (!this._isBlockNode(parentElement)) return;
+        if (!parentElement.textContent) return;
+
+        const fragment = new DocumentFragment();
+        const children = Array.from(parentElement.childNodes);
+        const parentTemplate = parentElement.cloneNode(true);
+
+        parentTemplate.innerHTML = '';
+        let capturingParagraph = parentTemplate.cloneNode();
+
+        const append = (node) => {
+            this._assignElementProperties(node, parentElement, ContentNormalizer.BLOCK_STYLES);
+            fragment.append(node);
+        };
+
+        for (const child of children) {
+            if (child.tagName === 'BR') {
+                append(capturingParagraph);
+                capturingParagraph = parentTemplate.cloneNode();
+                continue;
+            }
+
+            capturingParagraph.append(child);
+        }
+
+        fragment.append(capturingParagraph);
+        parentElement.replaceWith(fragment);
+    }
 }

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 };
+    }
 }