@zipify/wysiwyg 2.0.0-0 → 2.0.0-2

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.#includesMark(node, childMark)) {
+                    this.#removeMark(child, childMark);
+                    continue;
+                }
+
+                if (this.#canBubbleMark(node, childMark)) {
+                    this.#removeMark(child, childMark);
+                    this.#addMark(node, 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();
+    });
+});

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

@@ -0,0 +1,159 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`normalize json content should bubble mark from single text node to paragraph 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "text": "lorem ipsum",
+          "type": "text",
+        },
+      ],
+      "marks": Array [
+        Object {
+          "attrs": Object {
+            "value": "700",
+          },
+          "type": "font_weight",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`normalize json content should bubble mark from text to list item 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "attrs": Object {
+        "bullet": Object {
+          "type": "disc",
+        },
+      },
+      "content": Array [
+        Object {
+          "content": Array [
+            Object {
+              "content": Array [
+                Object {
+                  "text": "lorem ipsum",
+                  "type": "text",
+                },
+              ],
+              "type": "paragraph",
+            },
+          ],
+          "marks": Array [
+            Object {
+              "attrs": Object {
+                "value": "700",
+              },
+              "type": "font_weight",
+            },
+          ],
+          "type": "listItem",
+        },
+      ],
+      "type": "list",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`normalize json content should bubble mark from two text nodes to paragraph 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "text": "lorem",
+          "type": "text",
+        },
+        Object {
+          "marks": Array [
+            Object {
+              "attrs": Object {
+                "value": "#FF0000",
+              },
+              "type": "font_color",
+            },
+          ],
+          "text": " ipsum",
+          "type": "text",
+        },
+      ],
+      "marks": Array [
+        Object {
+          "attrs": Object {
+            "value": "700",
+          },
+          "type": "font_weight",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`normalize json content should bubble two marks 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "text": "hello world",
+          "type": "text",
+        },
+      ],
+      "marks": Array [
+        Object {
+          "attrs": Object {
+            "value": "Bungee",
+          },
+          "type": "font_family",
+        },
+        Object {
+          "attrs": Object {
+            "value": "800",
+          },
+          "type": "font_weight",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`normalize json content should not bubble inline marks 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "marks": Array [
+            Object {
+              "attrs": Object {
+                "underline": true,
+              },
+              "type": "text_decoration",
+            },
+          ],
+          "text": "hello world",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;

package/lib/services/normalizer/index.js

@@ -0,0 +1 @@
+export { ContentNormalizer } from './ContentNormalizer';

package/lib/styles/content.css

@@ -112,6 +112,14 @@ img.ProseMirror-separator {
     animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;
 }
 
+.ProseMirror span {
+    display: block;
+}
+
+.ProseMirror :where(p, h1, h2, h3, h4) span {
+    display: initial;
+}
+
 @keyframes ProseMirror-cursor-blink {
 
     to {

package/lib/utils/__tests__/findMarkByType.test.js

@@ -0,0 +1,17 @@
+import { findMarkByType } from '../findMarkByType';
+
+describe('find mark by type', () => {
+    test('should find mark by type name', () => {
+        const searchingMark = { type: { name: 'font_weight' } };
+        const marks = [{ type: { name: 'font_size' } }, searchingMark];
+
+        expect(findMarkByType(marks, 'font_weight')).toBe(searchingMark);
+    });
+
+    test('should find mark by type object', () => {
+        const searchingMark = { type: { name: 'font_weight' } };
+        const marks = [{ type: { name: 'font_size' } }, searchingMark];
+
+        expect(findMarkByType(marks, { name: 'font_weight' })).toBe(searchingMark);
+    });
+});

package/lib/utils/__tests__/isMarkAppliedToParent.test.js

@@ -0,0 +1,53 @@
+import { isMarkAppliedToParent } from '../isMarkAppliedToParent';
+
+const createMark = (attrs = {}) => ({
+    isInSet(set) {
+        return set.includes(this);
+    },
+    ...attrs
+});
+
+const createNode = (attrs = {}) => ({
+    resolve: jest.fn(),
+    path: [],
+    marks: [],
+    ...attrs
+});
+
+describe('is mark applied to parent', () => {
+    test('should return true if applied to parent', () => {
+        const checkingMark = createMark();
+        const doc = createNode();
+
+        doc.resolve.mockReturnValue({
+            path: [
+                createNode({ marks: [checkingMark] }),
+                0,
+                0,
+                createNode({ marks: [createMark()] }),
+                0,
+                1
+            ]
+        });
+
+        expect(isMarkAppliedToParent(doc, 0, checkingMark)).toBe(true);
+    });
+
+    test('should return false if not applied to parent', () => {
+        const checkingMark = createMark();
+        const doc = createNode();
+
+        doc.resolve.mockReturnValue({
+            path: [
+                createNode({ marks: [createMark()] }),
+                0,
+                0,
+                createNode({ marks: [createMark()] }),
+                0,
+                1
+            ]
+        });
+
+        expect(isMarkAppliedToParent(doc, 0, checkingMark)).toBe(false);
+    });
+});