@zipify/wysiwyg 1.0.0-dev.4 → 1.0.0-dev.5

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

@@ -92,9 +92,7 @@ Object {
   "content": Array [
     Object {
       "attrs": Object {
-        "preset": Object {
-          "id": "regular-1",
-        },
+        "preset": null,
       },
       "content": Array [
         Object {
@@ -106,9 +104,7 @@ Object {
     },
     Object {
       "attrs": Object {
-        "preset": Object {
-          "id": "regular-1",
-        },
+        "preset": null,
       },
       "content": Array [
         Object {
@@ -210,3 +206,458 @@ 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": null,
+              },
+              "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": null,
+              },
+              "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": null,
+              },
+              "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": null,
+              },
+              "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": null,
+              },
+              "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": null,
+              },
+              "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": null,
+              },
+              "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": null,
+              },
+              "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": null,
+              },
+              "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": null,
+              },
+              "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": null,
+              },
+              "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": null,
+              },
+              "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": null,
+              },
+              "content": Array [
+                Object {
+                  "text": "lorem ipsum",
+                  "type": "text",
+                },
+              ],
+              "type": "paragraph",
+            },
+          ],
+          "type": "listItem",
+        },
+      ],
+      "type": "list",
+    },
+  ],
+  "type": "doc",
+}
+`;

package/lib/services/ContentNormalizer.js

@@ -0,0 +1,113 @@
+export class ContentNormalizer {
+    static NORMALIZING_STYLE_BLACKLIST = ['text-align', 'line-height'];
+
+    normalize(content) {
+        if (typeof content !== 'string') return content;
+
+        return this._normalizeTextContent(content);
+    }
+
+    _normalizeTextContent(content) {
+        const parser = new DOMParser();
+        const dom = parser.parseFromString(content, 'text/html');
+
+        this._iterateNodes(dom, this._normalizeStructure.bind(this), (node) => node.tagName === 'SPAN');
+        this._iterateNodes(dom, this._normalizeStyles.bind(this), (node) => node.tagName !== 'SPAN');
+
+        return dom.body.innerHTML;
+    }
+
+    _iterateNodes(dom, handler, condition) {
+        const iterator = dom.createNodeIterator(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();
+        }
+    }
+
+    _normalizeStructure(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);
+        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) {
+        const blacklist = ContentNormalizer.NORMALIZING_STYLE_BLACKLIST;
+        const properties = [];
+
+        for (let index = 0; index < element.style.length; index++) {
+            const property = element.style.item(index);
+
+            if (!blacklist.includes(property)) {
+                properties.push(property);
+            }
+        }
+
+        return properties;
+    }
+
+    _wrapTextNode(parent, node) {
+        if (node.nodeType !== Node.TEXT_NODE) return node;
+
+        const span = 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;
+            }
+
+            target.style.setProperty(property, source.style.getPropertyValue(property));
+        }
+    }
+
+    _removeStyleProperties(element, properties) {
+        for (const property of properties) {
+            element.style.removeProperty(property);
+        }
+
+        if (element.style.length === 0) {
+            element.removeAttribute('style');
+        }
+    }
+}

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);

package/lib/services/__tests__/ContentNormalizer.test.js

@@ -0,0 +1,41 @@
+import { ContentNormalizer } from '../ContentNormalizer';
+import { NodeFactory } from '../../__tests__/utils';
+
+const normalize = (content) => new ContentNormalizer().normalize(content);
+
+describe('normalize text settings', () => {
+    test('should ignore json content', () => {
+        const content = NodeFactory.doc([NodeFactory.paragraph('Test')]);
+
+        expect(normalize(content)).toBe(content);
+    });
+
+    test('should flat structure', () => {
+        const input = '<p style="text-align: center; color: rgb(255, 255, 255);"><span style="background-color: rgb(255, 0, 0);">lore<span style="color: rgb(0, 0, 0);">m ip</span>sum</span></p>';
+        const output = '<p style="text-align: center;">' +
+            '<span style="background-color: rgb(255, 0, 0); color: rgb(255, 255, 255);">lore</span>' +
+            '<span style="color: rgb(0, 0, 0); background-color: rgb(255, 0, 0);">m ip</span>' +
+            '<span style="background-color: rgb(255, 0, 0); color: rgb(255, 255, 255);">sum</span>' +
+        '</p>';
+
+        expect(normalize(input)).toBe(output);
+    });
+
+    test('should move styles from paragraph to text', () => {
+        const input = '<p style="background-color: red;">lorem ipsum</p>';
+        const output = '<p><span style="background-color: red;">lorem ipsum</span></p>';
+
+        expect(normalize(input)).toBe(output);
+    });
+
+    test('should move styles from paragraph to unstyled text', () => {
+        const input = '<p style="background-color: red;"><span style="background-color: #000;">lorem</span> ipsum <span style="color: white;">one</span></p>';
+        const output = '<p>' +
+            '<span style="background-color: #000;">lorem</span>' +
+            '<span style="background-color: red;"> ipsum </span>' +
+            '<span style="color: white; background-color: red;">one</span' +
+        '></p>';
+
+        expect(normalize(input)).toBe(output);
+    });
+});

package/lib/services/__tests__/FavoriteColors.test.js

@@ -0,0 +1,20 @@
+import { ref } from '@vue/composition-api';
+import { FavoriteColors } from '../FavoriteColors';
+
+function createService({ colors, onUpdate }) {
+    return new FavoriteColors({
+        listRef: ref(colors ?? []),
+        triggerUpdate: onUpdate
+    });
+}
+
+describe('trigger update', () => {
+    test('should trigger colors update', () => {
+        const onUpdate = jest.fn();
+        const service = createService({ onUpdate });
+
+        service.triggerUpdate(['red']);
+
+        expect(onUpdate).toHaveBeenCalledWith(['red']);
+    });
+});

package/lib/services/__tests__/JsonSerializer.test.js

@@ -0,0 +1,23 @@
+import { JsonSerializer } from '../JsonSerializer';
+
+describe('decode', () => {
+    test('should decode json', () => {
+        const json = JsonSerializer.decode('{ "test": 1 }');
+
+        expect(json).toEqual({ test: 1 });
+    });
+
+    test('should return null on error', () => {
+        const json = JsonSerializer.decode('{ "tes');
+
+        expect(json).toBe(null);
+    });
+});
+
+describe('encode', () => {
+    test('should encode object to json', () => {
+        const json = JsonSerializer.encode({ test: 1 });
+
+        expect(json).toBe('{"test":1}');
+    });
+});