@zipify/wysiwyg 1.3.0-0 → 2.0.0-1

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

@@ -1,9 +1,9 @@
 import { Editor, Extension, Mark } from '@tiptap/vue-2';
+import { buildTestExtensions } from '../../__tests__/utils';
 import { StylePreset } from '../StylePreset';
 import { List } from '../list';
 import { ListTypes, NodeTypes, TextSettings } from '../../enums';
 import { ContentNormalizer, NodeFactory } from '../../services';
-import { buildCoreExtensions } from '../core';
 import { createCommand } from '../../utils';
 
 const MockFontSize = Mark.create({
@@ -124,32 +124,34 @@ function createEditor({ content, presets, defaultId, link }) {
             content: ContentNormalizer.normalize(content),
             onCreate: () => resolve(editor),
 
-            extensions: buildCoreExtensions().concat(
-                StylePreset.configure({
-                    presets: presets,
-                    baseClass: 'zw ts-',
-                    defaultId,
-
-                    makeVariable({ device, preset, property }) {
-                        const formattedProperty = property.replace(/_/i, '-');
-
-                        return `--${device}-${preset.id}-${formattedProperty}`;
-                    }
-                }),
-                List.configure({
-                    baseClass: 'zw-list--'
-                }),
-                MockFontSize,
-                MockFontWeight,
-                MockAlignment,
-                MockBackgroundColor,
-                MockFontColor,
-                MockFontFamily,
-                MockFontStyle,
-                MockTextDecoration,
-                MockSuperscript,
-                MockLink.configure(link)
-            )
+            extensions: buildTestExtensions({
+                include: [
+                    StylePreset.configure({
+                        presets: presets,
+                        baseClass: 'zw ts-',
+                        defaultId,
+
+                        makeVariable({ device, preset, property }) {
+                            const formattedProperty = property.replace(/_/i, '-');
+
+                            return `--${device}-${preset.id}-${formattedProperty}`;
+                        }
+                    }),
+                    List.configure({
+                        baseClass: 'zw-list--'
+                    }),
+                    MockFontSize,
+                    MockFontWeight,
+                    MockAlignment,
+                    MockBackgroundColor,
+                    MockFontColor,
+                    MockFontFamily,
+                    MockFontStyle,
+                    MockTextDecoration,
+                    MockSuperscript,
+                    MockLink.configure(link)
+                ]
+            })
         });
     });
 }
@@ -279,7 +281,8 @@ describe('apply preset', () => {
             presets: [createPreset({ id: 'regular-1' })]
         });
 
-        editor.chain().selectAll().applyPreset('regular-1').run();
+        editor.commands.selectAll();
+        editor.commands.applyPreset('regular-1');
 
         expect(editor.getJSON()).toMatchSnapshot();
     });
@@ -294,7 +297,8 @@ describe('apply preset', () => {
             ]
         });
 
-        editor.chain().selectAll().applyPreset('h1').run();
+        editor.commands.selectAll();
+        editor.commands.applyPreset('h1');
 
         expect(editor.getJSON()).toMatchSnapshot();
     });
@@ -310,7 +314,8 @@ describe('apply preset', () => {
             ]
         });
 
-        editor.chain().selectAll().applyPreset('h1').run();
+        editor.commands.selectAll();
+        editor.commands.applyPreset('h1');
 
         expect(editor.getJSON()).toMatchSnapshot();
     });
@@ -326,7 +331,8 @@ describe('apply preset', () => {
             presets: [createPreset({ id: 'regular-1' })]
         });
 
-        editor.chain().selectAll().applyPreset('regular-1').run();
+        editor.commands.selectAll();
+        editor.commands.applyPreset('regular-1');
 
         expect(editor.getJSON()).toMatchSnapshot();
     });
@@ -344,7 +350,8 @@ describe('apply preset', () => {
             ]
         });
 
-        editor.chain().selectAll().applyPreset('h1').run();
+        editor.commands.selectAll();
+        editor.commands.applyPreset('h1');
 
         expect(editor.getJSON()).toMatchSnapshot();
     });
@@ -358,7 +365,8 @@ describe('apply preset', () => {
             defaultId: 'regular-1'
         });
 
-        editor.chain().selectAll().applyDefaultPreset().run();
+        editor.commands.selectAll();
+        editor.commands.applyDefaultPreset();
 
         expect(editor.getJSON()).toMatchSnapshot();
     });
@@ -377,7 +385,8 @@ describe('apply preset', () => {
             ]
         });
 
-        editor.chain().selectAll().applyPreset('regular-2').run();
+        editor.commands.selectAll();
+        editor.commands.applyPreset('regular-2');
 
         expect(editor.getJSON()).toMatchSnapshot();
     });
@@ -396,21 +405,6 @@ describe('get preset customization', () => {
         expect(customization.value).toMatchSnapshot();
     });
 
-    test('should not is setting customized', async () => {
-        const editor = await createEditor({
-            content: NodeFactory.doc([
-                NodeFactory.paragraph({ preset: { id: 'regular-1' } }, 'test')
-            ]),
-            presets: [createPreset({ id: 'regular-1' })]
-        });
-
-        const isFontSizeCustomized = editor.commands.isSettingCustomized('marks', TextSettings.FONT_SIZE);
-        const isAlignmentCustomized = editor.commands.isSettingCustomized('attributes', TextSettings.ALIGNMENT);
-
-        expect(isFontSizeCustomized.value).toBe(false);
-        expect(isAlignmentCustomized.value).toBe(false);
-    });
-
     test('should find marks', async () => {
         const editor = await createEditor({
             content: NodeFactory.doc([
@@ -431,25 +425,6 @@ describe('get preset customization', () => {
         expect(customization.value).toMatchSnapshot();
     });
 
-    test('should is marks setting customized', async () => {
-        const editor = await createEditor({
-            content: NodeFactory.doc([
-                NodeFactory.paragraph({ preset: { id: 'regular-1' } }, [
-                    NodeFactory.text('test', [
-                        NodeFactory.mark(TextSettings.FONT_SIZE, { value: '12' }),
-                        NodeFactory.mark(TextSettings.FONT_WEIGHT, { value: '400' })
-                    ])
-                ])
-            ]),
-            presets: [createPreset({ id: 'regular-1' })]
-        });
-
-        editor.commands.selectAll();
-        const isFontSizeCustomized = editor.commands.isSettingCustomized('marks', TextSettings.FONT_SIZE);
-
-        expect(isFontSizeCustomized.value).toBe(true);
-    });
-
     test('should find attributes', async () => {
         const editor = await createEditor({
             content: NodeFactory.doc([
@@ -467,23 +442,6 @@ describe('get preset customization', () => {
 
         expect(customization.value).toMatchSnapshot();
     });
-
-    test('should is attributes setting customized', async () => {
-        const editor = await createEditor({
-            content: NodeFactory.doc([
-                NodeFactory.paragraph({
-                    preset: { id: 'regular-1' },
-                    alignment: { value: 'center' }
-                }, 'test')
-            ]),
-            presets: [createPreset({ id: 'regular-1' })]
-        });
-
-        editor.commands.selectAll();
-        const isAlignmentCustomized = editor.commands.isSettingCustomized('attributes', TextSettings.ALIGNMENT);
-
-        expect(isAlignmentCustomized.value).toBe(true);
-    });
 });
 
 describe('remove preset customization', () => {
@@ -503,11 +461,8 @@ describe('remove preset customization', () => {
             presets: [createPreset({ id: 'regular-1' })]
         });
 
-        editor
-            .chain()
-            .setTextSelection({ from: 1, to: 2 })
-            .removePresetCustomization()
-            .run();
+        editor.commands.setTextSelection({ from: 1, to: 2 });
+        editor.commands.removePresetCustomization();
 
         expect(editor.getJSON()).toMatchSnapshot();
     });
@@ -529,11 +484,8 @@ describe('remove preset customization', () => {
             presets: [createPreset({ id: 'regular-1' })]
         });
 
-        editor
-            .chain()
-            .setTextSelection({ from: 1, to: 10 })
-            .removePresetCustomization()
-            .run();
+        editor.commands.setTextSelection({ from: 1, to: 10 });
+        editor.commands.removePresetCustomization();
 
         expect(editor.getJSON()).toMatchSnapshot();
     });
@@ -554,11 +506,8 @@ describe('remove preset customization', () => {
             presets: [createPreset({ id: 'regular-1' })]
         });
 
-        editor
-            .chain()
-            .setTextSelection({ from: 1, to: 2 })
-            .removePresetCustomization()
-            .run();
+        editor.commands.setTextSelection({ from: 1, to: 2 });
+        editor.commands.removePresetCustomization();
 
         expect(editor.state.selection).toEqual(
             expect.objectContaining({ from: 1, to: 2 })

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

@@ -1,9 +1,9 @@
 import { Editor, Extension } from '@tiptap/vue-2';
 import { ref } from 'vue';
+import { buildTestExtensions } from '../../__tests__/utils';
 import { createCommand } from '../../utils';
 import { TextDecoration } from '../TextDecoration';
 import { ContentNormalizer, NodeFactory } from '../../services';
-import { buildCoreExtensions } from '../core';
 import { TextSettings } from '../../enums';
 
 const MockStylePreset = Extension.create({
@@ -21,7 +21,9 @@ const MockStylePreset = Extension.create({
 function createEditor({ content }) {
     return new Editor({
         content: ContentNormalizer.normalize(content),
-        extensions: buildCoreExtensions().concat(MockStylePreset, TextDecoration)
+        extensions: buildTestExtensions({
+            include: [MockStylePreset, TextDecoration]
+        })
     });
 }
 
@@ -40,6 +42,8 @@ describe('get decoration', () => {
             ]))
         });
 
+        editor.commands.selectAll();
+
         expect(editor.commands.getTextDecoration().value).toEqual({
             underline: true,
             strike_through: true
@@ -70,17 +74,6 @@ describe('get decoration', () => {
             expect(editor.commands.isUnderline().value).toBe(true);
         });
 
-        test('should is customized settings', () => {
-            const editor = createEditor({
-                content: createContent(NodeFactory.text('hello world', [
-                    NodeFactory.mark(TextSettings.TEXT_DECORATION, { underline: true })
-                ]))
-            });
-
-            editor.commands.selectAll();
-            expect(editor.commands.isUnderlineCustomized().value).toBe(true);
-        });
-
         test('should get from preset', () => {
             const editor = createEditor({
                 content: createContent(NodeFactory.text('hello world'))
@@ -90,15 +83,6 @@ describe('get decoration', () => {
 
             expect(editor.commands.isUnderline().value).toBe(false);
         });
-
-        test('should not is customized settings', () => {
-            const editor = createEditor({
-                content: createContent(NodeFactory.text('hello world'))
-            });
-
-            editor.commands.selectAll();
-            expect(editor.commands.isUnderlineCustomized().value).toBe(false);
-        });
     });
 
     describe('strike through', () => {
@@ -132,7 +116,8 @@ describe('apply decoration', () => {
             content: createContent(NodeFactory.text('hello world'))
         });
 
-        editor.chain().selectAll().applyTextDecoration('underline').run();
+        editor.commands.selectAll();
+        editor.commands.applyTextDecoration('underline');
 
         expect(editor.getJSON()).toMatchSnapshot();
     });
@@ -141,13 +126,52 @@ describe('apply decoration', () => {
         const editor = createEditor({
             content: createContent(NodeFactory.text('hello world', [
                 NodeFactory.mark(TextSettings.TEXT_DECORATION, {
-                    strike_through: false,
+                    strike_through: true,
                     underline: true
                 })
             ]))
         });
 
-        editor.chain().selectAll().applyTextDecoration('strike_through').run();
+        editor.commands.selectAll();
+        editor.commands.applyTextDecoration('strike_through');
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should not apply decoration with decorated parent', () => {
+        const editor = createEditor({
+            content: NodeFactory.doc([
+                NodeFactory.paragraph([
+                    NodeFactory.text('hello world', [
+                        NodeFactory.mark(TextSettings.TEXT_DECORATION, {
+                            underline: true,
+                            strike_through: false
+                        })
+                    ])
+                ])
+            ])
+        });
+
+        editor.commands.setTextSelection({ from: 1, to: 6 });
+        editor.commands.applyTextDecoration('underline');
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should apply decoration with decorated parent false value', () => {
+        const editor = createEditor({
+            content: NodeFactory.doc([
+                NodeFactory.paragraph(null, [
+                    NodeFactory.mark(TextSettings.TEXT_DECORATION, {
+                        underline: false,
+                        strike_through: false
+                    })
+                ], 'hello world')
+            ])
+        });
+
+        editor.commands.setTextSelection({ from: 1, to: 6 });
+        editor.commands.applyTextDecoration('underline');
 
         expect(editor.getJSON()).toMatchSnapshot();
     });
@@ -156,14 +180,12 @@ describe('apply decoration', () => {
         test('should toggle to removed', () => {
             const editor = createEditor({
                 content: createContent(NodeFactory.text('hello world', [
-                    NodeFactory.mark(TextSettings.TEXT_DECORATION, {
-                        strike_through: true,
-                        underline: true
-                    })
+                    NodeFactory.mark(TextSettings.TEXT_DECORATION, { underline: true })
                 ]))
             });
 
-            editor.chain().selectAll().toggleUnderline().run();
+            editor.commands.selectAll();
+            editor.commands.toggleUnderline();
 
             expect(editor.getJSON()).toMatchSnapshot();
         });
@@ -173,7 +195,8 @@ describe('apply decoration', () => {
                 content: createContent(NodeFactory.text('hello world'))
             });
 
-            editor.chain().selectAll().toggleUnderline().run();
+            editor.commands.selectAll();
+            editor.commands.toggleUnderline();
 
             expect(editor.getJSON()).toMatchSnapshot();
         });
@@ -183,14 +206,12 @@ describe('apply decoration', () => {
         test('should toggle to removed', () => {
             const editor = createEditor({
                 content: createContent(NodeFactory.text('hello world', [
-                    NodeFactory.mark(TextSettings.TEXT_DECORATION, {
-                        strike_through: true,
-                        underline: true
-                    })
+                    NodeFactory.mark(TextSettings.TEXT_DECORATION, { strike_through: true })
                 ]))
             });
 
-            editor.chain().selectAll().toggleStrikeThrough().run();
+            editor.commands.selectAll();
+            editor.commands.toggleStrikeThrough();
 
             expect(editor.getJSON()).toMatchSnapshot();
         });
@@ -200,7 +221,8 @@ describe('apply decoration', () => {
                 content: createContent(NodeFactory.text('hello world'))
             });
 
-            editor.chain().selectAll().toggleStrikeThrough().run();
+            editor.commands.selectAll();
+            editor.commands.toggleStrikeThrough();
 
             expect(editor.getJSON()).toMatchSnapshot();
         });

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

@@ -6,18 +6,18 @@ Object {
     Object {
       "content": Array [
         Object {
-          "marks": Array [
-            Object {
-              "attrs": Object {
-                "value": "green",
-              },
-              "type": "background_color",
-            },
-          ],
           "text": "hello world",
           "type": "text",
         },
       ],
+      "marks": Array [
+        Object {
+          "attrs": Object {
+            "value": "green",
+          },
+          "type": "background_color",
+        },
+      ],
       "type": "paragraph",
     },
   ],
@@ -31,18 +31,18 @@ Object {
     Object {
       "content": Array [
         Object {
-          "marks": Array [
-            Object {
-              "attrs": Object {
-                "value": "#FF0000",
-              },
-              "type": "background_color",
-            },
-          ],
           "text": "test",
           "type": "text",
         },
       ],
+      "marks": Array [
+        Object {
+          "attrs": Object {
+            "value": "#FF0000",
+          },
+          "type": "background_color",
+        },
+      ],
       "type": "paragraph",
     },
   ],
@@ -126,18 +126,18 @@ Object {
           "type": "text",
         },
         Object {
-          "marks": Array [
-            Object {
-              "attrs": Object {
-                "value": "#FF0000",
-              },
-              "type": "background_color",
-            },
-          ],
           "text": " ipsum",
           "type": "text",
         },
       ],
+      "marks": Array [
+        Object {
+          "attrs": Object {
+            "value": "#FF0000",
+          },
+          "type": "background_color",
+        },
+      ],
       "type": "paragraph",
     },
   ],
@@ -145,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`] = `"<span style="--zw-background-color:green;" class="zw-style"><p class="zw-style">hello world</p></span>"`;

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

@@ -6,18 +6,18 @@ Object {
     Object {
       "content": Array [
         Object {
-          "marks": Array [
-            Object {
-              "attrs": Object {
-                "value": "green",
-              },
-              "type": "font_color",
-            },
-          ],
           "text": "hello world",
           "type": "text",
         },
       ],
+      "marks": Array [
+        Object {
+          "attrs": Object {
+            "value": "green",
+          },
+          "type": "font_color",
+        },
+      ],
       "type": "paragraph",
     },
   ],
@@ -31,18 +31,18 @@ Object {
     Object {
       "content": Array [
         Object {
-          "marks": Array [
-            Object {
-              "attrs": Object {
-                "value": "#FF0000",
-              },
-              "type": "font_color",
-            },
-          ],
           "text": "test",
           "type": "text",
         },
       ],
+      "marks": Array [
+        Object {
+          "attrs": Object {
+            "value": "#FF0000",
+          },
+          "type": "font_color",
+        },
+      ],
       "type": "paragraph",
     },
   ],
@@ -114,18 +114,18 @@ Object {
           "type": "text",
         },
         Object {
-          "marks": Array [
-            Object {
-              "attrs": Object {
-                "value": "#FF0000",
-              },
-              "type": "font_color",
-            },
-          ],
           "text": " ipsum",
           "type": "text",
         },
       ],
+      "marks": Array [
+        Object {
+          "attrs": Object {
+            "value": "#FF0000",
+          },
+          "type": "font_color",
+        },
+      ],
       "type": "paragraph",
     },
   ],
@@ -133,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`] = `"<span style="--zw-font-color:green;" class="zw-style"><p class="zw-style">hello world</p></span>"`;