@zipify/wysiwyg 2.0.0-0 → 2.0.0-1

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

@@ -1,14 +1,9 @@
-const DEFAULT_COMPARATOR = (parent, child) => child.eq(parent);
-
-export function isMarkAppliedToParent({ doc }, position, checkingMark, comparator = DEFAULT_COMPARATOR) {
+export function isMarkAppliedToParent({ doc }, position, checkingMark) {
     const steps = doc.resolve(position).path.reverse();
 
     for (const step of steps) {
         if (typeof step === 'number') continue;
-
-        for (const mark of step.marks) {
-            if (comparator(mark, checkingMark)) return true;
-        }
+        if (checkingMark.isInSet(step.marks)) return true;
     }
 
     return false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zipify/wysiwyg",
-  "version": "2.0.0-0",
+  "version": "2.0.0-1",
   "description": "Zipify modification of TipTap text editor",
   "main": "dist/wysiwyg.mjs",
   "bin": {
@@ -45,6 +45,7 @@
     "@tiptap/vue-2": "^2.0.0-beta.85",
     "commander": "^9.4.0",
     "jsdom": "^20.0.0",
+    "lodash": "^4.17.21",
     "simplebar": "^5.3.8"
   },
   "peerDependencies": {
@@ -57,6 +58,7 @@
     "@babel/plugin-transform-runtime": "^7.18.10",
     "@babel/preset-env": "^7.19.0",
     "@babel/runtime": "^7.19.0",
+    "@optimize-lodash/rollup-plugin": "^3.0.0",
     "@rollup/plugin-babel": "^5.3.1",
     "@rollup/plugin-commonjs": "^22.0.2",
     "@rollup/plugin-node-resolve": "^14.0.0",

package/lib/services/ContentNormalizer.js

@@ -1,194 +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 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');
-    }
-
-    get normalizedHTML() {
-        return this.dom.body.innerHTML;
-    }
-
-    get _NodeFilter() {
-        return this._parser.types.NodeFilter;
-    }
-
-    _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);
-    }
-
-    _isBlockNode(node) {
-        return ContentNormalizer.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, 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);
-    }
-}