@zipify/wysiwyg 2.0.0-1 → 2.0.0-2

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();
     });
@@ -191,6 +235,260 @@ describe('apply mark', () => {
     });
 });
 
+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({

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' })
                     ])
                 ])
             ])

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

@@ -1,5 +1,34 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`apply mark should apply inline mark 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "attrs": Object {
+        "line_height": null,
+      },
+      "content": Array [
+        Object {
+          "marks": Array [
+            Object {
+              "attrs": Object {
+                "strike_through": false,
+                "underline": true,
+              },
+              "type": "text_decoration",
+            },
+          ],
+          "text": "lorem ipsum",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
 exports[`apply mark should apply mark to block 1`] = `
 Object {
   "content": Array [
@@ -28,6 +57,126 @@ Object {
 }
 `;
 
+exports[`apply mark should apply mark to list item 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "attrs": Object {
+        "bullet": Object {
+          "type": "disc",
+        },
+      },
+      "content": Array [
+        Object {
+          "content": Array [
+            Object {
+              "attrs": Object {
+                "line_height": null,
+              },
+              "content": Array [
+                Object {
+                  "text": "lorem ipsum 1",
+                  "type": "text",
+                },
+              ],
+              "type": "paragraph",
+            },
+          ],
+          "marks": Array [
+            Object {
+              "attrs": Object {
+                "value": "700",
+              },
+              "type": "font_weight",
+            },
+          ],
+          "type": "listItem",
+        },
+        Object {
+          "content": Array [
+            Object {
+              "attrs": Object {
+                "line_height": null,
+              },
+              "content": Array [
+                Object {
+                  "text": "lorem ipsum 2",
+                  "type": "text",
+                },
+              ],
+              "type": "paragraph",
+            },
+          ],
+          "type": "listItem",
+        },
+      ],
+      "type": "list",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`apply mark should apply mark to paragraph 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "attrs": Object {
+        "line_height": null,
+      },
+      "content": Array [
+        Object {
+          "text": "lorem ipsum",
+          "type": "text",
+        },
+      ],
+      "marks": Array [
+        Object {
+          "attrs": Object {
+            "value": "700",
+          },
+          "type": "font_weight",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`apply mark should apply mark to part of text 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "attrs": Object {
+        "line_height": null,
+      },
+      "content": Array [
+        Object {
+          "marks": Array [
+            Object {
+              "attrs": Object {
+                "value": "700",
+              },
+              "type": "font_weight",
+            },
+          ],
+          "text": "lorem",
+          "type": "text",
+        },
+        Object {
+          "text": " ipsum",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
 exports[`apply mark should apply mark to word 1`] = `
 Object {
   "content": Array [
@@ -132,6 +281,106 @@ Object {
 }
 `;
 
+exports[`apply mark should remove paragraph mark on applying to list item 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "attrs": Object {
+        "bullet": Object {
+          "type": "disc",
+        },
+      },
+      "content": Array [
+        Object {
+          "content": Array [
+            Object {
+              "attrs": Object {
+                "line_height": null,
+              },
+              "content": Array [
+                Object {
+                  "text": "lorem ipsum 1",
+                  "type": "text",
+                },
+              ],
+              "type": "paragraph",
+            },
+            Object {
+              "attrs": Object {
+                "line_height": null,
+              },
+              "content": Array [
+                Object {
+                  "text": "lorem ipsum 2",
+                  "type": "text",
+                },
+              ],
+              "type": "paragraph",
+            },
+          ],
+          "marks": Array [
+            Object {
+              "attrs": Object {
+                "value": "700",
+              },
+              "type": "font_weight",
+            },
+          ],
+          "type": "listItem",
+        },
+        Object {
+          "content": Array [
+            Object {
+              "attrs": Object {
+                "line_height": null,
+              },
+              "content": Array [
+                Object {
+                  "text": "lorem ipsum 3",
+                  "type": "text",
+                },
+              ],
+              "type": "paragraph",
+            },
+          ],
+          "type": "listItem",
+        },
+      ],
+      "type": "list",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`apply mark should remove text mark on applying to paragraph 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "attrs": Object {
+        "line_height": null,
+      },
+      "content": Array [
+        Object {
+          "text": "lorem ipsum",
+          "type": "text",
+        },
+      ],
+      "marks": Array [
+        Object {
+          "attrs": Object {
+            "value": "700",
+          },
+          "type": "font_weight",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
 exports[`block attributes should set attributes 1`] = `
 Object {
   "content": Array [

package/lib/extensions/core/steps/AddNodeMarkStep.js

@@ -2,6 +2,12 @@ import { Step, StepResult } from 'prosemirror-transform';
 import { Slice, Fragment } from 'prosemirror-model';
 import { RemoveNodeMarkStep } from './RemoveNodeMarkStep';
 
+/**
+ * Copy&Paste from the latest version prosemirror-transform
+ * Can be replaced to built-in commands when tiptap update dependencies
+ *
+ * Original file: https://github.com/ProseMirror/prosemirror-transform/blob/e659a51eacb6eab66be992ea86b9bf70881d7c5d/src/mark_step.ts#L131
+ */
 export class AddNodeMarkStep extends Step {
     static fromJSON(schema, json) {
         if (typeof json.pos != 'number') {

package/lib/extensions/core/steps/AttrStep.js

@@ -1,6 +1,12 @@
 import { Step, StepResult, StepMap } from 'prosemirror-transform';
 import { Fragment, Slice } from 'prosemirror-model';
 
+/**
+ * Copy&Paste from the latest version prosemirror-transform
+ * Can be replaced to built-in commands when tiptap update dependencies
+ *
+ * Original file: https://github.com/ProseMirror/prosemirror-transform/blob/9ee7c0806f38180bae0e60d7d84af4fd9ee44f26/src/attr_step.ts#L6
+ */
 export class AttrStep extends Step {
     static fromJSON(schema, json) {
         if (typeof json.pos != 'number' || typeof json.attr != 'string') {