@zipify/wysiwyg 2.0.0-0 → 2.0.0-10

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/index.js

@@ -1,6 +1,6 @@
 export { JsonSerializer } from './JsonSerializer';
 export { Storage } from './Storage';
 export { FavoriteColors } from './FavoriteColors';
-export { ContentNormalizer } from './ContentNormalizer';
+export { ContentNormalizer } from './normalizer';
 export { ContextWindow } from './ContextWidnow';
 export { NodeFactory } from './NodeFactory';

package/lib/services/normalizer/BaseNormalizer.js

@@ -0,0 +1,11 @@
+export class BaseNormalizer {
+    content;
+
+    constructor({ content }) {
+        this.content = content;
+    }
+
+    normalize() {
+        throw new Error('Implement abstract method');
+    }
+}

package/lib/services/normalizer/ContentNormalizer.js

@@ -0,0 +1,24 @@
+import { BrowserDomParser } from './BrowserDomParser';
+import { HtmlNormalizer } from './HtmlNormalizer';
+import { JsonNormalizer } from './JsonNormalizer';
+
+export class ContentNormalizer {
+    static build(content, options = {}) {
+        return typeof content === 'string' ? this.#buildHtml(content, options) : this.#buildJson(content);
+    }
+
+    static #buildHtml(content, options) {
+        return new HtmlNormalizer({
+            content,
+            parser: options.parser || new BrowserDomParser()
+        });
+    }
+
+    static #buildJson(content) {
+        return new JsonNormalizer({ content });
+    }
+
+    static normalize(content, options = {}) {
+        return ContentNormalizer.build(content, options).normalize();
+    }
+}

package/lib/services/normalizer/HtmlNormalizer.js

@@ -0,0 +1,297 @@
+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',
+        'line-height',
+        'margin',
+        'margin-top',
+        'margin-bottom',
+        'margin-left',
+        'margin-right'
+    ];
+
+    #parser;
+
+    constructor({ content, parser }) {
+        super({ content });
+        this.#parser = parser;
+        this.dom = null;
+    }
+
+    normalize() {
+        this.normalizeHTML();
+        return this.normalizedHTML;
+    }
+
+    normalizeHTML() {
+        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() {
+        return this.dom.body.innerHTML;
+    }
+
+    get #NodeFilter() {
+        return this.#parser.types.NodeFilter;
+    }
+
+    get #Node() {
+        return this.#parser.types.Node;
+    }
+
+    #removeComments() {
+        const iterator = this.#createNodeIterator(this.#NodeFilter.SHOW_COMMENT);
+
+        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);
+    }
+
+    #iterateNodes(handler, condition = () => true) {
+        const checkCondition = (node) => node.tagName !== 'BODY' && condition.call(this, node);
+
+        const iterator = this.#createNodeIterator(this.#NodeFilter.SHOW_ELEMENT, {
+            acceptNode: (node) => checkCondition(node) ? this.#NodeFilter.FILTER_ACCEPT : this.#NodeFilter.FILTER_REJECT
+        });
+
+        this.#runIterator(iterator, handler);
+    }
+
+    #runIterator(iterator, handler) {
+        let currentNode = iterator.nextNode();
+
+        while (currentNode) {
+            handler.call(this, currentNode);
+            currentNode = iterator.nextNode();
+        }
+    }
+
+    #removeEmptyNodes(node) {
+        if (!node.innerHTML.trim()) node.remove();
+    }
+
+    #normalizeListItems(itemEl) {
+        const fragment = this.dom.createDocumentFragment();
+        const children = Array.from(itemEl.childNodes);
+        let capturingParagraph, previousNode;
+
+        const append = (node) => {
+            this.#assignElementProperties(node, itemEl, HtmlNormalizer.BLOCK_STYLES);
+            fragment.append(node);
+        };
+
+        this.#assignElementProperties(itemEl, itemEl.parentElement, HtmlNormalizer.BLOCK_STYLES);
+
+        for (const node of children) {
+            if (this.#isBlockNode(node)) {
+                append(node);
+                capturingParagraph = null;
+                previousNode = node;
+                continue;
+            }
+
+            if (node.tagName === 'BR' && previousNode && previousNode?.tagName !== 'BR') {
+                node.remove();
+                previousNode = node;
+                continue;
+            }
+
+            if (node.tagName === 'BR') {
+                const emptyLineEl = this.dom.createElement('p');
+
+                emptyLineEl.append(node);
+                append(emptyLineEl);
+                capturingParagraph = null;
+                previousNode = node;
+                continue;
+            }
+
+            if (!capturingParagraph) {
+                capturingParagraph = this.dom.createElement('p');
+                append(capturingParagraph);
+            }
+
+            capturingParagraph.append(node);
+            previousNode = node;
+        }
+
+        itemEl.append(fragment);
+        this.#removeStyleProperties(itemEl, HtmlNormalizer.BLOCK_STYLES);
+    }
+
+    #isBlockNode(node) {
+        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);
+
+            if (value && !target.style.getPropertyValue(property)) {
+                target.style.setProperty(property, value);
+            }
+        }
+    }
+
+    #removeStyleProperties(element, properties) {
+        for (const property of properties) {
+            element.style.removeProperty(property);
+        }
+
+        if (element.style.length === 0) {
+            element.removeAttribute('style');
+        }
+    }
+
+    #normalizeBreakLines({ parentElement }) {
+        if (!this.#isBlockNode(parentElement)) return;
+        if (!parentElement.textContent) return;
+
+        const fragment = this.dom.createDocumentFragment();
+        const children = Array.from(parentElement.childNodes);
+        const parentTemplate = parentElement.cloneNode(true);
+
+        parentTemplate.innerHTML = '';
+        let capturingParagraph = parentTemplate.cloneNode();
+
+        const append = (node) => {
+            this.#assignElementProperties(node, parentElement, HtmlNormalizer.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);
+    }
+
+    #normalizeBlockTextDecoration() {
+        const blockEls = this.dom.querySelectorAll('[style*="text-decoration"]:where(p, h1, h2, h3, h4, li)');
+
+        for (const blockEl of blockEls) {
+            this.#moveTextDecorationToChildren(blockEl);
+        }
+    }
+
+    #moveTextDecorationToChildren(blockEl) {
+        const blockDecoration = this.#parseTextDecoration(blockEl);
+
+        blockEl.style.removeProperty('text-decoration-line');
+        blockEl.style.removeProperty('text-decoration');
+        if (!blockEl.style.cssText) blockEl.removeAttribute('style');
+
+        if (blockDecoration.none) return;
+
+        for (const childNode of blockEl.childNodes) {
+            const textEl = this.#wrapTextNode(blockEl, childNode);
+            const textDecoration = this.#parseTextDecoration(textEl);
+
+            const mergedDecoration = {
+                underline: textDecoration.underline || blockDecoration.underline,
+                line_through: textDecoration.line_through || blockDecoration.line_through
+            };
+
+            textEl.style.removeProperty('text-decoration-line');
+            textEl.style.removeProperty('text-decoration');
+
+            textEl.style.textDecoration = Object.entries(mergedDecoration)
+                .filter(([, value]) => value)
+                .map(([name]) => name.replace('_', '-'))
+                .join(' ');
+        }
+    }
+
+    #parseTextDecoration(element) {
+        const { textDecoration, textDecorationLine } = element.style;
+        const decoration = textDecoration || textDecorationLine || '';
+
+        return {
+            none: decoration.includes('none'),
+            underline: decoration.includes('underline'),
+            line_through: decoration.includes('line-through')
+        };
+    }
+
+    #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;
+
+        const span = this.dom.createElement('span');
+
+        span.append(node.cloneNode());
+        parent.replaceChild(span, node);
+
+        return span;
+    }
+}