@zipify/wysiwyg 1.3.0-0 → 2.0.0-1

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

@@ -1,10 +1,10 @@
-import { Editor, Extension } from '@tiptap/vue-2';
-import { NodeTypes } from '../../../enums';
+import { Editor, Extension, Mark } from '@tiptap/vue-2';
+import { buildTestExtensions } from '../../../__tests__/utils';
+import { NodeTypes, TextSettings } from '../../../enums';
 import { ContentNormalizer, NodeFactory } from '../../../services';
-import { buildCoreExtensions } from '../index';
 
-const LineHeight = Extension.create({
-    name: 'line_height',
+const MockLineHeight = Extension.create({
+    name: TextSettings.LINE_HEIGHT,
 
     addGlobalAttributes: () => [
         {
@@ -19,10 +19,19 @@ const LineHeight = Extension.create({
     ]
 });
 
+const MockFontWeight = Mark.create({
+    name: TextSettings.FONT_WEIGHT,
+    group: 'settings',
+    renderHTML: () => ['span', {}, 0],
+    addAttributes: () => ({ value: { required: true } })
+});
+
 function createEditor({ content }) {
     return new Editor({
         content: ContentNormalizer.normalize(content),
-        extensions: buildCoreExtensions().concat(LineHeight) // Included to core extensions
+        extensions: buildTestExtensions({
+            include: [MockLineHeight, MockFontWeight]
+        })
     });
 }
 
@@ -79,7 +88,8 @@ describe('block attributes', () => {
             content: createContent({ line_height: null })
         });
 
-        editor.chain().selectAll().setBlockAttributes('line_height', { mobile: '1.3' }).run();
+        editor.commands.selectAll();
+        editor.commands.setBlockAttributes('line_height', { mobile: '1.3' });
 
         expect(editor.getJSON()).toMatchSnapshot();
     });
@@ -89,7 +99,8 @@ describe('block attributes', () => {
             content: createContent({ line_height: null })
         });
 
-        editor.chain().selectAll().setBlockAttributes('line_height', { mobile: '1.3' }, DEFAULTS).run();
+        editor.commands.selectAll();
+        editor.commands.setBlockAttributes('line_height', { mobile: '1.3' }, DEFAULTS);
 
         expect(editor.getJSON()).toMatchSnapshot();
     });
@@ -101,7 +112,8 @@ describe('block attributes', () => {
             })
         });
 
-        editor.chain().selectAll().setBlockAttributes('line_height', { mobile: '1.3' }).run();
+        editor.commands.selectAll();
+        editor.commands.setBlockAttributes('line_height', { mobile: '1.3' });
 
         expect(editor.getJSON()).toMatchSnapshot();
     });
@@ -113,7 +125,122 @@ describe('block attributes', () => {
             })
         });
 
-        editor.chain().selectAll().setBlockAttributes('line_height', { mobile: '1.3' }, DEFAULTS).run();
+        editor.commands.selectAll();
+        editor.commands.setBlockAttributes('line_height', { mobile: '1.3' }, DEFAULTS);
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+});
+
+describe('apply mark', () => {
+    test('should apply mark to word', () => {
+        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 merge marks', () => {
+        const editor = createEditor({
+            content: NodeFactory.doc([
+                NodeFactory.paragraph([
+                    NodeFactory.text('lorem', [
+                        NodeFactory.mark(TextSettings.FONT_WEIGHT, { value: '900' })
+                    ]),
+                    NodeFactory.text(' ipsum')
+                ])
+            ])
+        });
+
+        editor.commands.setTextSelection({ from: 1, to: 10 });
+        editor.commands.applyMark(TextSettings.FONT_WEIGHT, { value: '700' });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should apply mark to block', () => {
+        const editor = createEditor({
+            content: NodeFactory.doc([NodeFactory.paragraph('lorem ipsum')])
+        });
+
+        editor
+            .chain()
+            .selectAll()
+            .applyMark(TextSettings.FONT_WEIGHT, { value: '700' })
+            .run();
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should apply text mark to paragraph with mark', () => {
+        const editor = createEditor({
+            content: NodeFactory.doc([
+                NodeFactory.paragraph(null, [NodeFactory.mark(TextSettings.FONT_WEIGHT, { value: '700' })], 'lorem impum')
+            ])
+        });
+
+
+        editor.commands.setTextSelection({ from: 1, to: 6 });
+        editor.commands.applyMark(TextSettings.FONT_WEIGHT, { value: '400' });
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+});
+
+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__/SelectionProcessor.test.js

@@ -1,6 +1,6 @@
 import { Editor } from '@tiptap/vue-2';
+import { buildTestExtensions } from '../../../__tests__/utils';
 import { ContentNormalizer, NodeFactory } from '../../../services';
-import { buildCoreExtensions } from '../index';
 
 function createEditor() {
     const content = NodeFactory.doc([
@@ -10,7 +10,7 @@ function createEditor() {
 
     return new Editor({
         content: ContentNormalizer.normalize(content),
-        extensions: buildCoreExtensions() // included to core
+        extensions: buildTestExtensions()
     });
 }
 

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

@@ -1,7 +1,7 @@
 import { Editor, Mark, Extension } from '@tiptap/vue-2';
+import { buildTestExtensions } from '../../../__tests__/utils';
 import { ContentNormalizer, NodeFactory } from '../../../services';
 import { NodeTypes, TextSettings } from '../../../enums';
-import { buildCoreExtensions } from '../index';
 
 const MockFontSize = Mark.create({
     name: TextSettings.FONT_SIZE,
@@ -103,17 +103,19 @@ function createEditor({ content }) {
     return new Editor({
         content: ContentNormalizer.normalize(content),
         element: document.createElement('div'),
-        extensions: buildCoreExtensions().concat(
-            MockFontSize,
-            MockFontWeight,
-            MockAlignment,
-            MockBackgroundColor,
-            MockFontColor,
-            MockFontFamily,
-            MockFontStyle,
-            MockTextDecoration,
-            MockSuperscript
-        )
+        extensions: buildTestExtensions({
+            include: [
+                MockFontSize,
+                MockFontWeight,
+                MockAlignment,
+                MockBackgroundColor,
+                MockFontColor,
+                MockFontFamily,
+                MockFontStyle,
+                MockTextDecoration,
+                MockSuperscript
+            ]
+        })
     });
 }
 
@@ -125,10 +127,8 @@ describe('transform text', () => {
             ])
         });
 
-        editor.chain()
-            .setTextSelection({ from: 2, to: 6 })
-            .transformText(({ text }) => text.toUpperCase())
-            .run();
+        editor.commands.setTextSelection({ from: 2, to: 6 });
+        editor.commands.transformText(({ text }) => text.toUpperCase());
 
         expect(editor.getJSON()).toMatchSnapshot();
     });
@@ -144,10 +144,8 @@ describe('transform text', () => {
             ])
         });
 
-        editor.chain()
-            .setTextSelection({ from: 2, to: 6 })
-            .transformText(({ text }) => text.toUpperCase())
-            .run();
+        editor.commands.setTextSelection({ from: 2, to: 6 });
+        editor.commands.transformText(({ text }) => text.toUpperCase());
 
         expect(editor.getJSON()).toMatchSnapshot();
     });
@@ -166,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();
-    });
-});

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

@@ -1,5 +1,137 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`apply mark should apply mark to block 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 word 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 text mark to paragraph with mark 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "attrs": Object {
+        "line_height": null,
+      },
+      "content": Array [
+        Object {
+          "marks": Array [
+            Object {
+              "attrs": Object {
+                "value": "400",
+              },
+              "type": "font_weight",
+            },
+          ],
+          "text": "lorem",
+          "type": "text",
+        },
+        Object {
+          "text": " impum",
+          "type": "text",
+        },
+      ],
+      "marks": Array [
+        Object {
+          "attrs": Object {
+            "value": "700",
+          },
+          "type": "font_weight",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`apply mark should merge marks 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 ips",
+          "type": "text",
+        },
+        Object {
+          "text": "um",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
 exports[`block attributes should set attributes 1`] = `
 Object {
   "content": Array [
@@ -91,3 +223,63 @@ Object {
   "type": "doc",
 }
 `;
+
+exports[`remove marks should remove block and text marks 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "attrs": Object {
+        "line_height": null,
+      },
+      "content": Array [
+        Object {
+          "text": "lorem ipsum",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`remove marks should remove block marks 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "attrs": Object {
+        "line_height": null,
+      },
+      "content": Array [
+        Object {
+          "text": "lorem ipsum",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`remove marks should remove text marks 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "attrs": Object {
+        "line_height": null,
+      },
+      "content": Array [
+        Object {
+          "text": "lorem ipsum",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;

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

@@ -9,36 +9,16 @@ Object {
       },
       "content": Array [
         Object {
-          "marks": Array [
-            Object {
-              "attrs": Object {
-                "value": "700",
-              },
-              "type": "font_weight",
-            },
-          ],
           "text": "hELLO world",
           "type": "text",
         },
       ],
-      "type": "paragraph",
-    },
-  ],
-  "type": "doc",
-}
-`;
-
-exports[`transform text should transform selected text 1`] = `
-Object {
-  "content": Array [
-    Object {
-      "attrs": Object {
-        "alignment": null,
-      },
-      "content": Array [
+      "marks": Array [
         Object {
-          "text": "hELLO world",
-          "type": "text",
+          "attrs": Object {
+            "value": "700",
+          },
+          "type": "font_weight",
         },
       ],
       "type": "paragraph",
@@ -48,7 +28,7 @@ Object {
 }
 `;
 
-exports[`unset marks should reset all marks 1`] = `
+exports[`transform text should transform selected text 1`] = `
 Object {
   "content": Array [
     Object {
@@ -57,7 +37,7 @@ Object {
       },
       "content": Array [
         Object {
-          "text": "hello world",
+          "text": "hELLO world",
           "type": "text",
         },
       ],

package/lib/extensions/core/index.js

@@ -1,5 +1,3 @@
-import Document from '@tiptap/extension-document';
-import Paragraph from '@tiptap/extension-paragraph';
 import Text from '@tiptap/extension-text';
 import Placeholder from '@tiptap/extension-placeholder';
 import History from '@tiptap/extension-history';
@@ -7,16 +5,18 @@ import { NodeProcessor } from './NodeProcessor';
 import { TextProcessor } from './TextProcessor';
 import { SelectionProcessor } from './SelectionProcessor';
 import { CopyPasteProcessor } from './CopyPasteProcessor';
+import { Document } from './Document';
+import { Paragraph } from './Paragraph';
+import { Heading } from './Heading';
 
 export const buildCoreExtensions = () => [
     Document,
-    Paragraph.configure({
-        HTMLAttributes: { class: 'zw-style' }
-    }),
     Placeholder.configure({
         placeholder: 'Type your text here...',
         emptyNodeClass: 'zw-wysiwyg__placeholder'
     }),
+    Paragraph,
+    Heading,
     Text,
     History,
     NodeProcessor,

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

@@ -0,0 +1,60 @@
+import { Step, StepResult } from 'prosemirror-transform';
+import { Slice, Fragment } from 'prosemirror-model';
+import { RemoveNodeMarkStep } from './RemoveNodeMarkStep';
+
+export class AddNodeMarkStep extends Step {
+    static fromJSON(schema, json) {
+        if (typeof json.pos != 'number') {
+            throw new RangeError('Invalid input for AddNodeMarkStep.fromJSON');
+        }
+
+        return new AddNodeMarkStep(json.pos, schema.markFromJSON(json.mark));
+    }
+
+    constructor(pos, mark) {
+        super();
+        this.pos = pos;
+        this.mark = mark;
+    }
+
+    apply(doc) {
+        const node = doc.nodeAt(this.pos);
+
+        if (!node) return StepResult.fail('No node at mark step\'s position');
+
+        const updated = node.type.create(node.attrs, null, this.mark.addToSet(node.marks));
+        const slice = new Slice(Fragment.from(updated), 0, node.isLeaf ? 0 : 1);
+
+        return StepResult.fromReplace(doc, this.pos, this.pos + 1, slice);
+    }
+
+    invert(doc) {
+        const node = doc.nodeAt(this.pos);
+
+        if (node) {
+            const newSet = this.mark.addToSet(node.marks);
+
+            if (newSet.length === node.marks.length) {
+                for (const mark of node.marks) {
+                    if (!mark.isInSet(newSet)) {
+                        return new AddNodeMarkStep(this.pos, mark);
+                    }
+                }
+                return new AddNodeMarkStep(this.pos, this.mark);
+            }
+        }
+        return new RemoveNodeMarkStep(this.pos, this.mark);
+    }
+
+    map(mapping) {
+        const pos = mapping.mapResult(this.pos, 1);
+
+        return pos.deletedAfter ? null : new AddNodeMarkStep(pos.pos, this.mark);
+    }
+
+    toJSON() {
+        return { stepType: 'addNodeMark', pos: this.pos, mark: this.mark.toJSON() };
+    }
+}
+
+Step.jsonID('addNodeMark', AddNodeMarkStep);

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

@@ -0,0 +1,54 @@
+import { Step, StepResult, StepMap } from 'prosemirror-transform';
+import { Fragment, Slice } from 'prosemirror-model';
+
+export class AttrStep extends Step {
+    static fromJSON(schema, json) {
+        if (typeof json.pos != 'number' || typeof json.attr != 'string') {
+            throw new RangeError('Invalid input for AttrStep.fromJSON');
+        }
+        return new AttrStep(json.pos, json.attr, json.value);
+    }
+
+    constructor(pos, attr, value) {
+        super();
+        this.pos = pos;
+        this.attr = attr;
+        this.value = value;
+    }
+
+    apply(doc) {
+        const node = doc.nodeAt(this.pos);
+
+        if (!node) return StepResult.fail('No node at attribute step\'s position');
+
+        const attrs = Object.create(null);
+
+        for (let name in node.attrs) attrs[name] = node.attrs[name];
+        attrs[this.attr] = this.value;
+
+        const updated = node.type.create(attrs, null, node.marks);
+        const slice = new Slice(Fragment.from(updated), 0, node.isLeaf ? 0 : 1);
+
+        return StepResult.fromReplace(doc, this.pos, this.pos + 1, slice);
+    }
+
+    getMap() {
+        return StepMap.empty;
+    }
+
+    invert(doc) {
+        return new AttrStep(this.pos, this.attr, doc.nodeAt(this.pos).attrs[this.attr]);
+    }
+
+    map(mapping) {
+        let pos = mapping.mapResult(this.pos, 1);
+
+        return pos.deletedAfter ? null : new AttrStep(pos.pos, this.attr, this.value);
+    }
+
+    toJSON() {
+        return { stepType: 'attr', pos: this.pos, attr: this.attr, value: this.value };
+    }
+}
+
+Step.jsonID('attr', AttrStep);