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

package/lib/extensions/StylePreset.js

@@ -1,8 +1,15 @@
 import { Extension } from '@tiptap/vue-2';
-import { computed, toRef } from '@vue/composition-api';
+import { computed, toRef } from 'vue';
 import { Heading } from '@tiptap/extension-heading';
 import { createCommand } from '../utils';
 import { Devices, NodeTypes, TextSettings } from '../enums';
+import { ContextWindow } from '../services';
+
+function makePresetClass(base, preset) {
+    const baseClass = base.split(' ').map((part) => `.${part}`).join('');
+
+    return baseClass + preset.id;
+}
 
 export const StylePreset = Extension.create({
     name: 'style_preset',
@@ -14,12 +21,6 @@ export const StylePreset = Extension.create({
         })
     ],
 
-    addOptions: () => ({
-        presetsRef: null,
-        defaultId: null,
-        makeVariable: null
-    }),
-
     addStorage: () => ({
         presetStyleEl: null
     }),
@@ -32,10 +33,31 @@ export const StylePreset = Extension.create({
                     preset: {
                         isRequired: false,
                         default: { id: this.options.defaultId },
+
+                        parseHTML: (element) => {
+                            const presets = this.options.presets;
+
+                            if (element.parentElement.tagName === 'LI') return null;
+
+                            for (const { id, node, fallbackClass } of presets) {
+                                const isFallback = fallbackClass && element.classList.contains(fallbackClass);
+
+                                if (isFallback) return { id };
+
+                                const className = makePresetClass(this.options.baseClass, { id });
+
+                                if (element.matches(className)) return { id };
+                                if (element.tagName === `H${node?.level}`) return { id };
+                            }
+
+                            // Matches all paragraphs without classes to default preset
+                            return element.tagName === 'P' ? { id: this.options.defaultId } : null;
+                        },
+
                         renderHTML: (attrs) => {
                             if (!attrs.preset) return null;
 
-                            return { class: `zw-preset--${attrs.preset.id}` };
+                            return { class: this.options.baseClass + attrs.preset.id };
                         }
                     }
                 }
@@ -50,7 +72,7 @@ export const StylePreset = Extension.create({
 
         return {
             getPresetList: createCommand(() => computed(() => {
-                return this.options.presetsRef.value.filter((preset) => !preset.hidden);
+                return this.options.presets.filter((preset) => !preset.hidden);
             })),
 
             getPreset: createCommand(({ commands }) => {
@@ -121,7 +143,7 @@ export const StylePreset = Extension.create({
                 chain()
                     .storeSelection()
                     .expandSelectionToBlock()
-                    .unsetAllMarks()
+                    .unsetMarks(TextSettings.marks)
                     .resetAttributes(NodeTypes.PARAGRAPH, TextSettings.attributes)
                     .resetAttributes(NodeTypes.HEADING, TextSettings.attributes)
                     .restoreSelection()
@@ -136,18 +158,19 @@ export const StylePreset = Extension.create({
     },
 
     onCreate() {
-        const existingStyleEl = document.querySelector('[data-zw-styles]');
+        const existingStyleEl = ContextWindow.document.querySelector('[data-zw-styles]');
 
         if (existingStyleEl) {
             this.storage.presetStyleEl = existingStyleEl;
             return;
         }
 
-        this.storage.presetStyleEl = document.createElement('style');
+        this.storage.presetStyleEl = ContextWindow.document.createElement('style');
         this.storage.presetStyleEl.dataset.zwStyles = '';
 
-        for (const preset of this.options.presetsRef.value) {
-            const css = [` .zw-preset--${preset.id} {`];
+        for (const preset of this.options.presets) {
+            const className = makePresetClass(this.options.baseClass, preset);
+            const css = [` ${className} {`];
 
             for (const device of Devices.values) {
                 for (const setting of Object.keys(preset[device])) {
@@ -163,6 +186,6 @@ export const StylePreset = Extension.create({
             this.storage.presetStyleEl.innerHTML += css.join(' ');
         }
 
-        document.head.append(this.storage.presetStyleEl);
+        ContextWindow.head.append(this.storage.presetStyleEl);
     }
 });

package/lib/extensions/TextDecoration.js

@@ -1,5 +1,5 @@
 import { Mark } from '@tiptap/vue-2';
-import { computed } from '@vue/composition-api';
+import { computed } from 'vue';
 import { createCommand, createKeyboardShortcut, renderMark } from '../utils';
 import { TextSettings } from '../enums';
 
@@ -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,6 +88,30 @@ export const TextDecoration = Mark.create({
         'Mod-U': createKeyboardShortcut('toggleUnderline')
     }),
 
+    parseHTML() {
+        const getAttrs = (value) => {
+            const underline = value.includes('underline');
+            const 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

@@ -1,11 +1,12 @@
 import { Editor, Extension } from '@tiptap/vue-2';
-import { ref } from '@vue/composition-api';
+import { ref } from 'vue';
 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,10 +24,10 @@ 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') }),
+            DeviceManager.configure({ device: 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

@@ -1,9 +1,10 @@
 import { Editor, Extension } from '@tiptap/vue-2';
-import { ref } from '@vue/composition-api';
+import { ref } from 'vue';
 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

@@ -1,9 +1,10 @@
 import { Editor, Extension } from '@tiptap/vue-2';
-import { ref } from '@vue/composition-api';
+import { ref } from 'vue';
 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

@@ -1,12 +1,13 @@
 import { Editor, Extension } from '@tiptap/vue-2';
-import { ref } from '@vue/composition-api';
+import { ref } from 'vue';
 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

@@ -1,10 +1,11 @@
 import { Editor, Extension } from '@tiptap/vue-2';
-import { ref } from '@vue/composition-api';
+import { ref } from 'vue';
 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 +23,11 @@ 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')
+                device: ref('desktop')
             }),
             FontSize.configure({
                 minSize: 5,
@@ -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

@@ -1,12 +1,13 @@
 import { Editor, Extension } from '@tiptap/vue-2';
-import { ref } from '@vue/composition-api';
+import { ref } from 'vue';
 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();
+    });
+});