@zipify/wysiwyg 1.0.0-dev.2 → 1.0.0-dev.22

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

@@ -2,10 +2,11 @@ import { Editor, Extension } from '@tiptap/vue-2';
 import { ref } from '@vue/composition-api';
 import { NodeFactory } from '../../__tests__/utils';
 import { createCommand } from '../../utils';
-import { CORE_EXTENSIONS } from '../core';
 import { Alignment } from '../Alignment';
 import { DeviceManager } from '../DeviceManager';
 import { Alignments } from '../../enums';
+import { ContentNormalizer } from '../../services';
+import { buildCoreExtensions } from '../core';
 
 const MockStylePreset = Extension.create({
     name: 'style_preset',
@@ -23,8 +24,8 @@ const MockStylePreset = Extension.create({
 
 function createEditor({ content }) {
     return new Editor({
-        content,
-        extensions: CORE_EXTENSIONS.concat(
+        content: ContentNormalizer.normalize(content),
+        extensions: buildCoreExtensions().concat(
             MockStylePreset,
             DeviceManager.configure({ deviceRef: ref('desktop') }),
             Alignment
@@ -105,3 +106,29 @@ describe('rendering', () => {
         expect(editor.getHTML()).toMatchSnapshot();
     });
 });
+
+describe('parsing html', () => {
+    test('should get alignment from text', () => {
+        const editor = createEditor({
+            content: '<p style="text-align:center">test</p>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should get alignment from rendered view', () => {
+        const editor = createEditor({
+            content: '<p style="--zw-text-align-mobile:center;--zw-text-align-desktop:right">test</p>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should set null if no alignment', () => {
+        const editor = createEditor({
+            content: '<p>test</p>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+});

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

@@ -2,8 +2,9 @@ import { Editor, Extension } from '@tiptap/vue-2';
 import { ref } from '@vue/composition-api';
 import { NodeFactory } from '../../__tests__/utils';
 import { createCommand } from '../../utils';
-import { CORE_EXTENSIONS } from '../core';
 import { BackgroundColor } from '../BackgroundColor';
+import { ContentNormalizer } from '../../services';
+import { buildCoreExtensions } from '../core';
 
 const MockStylePreset = Extension.create({
     name: 'style_preset',
@@ -19,8 +20,8 @@ const MockStylePreset = Extension.create({
 
 function createEditor({ content }) {
     return new Editor({
-        content,
-        extensions: CORE_EXTENSIONS.concat(MockStylePreset, BackgroundColor)
+        content: ContentNormalizer.normalize(content),
+        extensions: buildCoreExtensions().concat(MockStylePreset, BackgroundColor)
     });
 }
 
@@ -73,3 +74,37 @@ describe('rendering', () => {
         expect(editor.getHTML()).toMatchSnapshot();
     });
 });
+
+describe('parsing html', () => {
+    test('should get value from paragraph', () => {
+        const editor = createEditor({
+            content: '<p style="background-color: red">test</p>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should get value from text', () => {
+        const editor = createEditor({
+            content: '<p><span style="background-color: red">lorem</span> ipsum</p>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should get value from rendered view', () => {
+        const editor = createEditor({
+            content: '<p><span style="--zw-background-color: red">lorem</span> ipsum</p>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should merge paragraph and text settings', () => {
+        const editor = createEditor({
+            content: '<p style="background-color: red"><span style="background-color: #000">lorem</span> ipsum</p>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+});

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

@@ -1,13 +1,14 @@
 import { Editor } from '@tiptap/vue-2';
 import { NodeFactory } from '../../__tests__/utils';
 import { CaseStyles } from '../../enums';
-import { CORE_EXTENSIONS } from '../core';
 import { CaseStyle } from '../CaseStyle';
+import { ContentNormalizer } from '../../services';
+import { buildCoreExtensions } from '../core';
 
 function createEditor({ content }) {
     return new Editor({
-        content,
-        extensions: CORE_EXTENSIONS.concat(CaseStyle)
+        content: ContentNormalizer.normalize(content),
+        extensions: buildCoreExtensions().concat(CaseStyle)
     });
 }
 

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

@@ -2,8 +2,9 @@ import { Editor, Extension } from '@tiptap/vue-2';
 import { ref } from '@vue/composition-api';
 import { NodeFactory } from '../../__tests__/utils';
 import { createCommand } from '../../utils';
-import { CORE_EXTENSIONS } from '../core';
 import { FontColor } from '../FontColor';
+import { ContentNormalizer } from '../../services';
+import { buildCoreExtensions } from '../core';
 
 const MockStylePreset = Extension.create({
     name: 'style_preset',
@@ -19,8 +20,8 @@ const MockStylePreset = Extension.create({
 
 function createEditor({ content }) {
     return new Editor({
-        content,
-        extensions: CORE_EXTENSIONS.concat(MockStylePreset, FontColor)
+        content: ContentNormalizer.normalize(content),
+        extensions: buildCoreExtensions().concat(MockStylePreset, FontColor)
     });
 }
 
@@ -83,3 +84,37 @@ describe('rendering', () => {
         expect(editor.getHTML()).toMatchSnapshot();
     });
 });
+
+describe('parsing html', () => {
+    test('should get value from paragraph', () => {
+        const editor = createEditor({
+            content: '<p style="color: red">test</p>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should get value from text', () => {
+        const editor = createEditor({
+            content: '<p><span style="color: red">lorem</span> ipsum</p>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should get value from parsed view', () => {
+        const editor = createEditor({
+            content: '<p><span style="--zw-color: red">lorem</span> ipsum</p>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should merge paragraph and text settings', () => {
+        const editor = createEditor({
+            content: '<p style="color: red"><span style="color: #000">lorem</span> ipsum</p>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+});

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

@@ -2,11 +2,12 @@ import { Editor, Extension } from '@tiptap/vue-2';
 import { ref } from '@vue/composition-api';
 import { NodeFactory } from '../../__tests__/utils';
 import { createCommand } from '../../utils';
-import { CORE_EXTENSIONS } from '../core';
 import { Font } from '../../models';
 import { FontFamily } from '../FontFamily';
 import { FontWeight } from '../FontWeight';
 import { FontStyle } from '../FontStyle';
+import { ContentNormalizer } from '../../services';
+import { buildCoreExtensions } from '../core';
 
 const MockStylePreset = Extension.create({
     name: 'style_preset',
@@ -25,14 +26,17 @@ const MockStylePreset = Extension.create({
 
 function createEditor({ content }) {
     return new Editor({
-        content,
-        extensions: CORE_EXTENSIONS.concat(
+        content: ContentNormalizer.normalize(content),
+        extensions: buildCoreExtensions().concat(
             MockStylePreset,
             FontFamily.configure({
                 fonts: [
                     new Font({ name: 'Lato', styles: ['400', '700', '700i'] }),
-                    new Font({ name: 'Bungee', styles: ['400'] })
-                ]
+                    new Font({ name: 'Bungee', styles: ['400'] }),
+                    new Font({ name: 'Roboto', styles: ['400'] }),
+                    new Font({ name: 'Josefin Slab', styles: ['400'] })
+                ],
+                defaultFont: 'Lato'
             }),
             FontWeight,
             FontStyle
@@ -169,3 +173,53 @@ describe('rendering', () => {
         expect(editor.getHTML()).toMatchSnapshot();
     });
 });
+
+describe('parsing html', () => {
+    test('should get value from paragraph', () => {
+        const editor = createEditor({
+            content: '<p style="font-family: Lato">test</p>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should get value from text', () => {
+        const editor = createEditor({
+            content: '<p><span style="font-family: Lato">lorem</span> ipsum</p>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should get value from rendered view', () => {
+        const editor = createEditor({
+            content: '<p><span style="--zw-font-family: Lato">lorem</span> ipsum</p>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should get set default if undefined font', () => {
+        const editor = createEditor({
+            content: '<p><span style="--zw-font-family: Arial">lorem</span> ipsum</p>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should merge paragraph and text settings', () => {
+        const editor = createEditor({
+            content: '<p style="font-family: Lato"><span style="font-family: Roboto">lorem</span> ipsum</p>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should get parse font name with quotes', () => {
+        const editor = createEditor({
+            content: '<p>hello <span style="font-family: &quot;Josefin Slab&quot;;">world</span></p>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+});

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

@@ -2,9 +2,10 @@ import { Editor, Extension } from '@tiptap/vue-2';
 import { ref } from '@vue/composition-api';
 import { NodeFactory } from '../../__tests__/utils';
 import { createCommand } from '../../utils';
-import { CORE_EXTENSIONS } from '../core';
 import { FontSize } from '../FontSize';
 import { DeviceManager } from '../DeviceManager';
+import { ContentNormalizer } from '../../services';
+import { buildCoreExtensions } from '../core';
 
 const MockStylePreset = Extension.create({
     name: 'style_preset',
@@ -22,8 +23,8 @@ const MockStylePreset = Extension.create({
 
 function createEditor({ content }) {
     return new Editor({
-        content,
-        extensions: CORE_EXTENSIONS.concat(
+        content: ContentNormalizer.normalize(content),
+        extensions: buildCoreExtensions().concat(
             MockStylePreset,
             DeviceManager.configure({
                 deviceRef: ref('desktop')
@@ -181,3 +182,37 @@ describe('rendering', () => {
         expect(editor.getHTML()).toMatchSnapshot();
     });
 });
+
+describe('parsing html', () => {
+    test('should get value from paragraph', () => {
+        const editor = createEditor({
+            content: '<p style="font-size: 24px">test</p>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should get value from text', () => {
+        const editor = createEditor({
+            content: '<p><span style="font-size: 24px">lorem</span> ipsum</p>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should get value from rendered view', () => {
+        const editor = createEditor({
+            content: '<p><span style="--zw-font-size-mobile: 24px; --zw-font-size-desktop:30px">lorem</span> ipsum</p>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should merge paragraph and text settings', () => {
+        const editor = createEditor({
+            content: '<p style="font-size: 24px"><span style="font-size: 20px">lorem</span> ipsum</p>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+});

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

@@ -2,11 +2,12 @@ import { Editor, Extension } from '@tiptap/vue-2';
 import { ref } from '@vue/composition-api';
 import { NodeFactory } from '../../__tests__/utils';
 import { createCommand } from '../../utils';
-import { CORE_EXTENSIONS } from '../core';
 import { FontStyle } from '../FontStyle';
 import { FontFamily } from '../FontFamily';
 import { Font } from '../../models';
 import { FontWeight } from '../FontWeight';
+import { ContentNormalizer } from '../../services';
+import { buildCoreExtensions } from '../core';
 
 const MockStylePreset = Extension.create({
     name: 'style_preset',
@@ -26,8 +27,8 @@ const MockStylePreset = Extension.create({
 
 function createEditor({ content }) {
     return new Editor({
-        content,
-        extensions: CORE_EXTENSIONS.concat(
+        content: ContentNormalizer.normalize(content),
+        extensions: buildCoreExtensions().concat(
             MockStylePreset,
             FontStyle,
             FontWeight,
@@ -134,3 +135,45 @@ describe('rendering', () => {
         expect(editor.getHTML()).toMatchSnapshot();
     });
 });
+
+describe('parsing html', () => {
+    test('should get value from paragraph', () => {
+        const editor = createEditor({
+            content: '<p style="font-style: italic">test</p>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should get value from text', () => {
+        const editor = createEditor({
+            content: '<p><span style="font-style: italic">lorem</span> ipsum</p>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should get value from rendered view', () => {
+        const editor = createEditor({
+            content: '<p><span style="--zw-font-style: italic">lorem</span> ipsum</p>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should get value from i tag', () => {
+        const editor = createEditor({
+            content: '<p><i>lorem</i> ipsum</p>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should merge paragraph and text settings', () => {
+        const editor = createEditor({
+            content: '<p style="font-style: italic"><span style="font-style: normal">lorem</span> ipsum</p>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+});

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

@@ -2,11 +2,12 @@ import { Editor, Extension } from '@tiptap/vue-2';
 import { ref } from '@vue/composition-api';
 import { NodeFactory } from '../../__tests__/utils';
 import { createCommand } from '../../utils';
-import { CORE_EXTENSIONS } from '../core';
 import { Font } from '../../models';
 import { FontWeight } from '../FontWeight';
 import { FontFamily } from '../FontFamily';
 import { FontStyle } from '../FontStyle';
+import { ContentNormalizer } from '../../services';
+import { buildCoreExtensions } from '../core';
 
 const MockStylePreset = Extension.create({
     name: 'style_preset',
@@ -25,8 +26,8 @@ const MockStylePreset = Extension.create({
 
 function createEditor({ content }) {
     return new Editor({
-        content,
-        extensions: CORE_EXTENSIONS.concat(
+        content: ContentNormalizer.normalize(content),
+        extensions: buildCoreExtensions().concat(
             MockStylePreset,
             FontFamily.configure({
                 fonts: [
@@ -74,6 +75,18 @@ describe('get font weight', () => {
 
         expect(editor.commands.getFontWeight().value).toEqual('400');
     });
+
+    test('should get closest available font weight', () => {
+        const editor = createEditor({
+            content: createContent(NodeFactory.text('hello world', [
+                NodeFactory.mark('font_weight', { value: '800' })
+            ]))
+        });
+
+        editor.commands.selectAll();
+
+        expect(editor.commands.getFontWeight().value).toEqual('700');
+    });
 });
 
 describe('apply font weight', () => {
@@ -149,3 +162,53 @@ describe('rendering', () => {
         expect(editor.getHTML()).toMatchSnapshot();
     });
 });
+
+describe('parsing html', () => {
+    test('should get value from paragraph', () => {
+        const editor = createEditor({
+            content: '<p style="font-weight: 700">test</p>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should get value from text', () => {
+        const editor = createEditor({
+            content: '<p><span style="font-weight: 700">lorem</span> ipsum</p>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should get value from rendered view', () => {
+        const editor = createEditor({
+            content: '<p><span style="--zw-font-weight: 700">lorem</span> ipsum</p>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should get value from b tag', () => {
+        const editor = createEditor({
+            content: '<p><b>lorem</b> ipsum</p>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should get value from strong tag', () => {
+        const editor = createEditor({
+            content: '<p><strong>lorem</strong> ipsum</p>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should merge paragraph and text settings', () => {
+        const editor = createEditor({
+            content: '<p style="font-weight: 500"><span style="font-weight: 700">lorem</span> ipsum</p>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+});

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

@@ -2,9 +2,10 @@ import { Editor, Extension } from '@tiptap/vue-2';
 import { ref } from '@vue/composition-api';
 import { NodeFactory } from '../../__tests__/utils';
 import { createCommand } from '../../utils';
-import { CORE_EXTENSIONS } from '../core';
 import { DeviceManager } from '../DeviceManager';
 import { LineHeight } from '../LineHeight';
+import { ContentNormalizer } from '../../services';
+import { buildCoreExtensions } from '../core';
 
 const MockStylePreset = Extension.create({
     name: 'style_preset',
@@ -22,8 +23,8 @@ const MockStylePreset = Extension.create({
 
 function createEditor({ content }) {
     return new Editor({
-        content,
-        extensions: CORE_EXTENSIONS.concat(
+        content: ContentNormalizer.normalize(content),
+        extensions: buildCoreExtensions().concat(
             MockStylePreset,
             DeviceManager.configure({ deviceRef: ref('desktop') }),
             LineHeight
@@ -104,3 +105,48 @@ 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 get value from rendered view', () => {
+        const editor = createEditor({
+            content: '<p style="--zw-line-height-mobile:1.2;--zw-line-height-desktop:1.4">test</p>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should set null if no alignment', () => {
+        const editor = createEditor({
+            content: '<p>test</p>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+});