@zipify/wysiwyg 2.0.0-1 → 2.0.0-11

package/lib/extensions/TextDecoration.js

@@ -41,6 +41,13 @@ export const TextDecoration = Mark.create({
                 });
             }),
 
+            isUnderlineCustomized: createCommand(({ commands }) => {
+                const currentValue = commands.isUnderline();
+                const defaultValue = commands.getDefaultTextDecoration();
+
+                return computed(() => unref(currentValue) !== unref(defaultValue).underline);
+            }),
+
             getDefaultTextDecoration: createCommand(({ commands }) => {
                 const preset = commands.getPreset();
 

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

@@ -4,11 +4,11 @@ import { buildTestExtensions } from '../../__tests__/utils';
 import { createCommand } from '../../utils';
 import { Alignment } from '../Alignment';
 import { DeviceManager } from '../DeviceManager';
-import { Alignments } from '../../enums';
+import { Alignments, TextSettings } from '../../enums';
 import { ContentNormalizer, NodeFactory } from '../../services';
 
 const MockStylePreset = Extension.create({
-    name: 'style_preset',
+    name: TextSettings.STYLE_PRESET,
 
     addCommands() {
         return {

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

@@ -4,9 +4,10 @@ import { buildTestExtensions } from '../../__tests__/utils';
 import { createCommand } from '../../utils';
 import { BackgroundColor } from '../BackgroundColor';
 import { ContentNormalizer, NodeFactory } from '../../services';
+import { TextSettings } from '../../enums';
 
 const MockStylePreset = Extension.create({
-    name: 'style_preset',
+    name: TextSettings.STYLE_PRESET,
 
     addCommands() {
         return {
@@ -34,7 +35,7 @@ describe('get background color', () => {
     test('should get from selection', () => {
         const editor = createEditor({
             content: createContent(NodeFactory.text('hello world', [
-                NodeFactory.mark('background_color', { value: 'green' })
+                NodeFactory.mark(TextSettings.BACKGROUND_COLOR, { value: 'green' })
             ]))
         });
 
@@ -69,7 +70,7 @@ describe('rendering', () => {
     test('should render html', () => {
         const editor = createEditor({
             content: createContent(NodeFactory.text('hello world', [
-                NodeFactory.mark('background_color', { value: 'green' })
+                NodeFactory.mark(TextSettings.BACKGROUND_COLOR, { value: 'green' })
             ]))
         });
 

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

@@ -4,9 +4,10 @@ import { buildTestExtensions } from '../../__tests__/utils';
 import { createCommand } from '../../utils';
 import { FontColor } from '../FontColor';
 import { ContentNormalizer, NodeFactory } from '../../services';
+import { TextSettings } from '../../enums';
 
 const MockStylePreset = Extension.create({
-    name: 'style_preset',
+    name: TextSettings.STYLE_PRESET,
 
     addCommands() {
         return {
@@ -34,7 +35,7 @@ describe('get font color', () => {
     test('should get from selection', () => {
         const editor = createEditor({
             content: createContent(NodeFactory.text('hello world', [
-                NodeFactory.mark('font_color', { value: 'green' })
+                NodeFactory.mark(TextSettings.FONT_COLOR, { value: 'green' })
             ]))
         });
 
@@ -79,7 +80,7 @@ describe('rendering', () => {
     test('should render html', () => {
         const editor = createEditor({
             content: createContent(NodeFactory.text('hello world', [
-                NodeFactory.mark('font_color', { value: 'green' })
+                NodeFactory.mark(TextSettings.FONT_COLOR, { value: 'green' })
             ]))
         });
 

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

@@ -119,7 +119,7 @@ describe('apply font family', () => {
     test('should not change current font weight if available', () => {
         const editor = createEditor({
             content: createContent(NodeFactory.text('hello world', [
-                NodeFactory.mark('font_weight', { value: '700' })
+                NodeFactory.mark(TextSettings.FONT_WEIGHT, { value: '700' })
             ]))
         });
 
@@ -132,7 +132,7 @@ describe('apply font family', () => {
     test('should apply closest font weight if current is unavailable', () => {
         const editor = createEditor({
             content: createContent(NodeFactory.text('hello world', [
-                NodeFactory.mark('font_weight', { value: '700' })
+                NodeFactory.mark(TextSettings.FONT_WEIGHT, { value: '700' })
             ]))
         });
 
@@ -145,8 +145,8 @@ describe('apply font family', () => {
     test('should not change italic if available', () => {
         const editor = createEditor({
             content: createContent(NodeFactory.text('hello world', [
-                NodeFactory.mark('font_weight', { value: '700' }),
-                NodeFactory.mark('font_style', { italic: true })
+                NodeFactory.mark(TextSettings.FONT_WEIGHT, { value: '700' }),
+                NodeFactory.mark(TextSettings.FONT_STYLE, { italic: true })
             ]))
         });
 
@@ -159,8 +159,8 @@ describe('apply font family', () => {
     test('should remove italic if unavailable', () => {
         const editor = createEditor({
             content: createContent(NodeFactory.text('hello world', [
-                NodeFactory.mark('font_weight', { value: '700' }),
-                NodeFactory.mark('font_style', { italic: true })
+                NodeFactory.mark(TextSettings.FONT_WEIGHT, { value: '700' }),
+                NodeFactory.mark(TextSettings.FONT_STYLE, { italic: true })
             ]))
         });
 

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

@@ -5,9 +5,10 @@ import { createCommand } from '../../utils';
 import { FontSize } from '../FontSize';
 import { DeviceManager } from '../DeviceManager';
 import { ContentNormalizer, NodeFactory } from '../../services';
+import { TextSettings } from '../../enums';
 
 const MockStylePreset = Extension.create({
-    name: 'style_preset',
+    name: TextSettings.STYLE_PRESET,
 
     addCommands() {
         return {
@@ -47,7 +48,7 @@ describe('get font size', () => {
     test('should get from selection', () => {
         const editor = createEditor({
             content: createContent(NodeFactory.text('hello world'[
-                NodeFactory.mark('font_size', {
+                NodeFactory.mark(TextSettings.FONT_SIZE, {
                     mobile: null,
                     tablet: null,
                     desktop: '14'
@@ -94,7 +95,7 @@ describe('apply font size', () => {
     test('should increase font size', () => {
         const editor = createEditor({
             content: createContent(NodeFactory.text('hello world', [
-                NodeFactory.mark('font_size', {
+                NodeFactory.mark(TextSettings.FONT_SIZE, {
                     mobile: null,
                     tablet: null,
                     desktop: '14'
@@ -111,7 +112,7 @@ describe('apply font size', () => {
     test('should not increase font size if reached limit', () => {
         const editor = createEditor({
             content: createContent(NodeFactory.text('hello world', [
-                NodeFactory.mark('font_size', {
+                NodeFactory.mark(TextSettings.FONT_SIZE, {
                     mobile: null,
                     tablet: null,
                     desktop: '20'
@@ -128,7 +129,7 @@ describe('apply font size', () => {
     test('should decrease font size', () => {
         const editor = createEditor({
             content: createContent(NodeFactory.text('hello world', [
-                NodeFactory.mark('font_size', {
+                NodeFactory.mark(TextSettings.FONT_SIZE, {
                     mobile: null,
                     tablet: null,
                     desktop: '14'
@@ -145,7 +146,7 @@ describe('apply font size', () => {
     test('should not decrease font size if reached limit', () => {
         const editor = createEditor({
             content: createContent(NodeFactory.text('hello world', [
-                NodeFactory.mark('font_size', {
+                NodeFactory.mark(TextSettings.FONT_SIZE, {
                     mobile: null,
                     tablet: null,
                     desktop: '5'
@@ -164,7 +165,7 @@ describe('rendering', () => {
     test('should render only desktop', () => {
         const editor = createEditor({
             content: createContent(NodeFactory.text('hello world', [
-                NodeFactory.mark('font_size', {
+                NodeFactory.mark(TextSettings.FONT_SIZE, {
                     mobile: null,
                     tablet: null,
                     desktop: '14'
@@ -178,7 +179,7 @@ describe('rendering', () => {
     test('should render all devices', () => {
         const editor = createEditor({
             content: createContent(NodeFactory.text('hello world', [
-                NodeFactory.mark('font_size', {
+                NodeFactory.mark(TextSettings.FONT_SIZE, {
                     mobile: '12',
                     tablet: '14',
                     desktop: '16'

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

@@ -7,9 +7,10 @@ import { FontFamily } from '../FontFamily';
 import { Font } from '../../models';
 import { FontWeight } from '../FontWeight';
 import { ContentNormalizer, NodeFactory } from '../../services';
+import { TextSettings } from '../../enums';
 
 const MockStylePreset = Extension.create({
-    name: 'style_preset',
+    name: TextSettings.STYLE_PRESET,
 
     addCommands() {
         return {
@@ -51,7 +52,7 @@ describe('get font style', () => {
     test('should get italic from selection', () => {
         const editor = createEditor({
             content: createContent(NodeFactory.text('hello world', [
-                NodeFactory.mark('font_style', { italic: true })
+                NodeFactory.mark(TextSettings.FONT_STYLE, { italic: true })
             ]))
         });
 
@@ -94,7 +95,7 @@ describe('apply font style', () => {
     test('should remove italic', () => {
         const editor = createEditor({
             content: createContent(NodeFactory.text('hello world', [
-                NodeFactory.mark('font_style', { italic: true })
+                NodeFactory.mark(TextSettings.FONT_STYLE, { italic: true })
             ]))
         });
 
@@ -107,7 +108,7 @@ describe('apply font style', () => {
     test('should toggle italic to removed', () => {
         const editor = createEditor({
             content: createContent(NodeFactory.text('hello world', [
-                NodeFactory.mark('font_style', { italic: true })
+                NodeFactory.mark(TextSettings.FONT_STYLE, { italic: true })
             ]))
         });
 
@@ -133,7 +134,7 @@ describe('rendering', () => {
     test('should render html', () => {
         const editor = createEditor({
             content: createContent(NodeFactory.text('hello world', [
-                NodeFactory.mark('font_style', { italic: true })
+                NodeFactory.mark(TextSettings.FONT_STYLE, { italic: true })
             ]))
         });
 

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

@@ -5,9 +5,10 @@ import { createCommand } from '../../utils';
 import { DeviceManager } from '../DeviceManager';
 import { LineHeight } from '../LineHeight';
 import { ContentNormalizer, NodeFactory } from '../../services';
+import { TextSettings } from '../../enums';
 
 const MockStylePreset = Extension.create({
-    name: 'style_preset',
+    name: TextSettings.STYLE_PRESET,
 
     addCommands() {
         return {

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

@@ -405,6 +405,21 @@ 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(TextSettings.FONT_SIZE);
+        const isAlignmentCustomized = editor.commands.isSettingCustomized(TextSettings.ALIGNMENT);
+
+        expect(isFontSizeCustomized.value).toBe(false);
+        expect(isAlignmentCustomized.value).toBe(false);
+    });
+
     test('should find marks', async () => {
         const editor = await createEditor({
             content: NodeFactory.doc([
@@ -425,6 +440,25 @@ 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(TextSettings.FONT_SIZE);
+
+        expect(isFontSizeCustomized.value).toBe(true);
+    });
+
     test('should find attributes', async () => {
         const editor = await createEditor({
             content: NodeFactory.doc([
@@ -442,6 +476,23 @@ 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(TextSettings.ALIGNMENT);
+
+        expect(isAlignmentCustomized.value).toBe(true);
+    });
 });
 
 describe('remove preset customization', () => {

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

@@ -0,0 +1,102 @@
+import { Editor } from '@tiptap/vue-2';
+import { buildTestExtensions } from '../../__tests__/utils';
+import { ContentNormalizer, NodeFactory } from '../../services';
+import { Superscript } from '../Superscript';
+import { TextSettings } from '../../enums';
+
+function createEditor({ content }) {
+    return new Editor({
+        content: ContentNormalizer.normalize(content),
+        extensions: buildTestExtensions({ include: [Superscript] })
+    });
+}
+
+const createContent = (text) => NodeFactory.doc([
+    NodeFactory.paragraph([text])
+]);
+
+describe('get value', () => {
+    test('should get from selection', () => {
+        const editor = createEditor({
+            content: createContent(NodeFactory.text('hello world', [
+                NodeFactory.mark(TextSettings.SUPERSCRIPT)
+            ]))
+        });
+
+        editor.commands.selectAll();
+
+        expect(editor.commands.isSuperscript().value).toBe(true);
+    });
+});
+
+describe('apply value', () => {
+    test('should apply superscript', () => {
+        const editor = createEditor({
+            content: createContent(NodeFactory.text('hello world'))
+        });
+
+        editor.commands.selectAll();
+        editor.commands.applySuperscript();
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should remove superscript', () => {
+        const editor = createEditor({
+            content: createContent(NodeFactory.text('hello world', [
+                NodeFactory.mark(TextSettings.SUPERSCRIPT)
+            ]))
+        });
+
+        editor.commands.selectAll();
+        editor.commands.removeSuperscript();
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should toggle superscript to enabled', () => {
+        const editor = createEditor({
+            content: createContent(NodeFactory.text('hello world'))
+        });
+
+        editor.commands.selectAll();
+        editor.commands.toggleSuperscript();
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should toggle superscript to removed', () => {
+        const editor = createEditor({
+            content: createContent(NodeFactory.text('hello world', [
+                NodeFactory.mark(TextSettings.SUPERSCRIPT)
+            ]))
+        });
+
+        editor.commands.selectAll();
+        editor.commands.toggleSuperscript();
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+});
+
+describe('rendering', () => {
+    test('should render html', () => {
+        const editor = createEditor({
+            content: createContent(NodeFactory.text('hello world', [
+                NodeFactory.mark(TextSettings.SUPERSCRIPT)
+            ]))
+        });
+
+        expect(editor.getHTML()).toMatchSnapshot();
+    });
+});
+
+describe('parsing html', () => {
+    test('should get value from text', () => {
+        const editor = createEditor({
+            content: '<p><sup>lorem</sup> ipsum</p>'
+        });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+});

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

@@ -74,6 +74,17 @@ 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'))
@@ -83,6 +94,15 @@ 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', () => {

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`] = `"<span style="--zw-background-color:green;" class="zw-style"><p class="zw-style">hello world</p></span>"`;
+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__/Superscript.test.js.snap

@@ -0,0 +1,107 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`apply value should apply superscript 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "marks": Array [
+            Object {
+              "type": "superscript",
+            },
+          ],
+          "text": "hello world",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`apply value should remove superscript 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "text": "hello world",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`apply value should toggle superscript to enabled 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "text": "hello world",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`apply value should toggle superscript to removed 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "marks": Array [
+            Object {
+              "type": "superscript",
+            },
+          ],
+          "text": "hello world",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`parsing html should get value from text 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "marks": Array [
+            Object {
+              "type": "superscript",
+            },
+          ],
+          "text": "lorem",
+          "type": "text",
+        },
+        Object {
+          "text": " ipsum",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`rendering should render html 1`] = `"<p class="zw-style"><sup class="zw-superscript">hello world</sup></p>"`;

package/lib/extensions/core/Document.js

@@ -1,5 +1,6 @@
 import { Document as Base } from '@tiptap/extension-document';
+import { MarkGroups } from '../../enums';
 
 export const Document = Base.extend({
-    marks: 'settings'
+    marks: MarkGroups.SETTINGS
 });