@zipify/wysiwyg 1.3.0-0 → 2.0.0-1

package/lib/extensions/core/steps/RemoveNodeMarkStep.js

@@ -0,0 +1,50 @@
+import { Step, StepResult } from 'prosemirror-transform';
+import { Slice, Fragment } from 'prosemirror-model';
+import { AddNodeMarkStep } from './AddNodeMarkStep';
+
+export class RemoveNodeMarkStep extends Step {
+    static fromJSON(schema, json) {
+        if (typeof json.pos != 'number') {
+            throw new RangeError('Invalid input for RemoveNodeMarkStep.fromJSON');
+        }
+
+        return new RemoveNodeMarkStep(json.pos, schema.markFromJSON(json.mark));
+    }
+
+    constructor(pos, mark) {
+        super();
+        this.pos = pos;
+        this.mark = mark;
+    }
+
+    apply(doc) {
+        const node = doc.nodeAt(this.pos);
+
+        if (!node) return StepResult.fail('No node at mark step\'s position');
+
+        const updated = node.type.create(node.attrs, null, this.mark.removeFromSet(node.marks));
+        const slice = new Slice(Fragment.from(updated), 0, node.isLeaf ? 0 : 1);
+
+        return StepResult.fromReplace(doc, this.pos, this.pos + 1, slice);
+    }
+
+    invert(doc) {
+        const node = doc.nodeAt(this.pos);
+
+        if (!node || !this.mark.isInSet(node.marks)) return this;
+
+        return new AddNodeMarkStep(this.pos, this.mark);
+    }
+
+    map(mapping) {
+        const pos = mapping.mapResult(this.pos, 1);
+
+        return pos.deletedAfter ? null : new RemoveNodeMarkStep(pos.pos, this.mark);
+    }
+
+    toJSON() {
+        return { stepType: 'removeNodeMark', pos: this.pos, mark: this.mark.toJSON() };
+    }
+}
+
+Step.jsonID('removeNodeMark', RemoveNodeMarkStep);

package/lib/extensions/core/steps/index.js

@@ -0,0 +1,3 @@
+export { AddNodeMarkStep } from './AddNodeMarkStep';
+export { RemoveNodeMarkStep } from './RemoveNodeMarkStep';
+export { AttrStep } from './AttrStep';

package/lib/extensions/list/List.js

@@ -8,6 +8,7 @@ export const List = Node.create({
     name: NodeTypes.LIST,
     content: `${NodeTypes.LIST_ITEM}+`,
     group: 'block list',
+    marks: 'settings',
 
     addExtensions: () => [
         ListItem

package/lib/extensions/list/ListItem.js

@@ -3,6 +3,11 @@ import { NodeTypes } from '../../enums';
 
 export const ListItem = Base.extend({
     name: NodeTypes.LIST_ITEM,
+    marks: 'settings',
+
+    addOptions: () => ({
+        HTMLAttributes: { class: 'zw-style' }
+    }),
 
     addKeyboardShortcuts() {
         const { Enter } = this.parent();

package/lib/extensions/list/__tests__/List.test.js

@@ -1,32 +1,32 @@
 import { Editor } from '@tiptap/vue-2';
+import { buildTestExtensions } from '../../../__tests__/utils';
 import { ListTypes } from '../../../enums';
 import { StylePreset } from '../../StylePreset';
-import { List } from '../List';
 import { ContentNormalizer, NodeFactory } from '../../../services';
-import { buildCoreExtensions } from '../../core';
+import { List } from '../List';
 
 function createEditor({ content }) {
     return new Editor({
         content: ContentNormalizer.normalize(content),
         element: document.createElement('div'),
-        extensions: buildCoreExtensions().concat(
-            List.configure({
-                baseClass: 'zw-list--'
-            }),
-            StylePreset.configure({
-                presets: [
-                    {
-                        id: 'regular-1',
-                        common: {},
-                        mobile: {},
-                        tablet: {},
-                        desktop: {}
-                    }
-                ],
-                defaultId: 'regular-1',
-                baseClass: 'zw ts-'
-            })
-        )
+        extensions: buildTestExtensions({
+            include: [
+                List.configure({ baseClass: 'zw-list--' }),
+                StylePreset.configure({
+                    presets: [
+                        {
+                            id: 'regular-1',
+                            common: {},
+                            mobile: {},
+                            tablet: {},
+                            desktop: {}
+                        }
+                    ],
+                    defaultId: 'regular-1',
+                    baseClass: 'zw ts-'
+                })
+            ]
+        })
     });
 }
 
@@ -67,7 +67,8 @@ describe('apply list', () => {
             ])
         });
 
-        editor.chain().selectAll().applyList(ListTypes.LATIN).run();
+        editor.commands.selectAll();
+        editor.commands.applyList(ListTypes.LATIN);
 
         expect(editor.getJSON()).toMatchSnapshot();
     });
@@ -82,7 +83,8 @@ describe('apply list', () => {
             ])
         });
 
-        editor.chain().selectAll().removeList().run();
+        editor.commands.selectAll();
+        editor.commands.removeList();
 
         expect(editor.getJSON()).toMatchSnapshot();
     });
@@ -97,7 +99,8 @@ describe('apply list', () => {
             ])
         });
 
-        editor.chain().selectAll().applyList(ListTypes.LATIN).run();
+        editor.commands.selectAll();
+        editor.commands.applyList(ListTypes.LATIN);
 
         expect(editor.getJSON()).toMatchSnapshot();
     });
@@ -112,7 +115,8 @@ describe('apply list', () => {
             ])
         });
 
-        editor.chain().selectAll().applyList(ListTypes.ROMAN).run();
+        editor.commands.selectAll();
+        editor.commands.applyList(ListTypes.ROMAN);
 
         expect(editor.getJSON()).toMatchSnapshot();
     });
@@ -125,7 +129,8 @@ describe('apply list', () => {
             ])
         });
 
-        editor.chain().selectAll().applyList(ListTypes.LATIN).run();
+        editor.commands.selectAll();
+        editor.commands.applyList(ListTypes.LATIN);
 
         expect(editor.getJSON()).toMatchSnapshot();
     });

package/lib/services/NodeFactory.js

@@ -2,57 +2,61 @@ 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) {
-        const attrs = args.length === 1 ? null : args[0];
-        const content = args.length === 1 ? args[0] : args[1];
-        const children = typeof content === 'string' ? [this.text(content)] : content;
+    static #textBlock(args, createChildNode) {
+        const { attrs, content, marks } = this.#normalizeTextBlockArgs(args);
+        const children = typeof content === 'string' ? [createChildNode.call(this, content)] : content;
 
         return {
             content: children,
-            ...(attrs ? { attrs } : {})
+            ...(attrs ? { attrs } : {}),
+            ...(marks ? { marks } : {})
         };
     }
 
+    static #normalizeTextBlockArgs(args) {
+        if (args.length === 1) {
+            return { attrs: null, marks: null, content: args[0] };
+        }
+        if (args.length === 2) {
+            return { attrs: args[0], marks: null, content: args[1] };
+        }
+        return { attrs: args[0], marks: args[1], content: args[2] };
+    }
+
     static text(text, marks) {
         return {
             type: NodeTypes.TEXT,

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;
+    }
+}