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

package/lib/extensions/index.js

@@ -22,6 +22,7 @@ export const getExtensions = (options) => CORE_EXTENSIONS.concat([
     StylePreset.configure({
         presetsRef: options.presetsRef,
         defaultId: options.defaultPresetId,
+        baseClass: options.basePresetClass,
         makeVariable: options.makePresetVariable
     }),
     List.configure({

package/lib/extensions/list/List.js

@@ -21,6 +21,40 @@ export const List = Node.create({
         bullet: { isRequired: true }
     }),
 
+    parseHTML() {
+        const HTML_TYPES = {
+            a: ListTypes.ROMAN,
+            i: ListTypes.LATIN,
+            '1': ListTypes.DECIMAL
+        };
+
+        const getBulletType = (element) => {
+            for (const type of ListTypes.values) {
+                const bulletClass = `.${this.options.baseClass}${type}`;
+
+                if (element.matches(bulletClass)) return type;
+                if (HTML_TYPES[element.type.toLowerCase()] === type) return type;
+            }
+        };
+
+        return [
+            {
+                tag: 'ol',
+
+                getAttrs: (element) => ({
+                    bullet: { type: getBulletType(element) || ListTypes.DECIMAL }
+                })
+            },
+            {
+                tag: 'ul',
+
+                getAttrs: (element) => ({
+                    bullet: { type: getBulletType(element) || ListTypes.DISC }
+                })
+            }
+        ];
+    },
+
     renderHTML({ HTMLAttributes: attrs }) {
         const isOrdered = ListTypes.ordered.includes(attrs.bullet.type);
         const tag = isOrdered ? 'ol' : 'ul';

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

@@ -5,13 +5,18 @@ import { ListTypes } from '../../../enums';
 import { CORE_EXTENSIONS } from '../../core';
 import { StylePreset } from '../../StylePreset';
 import { List } from '../List';
+import { ContentNormalizer } from '../../../services';
 
 function createEditor({ content }) {
+    const normalizer = new ContentNormalizer();
+
     return new Editor({
-        content,
+        content: normalizer.normalize(content),
         element: document.createElement('div'),
         extensions: CORE_EXTENSIONS.concat(
-            List,
+            List.configure({
+                baseClass: 'zw-list--'
+            }),
             StylePreset.configure({
                 presetsRef: ref([
                     {
@@ -22,7 +27,8 @@ function createEditor({ content }) {
                         desktop: {}
                     }
                 ]),
-                defaultId: 'regular-1'
+                defaultId: 'regular-1',
+                baseClass: 'zw ts-'
             })
         )
     });
@@ -128,3 +134,109 @@ describe('apply list', () => {
         expect(editor.getJSON()).toMatchSnapshot();
     });
 });
+
+describe('parsing html', () => {
+    test('should parse disc type by class', () => {
+        const editor = createEditor({
+            content: '<ul class="zw-list--disc"><li>lorem ipsum</li></ul>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should parse disc as default', () => {
+        const editor = createEditor({
+            content: '<ul><li>lorem ipsum</li></ul>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should parse circle type by class', () => {
+        const editor = createEditor({
+            content: '<ul class="zw-list--circle"><li>lorem ipsum</li></ul>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should parse square type by class', () => {
+        const editor = createEditor({
+            content: '<ul class="zw-list--square"><li>lorem ipsum</li></ul>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should parse decimal type by class', () => {
+        const editor = createEditor({
+            content: '<ol class="zw-list--decimal"><li>lorem ipsum</li></ol>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should parse decimal as default', () => {
+        const editor = createEditor({
+            content: '<ol><li>lorem ipsum</li></ol>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should parse decimal type by attribute', () => {
+        const editor = createEditor({
+            content: '<ol type="1"><li>lorem ipsum</li></ol>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should parse roman type by class', () => {
+        const editor = createEditor({
+            content: '<ol class="zw-list--roman"><li>lorem ipsum</li></ol>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should parse roman type by lower attribute', () => {
+        const editor = createEditor({
+            content: '<ol type="a"><li>lorem ipsum</li></ol>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should parse roman type by upper attribute', () => {
+        const editor = createEditor({
+            content: '<ol type="A"><li>lorem ipsum</li></ol>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should parse latin type by class', () => {
+        const editor = createEditor({
+            content: '<ol class="zw-list--latin"><li>lorem ipsum</li></ol>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should parse latin type by lower attribute', () => {
+        const editor = createEditor({
+            content: '<ol type="i"><li>lorem ipsum</li></ol>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should parse latin type by upper attribute', () => {
+        const editor = createEditor({
+            content: '<ol type="I"><li>lorem ipsum</li></ol>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+});

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",
+}
+`;