@zipify/wysiwyg 2.0.0-1 → 2.0.0-11

package/lib/services/NodeFactory.js

@@ -1,10 +1,32 @@
 import { NodeTypes } from '../enums';
 
+/**
+ * @typedef {Object} NodeJson
+ * @property {String} type
+ * @property {Array<MarkJson>} [marks]
+ * @property {AttrsJson} [attrs]
+ *
+ * @typedef {Object} MarkJson
+ * @property {String} type
+ * @property {AttrsJson} attrs
+ *
+ * @typedef {Object} AttrsJson
+ */
+
 export class NodeFactory {
+    /**
+     * @param {Array<NodeJson>} content
+     * @returns {NodeJson}
+     */
     static doc(content) {
         return { type: NodeTypes.DOCUMENT, content };
     }
 
+    /**
+     * @param {String} type
+     * @param {Array<String | NodeJson>} items
+     * @returns {NodeJson}
+     */
     static list(type, items) {
         return {
             type: NodeTypes.LIST,
@@ -16,10 +38,33 @@ export class NodeFactory {
         };
     }
 
+    /**
+     * @type {{
+     *     ((content: String | NodeJson) => NodeJson);
+     *     ((attrs: AttrsJson, content: String | NodeJson) => NodeJson);
+     *     ((attrs: AttrsJson, marks: Array<MarkJson>, content: String | NodeJson) => NodeJson);
+     * }}
+     */
     static listItem(...args) {
-        return { type: NodeTypes.LIST_ITEM, ...this.#textBlock(args, this.paragraph) };
+        const { attrs, content: children, marks } = this.#normalizeTextBlockArgs(args);
+
+        return {
+            type: NodeTypes.LIST_ITEM,
+            ...(attrs ? { attrs } : {}),
+            ...(marks ? { marks } : {}),
+            content: [].concat(children).map((content) => {
+                return typeof content === 'string' ? this.paragraph(content) : content;
+            })
+        };
     }
 
+    /**
+     * @type {{
+     *     ((level: Number, content: String | NodeJson) => NodeJson);
+     *     ((level: Number, attrs: AttrsJson, content: String | NodeJson) => NodeJson);
+     *     ((level: Number, attrs: AttrsJson, marks: Array<MarkJson>, content: String | NodeJson) => NodeJson);
+     * }}
+     */
     static heading(level, ...args) {
         const config = this.#textBlock(args, this.text);
 
@@ -29,6 +74,13 @@ export class NodeFactory {
         return { type: NodeTypes.HEADING, ...config };
     }
 
+    /**
+     * @type {{
+     *     ((content: String | NodeJson) => NodeJson);
+     *     ((attrs: AttrsJson, content: String | NodeJson) => NodeJson);
+     *     ((attrs: AttrsJson, marks: Array<MarkJson>, content: String | NodeJson) => NodeJson);
+     * }}
+     */
     static paragraph(...args) {
         return {
             type: NodeTypes.PARAGRAPH,
@@ -36,9 +88,9 @@ export class NodeFactory {
         };
     }
 
-    static #textBlock(args, createChildNode) {
+    static #textBlock(args) {
         const { attrs, content, marks } = this.#normalizeTextBlockArgs(args);
-        const children = typeof content === 'string' ? [createChildNode.call(this, content)] : content;
+        const children = typeof content === 'string' ? [this.text(content)] : content;
 
         return {
             content: children,
@@ -57,6 +109,11 @@ export class NodeFactory {
         return { attrs: args[0], marks: args[1], content: args[2] };
     }
 
+    /**
+     * @param {String} text
+     * @param {Array<MarkJson>} marks
+     * @returns {NodeJson}
+     */
     static text(text, marks) {
         return {
             type: NodeTypes.TEXT,
@@ -65,10 +122,19 @@ export class NodeFactory {
         };
     }
 
+    /**
+     * @param {String} type
+     * @param {AttrsJson} attrs
+     * @returns {MarkJson}
+     */
     static mark(type, attrs) {
         return { type, attrs };
     }
 
+    /**
+     * @param {*} value
+     * @returns {{tablet, desktop, mobile}}
+     */
     static populateAllDevices(value) {
         // return { mobile: value, tablet: value, desktop: value };
 

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

@@ -0,0 +1,124 @@
+import { NodeFactory } from '../NodeFactory';
+import { ListTypes, TextSettings } from '../../enums';
+
+describe('build node', () => {
+    test('should build doc node', () => {
+        expect(NodeFactory.doc([])).toMatchSnapshot();
+    });
+
+    test('should build list node with text items', () => {
+        const node = NodeFactory.list(ListTypes.DISC, [
+            'lorem ipsum 1',
+            'lorem ipsum 2'
+        ]);
+
+        expect(node).toMatchSnapshot();
+    });
+
+    test('should build list node with node items', () => {
+        const node = NodeFactory.list(ListTypes.DISC, [
+            NodeFactory.paragraph('lorem ipsum 1'),
+            NodeFactory.paragraph('lorem ipsum 2')
+        ]);
+
+        expect(node).toMatchSnapshot();
+    });
+
+    test('should build list node with custom list item nodes', () => {
+        const node = NodeFactory.list(ListTypes.DISC, [
+            NodeFactory.listItem(null, [
+                NodeFactory.mark(TextSettings.FONT_WEIGHT, { value: '700' })
+            ], 'lorem ipsum 1'),
+
+            NodeFactory.listItem(null, [
+                NodeFactory.mark(TextSettings.FONT_WEIGHT, { value: '700' })
+            ], 'lorem ipsum 2')
+        ]);
+
+        expect(node).toMatchSnapshot();
+    });
+
+    test('should build heading node', () => {
+        const node = NodeFactory.heading(1, 'lorem ipsum');
+
+        expect(node).toMatchSnapshot();
+    });
+
+    test('should build heading node with attrs', () => {
+        const node = NodeFactory.heading(1, { preset: { id: 'h1' } }, 'lorem ipsum');
+
+        expect(node).toMatchSnapshot();
+    });
+
+    test('should build heading node with marks', () => {
+        const node = NodeFactory.heading(1, null, [
+            NodeFactory.mark(TextSettings.FONT_WEIGHT, { value: '700' })
+        ], 'lorem ipsum');
+
+        expect(node).toMatchSnapshot();
+    });
+
+    test('should build heading with custom text node', () => {
+        const node = NodeFactory.heading(1, [
+            NodeFactory.text('lorem ipsum', [
+                NodeFactory.mark(TextSettings.FONT_WEIGHT, { value: '700' })
+            ])
+        ]);
+
+        expect(node).toMatchSnapshot();
+    });
+
+    test('should build paragraph node', () => {
+        const node = NodeFactory.paragraph('lorem ipsum');
+
+        expect(node).toMatchSnapshot();
+    });
+
+    test('should build paragraph node with attrs', () => {
+        const node = NodeFactory.paragraph({ preset: { id: 'regular-1' } }, 'lorem ipsum');
+
+        expect(node).toMatchSnapshot();
+    });
+
+    test('should build paragraph node with marks', () => {
+        const node = NodeFactory.paragraph(null, [
+            NodeFactory.mark(TextSettings.FONT_WEIGHT, { value: '700' })
+        ], 'lorem ipsum');
+
+        expect(node).toMatchSnapshot();
+    });
+
+    test('should build paragraph with custom text node', () => {
+        const node = NodeFactory.paragraph([
+            NodeFactory.text('lorem ipsum', [
+                NodeFactory.mark(TextSettings.FONT_WEIGHT, { value: '700' })
+            ])
+        ]);
+
+        expect(node).toMatchSnapshot();
+    });
+
+    test('should build text node', () => {
+        const node = NodeFactory.text('lorem ipsum');
+
+        expect(node).toMatchSnapshot();
+    });
+
+    test('should build text node with marks', () => {
+        const node = NodeFactory.text('lorem ipsum');
+
+        expect(node).toMatchSnapshot();
+    });
+
+    test('should build mark', () => {
+        const mark = NodeFactory.mark(TextSettings.FONT_WEIGHT, { value: '700' });
+
+        expect(mark).toMatchSnapshot();
+    });
+
+    test('should populate value to all devices', () => {
+        const value = NodeFactory.populateAllDevices('18');
+
+        expect(value).toMatchSnapshot();
+    });
+});

package/lib/services/__tests__/__snapshots__/NodeFactory.test.js.snap

@@ -0,0 +1,326 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`build node should build doc node 1`] = `
+Object {
+  "content": Array [],
+  "type": "doc",
+}
+`;
+
+exports[`build node should build heading node 1`] = `
+Object {
+  "attrs": Object {
+    "level": 1,
+  },
+  "content": Array [
+    Object {
+      "text": "lorem ipsum",
+      "type": "text",
+    },
+  ],
+  "type": "heading",
+}
+`;
+
+exports[`build node should build heading node with attrs 1`] = `
+Object {
+  "attrs": Object {
+    "level": 1,
+    "preset": Object {
+      "id": "h1",
+    },
+  },
+  "content": Array [
+    Object {
+      "text": "lorem ipsum",
+      "type": "text",
+    },
+  ],
+  "type": "heading",
+}
+`;
+
+exports[`build node should build heading node with marks 1`] = `
+Object {
+  "attrs": Object {
+    "level": 1,
+  },
+  "content": Array [
+    Object {
+      "text": "lorem ipsum",
+      "type": "text",
+    },
+  ],
+  "marks": Array [
+    Object {
+      "attrs": Object {
+        "value": "700",
+      },
+      "type": "font_weight",
+    },
+  ],
+  "type": "heading",
+}
+`;
+
+exports[`build node should build heading with custom text node 1`] = `
+Object {
+  "attrs": Object {
+    "level": 1,
+  },
+  "content": Array [
+    Object {
+      "marks": Array [
+        Object {
+          "attrs": Object {
+            "value": "700",
+          },
+          "type": "font_weight",
+        },
+      ],
+      "text": "lorem ipsum",
+      "type": "text",
+    },
+  ],
+  "type": "heading",
+}
+`;
+
+exports[`build node should build list node with custom list item nodes 1`] = `
+Object {
+  "attrs": Object {
+    "bullet": Object {
+      "type": "disc",
+    },
+  },
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "content": Array [
+            Object {
+              "text": "lorem ipsum 1",
+              "type": "text",
+            },
+          ],
+          "type": "paragraph",
+        },
+      ],
+      "marks": Array [
+        Object {
+          "attrs": Object {
+            "value": "700",
+          },
+          "type": "font_weight",
+        },
+      ],
+      "type": "listItem",
+    },
+    Object {
+      "content": Array [
+        Object {
+          "content": Array [
+            Object {
+              "text": "lorem ipsum 2",
+              "type": "text",
+            },
+          ],
+          "type": "paragraph",
+        },
+      ],
+      "marks": Array [
+        Object {
+          "attrs": Object {
+            "value": "700",
+          },
+          "type": "font_weight",
+        },
+      ],
+      "type": "listItem",
+    },
+  ],
+  "type": "list",
+}
+`;
+
+exports[`build node should build list node with node items 1`] = `
+Object {
+  "attrs": Object {
+    "bullet": Object {
+      "type": "disc",
+    },
+  },
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "content": Array [
+            Object {
+              "text": "lorem ipsum 1",
+              "type": "text",
+            },
+          ],
+          "type": "paragraph",
+        },
+      ],
+      "type": "listItem",
+    },
+    Object {
+      "content": Array [
+        Object {
+          "content": Array [
+            Object {
+              "text": "lorem ipsum 2",
+              "type": "text",
+            },
+          ],
+          "type": "paragraph",
+        },
+      ],
+      "type": "listItem",
+    },
+  ],
+  "type": "list",
+}
+`;
+
+exports[`build node should build list node with text items 1`] = `
+Object {
+  "attrs": Object {
+    "bullet": Object {
+      "type": "disc",
+    },
+  },
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "content": Array [
+            Object {
+              "text": "lorem ipsum 1",
+              "type": "text",
+            },
+          ],
+          "type": "paragraph",
+        },
+      ],
+      "type": "listItem",
+    },
+    Object {
+      "content": Array [
+        Object {
+          "content": Array [
+            Object {
+              "text": "lorem ipsum 2",
+              "type": "text",
+            },
+          ],
+          "type": "paragraph",
+        },
+      ],
+      "type": "listItem",
+    },
+  ],
+  "type": "list",
+}
+`;
+
+exports[`build node should build mark 1`] = `
+Object {
+  "attrs": Object {
+    "value": "700",
+  },
+  "type": "font_weight",
+}
+`;
+
+exports[`build node should build paragraph node 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "text": "lorem ipsum",
+      "type": "text",
+    },
+  ],
+  "type": "paragraph",
+}
+`;
+
+exports[`build node should build paragraph node with attrs 1`] = `
+Object {
+  "attrs": Object {
+    "preset": Object {
+      "id": "regular-1",
+    },
+  },
+  "content": Array [
+    Object {
+      "text": "lorem ipsum",
+      "type": "text",
+    },
+  ],
+  "type": "paragraph",
+}
+`;
+
+exports[`build node should build paragraph node with marks 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "text": "lorem ipsum",
+      "type": "text",
+    },
+  ],
+  "marks": Array [
+    Object {
+      "attrs": Object {
+        "value": "700",
+      },
+      "type": "font_weight",
+    },
+  ],
+  "type": "paragraph",
+}
+`;
+
+exports[`build node should build paragraph with custom text node 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "marks": Array [
+        Object {
+          "attrs": Object {
+            "value": "700",
+          },
+          "type": "font_weight",
+        },
+      ],
+      "text": "lorem ipsum",
+      "type": "text",
+    },
+  ],
+  "type": "paragraph",
+}
+`;
+
+exports[`build node should build text node 1`] = `
+Object {
+  "text": "lorem ipsum",
+  "type": "text",
+}
+`;
+
+exports[`build node should build text node with marks 1`] = `
+Object {
+  "text": "lorem ipsum",
+  "type": "text",
+}
+`;
+
+exports[`build node should populate value to all devices 1`] = `
+Object {
+  "desktop": "18",
+  "mobile": null,
+  "tablet": "18",
+}
+`;

package/lib/services/normalizer/HtmlNormalizer.js

@@ -2,6 +2,7 @@ import { BaseNormalizer } from './BaseNormalizer';
 
 export class HtmlNormalizer extends BaseNormalizer {
     static BLOCK_NODE_NAMES = ['P', 'H1', 'H2', 'H3', 'H4'];
+    static ROOT_NODE_NAMES = HtmlNormalizer.BLOCK_NODE_NAMES.concat('UL', 'OL');
 
     static BLOCK_STYLES = [
         'text-align',
@@ -30,10 +31,12 @@ export class HtmlNormalizer extends BaseNormalizer {
         this.dom = this.#parser.parse(this.content.replace(/(\r)?\n/g, ''));
 
         this.#removeComments();
+        this.#normalizeRootTags();
         this.#iterateNodes(this.#normalizeBreakLines, (node) => node.tagName === 'BR');
         this.#iterateNodes(this.#removeEmptyNodes, this.#isBlockNode);
         this.#iterateNodes(this.#normalizeListItems, (node) => node.tagName === 'LI');
         this.#normalizeBlockTextDecoration();
+        this.#normalizeBlockBackgroundColor();
     }
 
     get normalizedHTML() {
@@ -54,6 +57,30 @@ export class HtmlNormalizer extends BaseNormalizer {
         this.#runIterator(iterator, (node) => node.remove());
     }
 
+    #normalizeRootTags() {
+        const children = Array.from(this.dom.body.childNodes);
+        const fragment = this.dom.createDocumentFragment();
+        let capturingParagraph;
+
+        for (const node of children) {
+            if (this.#isRootNode(node)) {
+                fragment.append(node);
+                capturingParagraph = null;
+                continue;
+            }
+
+            if (!capturingParagraph) {
+                capturingParagraph = this.dom.createElement('p');
+                fragment.append(capturingParagraph);
+            }
+
+            capturingParagraph.append(node);
+        }
+
+        this.dom.body.innerHTML = '';
+        this.dom.body.append(fragment);
+    }
+
     #createNodeIterator(whatToShow, filter) {
         return this.dom.createNodeIterator(this.dom.body, whatToShow, filter);
     }
@@ -84,8 +111,7 @@ export class HtmlNormalizer extends BaseNormalizer {
     #normalizeListItems(itemEl) {
         const fragment = this.dom.createDocumentFragment();
         const children = Array.from(itemEl.childNodes);
-        let capturingParagraph;
-        let previousNode;
+        let capturingParagraph, previousNode;
 
         const append = (node) => {
             this.#assignElementProperties(node, itemEl, HtmlNormalizer.BLOCK_STYLES);
@@ -135,6 +161,10 @@ export class HtmlNormalizer extends BaseNormalizer {
         return HtmlNormalizer.BLOCK_NODE_NAMES.includes(node.tagName);
     }
 
+    #isRootNode(node) {
+        return HtmlNormalizer.ROOT_NODE_NAMES.includes(node.tagName);
+    }
+
     #assignElementProperties(target, source, properties) {
         for (const property of properties) {
             const value = source.style.getPropertyValue(property);
@@ -232,6 +262,28 @@ export class HtmlNormalizer extends BaseNormalizer {
         };
     }
 
+    #normalizeBlockBackgroundColor() {
+        const blockEls = this.dom.querySelectorAll('[style*="background-color"]:where(p, h1, h2, h3, h4, li)');
+
+        for (const blockEl of blockEls) {
+            this.#moveBackgroundColorToChildren(blockEl);
+        }
+    }
+
+    #moveBackgroundColorToChildren(blockEl) {
+        const blockColor = blockEl.style.backgroundColor;
+
+        blockEl.style.removeProperty('background-color');
+        if (!blockEl.style.cssText) blockEl.removeAttribute('style');
+
+        for (const childNode of blockEl.childNodes) {
+            const textEl = this.#wrapTextNode(blockEl, childNode);
+            const color = textEl.style.backgroundColor || blockColor;
+
+            textEl.style.backgroundColor = color;
+        }
+    }
+
     #wrapTextNode(parent, node) {
         if (node.nodeType !== this.#Node.TEXT_NODE) return node;
 

package/lib/services/normalizer/JsonNormalizer.js

@@ -14,8 +14,8 @@ export class JsonNormalizer extends BaseNormalizer {
 
     #iterateChildNodes(node, handler) {
         for (const child of node.content) {
-            handler.call(this, child);
             child.content && this.#iterateChildNodes(child, handler);
+            handler.call(this, child);
         }
     }
 
@@ -27,14 +27,14 @@ export class JsonNormalizer extends BaseNormalizer {
             if (!child.marks) continue;
 
             for (const childMark of child.marks.slice()) {
-                if (this.#canBubbleMark(node, childMark)) {
+                if (this.#includesMark(node, childMark)) {
                     this.#removeMark(child, childMark);
-                    this.#addMark(node, childMark);
                     continue;
                 }
 
-                if (this.#includesMark(node, childMark)) {
+                if (this.#canBubbleMark(node, childMark)) {
                     this.#removeMark(child, childMark);
+                    this.#addMark(node, childMark);
                 }
             }
         }
@@ -45,8 +45,9 @@ export class JsonNormalizer extends BaseNormalizer {
         if (this.#includesMarkType(node, childMark.type)) return false;
 
         for (const child of node.content) {
+            if (!child.content && node.type === NodeTypes.LIST_ITEM) continue;
             if (!child.marks) return false;
-            if (!this.#includesMarkType(child, childMark.type)) return false;
+            if (!this.#includesMark(child, childMark)) return false;
         }
 
         return true;