@zipify/wysiwyg 1.0.0-dev.1 → 1.0.0-dev.12

package/lib/extensions/__tests__/LineHeight.test.js

@@ -5,6 +5,7 @@ import { createCommand } from '../../utils';
 import { CORE_EXTENSIONS } from '../core';
 import { DeviceManager } from '../DeviceManager';
 import { LineHeight } from '../LineHeight';
+import { ContentNormalizer } from '../../services';
 
 const MockStylePreset = Extension.create({
     name: 'style_preset',
@@ -21,8 +22,10 @@ const MockStylePreset = Extension.create({
 });
 
 function createEditor({ content }) {
+    const normalizer = new ContentNormalizer();
+
     return new Editor({
-        content,
+        content: normalizer.normalize(content),
         extensions: CORE_EXTENSIONS.concat(
             MockStylePreset,
             DeviceManager.configure({ deviceRef: ref('desktop') }),
@@ -104,3 +107,40 @@ describe('rendering', () => {
         expect(editor.getHTML()).toMatchSnapshot();
     });
 });
+
+describe('parsing html', () => {
+    test('should get value from text in relative units', () => {
+        const editor = createEditor({
+            content: '<p style="line-height: 1.2">test</p>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should get value from text in px units with font size', () => {
+        const editor = createEditor({
+            content: '<p style="line-height: 24px; font-size: 20px;">test</p>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should get value from text in px units with no font size', () => {
+        global.document.body.style.fontSize = '20px';
+
+        const editor = createEditor({
+            content: '<p style="line-height: 24px">test</p>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+        global.document.body.style.removeProperty('font-size');
+    });
+
+    test('should set null if no alignment', () => {
+        const editor = createEditor({
+            content: '<p>test</p>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+});

package/lib/extensions/__tests__/StylePreset.test.js

@@ -5,6 +5,7 @@ import { CORE_EXTENSIONS } from '../core';
 import { StylePreset } from '../StylePreset';
 import { List } from '../list';
 import { ListTypes, NodeTypes, TextSettings } from '../../enums';
+import { ContentNormalizer } from '../../services';
 
 const MockFontSize = Mark.create({
     name: TextSettings.FONT_SIZE,
@@ -44,13 +45,16 @@ const MockAlignment = Extension.create({
 
 function createEditor({ content, presets, defaultId }) {
     return new Promise((resolve) => {
+        const normalizer = new ContentNormalizer();
+
         const editor = new Editor({
-            content,
+            content: normalizer.normalize(content),
             onCreate: () => resolve(editor),
 
             extensions: CORE_EXTENSIONS.concat(
                 StylePreset.configure({
                     presetsRef: ref(presets),
+                    baseClass: 'zw ts-',
                     defaultId,
 
                     makeVariable({ device, preset, property }) {
@@ -398,3 +402,74 @@ describe('remove preset customization', () => {
         );
     });
 });
+
+describe('parsing html', () => {
+    test('should get by fallback class', async () => {
+        const editor = await createEditor({
+            content: '<p class="zpa-regular2">lorem ipsum</p>',
+            defaultId: 'regular-1',
+            presets: [
+                createPreset({ id: 'regular-1' }),
+                createPreset({ id: 'regular-2', fallbackClass: 'zpa-regular2' })
+            ]
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should get by preset class', async () => {
+        const editor = await createEditor({
+            content: '<p class="zw ts-regular-2">lorem ipsum</p>',
+            defaultId: 'regular-1',
+            presets: [
+                createPreset({ id: 'regular-1' }),
+                createPreset({ id: 'regular-2' })
+            ]
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should get by heading tag', async () => {
+        const editor = await createEditor({
+            content: '<h3>lorem ipsum</h3>',
+            defaultId: 'regular-1',
+            presets: [
+                createPreset({ id: 'regular-1' }),
+                createPreset({ id: 'h3', node: { type: 'heading', level: 3 } })
+            ]
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should set default preset to unstyled paragraph', async () => {
+        const editor = await createEditor({
+            content: '<p>lorem ipsum</p>',
+            defaultId: 'regular-1',
+            presets: [createPreset({ id: 'regular-1' })]
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should set null to list item', async () => {
+        const editor = await createEditor({
+            content: '<ul><li>lorem ipsum</li></ul>',
+            defaultId: 'regular-1',
+            presets: [createPreset({ id: 'regular-1' })]
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should set null to list item with preset', async () => {
+        const editor = await createEditor({
+            content: '<ul class="zw regular-1"><li>lorem ipsum</li></ul>',
+            defaultId: 'regular-1',
+            presets: [createPreset({ id: 'regular-1' })]
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+});

package/lib/extensions/__tests__/TextDecoration.test.js

@@ -4,6 +4,7 @@ import { NodeFactory } from '../../__tests__/utils';
 import { createCommand } from '../../utils';
 import { CORE_EXTENSIONS } from '../core';
 import { TextDecoration } from '../TextDecoration';
+import { ContentNormalizer } from '../../services';
 
 const MockStylePreset = Extension.create({
     name: 'style_preset',
@@ -18,8 +19,10 @@ const MockStylePreset = Extension.create({
 });
 
 function createEditor({ content }) {
+    const normalizer = new ContentNormalizer();
+
     return new Editor({
-        content,
+        content: normalizer.normalize(content),
         extensions: CORE_EXTENSIONS.concat(MockStylePreset, TextDecoration)
     });
 }
@@ -256,3 +259,62 @@ describe('rendering', () => {
         expect(editor.getHTML()).toMatchSnapshot();
     });
 });
+
+
+describe('parsing html', () => {
+    test('should get underline from paragraph', () => {
+        const editor = createEditor({
+            content: '<p style="text-decoration-line: underline">test</p>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should get strike through from paragraph', () => {
+        const editor = createEditor({
+            content: '<p style="text-decoration-line: line-through">test</p>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should get both from paragraph', () => {
+        const editor = createEditor({
+            content: '<p style="text-decoration-line: line-through underline">test</p>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should get underline from text', () => {
+        const editor = createEditor({
+            content: '<p><span style="text-decoration-line: underline">lorem</span> ipsum</p>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should get strike through from text', () => {
+        const editor = createEditor({
+            content: '<p><span style="text-decoration-line: line-through">lorem</span> ipsum</p>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should get both from text', () => {
+        const editor = createEditor({
+            content: '<p><span style="text-decoration-line: underline line-through">lorem</span> ipsum</p>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should merge paragraph and text settings', () => {
+        const editor = createEditor({
+            content: '<p style="text-decoration-line: underline"><span style="text-decoration-line: line-through">lorem</span> ipsum</p>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+});

package/lib/extensions/__tests__/__snapshots__/Alignment.test.js.snap

@@ -24,6 +24,50 @@ Object {
 }
 `;
 
+exports[`parsing html should get alignment from text 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "attrs": Object {
+        "alignment": Object {
+          "desktop": "center",
+          "mobile": "center",
+          "tablet": "center",
+        },
+      },
+      "content": Array [
+        Object {
+          "text": "test",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`parsing html should set null if no alignment 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "attrs": Object {
+        "alignment": null,
+      },
+      "content": Array [
+        Object {
+          "text": "test",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
 exports[`rendering should render all devices 1`] = `"<p class=\\"zw-style\\" style=\\"--zw-mobile-text-align: left; --zw-tablet-text-align: right; --zw-desktop-text-align: center;\\">hello world</p>"`;
 
 exports[`rendering should render only desktop 1`] = `"<p class=\\"zw-style\\" style=\\"--zw-desktop-text-align: center;\\">hello world</p>"`;

package/lib/extensions/__tests__/__snapshots__/BackgroundColor.test.js.snap

@@ -25,4 +25,95 @@ Object {
 }
 `;
 
+exports[`parsing html should get value from paragraph 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "marks": Array [
+            Object {
+              "attrs": Object {
+                "value": "#FF0000",
+              },
+              "type": "background_color",
+            },
+          ],
+          "text": "test",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`parsing html should get value from text 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "marks": Array [
+            Object {
+              "attrs": Object {
+                "value": "#FF0000",
+              },
+              "type": "background_color",
+            },
+          ],
+          "text": "lorem",
+          "type": "text",
+        },
+        Object {
+          "text": " ipsum",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`parsing html should merge paragraph and text settings 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "marks": Array [
+            Object {
+              "attrs": Object {
+                "value": "#000000",
+              },
+              "type": "background_color",
+            },
+          ],
+          "text": "lorem",
+          "type": "text",
+        },
+        Object {
+          "marks": Array [
+            Object {
+              "attrs": Object {
+                "value": "#FF0000",
+              },
+              "type": "background_color",
+            },
+          ],
+          "text": " ipsum",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
 exports[`rendering should render html 1`] = `"<p class=\\"zw-style\\"><span style=\\"--zw-background-color: green;\\" class=\\"zw-style\\">hello world</span></p>"`;

package/lib/extensions/__tests__/__snapshots__/FontColor.test.js.snap

@@ -25,4 +25,95 @@ Object {
 }
 `;
 
+exports[`parsing html should get value from paragraph 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "marks": Array [
+            Object {
+              "attrs": Object {
+                "value": "#FF0000",
+              },
+              "type": "font_color",
+            },
+          ],
+          "text": "test",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`parsing html should get value from text 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "marks": Array [
+            Object {
+              "attrs": Object {
+                "value": "#FF0000",
+              },
+              "type": "font_color",
+            },
+          ],
+          "text": "lorem",
+          "type": "text",
+        },
+        Object {
+          "text": " ipsum",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`parsing html should merge paragraph and text settings 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "marks": Array [
+            Object {
+              "attrs": Object {
+                "value": "#000000",
+              },
+              "type": "font_color",
+            },
+          ],
+          "text": "lorem",
+          "type": "text",
+        },
+        Object {
+          "marks": Array [
+            Object {
+              "attrs": Object {
+                "value": "#FF0000",
+              },
+              "type": "font_color",
+            },
+          ],
+          "text": " ipsum",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
 exports[`rendering should render html 1`] = `"<p class=\\"zw-style\\"><span style=\\"--zw-font-color: green;\\" class=\\"zw-style\\">hello world</span></p>"`;

package/lib/extensions/__tests__/__snapshots__/FontFamily.test.js.snap

@@ -155,4 +155,95 @@ Object {
 }
 `;
 
+exports[`parsing html should get value from paragraph 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "marks": Array [
+            Object {
+              "attrs": Object {
+                "value": "Lato",
+              },
+              "type": "font_family",
+            },
+          ],
+          "text": "test",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`parsing html should get value from text 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "marks": Array [
+            Object {
+              "attrs": Object {
+                "value": "Lato",
+              },
+              "type": "font_family",
+            },
+          ],
+          "text": "lorem",
+          "type": "text",
+        },
+        Object {
+          "text": " ipsum",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`parsing html should merge paragraph and text settings 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "marks": Array [
+            Object {
+              "attrs": Object {
+                "value": "Roboto",
+              },
+              "type": "font_family",
+            },
+          ],
+          "text": "lorem",
+          "type": "text",
+        },
+        Object {
+          "marks": Array [
+            Object {
+              "attrs": Object {
+                "value": "Lato",
+              },
+              "type": "font_family",
+            },
+          ],
+          "text": " ipsum",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
 exports[`rendering should render html 1`] = `"<p class=\\"zw-style\\"><span style=\\"--zw-font-family: Bungee;\\" class=\\"zw-style\\">hello world</span></p>"`;

package/lib/extensions/__tests__/__snapshots__/FontSize.test.js.snap

@@ -135,6 +135,105 @@ Object {
 }
 `;
 
+exports[`parsing html should get value from paragraph 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "marks": Array [
+            Object {
+              "attrs": Object {
+                "desktop": "24",
+                "mobile": "24",
+                "tablet": "24",
+              },
+              "type": "font_size",
+            },
+          ],
+          "text": "test",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`parsing html should get value from text 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "marks": Array [
+            Object {
+              "attrs": Object {
+                "desktop": "24",
+                "mobile": "24",
+                "tablet": "24",
+              },
+              "type": "font_size",
+            },
+          ],
+          "text": "lorem",
+          "type": "text",
+        },
+        Object {
+          "text": " ipsum",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`parsing html should merge paragraph and text settings 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "marks": Array [
+            Object {
+              "attrs": Object {
+                "desktop": "20",
+                "mobile": "20",
+                "tablet": "20",
+              },
+              "type": "font_size",
+            },
+          ],
+          "text": "lorem",
+          "type": "text",
+        },
+        Object {
+          "marks": Array [
+            Object {
+              "attrs": Object {
+                "desktop": "24",
+                "mobile": "24",
+                "tablet": "24",
+              },
+              "type": "font_size",
+            },
+          ],
+          "text": " ipsum",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
 exports[`rendering should render all devices 1`] = `"<p class=\\"zw-style\\"><span style=\\"--zw-mobile-font-size: 12px; --zw-tablet-font-size: 14px; --zw-desktop-font-size: 16px;\\" class=\\"zw-style\\">hello world</span></p>"`;
 
 exports[`rendering should render only desktop 1`] = `"<p class=\\"zw-style\\"><span style=\\"--zw-desktop-font-size: 14px;\\" class=\\"zw-style\\">hello world</span></p>"`;