@zipify/wysiwyg 1.3.0-0 → 2.0.0-1

package/lib/services/ContentNormalizer.js

@@ -1,293 +0,0 @@
-import { BrowserDomParser } from './BrowserDomParser';
-
-export class ContentNormalizer {
-    static BLOCK_NODE_NAMES = ['P', 'H1', 'H2', 'H3', 'H4'];
-
-    static BLOCK_STYLES = [
-        'text-align',
-        'line-height',
-        'margin',
-        'margin-top',
-        'margin-bottom',
-        'margin-left',
-        'margin-right'
-    ];
-
-    static ASSIGN_STYLE_RULES = [
-        {
-            tag: /^(b|strong)$/,
-            ignore: /font-weight/
-        },
-        {
-            tag: /^i$/,
-            ignore: /font-style/
-        },
-        {
-            tag: /^s$/,
-            ignore: /text-decoration(.+)?/
-        }
-    ];
-
-    static build(content, options = {}) {
-        return new ContentNormalizer({
-            content,
-            parser: options.parser || new BrowserDomParser()
-        });
-    }
-
-    static normalize(content, options = {}) {
-        return ContentNormalizer.build(content, options).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.parse(this._content.replace(/(\r)?\n/g, ''));
-
-        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;
-    }
-
-    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());
-    }
-
-    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;
-        let previousNode;
-
-        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;
-                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, ContentNormalizer.BLOCK_STYLES);
-    }
-
-    _normalizeSettingsStructure(element) {
-        if (this._isOnlyTextContent(element)) return;
-
-        const cloned = element.cloneNode(true);
-        const migratingStyles = this._getMigratingStyles(element, { customProperties: true });
-        const content = [];
-
-        for (const node of cloned.childNodes) {
-            let child = node;
-
-            if (migratingStyles.length) {
-                child = this._wrapTextNode(cloned, node);
-                this._assignElementProperties(child, cloned, migratingStyles);
-            }
-
-            content.push(child);
-        }
-
-        element.replaceWith(...content);
-    }
-
-    _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);
-
-            this._assignElementProperties(child, element, properties);
-        }
-
-        this._removeStyleProperties(element, properties);
-    }
-
-    _isOnlyTextContent(node) {
-        return Array.from(node.childNodes).every((node) => node.nodeType === this._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)) continue;
-            if (!customProperties && property.startsWith('--')) continue;
-
-            properties.push(property);
-        }
-
-        return properties;
-    }
-
-    _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;
-    }
-
-    _assignElementProperties(target, source, properties) {
-        for (const property of properties) {
-            const value = 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);
-        }
-
-        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, 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);
-    }
-}