@zipify/wysiwyg 1.0.0-dev.16 → 1.0.0-dev.19

package/lib/extensions/TextDecoration.js

@@ -13,10 +13,10 @@ export const TextDecoration = Mark.create({
 
     addCommands() {
         return {
-            isUnderline: createCommand(({ commands }) => {
+            isUnderline: createCommand(({ commands, editor }) => {
                 const decoration = commands.getTextDecoration();
 
-                return computed(() => decoration.value.underline);
+                return computed(() => editor.isActive('link') || decoration.value.underline);
             }),
 
             isStrikeThrough: createCommand(({ commands }) => {
@@ -51,7 +51,9 @@ export const TextDecoration = Mark.create({
                 });
             }),
 
-            toggleUnderline: createCommand(({ commands }) => {
+            toggleUnderline: createCommand(({ commands, editor }) => {
+                if (editor.isActive('link')) return;
+
                 commands.toggleTextDecoration('underline');
             }),
 
@@ -86,16 +88,29 @@ export const TextDecoration = Mark.create({
         'Mod-U': createKeyboardShortcut('toggleUnderline')
     }),
 
-    parseHTML: () => [
-        {
-            style: 'text-decoration-line',
+    parseHTML() {
+        const getAttrs = (value) => {
+            const underline = value.includes('underline');
+            const strike_through = value.includes('line-through');
 
-            getAttrs: (value) => ({
-                underline: value.includes('underline'),
-                strike_through: value.includes('line-through')
-            })
-        }
-    ],
+            if (!underline && !strike_through) {
+                return false;
+            }
+
+            return { underline, strike_through };
+        };
+
+        return [
+            {
+                style: '--zw-text-decoration',
+                getAttrs
+            },
+            {
+                style: 'text-decoration-line',
+                getAttrs
+            }
+        ];
+    },
 
     renderHTML({ HTMLAttributes: attrs }) {
         const decorations = [];

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

@@ -2,11 +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,11 +23,9 @@ const MockStylePreset = Extension.create({
 });
 
 function createEditor({ content }) {
-    const normalizer = new ContentNormalizer();
-
     return new Editor({
-        content: normalizer.normalize(content),
-        extensions: CORE_EXTENSIONS.concat(
+        content: ContentNormalizer.normalize(content),
+        extensions: buildCoreExtensions().concat(
             MockStylePreset,
             DeviceManager.configure({ deviceRef: ref('desktop') }),
             Alignment
@@ -118,6 +116,14 @@ describe('parsing html', () => {
         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>'

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

@@ -2,9 +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,11 +19,9 @@ const MockStylePreset = Extension.create({
 });
 
 function createEditor({ content }) {
-    const normalizer = new ContentNormalizer();
-
     return new Editor({
-        content: normalizer.normalize(content),
-        extensions: CORE_EXTENSIONS.concat(MockStylePreset, BackgroundColor)
+        content: ContentNormalizer.normalize(content),
+        extensions: buildCoreExtensions().concat(MockStylePreset, BackgroundColor)
     });
 }
 
@@ -94,6 +92,14 @@ describe('parsing html', () => {
         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>'

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

@@ -1,16 +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 }) {
-    const normalizer = new ContentNormalizer();
-
     return new Editor({
-        content: normalizer.normalize(content),
-        extensions: CORE_EXTENSIONS.concat(CaseStyle)
+        content: ContentNormalizer.normalize(content),
+        extensions: buildCoreExtensions().concat(CaseStyle)
     });
 }
 

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

@@ -2,9 +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,11 +19,9 @@ const MockStylePreset = Extension.create({
 });
 
 function createEditor({ content }) {
-    const normalizer = new ContentNormalizer();
-
     return new Editor({
-        content: normalizer.normalize(content),
-        extensions: CORE_EXTENSIONS.concat(MockStylePreset, FontColor)
+        content: ContentNormalizer.normalize(content),
+        extensions: buildCoreExtensions().concat(MockStylePreset, FontColor)
     });
 }
 
@@ -104,6 +102,14 @@ describe('parsing html', () => {
         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>'

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

@@ -2,12 +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,17 +25,18 @@ const MockStylePreset = Extension.create({
 });
 
 function createEditor({ content }) {
-    const normalizer = new ContentNormalizer();
-
     return new Editor({
-        content: normalizer.normalize(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
@@ -190,6 +191,22 @@ describe('parsing html', () => {
         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>'
@@ -197,4 +214,12 @@ describe('parsing html', () => {
 
         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,10 +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,11 +22,9 @@ const MockStylePreset = Extension.create({
 });
 
 function createEditor({ content }) {
-    const normalizer = new ContentNormalizer();
-
     return new Editor({
-        content: normalizer.normalize(content),
-        extensions: CORE_EXTENSIONS.concat(
+        content: ContentNormalizer.normalize(content),
+        extensions: buildCoreExtensions().concat(
             MockStylePreset,
             DeviceManager.configure({
                 deviceRef: ref('desktop')
@@ -202,6 +200,14 @@ describe('parsing html', () => {
         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>'

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

@@ -2,12 +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,11 +26,9 @@ const MockStylePreset = Extension.create({
 });
 
 function createEditor({ content }) {
-    const normalizer = new ContentNormalizer();
-
     return new Editor({
-        content: normalizer.normalize(content),
-        extensions: CORE_EXTENSIONS.concat(
+        content: ContentNormalizer.normalize(content),
+        extensions: buildCoreExtensions().concat(
             MockStylePreset,
             FontStyle,
             FontWeight,
@@ -155,6 +153,14 @@ describe('parsing html', () => {
         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>'

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

@@ -2,12 +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,11 +25,9 @@ const MockStylePreset = Extension.create({
 });
 
 function createEditor({ content }) {
-    const normalizer = new ContentNormalizer();
-
     return new Editor({
-        content: normalizer.normalize(content),
-        extensions: CORE_EXTENSIONS.concat(
+        content: ContentNormalizer.normalize(content),
+        extensions: buildCoreExtensions().concat(
             MockStylePreset,
             FontFamily.configure({
                 fonts: [
@@ -182,6 +180,14 @@ describe('parsing html', () => {
         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>'

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

@@ -2,10 +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,11 +22,9 @@ const MockStylePreset = Extension.create({
 });
 
 function createEditor({ content }) {
-    const normalizer = new ContentNormalizer();
-
     return new Editor({
-        content: normalizer.normalize(content),
-        extensions: CORE_EXTENSIONS.concat(
+        content: ContentNormalizer.normalize(content),
+        extensions: buildCoreExtensions().concat(
             MockStylePreset,
             DeviceManager.configure({ deviceRef: ref('desktop') }),
             LineHeight
@@ -136,6 +134,14 @@ describe('parsing html', () => {
         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>'

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

@@ -1,11 +1,11 @@
 import { Editor, Extension, Mark } from '@tiptap/vue-2';
 import { ref } from '@vue/composition-api';
 import { NodeFactory } from '../../__tests__/utils';
-import { CORE_EXTENSIONS } from '../core';
 import { StylePreset } from '../StylePreset';
 import { List } from '../list';
 import { ListTypes, NodeTypes, TextSettings } from '../../enums';
 import { ContentNormalizer } from '../../services';
+import { buildCoreExtensions } from '../core';
 
 const MockFontSize = Mark.create({
     name: TextSettings.FONT_SIZE,
@@ -43,15 +43,73 @@ const MockAlignment = Extension.create({
     ]
 });
 
+const MockBackgroundColor = Mark.create({
+    name: TextSettings.BACKGROUND_COLOR,
+
+    addAttributes: () => ({
+        value: { default: null }
+    }),
+
+    renderHTML: () => ['span', {}, 0]
+});
+
+const MockFontColor = Mark.create({
+    name: TextSettings.FONT_COLOR,
+
+    addAttributes: () => ({
+        value: { default: null }
+    }),
+
+    renderHTML: () => ['span', {}, 0]
+});
+
+const MockFontFamily = Mark.create({
+    name: TextSettings.FONT_FAMILY,
+
+    addAttributes: () => ({
+        value: { default: null }
+    }),
+
+    renderHTML: () => ['span', {}, 0]
+});
+
+const MockFontStyle = Mark.create({
+    name: TextSettings.FONT_STYLE,
+
+    addAttributes: () => ({
+        value: { default: null }
+    }),
+
+    renderHTML: () => ['span', {}, 0]
+});
+
+const MockTextDecoration = Mark.create({
+    name: TextSettings.TEXT_DECORATION,
+
+    addAttributes: () => ({
+        value: { default: null }
+    }),
+
+    renderHTML: () => ['span', {}, 0]
+});
+
+const MockSuperscript = Mark.create({
+    name: TextSettings.SUPERSCRIPT,
+
+    addAttributes: () => ({
+        value: { default: null }
+    }),
+
+    renderHTML: () => ['span', {}, 0]
+});
+
 function createEditor({ content, presets, defaultId }) {
     return new Promise((resolve) => {
-        const normalizer = new ContentNormalizer();
-
         const editor = new Editor({
-            content: normalizer.normalize(content),
+            content: ContentNormalizer.normalize(content),
             onCreate: () => resolve(editor),
 
-            extensions: CORE_EXTENSIONS.concat(
+            extensions: buildCoreExtensions().concat(
                 StylePreset.configure({
                     presetsRef: ref(presets),
                     baseClass: 'zw ts-',
@@ -68,7 +126,13 @@ function createEditor({ content, presets, defaultId }) {
                 }),
                 MockFontSize,
                 MockFontWeight,
-                MockAlignment
+                MockAlignment,
+                MockBackgroundColor,
+                MockFontColor,
+                MockFontFamily,
+                MockFontStyle,
+                MockTextDecoration,
+                MockSuperscript
             )
         });
     });

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

@@ -2,9 +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 { TextDecoration } from '../TextDecoration';
 import { ContentNormalizer } from '../../services';
+import { buildCoreExtensions } from '../core';
 
 const MockStylePreset = Extension.create({
     name: 'style_preset',
@@ -19,11 +19,9 @@ const MockStylePreset = Extension.create({
 });
 
 function createEditor({ content }) {
-    const normalizer = new ContentNormalizer();
-
     return new Editor({
-        content: normalizer.normalize(content),
-        extensions: CORE_EXTENSIONS.concat(MockStylePreset, TextDecoration)
+        content: ContentNormalizer.normalize(content),
+        extensions: buildCoreExtensions().concat(MockStylePreset, TextDecoration)
     });
 }
 
@@ -294,6 +292,14 @@ describe('parsing html', () => {
         expect(editor.getJSON()).toMatchSnapshot();
     });
 
+    test('should get underline from rendered view', () => {
+        const editor = createEditor({
+            content: '<p><span style="--zw-text-decoration: 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>'
@@ -302,6 +308,14 @@ describe('parsing html', () => {
         expect(editor.getJSON()).toMatchSnapshot();
     });
 
+    test('should get strike through from rendered view', () => {
+        const editor = createEditor({
+            content: '<p><span style="--zw-text-decoration: 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>'
@@ -310,6 +324,14 @@ describe('parsing html', () => {
         expect(editor.getJSON()).toMatchSnapshot();
     });
 
+    test('should get both from rendered view', () => {
+        const editor = createEditor({
+            content: '<p><span style="--zw-text-decoration: 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>'

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

@@ -24,6 +24,30 @@ Object {
 }
 `;
 
+exports[`parsing html should get alignment from rendered view 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "attrs": Object {
+        "alignment": Object {
+          "desktop": "right",
+          "mobile": "center",
+          "tablet": null,
+        },
+      },
+      "content": Array [
+        Object {
+          "text": "test",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
 exports[`parsing html should get alignment from text 1`] = `
 Object {
   "content": Array [
@@ -68,6 +92,6 @@ Object {
 }
 `;
 
-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 all devices 1`] = `"<p class=\\"zw-style\\" style=\\"--zw-text-align-mobile:left;--zw-text-align-tablet:right;--zw-text-align-desktop:center;\\">hello world</p>"`;
 
-exports[`rendering should render only desktop 1`] = `"<p class=\\"zw-style\\" style=\\"--zw-desktop-text-align: center;\\">hello world</p>"`;
+exports[`rendering should render only desktop 1`] = `"<p class=\\"zw-style\\" style=\\"--zw-text-align-desktop:center;\\">hello world</p>"`;