@zipify/wysiwyg 2.0.0-0 → 2.0.0-10

package/lib/extensions/core/__tests__/NodeProcessor.test.js

@@ -1,7 +1,10 @@
+import { ref } from 'vue';
 import { Editor, Extension, Mark } from '@tiptap/vue-2';
 import { buildTestExtensions } from '../../../__tests__/utils';
-import { NodeTypes, TextSettings } from '../../../enums';
+import { Devices, ListTypes, MarkGroups, NodeTypes, TextSettings } from '../../../enums';
 import { ContentNormalizer, NodeFactory } from '../../../services';
+import { createCommand } from '../../../utils';
+import { List } from '../../list';
 
 const MockLineHeight = Extension.create({
     name: TextSettings.LINE_HEIGHT,
@@ -19,18 +22,59 @@ const MockLineHeight = Extension.create({
     ]
 });
 
+const MockTextDecoration = Mark.create({
+    name: TextSettings.TEXT_DECORATION,
+    renderHTML: () => ['span', {}, 0],
+
+    addAttributes: () => ({
+        underline: { default: false },
+        strike_through: { default: false }
+    })
+});
+
 const MockFontWeight = Mark.create({
     name: TextSettings.FONT_WEIGHT,
-    group: 'settings',
+    group: MarkGroups.SETTINGS,
     renderHTML: () => ['span', {}, 0],
     addAttributes: () => ({ value: { required: true } })
 });
 
-function createEditor({ content }) {
+const MockFontSize = Mark.create({
+    name: TextSettings.FONT_SIZE,
+    group: MarkGroups.SETTINGS,
+    renderHTML: () => ['span', {}, 0],
+
+    addAttributes: () => ({
+        mobile: { default: null },
+        tablet: { default: null },
+        desktop: { default: null }
+    })
+});
+
+const DeviceManager = Extension.create({
+    name: 'device_manager',
+
+    addOptions: () => ({
+        device: { required: true }
+    }),
+
+    addCommands() {
+        return { getDevice: createCommand(() => ref(this.options.device)) };
+    }
+});
+
+function createEditor({ content, device }) {
     return new Editor({
         content: ContentNormalizer.normalize(content),
         extensions: buildTestExtensions({
-            include: [MockLineHeight, MockFontWeight]
+            include: [
+                MockLineHeight,
+                MockFontWeight,
+                MockFontSize,
+                MockTextDecoration,
+                List.configure({ baseClass: 'zw-list--' }),
+                DeviceManager.configure({ device: device ?? Devices.DESKTOP })
+            ]
         })
     });
 }
@@ -54,7 +98,7 @@ describe('block attributes', () => {
                 line_height: { mobile: '1.2' }
             })
         });
-        const attrs = editor.commands.getBlockAttributes('line_height');
+        const attrs = editor.commands.getBlockAttributes(TextSettings.LINE_HEIGHT);
 
         expect(attrs.value).toEqual({ mobile: '1.2' });
     });
@@ -65,7 +109,7 @@ describe('block attributes', () => {
                 line_height: { mobile: '1.2' }
             })
         });
-        const attrs = editor.commands.getBlockAttributes('line_height', DEFAULTS);
+        const attrs = editor.commands.getBlockAttributes(TextSettings.LINE_HEIGHT, DEFAULTS);
 
         expect(attrs.value).toEqual({
             mobile: '1.2',
@@ -78,7 +122,7 @@ describe('block attributes', () => {
         const editor = createEditor({
             content: createContent({ line_height: null })
         });
-        const attrs = editor.commands.getBlockAttributes('line_height');
+        const attrs = editor.commands.getBlockAttributes(TextSettings.LINE_HEIGHT);
 
         expect(attrs.value).toEqual(null);
     });
@@ -89,7 +133,7 @@ describe('block attributes', () => {
         });
 
         editor.commands.selectAll();
-        editor.commands.setBlockAttributes('line_height', { mobile: '1.3' });
+        editor.commands.setBlockAttributes(TextSettings.LINE_HEIGHT, { mobile: '1.3' });
 
         expect(editor.getJSON()).toMatchSnapshot();
     });
@@ -100,7 +144,7 @@ describe('block attributes', () => {
         });
 
         editor.commands.selectAll();
-        editor.commands.setBlockAttributes('line_height', { mobile: '1.3' }, DEFAULTS);
+        editor.commands.setBlockAttributes(TextSettings.LINE_HEIGHT, { mobile: '1.3' }, DEFAULTS);
 
         expect(editor.getJSON()).toMatchSnapshot();
     });
@@ -113,7 +157,7 @@ describe('block attributes', () => {
         });
 
         editor.commands.selectAll();
-        editor.commands.setBlockAttributes('line_height', { mobile: '1.3' });
+        editor.commands.setBlockAttributes(TextSettings.LINE_HEIGHT, { mobile: '1.3' });
 
         expect(editor.getJSON()).toMatchSnapshot();
     });
@@ -126,7 +170,7 @@ describe('block attributes', () => {
         });
 
         editor.commands.selectAll();
-        editor.commands.setBlockAttributes('line_height', { mobile: '1.3' }, DEFAULTS);
+        editor.commands.setBlockAttributes(TextSettings.LINE_HEIGHT, { mobile: '1.3' }, DEFAULTS);
 
         expect(editor.getJSON()).toMatchSnapshot();
     });
@@ -190,3 +234,312 @@ describe('apply mark', () => {
         expect(editor.getJSON()).toMatchSnapshot();
     });
 });
+
+describe('apply mark', () => {
+    test('should apply inline mark', () => {
+        const editor = createEditor({
+            content: NodeFactory.doc([
+                NodeFactory.paragraph('lorem ipsum')
+            ])
+        });
+
+        editor.commands.selectAll();
+        editor.commands.applyMark(TextSettings.TEXT_DECORATION, { underline: true });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should apply mark to part of text', () => {
+        const editor = createEditor({
+            content: NodeFactory.doc([
+                NodeFactory.paragraph('lorem ipsum')
+            ])
+        });
+
+        editor.commands.setTextSelection({ from: 1, to: 6 });
+        editor.commands.applyMark(TextSettings.FONT_WEIGHT, { value: '700' });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should apply mark to paragraph', () => {
+        const editor = createEditor({
+            content: NodeFactory.doc([
+                NodeFactory.paragraph('lorem ipsum')
+            ])
+        });
+
+        editor.commands.selectAll();
+        editor.commands.applyMark(TextSettings.FONT_WEIGHT, { value: '700' });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should remove text mark on applying to paragraph', () => {
+        const editor = createEditor({
+            content: NodeFactory.doc([
+                NodeFactory.paragraph([
+                    NodeFactory.text('lorem', [
+                        NodeFactory.mark(TextSettings.FONT_WEIGHT, { value: '400' })
+                    ]),
+                    NodeFactory.text(' ipsum')
+                ])
+            ])
+        });
+
+        editor.commands.selectAll();
+        editor.commands.applyMark(TextSettings.FONT_WEIGHT, { value: '700' });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should apply mark to list item', () => {
+        const editor = createEditor({
+            content: NodeFactory.doc([
+                NodeFactory.list(ListTypes.DISC, [
+                    'lorem ipsum 1',
+                    'lorem ipsum 2'
+                ])
+            ])
+        });
+
+        editor.commands.setTextSelection({ from: 1, to: 16 });
+        editor.commands.applyMark(TextSettings.FONT_WEIGHT, { value: '700' });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should remove paragraph mark on applying to list item', () => {
+        const editor = createEditor({
+            content: NodeFactory.doc([
+                NodeFactory.list(ListTypes.DISC, [
+                    NodeFactory.listItem([
+                        NodeFactory.paragraph(null, [
+                            NodeFactory.mark(TextSettings.FONT_WEIGHT, { value: '400' })
+                        ], 'lorem ipsum 1'),
+
+                        'lorem ipsum 2' // prevent move mark to list item on init
+                    ]),
+
+                    'lorem ipsum 3'
+                ])
+            ])
+        });
+
+        editor.commands.setTextSelection({ from: 1, to: 31 });
+        editor.commands.applyMark(TextSettings.FONT_WEIGHT, { value: '700' });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+});
+
+describe('get marks', () => {
+    test('should get marks', () => {
+        const editor = createEditor({
+            content: NodeFactory.doc([
+                NodeFactory.paragraph(null, [
+                    NodeFactory.mark(TextSettings.FONT_WEIGHT, { value: '400' })
+                ], [
+                    NodeFactory.text('lorem', [
+                        NodeFactory.mark(TextSettings.FONT_WEIGHT, { value: '700' })
+                    ]),
+                    NodeFactory.text(' ipsum')
+                ])
+            ])
+        });
+
+        editor.commands.selectAll();
+        const selectionRef = editor.commands.getMarks(TextSettings.FONT_WEIGHT);
+
+        expect(selectionRef.value).toEqual([
+            { value: '700' },
+            { value: '400' }
+        ]);
+    });
+
+    test('should get empty marks', () => {
+        const editor = createEditor({
+            content: NodeFactory.doc([
+                NodeFactory.paragraph('lorem ipsum')
+            ])
+        });
+
+        editor.commands.selectAll();
+        const selectionRef = editor.commands.getMarks(TextSettings.FONT_WEIGHT);
+
+        expect(selectionRef.value).toEqual([]);
+    });
+});
+
+describe('get mark', () => {
+    test('should get text mark', () => {
+        const editor = createEditor({
+            content: NodeFactory.doc([
+                NodeFactory.paragraph(null, [
+                    NodeFactory.mark(TextSettings.FONT_WEIGHT, { value: '400' })
+                ], [
+                    NodeFactory.text('lorem', [
+                        NodeFactory.mark(TextSettings.FONT_WEIGHT, { value: '700' })
+                    ]),
+                    NodeFactory.text(' ipsum')
+                ])
+            ])
+        });
+
+        editor.commands.selectAll();
+        const selectionRef = editor.commands.getMark(TextSettings.FONT_WEIGHT);
+
+        expect(selectionRef.value).toEqual({ value: '700' });
+    });
+
+    test('should get block mark', () => {
+        const editor = createEditor({
+            content: NodeFactory.doc([
+                NodeFactory.paragraph(null, [
+                    NodeFactory.mark(TextSettings.FONT_WEIGHT, { value: '400' })
+                ], 'lorem ipsum')
+            ])
+        });
+
+        editor.commands.selectAll();
+        const selectionRef = editor.commands.getMark(TextSettings.FONT_WEIGHT);
+
+        expect(selectionRef.value).toEqual({ value: '400' });
+    });
+});
+
+describe('get setting mark', () => {
+    test('should get common setting mark', () => {
+        const editor = createEditor({
+            content: NodeFactory.doc([
+                NodeFactory.paragraph(null, [
+                    NodeFactory.mark(TextSettings.FONT_WEIGHT, { value: '400' })
+                ], 'lorem ipsum')
+            ])
+        });
+
+        editor.commands.selectAll();
+        const selectionRef = editor.commands.getCommonSettingMark(TextSettings.FONT_WEIGHT);
+
+        expect(selectionRef.value).toEqual('400');
+    });
+
+    test('should get default of common setting mark', () => {
+        const editor = createEditor({
+            content: NodeFactory.doc([
+                NodeFactory.paragraph('lorem ipsum')
+            ])
+        });
+
+        editor.commands.selectAll();
+        const selectionRef = editor.commands.getCommonSettingMark(TextSettings.FONT_WEIGHT, ref('400'));
+
+        expect(selectionRef.value).toEqual('400');
+    });
+
+    test('should get device setting mark', () => {
+        const editor = createEditor({
+            content: NodeFactory.doc([
+                NodeFactory.paragraph(null, [
+                    NodeFactory.mark(TextSettings.FONT_SIZE, { mobile: '23' })
+                ], 'lorem ipsum')
+            ]),
+            device: Devices.MOBILE
+        });
+
+        editor.commands.selectAll();
+        const selectionRef = editor.commands.getDeviceSettingMark(TextSettings.FONT_SIZE);
+
+        expect(selectionRef.value).toEqual('23');
+    });
+
+    test('should get default of device setting mark', () => {
+        const editor = createEditor({
+            content: NodeFactory.doc([
+                NodeFactory.paragraph('lorem ipsum')
+            ]),
+            device: Devices.MOBILE
+        });
+
+        editor.commands.selectAll();
+        const selectionRef = editor.commands.getDeviceSettingMark(TextSettings.FONT_SIZE, ref('23'));
+
+        expect(selectionRef.value).toEqual('23');
+    });
+
+    test('should inherit device setting mark', () => {
+        const editor = createEditor({
+            content: NodeFactory.doc([
+                NodeFactory.paragraph(null, [
+                    NodeFactory.mark(TextSettings.FONT_SIZE, { mobile: '23' })
+                ], [
+                    NodeFactory.text('lorem', [
+                        NodeFactory.mark(TextSettings.FONT_SIZE, { tablet: '25' })
+                    ]),
+                    NodeFactory.text(' ipsum')
+                ])
+            ]),
+            device: Devices.MOBILE
+        });
+
+        editor.commands.selectAll();
+        const selectionRef = editor.commands.getDeviceSettingMark(TextSettings.FONT_SIZE);
+
+        expect(selectionRef.value).toEqual('23');
+    });
+});
+
+describe('remove marks', () => {
+    test('should remove text marks', () => {
+        const editor = createEditor({
+            content: NodeFactory.doc([
+                NodeFactory.paragraph([
+                    NodeFactory.text('lorem', [
+                        NodeFactory.mark(TextSettings.FONT_WEIGHT, { value: '700' })
+                    ]),
+                    NodeFactory.text(' ipsum')
+                ])
+            ])
+        });
+
+        editor.commands.selectAll();
+        editor.commands.removeMarks([TextSettings.FONT_WEIGHT]);
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should remove block marks', () => {
+        const editor = createEditor({
+            content: NodeFactory.doc([
+                NodeFactory.paragraph(null, [
+                    NodeFactory.mark(TextSettings.FONT_WEIGHT, { value: '700' })
+                ], 'lorem ipsum')
+            ])
+        });
+
+        editor.commands.selectAll();
+        editor.commands.removeMarks([TextSettings.FONT_WEIGHT]);
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should remove block and text marks', () => {
+        const editor = createEditor({
+            content: NodeFactory.doc([
+                NodeFactory.paragraph(null, [
+                    NodeFactory.mark(TextSettings.FONT_WEIGHT, { value: '700' })
+                ], [
+                    NodeFactory.text('lorem'),
+                    NodeFactory.text(' ipsum', [
+                        NodeFactory.mark(TextSettings.FONT_WEIGHT, { value: '400' })
+                    ])
+                ])
+            ])
+        });
+
+        editor.commands.selectAll();
+        editor.commands.removeMarks([TextSettings.FONT_WEIGHT]);
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+});

package/lib/extensions/core/__tests__/TextProcessor.test.js

@@ -138,7 +138,7 @@ describe('transform text', () => {
             content: NodeFactory.doc([
                 NodeFactory.paragraph([
                     NodeFactory.text('hello world', [
-                        NodeFactory.mark('font_weight', { value: '700' })
+                        NodeFactory.mark(TextSettings.FONT_WEIGHT, { value: '700' })
                     ])
                 ])
             ])
@@ -164,24 +164,3 @@ describe('selected text', () => {
         expect(editor.commands.getSelectedText()).toEqual('o worl');
     });
 });
-
-describe('unset marks', () => {
-    test('should reset all marks', () => {
-        const editor = createEditor({
-            content: NodeFactory.doc([
-                NodeFactory.paragraph([
-                    NodeFactory.text('hello world', [
-                        NodeFactory.mark('font_weight', { value: '700' })
-                    ])
-                ])
-            ])
-        });
-
-        editor.chain()
-            .selectAll()
-            .unsetMarks(TextSettings.marks)
-            .run();
-
-        expect(editor.getJSON()).toMatchSnapshot();
-    });
-});