@zipify/wysiwyg 1.0.0-dev.10 → 1.0.0-dev.100

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

@@ -0,0 +1,101 @@
+import { ref } from 'vue';
+import { Editor } from '@tiptap/vue-2';
+import { ContentNormalizer, NodeFactory } from '../../services';
+import { Link } from '../Link';
+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__/Margin.test.js

@@ -0,0 +1,59 @@
+import { Editor } from '@tiptap/core';
+import { ContentNormalizer, NodeFactory } from '../../services';
+import { buildCoreExtensions } from '../core';
+import { Margin } from '../Margin';
+
+function createEditor({ content }) {
+    return new Editor({
+        content: ContentNormalizer.normalize(content),
+        extensions: buildCoreExtensions().concat(Margin)
+    });
+}
+
+describe('parse html', () => {
+    test('should set null if no margin', () => {
+        const editor = createEditor({
+            content: '<p>lorem ipsum</p>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should parse shorthand', () => {
+        const editor = createEditor({
+            content: '<p style="margin: 10px 3px 1em;">lorem ipsum</p>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should parse values', () => {
+        const editor = createEditor({
+            content: '<p style="margin-left: 10px; margin-bottom: 1em">lorem ipsum</p>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+});
+
+describe('render html', () => {
+    test('should not render empty', () => {
+        const editor = createEditor({
+            content: NodeFactory.doc([
+                NodeFactory.paragraph({ margin: null }, 'lorem ipsum')
+            ])
+        });
+
+        expect(editor.getHTML()).toMatchSnapshot();
+    });
+
+    test('should render value', () => {
+        const editor = createEditor({
+            content: NodeFactory.doc([
+                NodeFactory.paragraph({ margin: { value: '10px' } }, 'lorem ipsum')
+            ])
+        });
+
+        expect(editor.getHTML()).toMatchSnapshot();
+    });
+});

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

@@ -1,11 +1,9 @@
 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 { ContentNormalizer, NodeFactory } from '../../services';
+import { buildCoreExtensions } from '../core';
 
 const MockFontSize = Mark.create({
     name: TextSettings.FONT_SIZE,
@@ -43,17 +41,75 @@ 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),
+                    presets: presets,
                     baseClass: 'zw ts-',
                     defaultId,
 
@@ -68,7 +124,13 @@ function createEditor({ content, presets, defaultId }) {
                 }),
                 MockFontSize,
                 MockFontWeight,
-                MockAlignment
+                MockAlignment,
+                MockBackgroundColor,
+                MockFontColor,
+                MockFontFamily,
+                MockFontStyle,
+                MockTextDecoration,
+                MockSuperscript
             )
         });
     });

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

@@ -1,10 +1,9 @@
 import { Editor, Extension } from '@tiptap/vue-2';
-import { ref } from '@vue/composition-api';
-import { NodeFactory } from '../../__tests__/utils';
+import { ref } from 'vue';
 import { createCommand } from '../../utils';
-import { CORE_EXTENSIONS } from '../core';
 import { TextDecoration } from '../TextDecoration';
-import { ContentNormalizer } from '../../services';
+import { ContentNormalizer, NodeFactory } from '../../services';
+import { buildCoreExtensions } from '../core';
 
 const MockStylePreset = Extension.create({
     name: 'style_preset',
@@ -19,11 +18,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 +291,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 +307,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 +323,22 @@ 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>'
+        });
+
+        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>'
@@ -317,4 +346,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__/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>"`;

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

@@ -50,6 +50,35 @@ Object {
 }
 `;
 
+exports[`parsing html should get value from rendered view 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "marks": Array [
+            Object {
+              "attrs": Object {
+                "value": "#FF0000",
+              },
+              "type": "background_color",
+            },
+          ],
+          "text": "lorem",
+          "type": "text",
+        },
+        Object {
+          "text": " ipsum",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
 exports[`parsing html should get value from text 1`] = `
 Object {
   "content": Array [
@@ -116,4 +145,4 @@ Object {
 }
 `;
 
-exports[`rendering should render html 1`] = `"<p class=\\"zw-style\\"><span style=\\"--zw-background-color: green;\\" class=\\"zw-style\\">hello world</span></p>"`;
+exports[`rendering should render html 1`] = `"<p class=\\"zw-style\\"><span style=\\"--zw-background-color:green;\\" class=\\"zw-style\\">hello world</span></p>"`;

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

@@ -50,6 +50,23 @@ Object {
 }
 `;
 
+exports[`parsing html should get value from parsed view 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "text": "lorem ipsum",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
 exports[`parsing html should get value from text 1`] = `
 Object {
   "content": Array [
@@ -116,4 +133,4 @@ Object {
 }
 `;
 
-exports[`rendering should render html 1`] = `"<p class=\\"zw-style\\"><span style=\\"--zw-font-color: green;\\" class=\\"zw-style\\">hello world</span></p>"`;
+exports[`rendering should render html 1`] = `"<p class=\\"zw-style\\"><span style=\\"--zw-font-color:green;\\" class=\\"zw-style\\">hello world</span></p>"`;

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

@@ -155,6 +155,64 @@ Object {
 }
 `;
 
+exports[`parsing html should get parse font name with quotes 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "text": "hello ",
+          "type": "text",
+        },
+        Object {
+          "marks": Array [
+            Object {
+              "attrs": Object {
+                "value": "Josefin Slab",
+              },
+              "type": "font_family",
+            },
+          ],
+          "text": "world",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`parsing html should get set default if undefined font 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "marks": Array [
+            Object {
+              "attrs": Object {
+                "value": "Lato",
+              },
+              "type": "font_family",
+            },
+          ],
+          "text": "lorem",
+          "type": "text",
+        },
+        Object {
+          "text": " ipsum",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
 exports[`parsing html should get value from paragraph 1`] = `
 Object {
   "content": Array [
@@ -180,6 +238,35 @@ Object {
 }
 `;
 
+exports[`parsing html should get value from rendered view 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "marks": Array [
+            Object {
+              "attrs": Object {
+                "value": "Lato",
+              },
+              "type": "font_family",
+            },
+          ],
+          "text": "lorem",
+          "type": "text",
+        },
+        Object {
+          "text": " ipsum",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
 exports[`parsing html should get value from text 1`] = `
 Object {
   "content": Array [
@@ -246,4 +333,4 @@ Object {
 }
 `;
 
-exports[`rendering should render html 1`] = `"<p class=\\"zw-style\\"><span style=\\"--zw-font-family: Bungee;\\" class=\\"zw-style\\">hello world</span></p>"`;
+exports[`rendering should render html 1`] = `"<p class=\\"zw-style\\"><span style=\\"--zw-font-family:&quot;Bungee&quot;;\\" class=\\"zw-style\\">hello world</span></p>"`;

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

@@ -162,6 +162,37 @@ Object {
 }
 `;
 
+exports[`parsing html should get value from rendered view 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "marks": Array [
+            Object {
+              "attrs": Object {
+                "desktop": "30",
+                "mobile": "24",
+                "tablet": null,
+              },
+              "type": "font_size",
+            },
+          ],
+          "text": "lorem",
+          "type": "text",
+        },
+        Object {
+          "text": " ipsum",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
 exports[`parsing html should get value from text 1`] = `
 Object {
   "content": Array [
@@ -234,6 +265,6 @@ Object {
 }
 `;
 
-exports[`rendering should render all devices 1`] = `"<p class=\\"zw-style\\"><span style=\\"--zw-mobile-font-size: 12px; --zw-tablet-font-size: 14px; --zw-desktop-font-size: 16px;\\" class=\\"zw-style\\">hello world</span></p>"`;
+exports[`rendering should render all devices 1`] = `"<p class=\\"zw-style\\"><span style=\\"--zw-font-size-mobile:12px;--zw-font-size-tablet:14px;--zw-font-size-desktop:16px;\\" class=\\"zw-style\\">hello world</span></p>"`;
 
-exports[`rendering should render only desktop 1`] = `"<p class=\\"zw-style\\"><span style=\\"--zw-desktop-font-size: 14px;\\" class=\\"zw-style\\">hello world</span></p>"`;
+exports[`rendering should render only desktop 1`] = `"<p class=\\"zw-style\\"><span style=\\"--zw-font-size-desktop:14px;\\" class=\\"zw-style\\">hello world</span></p>"`;

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

@@ -138,7 +138,7 @@ Object {
 }
 `;
 
-exports[`parsing html should get value from text 1`] = `
+exports[`parsing html should get value from rendered view 1`] = `
 Object {
   "content": Array [
     Object {
@@ -167,7 +167,7 @@ Object {
 }
 `;
 
-exports[`parsing html should merge paragraph and text settings 1`] = `
+exports[`parsing html should get value from text 1`] = `
 Object {
   "content": Array [
     Object {
@@ -176,7 +176,7 @@ Object {
           "marks": Array [
             Object {
               "attrs": Object {
-                "italic": false,
+                "italic": true,
               },
               "type": "font_style",
             },
@@ -184,6 +184,27 @@ Object {
           "text": "lorem",
           "type": "text",
         },
+        Object {
+          "text": " ipsum",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`parsing html should merge paragraph and text settings 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "text": "lorem",
+          "type": "text",
+        },
         Object {
           "marks": Array [
             Object {
@@ -204,4 +225,4 @@ Object {
 }
 `;
 
-exports[`rendering should render html 1`] = `"<p class=\\"zw-style\\"><span style=\\"--zw-font-style: italic;\\" class=\\"zw-style\\">hello world</span></p>"`;
+exports[`rendering should render html 1`] = `"<p class=\\"zw-style\\"><span style=\\"--zw-font-style:italic;\\" class=\\"zw-style\\">hello world</span></p>"`;