@zipify/wysiwyg 1.0.0-dev.42 → 1.0.0-dev.45

package/lib/components/toolbar/controls/link/destination/__tests__/LinkControlUrl.test.js

@@ -0,0 +1,46 @@
+import { ref, h } from 'vue';
+import { shallowMount } from '@vue/test-utils';
+import { Checkbox, TextField } from '../../../../../base';
+import LinkControlUrl from '../LinkControlUrl';
+
+function createComponent() {
+    return shallowMount(LinkControlUrl, {
+        propsData: {
+            validator: { error: ref({ value: null }) },
+            href: '',
+            isTargetBlank: false
+        },
+
+        stubs: {
+            TextField: {
+                render: () => h('div'),
+                props: ['value']
+            },
+
+            Checkbox: {
+                render: () => h('div'),
+                props: ['value']
+            }
+        }
+    });
+}
+
+describe('update link', () => {
+    test('should update link url', () => {
+        const wrapper = createComponent();
+        const textFieldWrapper = wrapper.findComponent(TextField);
+
+        textFieldWrapper.vm.$emit('input', 'Some text');
+
+        expect(wrapper.emitted('update-link')).toMatchSnapshot();
+    });
+
+    test('should update link target', () => {
+        const wrapper = createComponent();
+        const textFieldWrapper = wrapper.findComponent(Checkbox);
+
+        textFieldWrapper.vm.$emit('input', true);
+
+        expect(wrapper.emitted('update-target')).toMatchSnapshot();
+    });
+});

package/lib/components/toolbar/controls/link/destination/__tests__/__snapshots__/LinkControlPageBlock.test.js.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`applying block should apply block 1`] = `
+Array [
+  Array [
+    2,
+  ],
+]
+`;

package/lib/components/toolbar/controls/link/destination/__tests__/__snapshots__/LinkControlUrl.test.js.snap

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`update link should update link target 1`] = `
+Array [
+  Array [
+    true,
+  ],
+]
+`;
+
+exports[`update link should update link url 1`] = `
+Array [
+  Array [
+    "Some text",
+  ],
+]
+`;

package/lib/composables/useToolbar.js

@@ -12,6 +12,17 @@ export function useToolbar({ wrapperRef, offsets, isActiveRef }) {
                 {
                     name: 'offset',
                     options: { offset: offsets }
+                },
+                {
+                    name: 'preventOverflow',
+                    options: {
+                        altAxis: true,
+                        padding: 2
+                    }
+                },
+                {
+                    name: 'flip',
+                    enabled: false
                 }
             ]
         });

package/lib/directives/__tests__/outClick.test.js

@@ -10,6 +10,7 @@ describe('out click', () => {
         await waitAsyncOperation();
 
         document.dispatchEvent(new Event('click'));
+        await waitAsyncOperation();
 
         expect(onOutClick).toHaveBeenCalled();
     });
@@ -22,6 +23,7 @@ describe('out click', () => {
         await waitAsyncOperation();
 
         el.dispatchEvent(new Event('click'));
+        await waitAsyncOperation();
 
         expect(onOutClick).not.toHaveBeenCalled();
     });
@@ -36,6 +38,7 @@ describe('out click', () => {
         await waitAsyncOperation();
 
         child.dispatchEvent(new Event('click'));
+        await waitAsyncOperation();
 
         expect(onOutClick).not.toHaveBeenCalled();
     });
@@ -50,6 +53,7 @@ describe('out click', () => {
         outClick.unbind(el);
 
         document.dispatchEvent(new Event('click'));
+        await waitAsyncOperation();
 
         expect(onOutClick).not.toHaveBeenCalled();
     });
@@ -65,6 +69,7 @@ describe('out click', () => {
         await waitAsyncOperation();
 
         document.dispatchEvent(new Event('click'));
+        await waitAsyncOperation();
 
         expect(onOutClick).toHaveBeenCalled();
     });
@@ -80,6 +85,7 @@ describe('out click', () => {
         await waitAsyncOperation();
 
         document.dispatchEvent(new Event('click'));
+        await waitAsyncOperation();
 
         expect(onOutClick).not.toHaveBeenCalled();
     });

package/lib/directives/outClick.js

@@ -2,18 +2,15 @@ import { ContextWindow } from '../services';
 
 const dataStorage = new WeakMap();
 
-function attachListener(onClick) {
-    if (ContextWindow.window !== window) {
-        window.document.addEventListener('click', onClick);
-    }
-    ContextWindow.document.addEventListener('click', onClick);
-}
+function toggleListener(toEnable, onClick) {
+    const args = ['click', onClick, { capture: true }];
+    const action = toEnable ? 'addEventListener' : 'removeEventListener';
 
-function removeListener(onClick) {
     if (ContextWindow.window !== window) {
-        window.document.removeEventListener('click', onClick);
+        window.document[action](...args);
     }
-    ContextWindow.document.removeEventListener('click', onClick);
+
+    ContextWindow.document[action](...args);
 }
 
 export const outClick = {
@@ -24,13 +21,15 @@ export const outClick = {
         function onClick(event) {
             const isInside = event.target === el || el.contains(event.target);
 
-            if (event.target.isConnected && !isInside) onOutClick(event);
+            if (event.target.isConnected && !isInside) {
+                setTimeout(() => onOutClick(event));
+            }
         }
 
         dataStorage.set(el, { callback: onClick, isEnabled });
 
         if (isEnabled) {
-            setTimeout(() => attachListener(onClick));
+            setTimeout(() => toggleListener(true, onClick));
         }
     },
 
@@ -40,14 +39,12 @@ export const outClick = {
 
         if (isEnabled === data.isEnabled) return;
 
-        isEnabled
-            ? attachListener(data.callback)
-            : removeListener(data.callback);
+        toggleListener(isEnabled, data.callback);
 
         dataStorage.set(el, { callback: data.callback, isEnabled });
     },
 
     unbind(el) {
-        removeListener(dataStorage.get(el).callback);
+        toggleListener(false, dataStorage.get(el).callback);
     }
 };

package/lib/enums/Alignments.js

@@ -2,5 +2,14 @@ export const Alignments = Object.freeze({
     LEFT: 'left',
     CENTER: 'center',
     RIGHT: 'right',
-    JUSTIFY: 'justify'
+    JUSTIFY: 'justify',
+
+    get values() {
+        return [
+            this.LEFT,
+            this.CENTER,
+            this.RIGHT,
+            this.JUSTIFY
+        ];
+    }
 });

package/lib/extensions/Alignment.js

@@ -1,6 +1,6 @@
 import { Extension } from '@tiptap/vue-2';
 import { computed } from 'vue';
-import { createCommand, createKeyboardShortcut, renderInlineSetting } from '../utils';
+import { convertAlignment, createCommand, createKeyboardShortcut, renderInlineSetting } from '../utils';
 import { Alignments, NodeTypes, TextSettings } from '../enums';
 
 const DEFAULTS = {
@@ -20,11 +20,13 @@ export const Alignment = Extension.create({
                     isRequired: false,
 
                     parseHTML({ style }) {
-                        if (style.textAlign) {
+                        const textAlign = convertAlignment(style.textAlign);
+
+                        if (textAlign) {
                             return {
-                                desktop: style.textAlign,
-                                tablet: style.textAlign,
-                                mobile: style.textAlign
+                                desktop: textAlign,
+                                tablet: textAlign,
+                                mobile: textAlign
                             };
                         }
 

package/lib/extensions/FontSize.js

@@ -1,6 +1,6 @@
 import { Mark } from '@tiptap/vue-2';
 import { computed } from 'vue';
-import { createCommand, createKeyboardShortcut, renderMark } from '../utils';
+import { convertFontSize, createCommand, createKeyboardShortcut, renderMark } from '../utils';
 import { TextSettings } from '../enums';
 
 export const FontSize = Mark.create({
@@ -63,7 +63,13 @@ export const FontSize = Mark.create({
     }),
 
     parseHTML() {
-        const parseSize = (value) => value ? String(parseInt(value)) : null;
+        const parseSize = (value) => {
+            if (!value) return null;
+
+            const converted = convertFontSize(value, this.options.wrapperRef.value);
+
+            return String(converted);
+        };
 
         return [
             {

package/lib/extensions/FontWeight.js

@@ -60,7 +60,9 @@ export const FontWeight = Mark.create({
     }),
 
     parseHTML() {
-        const getAttrs = (value) => ({ value });
+        const getAttrs = (value) => {
+            return Number(value) ? { value } : false;
+        };
 
         return [
             {

package/lib/extensions/LineHeight.js

@@ -1,8 +1,7 @@
 import { Extension } from '@tiptap/vue-2';
 import { computed } from 'vue';
-import { createCommand, renderInlineSetting } from '../utils';
+import { createCommand, renderInlineSetting, convertLineHeight } from '../utils';
 import { NodeTypes, TextSettings } from '../enums';
-import { ContextWindow } from '../services';
 
 const DEFAULTS = {
     mobile: null,
@@ -13,51 +12,46 @@ const DEFAULTS = {
 export const LineHeight = Extension.create({
     name: TextSettings.LINE_HEIGHT,
 
-    addGlobalAttributes: () => [
-        {
-            types: [NodeTypes.PARAGRAPH, NodeTypes.HEADING],
-            attributes: {
-                [TextSettings.LINE_HEIGHT]: {
-                    isRequired: false,
+    addGlobalAttributes() {
+        return [
+            {
+                types: [NodeTypes.PARAGRAPH, NodeTypes.HEADING],
+                attributes: {
+                    [TextSettings.LINE_HEIGHT]: {
+                        isRequired: false,
 
-                    parseHTML(element) {
-                        if (element.matches('[style*="--zw-line-height"]')) {
-                            const mobile = element.style.getPropertyValue('--zw-line-height-mobile') || null;
-                            const tablet = element.style.getPropertyValue('--zw-line-height-tablet') || null;
-                            const desktop = element.style.getPropertyValue('--zw-line-height-desktop') || null;
+                        parseHTML: (element) => {
+                            if (element.matches('[style*="--zw-line-height"]')) {
+                                const mobile = element.style.getPropertyValue('--zw-line-height-mobile') || null;
+                                const tablet = element.style.getPropertyValue('--zw-line-height-tablet') || null;
+                                const desktop = element.style.getPropertyValue('--zw-line-height-desktop') || null;
 
-                            return { mobile, tablet, desktop };
-                        }
-
-                        const value = element.style.lineHeight;
+                                return { mobile, tablet, desktop };
+                            }
 
-                        if (!value) return null;
+                            const value = element.style.lineHeight;
 
-                        if (!value.includes('px')) {
-                            return { desktop: value, tablet: value, mobile: value };
-                        }
+                            if (!value) return null;
 
-                        // element is not connected to window so getComputedStyle is not working on element
-                        const childFontSize = element.firstElementChild.style.fontSize;
-                        const fontSize = childFontSize || ContextWindow.getComputedStyle(ContextWindow.body).fontSize;
-                        const relative = (parseFloat(value) / parseFloat(fontSize)).toFixed(2);
+                            const converted = convertLineHeight(value, element, this.options.wrapperRef.value);
 
-                        return { desktop: relative, tablet: relative, mobile: relative };
-                    },
+                            return { desktop: converted, tablet: converted, mobile: converted };
+                        },
 
-                    renderHTML(attrs) {
-                        if (!attrs.line_height) return null;
+                        renderHTML(attrs) {
+                            if (!attrs.line_height) return null;
 
-                        return renderInlineSetting({
-                            line_height_mobile: attrs.line_height.mobile,
-                            line_height_tablet: attrs.line_height.tablet,
-                            line_height_desktop: attrs.line_height.desktop
-                        });
+                            return renderInlineSetting({
+                                line_height_mobile: attrs.line_height.mobile,
+                                line_height_tablet: attrs.line_height.tablet,
+                                line_height_desktop: attrs.line_height.desktop
+                            });
+                        }
                     }
                 }
             }
-        }
-    ],
+        ];
+    },
 
     addCommands() {
         return {

package/lib/extensions/Link.js

@@ -8,13 +8,7 @@ export const Link = Base.extend({
     addOptions() {
         return {
             ...this.parent?.(),
-            openOnClick: false,
-            HTMLAttributes: {
-                target: LinkTargets.SELF
-            },
-            preset: {},
-            basePresetClass: null,
-            pageBlocks: []
+            openOnClick: false
         };
     },
 
@@ -32,14 +26,8 @@ export const Link = Base.extend({
             },
 
             target: {
-                default: this.options.target,
-                parseHTML: (element) => {
-                    const target = element.getAttribute('target');
-
-                    if (!target) return LinkTargets.SELF;
-
-                    return target;
-                }
+                default: LinkTargets.SELF,
+                parseHTML: (element) => element.getAttribute('target') || LinkTargets.SELF
             },
 
             destination: {

package/lib/extensions/TextDecoration.js

@@ -108,6 +108,24 @@ export const TextDecoration = Mark.create({
             {
                 style: 'text-decoration-line',
                 getAttrs
+            },
+            {
+                style: 'text-decoration',
+                getAttrs
+            },
+            {
+                tag: 's',
+                attrs: {
+                    underline: false,
+                    strike_through: true
+                }
+            },
+            {
+                tag: 'u',
+                attrs: {
+                    underline: true,
+                    strike_through: false
+                }
             }
         ];
     },

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

@@ -31,7 +31,8 @@ function createEditor({ content }) {
             }),
             FontSize.configure({
                 minSize: 5,
-                maxSize: 20
+                maxSize: 20,
+                wrapperRef: ref(document.createElement('div'))
             })
         )
     });

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

@@ -211,4 +211,12 @@ describe('parsing html', () => {
 
         expect(editor.getJSON()).toMatchSnapshot();
     });
+
+    test('should ignore invalid value', () => {
+        const editor = createEditor({
+            content: '<p><span style="font-weight: var(--font-weight)">lorem</span> ipsum</p>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
 });

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

@@ -21,13 +21,17 @@ const MockStylePreset = Extension.create({
     }
 });
 
-function createEditor({ content }) {
+function createEditor({ content, wrapperEl }) {
     return new Editor({
         content: ContentNormalizer.normalize(content),
         extensions: buildCoreExtensions().concat(
             MockStylePreset,
-            DeviceManager.configure({ device: ref('desktop') }),
-            LineHeight
+            DeviceManager.configure({
+                device: ref('desktop')
+            }),
+            LineHeight.configure({
+                wrapperRef: ref(wrapperEl ?? document.createElement('div'))
+            })
         )
     });
 }
@@ -124,14 +128,16 @@ describe('parsing html', () => {
     });
 
     test('should get value from text in px units with no font size', () => {
-        global.document.body.style.fontSize = '20px';
+        const wrapperEl = document.createElement('div');
+
+        wrapperEl.style.fontSize = '20px';
 
         const editor = createEditor({
-            content: '<p style="line-height: 24px">test</p>'
+            content: '<p style="line-height: 24px">test</p>',
+            wrapperEl
         });
 
         expect(editor.getJSON()).toMatchSnapshot();
-        global.document.body.style.removeProperty('font-size');
     });
 
     test('should get value from rendered view', () => {

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

@@ -0,0 +1,102 @@
+import { ref } from 'vue';
+import { Editor } from '@tiptap/vue-2';
+import { ContentNormalizer } from '../../services';
+import { Link } from '../Link';
+import { NodeFactory } from '../../__tests__/utils';
+import { buildCoreExtensions } from '../core';
+
+function createEditor({ content }) {
+    return new Editor({
+        content: ContentNormalizer.normalize(content),
+        extensions: buildCoreExtensions().concat(
+            Link.configure({
+                preset: 'link',
+                baseClass: 'zw ts-',
+                pageBlocks: ref([{ id: 987654 }])
+            })
+        )
+    });
+}
+
+const createContent = (text) => NodeFactory.doc([
+    NodeFactory.paragraph([text])
+]);
+
+const linkAttributes = (href) => ({
+    href: href ?? '/test',
+    text: 'Hello world link',
+    target: '_self',
+    destination: 'url'
+});
+
+describe('apply link', () => {
+    test('should apply link', () => {
+        const editor = createEditor({
+            content: createContent(NodeFactory.text('hello world'))
+        });
+
+        editor.chain().selectAll().applyLink(linkAttributes()).run();
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should apply link when no selected text', () => {
+        const editor = createEditor({
+            content: createContent(NodeFactory.text('Some  text'))
+        });
+
+        editor.chain().setTextSelection(6).applyLink(linkAttributes()).run();
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+});
+
+describe('parse html', () => {
+    test('should parse url links from html', () => {
+        const editor = createEditor({
+            content: '<a href="https://hello.world" target="_blank">Hello</a>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should parse block links from html', () => {
+        const editor = createEditor({
+            content: '<a href="#987654" target="_blank">Hello</a>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should parse link target', () => {
+        const editor = createEditor({
+            content: '<a href="https://hello.world" target="_blank">Hello</a>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should add default self target for links from html without target', () => {
+        const editor = createEditor({
+            content: '<a href="https://hello.world">Hello</a>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should parse value for relative url', () => {
+        const editor = createEditor({
+            content: '<a href="/hello-world">Hello</a>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should parse not valid value', () => {
+        const editor = createEditor({
+            content: '<a href="934238">Hello</a>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+});

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

@@ -324,6 +324,14 @@ describe('parsing html', () => {
         expect(editor.getJSON()).toMatchSnapshot();
     });
 
+    test('should get both from text with property shorthand', () => {
+        const editor = createEditor({
+            content: '<p><span style="text-decoration: underline line-through">lorem</span> ipsum</p>'
+        });
+
+        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>'
@@ -339,4 +347,20 @@ describe('parsing html', () => {
 
         expect(editor.getJSON()).toMatchSnapshot();
     });
+
+    test('should parse underline from tag', () => {
+        const editor = createEditor({
+            content: '<p><u>lorem</u> ipsum</p>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should parse strike through from tag', () => {
+        const editor = createEditor({
+            content: '<p><s>lorem</s> ipsum</p>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
 });

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

@@ -278,6 +278,23 @@ Object {
 }
 `;
 
+exports[`parsing html should ignore invalid value 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "text": "lorem ipsum",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
 exports[`parsing html should merge paragraph and text settings 1`] = `
 Object {
   "content": Array [