@zipify/wysiwyg 1.0.0-dev.41 → 1.0.0-dev.44

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,18 @@ 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/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

@@ -38,8 +38,9 @@ export const LineHeight = Extension.create({
                         }
 
                         // 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 source = element.firstElementChild || element;
+                        const sourceSize = source.style.fontSize;
+                        const fontSize = sourceSize || ContextWindow.getComputedStyle(ContextWindow.body).fontSize;
                         const relative = (parseFloat(value) / parseFloat(fontSize)).toFixed(2);
 
                         return { desktop: relative, tablet: relative, mobile: relative };

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__/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__/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 [

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

@@ -0,0 +1,225 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`apply link should apply link 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "marks": Array [
+            Object {
+              "attrs": Object {
+                "destination": "url",
+                "href": "/test",
+                "target": "_self",
+              },
+              "type": "link",
+            },
+          ],
+          "text": "Hello world link",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`apply link should apply link when no selected text 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "text": "Some ",
+          "type": "text",
+        },
+        Object {
+          "marks": Array [
+            Object {
+              "attrs": Object {
+                "destination": "url",
+                "href": "/test",
+                "target": "_self",
+              },
+              "type": "link",
+            },
+          ],
+          "text": "Hello world link",
+          "type": "text",
+        },
+        Object {
+          "text": " text",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`parse html should add default self target for links from html without target 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "marks": Array [
+            Object {
+              "attrs": Object {
+                "destination": "url",
+                "href": "https://hello.world",
+                "target": "_self",
+              },
+              "type": "link",
+            },
+          ],
+          "text": "Hello",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`parse html should parse block links from html 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "marks": Array [
+            Object {
+              "attrs": Object {
+                "destination": "block",
+                "href": 987654,
+                "target": "_blank",
+              },
+              "type": "link",
+            },
+          ],
+          "text": "Hello",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`parse html should parse link target 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "marks": Array [
+            Object {
+              "attrs": Object {
+                "destination": "url",
+                "href": "https://hello.world",
+                "target": "_blank",
+              },
+              "type": "link",
+            },
+          ],
+          "text": "Hello",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`parse html should parse not valid value 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "marks": Array [
+            Object {
+              "attrs": Object {
+                "destination": "url",
+                "href": "934238",
+                "target": "_self",
+              },
+              "type": "link",
+            },
+          ],
+          "text": "Hello",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`parse html should parse url links from html 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "marks": Array [
+            Object {
+              "attrs": Object {
+                "destination": "url",
+                "href": "https://hello.world",
+                "target": "_blank",
+              },
+              "type": "link",
+            },
+          ],
+          "text": "Hello",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`parse html should parse value for relative url 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "marks": Array [
+            Object {
+              "attrs": Object {
+                "destination": "url",
+                "href": "/hello-world",
+                "target": "_self",
+              },
+              "type": "link",
+            },
+          ],
+          "text": "Hello",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;