@zipify/wysiwyg 1.0.0-dev.3 → 1.0.0-dev.30

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

@@ -210,3 +210,484 @@ Object {
   "type": "doc",
 }
 `;
+
+exports[`parsing html should parse circle type by class 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "attrs": Object {
+        "bullet": Object {
+          "type": "circle",
+        },
+      },
+      "content": Array [
+        Object {
+          "content": Array [
+            Object {
+              "attrs": Object {
+                "preset": Object {
+                  "id": "regular-1",
+                },
+              },
+              "content": Array [
+                Object {
+                  "text": "lorem ipsum",
+                  "type": "text",
+                },
+              ],
+              "type": "paragraph",
+            },
+          ],
+          "type": "listItem",
+        },
+      ],
+      "type": "list",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`parsing html should parse decimal as default 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "attrs": Object {
+        "bullet": Object {
+          "type": "decimal",
+        },
+      },
+      "content": Array [
+        Object {
+          "content": Array [
+            Object {
+              "attrs": Object {
+                "preset": Object {
+                  "id": "regular-1",
+                },
+              },
+              "content": Array [
+                Object {
+                  "text": "lorem ipsum",
+                  "type": "text",
+                },
+              ],
+              "type": "paragraph",
+            },
+          ],
+          "type": "listItem",
+        },
+      ],
+      "type": "list",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`parsing html should parse decimal type by attribute 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "attrs": Object {
+        "bullet": Object {
+          "type": "decimal",
+        },
+      },
+      "content": Array [
+        Object {
+          "content": Array [
+            Object {
+              "attrs": Object {
+                "preset": Object {
+                  "id": "regular-1",
+                },
+              },
+              "content": Array [
+                Object {
+                  "text": "lorem ipsum",
+                  "type": "text",
+                },
+              ],
+              "type": "paragraph",
+            },
+          ],
+          "type": "listItem",
+        },
+      ],
+      "type": "list",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`parsing html should parse decimal type by class 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "attrs": Object {
+        "bullet": Object {
+          "type": "decimal",
+        },
+      },
+      "content": Array [
+        Object {
+          "content": Array [
+            Object {
+              "attrs": Object {
+                "preset": Object {
+                  "id": "regular-1",
+                },
+              },
+              "content": Array [
+                Object {
+                  "text": "lorem ipsum",
+                  "type": "text",
+                },
+              ],
+              "type": "paragraph",
+            },
+          ],
+          "type": "listItem",
+        },
+      ],
+      "type": "list",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`parsing html should parse disc as default 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "attrs": Object {
+        "bullet": Object {
+          "type": "disc",
+        },
+      },
+      "content": Array [
+        Object {
+          "content": Array [
+            Object {
+              "attrs": Object {
+                "preset": Object {
+                  "id": "regular-1",
+                },
+              },
+              "content": Array [
+                Object {
+                  "text": "lorem ipsum",
+                  "type": "text",
+                },
+              ],
+              "type": "paragraph",
+            },
+          ],
+          "type": "listItem",
+        },
+      ],
+      "type": "list",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`parsing html should parse disc type by class 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "attrs": Object {
+        "bullet": Object {
+          "type": "disc",
+        },
+      },
+      "content": Array [
+        Object {
+          "content": Array [
+            Object {
+              "attrs": Object {
+                "preset": Object {
+                  "id": "regular-1",
+                },
+              },
+              "content": Array [
+                Object {
+                  "text": "lorem ipsum",
+                  "type": "text",
+                },
+              ],
+              "type": "paragraph",
+            },
+          ],
+          "type": "listItem",
+        },
+      ],
+      "type": "list",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`parsing html should parse latin type by class 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "attrs": Object {
+        "bullet": Object {
+          "type": "latin",
+        },
+      },
+      "content": Array [
+        Object {
+          "content": Array [
+            Object {
+              "attrs": Object {
+                "preset": Object {
+                  "id": "regular-1",
+                },
+              },
+              "content": Array [
+                Object {
+                  "text": "lorem ipsum",
+                  "type": "text",
+                },
+              ],
+              "type": "paragraph",
+            },
+          ],
+          "type": "listItem",
+        },
+      ],
+      "type": "list",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`parsing html should parse latin type by lower attribute 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "attrs": Object {
+        "bullet": Object {
+          "type": "latin",
+        },
+      },
+      "content": Array [
+        Object {
+          "content": Array [
+            Object {
+              "attrs": Object {
+                "preset": Object {
+                  "id": "regular-1",
+                },
+              },
+              "content": Array [
+                Object {
+                  "text": "lorem ipsum",
+                  "type": "text",
+                },
+              ],
+              "type": "paragraph",
+            },
+          ],
+          "type": "listItem",
+        },
+      ],
+      "type": "list",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`parsing html should parse latin type by upper attribute 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "attrs": Object {
+        "bullet": Object {
+          "type": "latin",
+        },
+      },
+      "content": Array [
+        Object {
+          "content": Array [
+            Object {
+              "attrs": Object {
+                "preset": Object {
+                  "id": "regular-1",
+                },
+              },
+              "content": Array [
+                Object {
+                  "text": "lorem ipsum",
+                  "type": "text",
+                },
+              ],
+              "type": "paragraph",
+            },
+          ],
+          "type": "listItem",
+        },
+      ],
+      "type": "list",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`parsing html should parse roman type by class 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "attrs": Object {
+        "bullet": Object {
+          "type": "roman",
+        },
+      },
+      "content": Array [
+        Object {
+          "content": Array [
+            Object {
+              "attrs": Object {
+                "preset": Object {
+                  "id": "regular-1",
+                },
+              },
+              "content": Array [
+                Object {
+                  "text": "lorem ipsum",
+                  "type": "text",
+                },
+              ],
+              "type": "paragraph",
+            },
+          ],
+          "type": "listItem",
+        },
+      ],
+      "type": "list",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`parsing html should parse roman type by lower attribute 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "attrs": Object {
+        "bullet": Object {
+          "type": "roman",
+        },
+      },
+      "content": Array [
+        Object {
+          "content": Array [
+            Object {
+              "attrs": Object {
+                "preset": Object {
+                  "id": "regular-1",
+                },
+              },
+              "content": Array [
+                Object {
+                  "text": "lorem ipsum",
+                  "type": "text",
+                },
+              ],
+              "type": "paragraph",
+            },
+          ],
+          "type": "listItem",
+        },
+      ],
+      "type": "list",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`parsing html should parse roman type by upper attribute 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "attrs": Object {
+        "bullet": Object {
+          "type": "roman",
+        },
+      },
+      "content": Array [
+        Object {
+          "content": Array [
+            Object {
+              "attrs": Object {
+                "preset": Object {
+                  "id": "regular-1",
+                },
+              },
+              "content": Array [
+                Object {
+                  "text": "lorem ipsum",
+                  "type": "text",
+                },
+              ],
+              "type": "paragraph",
+            },
+          ],
+          "type": "listItem",
+        },
+      ],
+      "type": "list",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`parsing html should parse square type by class 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "attrs": Object {
+        "bullet": Object {
+          "type": "square",
+        },
+      },
+      "content": Array [
+        Object {
+          "content": Array [
+            Object {
+              "attrs": Object {
+                "preset": Object {
+                  "id": "regular-1",
+                },
+              },
+              "content": Array [
+                Object {
+                  "text": "lorem ipsum",
+                  "type": "text",
+                },
+              ],
+              "type": "paragraph",
+            },
+          ],
+          "type": "listItem",
+        },
+      ],
+      "type": "list",
+    },
+  ],
+  "type": "doc",
+}
+`;

package/lib/index.js

@@ -1 +1,4 @@
-export { default as Wysiwyg } from './Wysiwyg';
+import Wysiwyg from './Wysiwyg';
+
+export default Wysiwyg;
+export { Wysiwyg };

package/lib/injectionTokens.js

@@ -3,5 +3,6 @@ export const InjectionTokens = Object.freeze({
     FONT_SIZES: Symbol('fontSizes'),
     EDITOR: Symbol('editor'),
     LOCAL_STORAGE: Symbol('localStorage'),
-    FAVORITE_COLORS: Symbol('favoriteColors')
+    FAVORITE_COLORS: Symbol('favoriteColors'),
+    PAGE_BLOCKS: Symbol('pageBlocks')
 });

package/lib/services/ContentNormalizer.js

@@ -0,0 +1,157 @@
+import { ContextWindow } from './ContextWidnow';
+
+export class ContentNormalizer {
+    static BLOCK_STYLES = ['text-align', 'line-height'];
+
+    static normalize(content) {
+        return new ContentNormalizer(content).normalize();
+    }
+
+    constructor(content) {
+        this._content = content;
+        this._dom = null;
+    }
+
+    normalize() {
+        if (typeof this._content !== 'string') {
+            return this._content;
+        }
+        return this._normalizeTextContent();
+    }
+
+    _normalizeTextContent() {
+        this._dom = new DOMParser().parseFromString(this._content, 'text/html');
+
+        this._iterateNodes(this._normalizeListItems.bind(this), (node) => node.tagName === 'LI');
+        this._iterateNodes(this._normalizeSettingsStructure.bind(this), (node) => node.tagName === 'SPAN');
+        this._iterateNodes(this._normalizeStyles.bind(this), (node) => node.tagName !== 'SPAN');
+
+        return this._dom.body.innerHTML;
+    }
+
+    _iterateNodes(handler, condition) {
+        const iterator = this._dom.createNodeIterator(this._dom.body, NodeFilter.SHOW_ELEMENT, {
+            acceptNode: (node) => condition(node) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT
+        });
+        let currentNode = iterator.nextNode();
+
+        while (currentNode) {
+            handler(currentNode);
+            currentNode = iterator.nextNode();
+        }
+    }
+
+    _normalizeListItems(itemEl) {
+        const fragment = new DocumentFragment();
+        const children = Array.from(itemEl.childNodes);
+        let capturingParagraph;
+
+        const append = (node) => {
+            this._assignElementProperties(node, itemEl, ContentNormalizer.BLOCK_STYLES);
+            fragment.append(node);
+        };
+
+        for (const node of children) {
+            if (node.tagName === 'P') {
+                append(node);
+                capturingParagraph = null;
+                continue;
+            }
+
+            if (!capturingParagraph) {
+                capturingParagraph = document.createElement('p');
+                append(capturingParagraph);
+            }
+
+            capturingParagraph.append(node);
+        }
+
+        itemEl.append(fragment);
+        this._removeStyleProperties(itemEl, ContentNormalizer.BLOCK_STYLES);
+    }
+
+    _normalizeSettingsStructure(element) {
+        const isTextChildren = Array.from(element.childNodes)
+            .every((node) => node.nodeType === Node.TEXT_NODE);
+
+        if (isTextChildren) 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) {
+        const properties = this._getMigratingStyles(element);
+
+        for (const node of element.childNodes) {
+            const child = this._wrapTextNode(element, node);
+
+            this._assignElementProperties(child, element, properties);
+        }
+
+        this._removeStyleProperties(element, properties);
+    }
+
+    _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 !== Node.TEXT_NODE) return node;
+
+        const span = ContextWindow.document.createElement('span');
+
+        span.append(node.cloneNode());
+        parent.replaceChild(span, node);
+
+        return span;
+    }
+
+    _assignElementProperties(target, source, properties) {
+        for (const property of properties) {
+            if (target.style.getPropertyValue(property)) {
+                continue;
+            }
+
+            const value = source.style.getPropertyValue(property);
+
+            if (value) 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');
+        }
+    }
+}

package/lib/services/ContextWidnow.js

@@ -0,0 +1,23 @@
+export class ContextWindow {
+    static window = window;
+
+    static use(window) {
+        this.window = window;
+    }
+
+    static get document() {
+        return this.window.document;
+    }
+
+    static get body() {
+        return this.document.body;
+    }
+
+    static get head() {
+        return this.document.head;
+    }
+
+    static getComputedStyle(element) {
+        return this.window.getComputedStyle(element);
+    }
+}

package/lib/services/Storage.js

@@ -17,19 +17,11 @@ export class Storage {
     }
 
     getItem(key) {
-        const json = this._getItemFromStorage(key);
+        const json = this.accessToStorage((storage) => storage.getItem(this.makeKey(key)));
 
         return JsonSerializer.decode(json);
     }
 
-    removeItem(key) {
-        this.accessToStorage((storage) => storage.removeItem(this.makeKey(key)));
-    }
-
-    hasItem(key) {
-        return !!this._getItemFromStorage(key);
-    }
-
     accessToStorage(action) {
         try {
             return action(this.nativeStorage);
@@ -38,10 +30,6 @@ export class Storage {
         }
     }
 
-    _getItemFromStorage(key) {
-        return this.accessToStorage((storage) => storage.getItem(this.makeKey(key)));
-    }
-
     onPrivateModeEnabled(error) {
         // eslint-disable-next-line no-console
         console.error(error);