@zipify/wysiwyg 1.0.0-dev.1

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

@@ -0,0 +1,258 @@
+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';
+
+const MockStylePreset = Extension.create({
+    name: 'style_preset',
+
+    addCommands() {
+        return {
+            getPreset: createCommand(() => ref({
+                common: { text_decoration: 'none' }
+            }))
+        };
+    }
+});
+
+function createEditor({ content }) {
+    return new Editor({
+        content,
+        extensions: CORE_EXTENSIONS.concat(MockStylePreset, TextDecoration)
+    });
+}
+
+const createContent = (text) => NodeFactory.doc([
+    NodeFactory.paragraph([text])
+]);
+
+describe('get decoration', () => {
+    test('should get from selection', () => {
+        const editor = createEditor({
+            content: createContent(NodeFactory.text('hello world', [
+                NodeFactory.mark('text_decoration', {
+                    underline: true,
+                    strike_through: true
+                })
+            ]))
+        });
+
+        expect(editor.commands.getTextDecoration().value).toEqual({
+            underline: true,
+            strike_through: true
+        });
+    });
+
+    test('should get default', () => {
+        const editor = createEditor({
+            content: createContent(NodeFactory.text('hello world'))
+        });
+
+        expect(editor.commands.getDefaultTextDecoration().value).toEqual({
+            underline: false,
+            strike_through: false
+        });
+    });
+
+    describe('underline', () => {
+        test('should get from selection', () => {
+            const editor = createEditor({
+                content: createContent(NodeFactory.text('hello world', [
+                    NodeFactory.mark('text_decoration', { underline: true })
+                ]))
+            });
+
+            editor.commands.selectAll();
+
+            expect(editor.commands.isUnderline().value).toBe(true);
+        });
+
+        test('should get from preset', () => {
+            const editor = createEditor({
+                content: createContent(NodeFactory.text('hello world'))
+            });
+
+            editor.commands.selectAll();
+
+            expect(editor.commands.isUnderline().value).toBe(false);
+        });
+    });
+
+    describe('strike through', () => {
+        test('should get from selection', () => {
+            const editor = createEditor({
+                content: createContent(NodeFactory.text('hello world', [
+                    NodeFactory.mark('text_decoration', { strike_through: true })
+                ]))
+            });
+
+            editor.commands.selectAll();
+
+            expect(editor.commands.isStrikeThrough().value).toBe(true);
+        });
+
+        test('should get from preset', () => {
+            const editor = createEditor({
+                content: createContent(NodeFactory.text('hello world'))
+            });
+
+            editor.commands.selectAll();
+
+            expect(editor.commands.isStrikeThrough().value).toBe(false);
+        });
+    });
+});
+
+describe('apply decoration', () => {
+    test('should apply decoration', () => {
+        const editor = createEditor({
+            content: createContent(NodeFactory.text('hello world'))
+        });
+
+        editor.chain().selectAll().applyTextDecoration('underline').run();
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should second decoration', () => {
+        const editor = createEditor({
+            content: createContent(NodeFactory.text('hello world', [
+                NodeFactory.mark('text_decoration', {
+                    strike_through: false,
+                    underline: true
+                })
+            ]))
+        });
+
+        editor.chain().selectAll().applyTextDecoration('strike_through').run();
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should remove decoration', () => {
+        const editor = createEditor({
+            content: createContent(NodeFactory.text('hello world', [
+                NodeFactory.mark('text_decoration', {
+                    strike_through: true,
+                    underline: true
+                })
+            ]))
+        });
+
+        editor.chain().selectAll().removeTextDecoration('strike_through').run();
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should remove mark if no decoration', () => {
+        const editor = createEditor({
+            content: createContent(NodeFactory.text('hello world', [
+                NodeFactory.mark('text_decoration', {
+                    strike_through: false,
+                    underline: true
+                })
+            ]))
+        });
+
+        editor.chain().selectAll().removeTextDecoration('underline').run();
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    describe('underline', () => {
+        test('should toggle to removed', () => {
+            const editor = createEditor({
+                content: createContent(NodeFactory.text('hello world', [
+                    NodeFactory.mark('text_decoration', {
+                        strike_through: true,
+                        underline: true
+                    })
+                ]))
+            });
+
+            editor.chain().selectAll().toggleUnderline().run();
+
+            expect(editor.getJSON()).toMatchSnapshot();
+        });
+
+        test('should toggle to used', () => {
+            const editor = createEditor({
+                content: createContent(NodeFactory.text('hello world'))
+            });
+
+            editor.chain().selectAll().toggleUnderline().run();
+
+            expect(editor.getJSON()).toMatchSnapshot();
+        });
+    });
+
+    describe('strike through', () => {
+        test('should toggle to removed', () => {
+            const editor = createEditor({
+                content: createContent(NodeFactory.text('hello world', [
+                    NodeFactory.mark('text_decoration', {
+                        strike_through: true,
+                        underline: true
+                    })
+                ]))
+            });
+
+            editor.chain().selectAll().toggleStrikeThrough().run();
+
+            expect(editor.getJSON()).toMatchSnapshot();
+        });
+
+        test('should toggle to used', () => {
+            const editor = createEditor({
+                content: createContent(NodeFactory.text('hello world'))
+            });
+
+            editor.chain().selectAll().toggleStrikeThrough().run();
+
+            expect(editor.getJSON()).toMatchSnapshot();
+        });
+    });
+});
+
+describe('rendering', () => {
+    test('should render underline only', () => {
+        const editor = createEditor({
+            content: createContent(NodeFactory.text('hello world', [
+                NodeFactory.mark('text_decoration', {
+                    strike_through: false,
+                    underline: true
+                })
+            ]))
+        });
+
+        expect(editor.getHTML()).toMatchSnapshot();
+    });
+
+    test('should render strike through only', () => {
+        const editor = createEditor({
+            content: createContent(NodeFactory.text('hello world', [
+                NodeFactory.mark('text_decoration', {
+                    strike_through: true,
+                    underline: false
+                })
+            ]))
+        });
+
+        expect(editor.getHTML()).toMatchSnapshot();
+    });
+
+    test('should render both', () => {
+        const editor = createEditor({
+            content: createContent(NodeFactory.text('hello world', [
+                NodeFactory.mark('text_decoration', {
+                    strike_through: true,
+                    underline: true
+                })
+            ]))
+        });
+
+        expect(editor.getHTML()).toMatchSnapshot();
+    });
+});

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

@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`apply value should change value 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "attrs": Object {
+        "alignment": Object {
+          "desktop": "right",
+          "mobile": null,
+          "tablet": null,
+        },
+      },
+      "content": Array [
+        Object {
+          "text": "hello world",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+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 only desktop 1`] = `"<p class=\\"zw-style\\" style=\\"--zw-desktop-text-align: center;\\">hello world</p>"`;

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

@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`apply background color should change background color 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "marks": Array [
+            Object {
+              "attrs": Object {
+                "value": "green",
+              },
+              "type": "background_color",
+            },
+          ],
+          "text": "hello world",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+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__/CaseStyle.test.js.snap

@@ -0,0 +1,69 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`apply case style should apply capitalize 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "text": "Hello World",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`apply case style should apply case by type 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "text": "Hello World",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`apply case style should apply lowercase 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "text": "hello world",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`apply case style should apply uppercase 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "text": "HELLO WORLD",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;

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

@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`apply font color should change font color 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "marks": Array [
+            Object {
+              "attrs": Object {
+                "value": "green",
+              },
+              "type": "font_color",
+            },
+          ],
+          "text": "hello world",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+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

@@ -0,0 +1,158 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`apply font family should apply closest font weight if current is unavailable 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "marks": Array [
+            Object {
+              "attrs": Object {
+                "value": "Bungee",
+              },
+              "type": "font_family",
+            },
+            Object {
+              "attrs": Object {
+                "value": "400",
+              },
+              "type": "font_weight",
+            },
+          ],
+          "text": "hello world",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`apply font family should change font family 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "marks": Array [
+            Object {
+              "attrs": Object {
+                "value": "Bungee",
+              },
+              "type": "font_family",
+            },
+          ],
+          "text": "hello world",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`apply font family should not change current font weight if available 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "marks": Array [
+            Object {
+              "attrs": Object {
+                "value": "Lato",
+              },
+              "type": "font_family",
+            },
+            Object {
+              "attrs": Object {
+                "value": "700",
+              },
+              "type": "font_weight",
+            },
+          ],
+          "text": "hello world",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`apply font family should not change italic if available 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "marks": Array [
+            Object {
+              "attrs": Object {
+                "value": "Lato",
+              },
+              "type": "font_family",
+            },
+            Object {
+              "attrs": Object {
+                "value": "700",
+              },
+              "type": "font_weight",
+            },
+            Object {
+              "attrs": Object {
+                "italic": true,
+              },
+              "type": "font_style",
+            },
+          ],
+          "text": "hello world",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`apply font family should remove italic if unavailable 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "marks": Array [
+            Object {
+              "attrs": Object {
+                "value": "Bungee",
+              },
+              "type": "font_family",
+            },
+            Object {
+              "attrs": Object {
+                "value": "400",
+              },
+              "type": "font_weight",
+            },
+          ],
+          "text": "hello world",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`rendering should render html 1`] = `"<p class=\\"zw-style\\"><span style=\\"--zw-font-family: Bungee;\\" class=\\"zw-style\\">hello world</span></p>"`;