@zipify/wysiwyg 2.0.0-0 → 2.0.0-1

package/lib/services/NodeFactory.js

@@ -2,49 +2,43 @@ import { NodeTypes } from '../enums';
 
 export class NodeFactory {
     static doc(content) {
-        return {
-            type: NodeTypes.DOCUMENT,
-            content
-        };
+        return { type: NodeTypes.DOCUMENT, content };
     }
 
     static list(type, items) {
         return {
             type: NodeTypes.LIST,
             attrs: { bullet: { type } },
-            content: items.map((item) => this.listItem([].concat(item)))
+
+            content: items.map((item) => {
+                return item.type === NodeTypes.LIST_ITEM ? item : this.listItem([].concat(item));
+            })
         };
     }
 
-    static listItem(content) {
-        return {
-            type: NodeTypes.LIST_ITEM,
-            content
-        };
+    static listItem(...args) {
+        return { type: NodeTypes.LIST_ITEM, ...this.#textBlock(args, this.paragraph) };
     }
 
     static heading(level, ...args) {
-        const config = this.#textBlock(args);
+        const config = this.#textBlock(args, this.text);
 
         config.attrs ??= {};
         config.attrs.level = level;
 
-        return {
-            type: NodeTypes.HEADING,
-            ...config
-        };
+        return { type: NodeTypes.HEADING, ...config };
     }
 
     static paragraph(...args) {
         return {
             type: NodeTypes.PARAGRAPH,
-            ...this.#textBlock(args)
+            ...this.#textBlock(args, this.text)
         };
     }
 
-    static #textBlock(args) {
+    static #textBlock(args, createChildNode) {
         const { attrs, content, marks } = this.#normalizeTextBlockArgs(args);
-        const children = typeof content === 'string' ? [this.text(content)] : content;
+        const children = typeof content === 'string' ? [createChildNode.call(this, content)] : content;
 
         return {
             content: children,

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,245 @@
+import { BaseNormalizer } from './BaseNormalizer';
+
+export class HtmlNormalizer extends BaseNormalizer {
+    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'
+    ];
+
+    #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.#iterateNodes(this.#normalizeBreakLines, (node) => node.tagName === 'BR');
+        this.#iterateNodes(this.#removeEmptyNodes, this.#isBlockNode);
+        this.#iterateNodes(this.#normalizeListItems, (node) => node.tagName === 'LI');
+        this.#normalizeBlockTextDecoration();
+    }
+
+    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, 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);
+    }
+
+    #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')
+        };
+    }
+
+    #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;
+    }
+}

package/lib/services/normalizer/JsonNormalizer.js

@@ -0,0 +1,81 @@
+import { isEqual } from 'lodash';
+import { NodeTypes, TextSettings } from '../../enums';
+import { BaseNormalizer } from './BaseNormalizer';
+
+export class JsonNormalizer extends BaseNormalizer {
+    normalize() {
+        this.#iterateNodes(this.#bubbleMarks);
+        return this.content;
+    }
+
+    #iterateNodes(handler) {
+        this.#iterateChildNodes(this.content, handler);
+    }
+
+    #iterateChildNodes(node, handler) {
+        for (const child of node.content) {
+            handler.call(this, child);
+            child.content && this.#iterateChildNodes(child, handler);
+        }
+    }
+
+    #bubbleMarks(node) {
+        if (!node.content) return;
+        if (node.type === NodeTypes.LIST) return;
+
+        for (const child of node.content) {
+            if (!child.marks) continue;
+
+            for (const childMark of child.marks.slice()) {
+                if (this.#canBubbleMark(node, childMark)) {
+                    this.#removeMark(child, childMark);
+                    this.#addMark(node, childMark);
+                    continue;
+                }
+
+                if (this.#includesMark(node, childMark)) {
+                    this.#removeMark(child, childMark);
+                }
+            }
+        }
+    }
+
+    #canBubbleMark(node, childMark) {
+        if (TextSettings.inlineMarks.includes(childMark.type)) return false;
+        if (this.#includesMarkType(node, childMark.type)) return false;
+
+        for (const child of node.content) {
+            if (!child.marks) return false;
+            if (!this.#includesMarkType(child, childMark.type)) return false;
+        }
+
+        return true;
+    }
+
+    #includesMark(node, checkingMark) {
+        return node.marks?.some((mark) => isEqual(mark, checkingMark)) ?? false;
+    }
+
+    #includesMarkType(node, type) {
+        return node.marks?.some((mark) => mark.type === type) ?? false;
+    }
+
+    #removeMark(node, mark) {
+        if (!node.marks) return;
+
+        const index = this.#findMarkIndexByType(node, mark.type);
+
+        if (index >= 0) node.marks.splice(index, 1);
+        if (!node.marks.length) delete node.marks;
+    }
+
+    #addMark(node, mark) {
+        this.#removeMark(node, mark);
+        node.marks ??= [];
+        node.marks.push(mark);
+    }
+
+    #findMarkIndexByType(node, type) {
+        return node.marks?.findIndex((mark) => mark.type === type) ?? null;
+    }
+}

package/lib/services/{__tests__/ContentNormalizer.test.js → normalizer/__tests__/HtmlNormalizer.test.js}

@@ -1,13 +1,6 @@
 import { ContentNormalizer } from '../ContentNormalizer';
-import { NodeFactory } from '../NodeFactory';
 
 describe('normalize text content', () => {
-    test('should ignore json content', () => {
-        const content = NodeFactory.doc([NodeFactory.paragraph('Test')]);
-
-        expect(ContentNormalizer.normalize(content)).toBe(content);
-    });
-
     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>';
@@ -107,4 +100,35 @@ describe('normalize text content', () => {
 
         expect(ContentNormalizer.normalize(input)).toBe(output);
     });
+
+    test('should ignore text decoration on text nodes', () => {
+        const input = '<p><span style="text-decoration: underline;">lorem ipsum</span></p>';
+        const output = '<p><span style="text-decoration: underline;">lorem ipsum</span></p>';
+
+        expect(ContentNormalizer.normalize(input)).toBe(output);
+    });
+
+    test('should ignore none text decoration', () => {
+        const input = '<p style="text-decoration: none;">lorem ipsum</p>';
+        const output = '<p>lorem ipsum</p>';
+
+        expect(ContentNormalizer.normalize(input)).toBe(output);
+    });
+
+    test('should move text decoration from block to text only nodes', () => {
+        const input = '<p style="text-decoration: underline;">lorem ipsum</p>';
+        const output = '<p><span style="text-decoration: underline;">lorem ipsum</span></p>';
+
+        expect(ContentNormalizer.normalize(input)).toBe(output);
+    });
+
+    test('should move text decoration from block to mixed content', () => {
+        const input = '<p style="text-decoration: underline;"><span style="text-decoration: line-through;">lorem</span> ipsum</p>';
+        const output = '<p>' +
+            '<span style="text-decoration: underline line-through;">lorem</span>' +
+            '<span style="text-decoration: underline;"> ipsum</span>' +
+        '</p>';
+
+        expect(ContentNormalizer.normalize(input)).toBe(output);
+    });
 });

package/lib/services/normalizer/__tests__/JsonNormalizer.test.js

@@ -0,0 +1,70 @@
+import { NodeFactory } from '../../NodeFactory';
+import { ListTypes, TextSettings } from '../../../enums';
+import { ContentNormalizer } from '../ContentNormalizer';
+
+describe('normalize json content', () => {
+    test('should bubble mark from single text node to paragraph', () => {
+        const input = NodeFactory.doc([
+            NodeFactory.paragraph([
+                NodeFactory.text('lorem ipsum', [
+                    NodeFactory.mark(TextSettings.FONT_WEIGHT, { value: '700' })
+                ])
+            ])
+        ]);
+
+        expect(ContentNormalizer.normalize(input)).toMatchSnapshot();
+    });
+
+    test('should bubble mark from two text nodes to paragraph', () => {
+        const input = NodeFactory.doc([
+            NodeFactory.paragraph([
+                NodeFactory.text('lorem', [
+                    NodeFactory.mark(TextSettings.FONT_WEIGHT, { value: '700' })
+                ]),
+                NodeFactory.text(' ipsum', [
+                    NodeFactory.mark(TextSettings.FONT_WEIGHT, { value: '700' }),
+                    NodeFactory.mark(TextSettings.FONT_COLOR, { value: '#FF0000' })
+                ])
+            ])
+        ]);
+
+        expect(ContentNormalizer.normalize(input)).toMatchSnapshot();
+    });
+
+    test('should bubble mark from text to list item', () => {
+        const input = NodeFactory.doc([
+            NodeFactory.list(ListTypes.DISC, [
+                NodeFactory.paragraph(null, [
+                    NodeFactory.mark(TextSettings.FONT_WEIGHT, { value: '700' })
+                ], 'lorem ipsum')
+            ])
+        ]);
+
+        expect(ContentNormalizer.normalize(input)).toMatchSnapshot();
+    });
+
+    test('should bubble two marks', () => {
+        const input = NodeFactory.doc([
+            NodeFactory.paragraph([
+                NodeFactory.text('hello world', [
+                    NodeFactory.mark(TextSettings.FONT_FAMILY, { value: 'Bungee' }),
+                    NodeFactory.mark(TextSettings.FONT_WEIGHT, { value: '800' })
+                ])
+            ])
+        ]);
+
+        expect(ContentNormalizer.normalize(input)).toMatchSnapshot();
+    });
+
+    test('should not bubble inline marks', () => {
+        const input = NodeFactory.doc([
+            NodeFactory.paragraph([
+                NodeFactory.text('hello world', [
+                    NodeFactory.mark(TextSettings.TEXT_DECORATION, { underline: true })
+                ])
+            ])
+        ]);
+
+        expect(ContentNormalizer.normalize(input)).toMatchSnapshot();
+    });
+});