@zipify/wysiwyg 1.3.0-0 → 2.0.0-0

package/lib/extensions/core/TextProcessor.js

@@ -1,5 +1,5 @@
 import { Extension } from '@tiptap/vue-2';
-import { createCommand } from '../../utils';
+import { createCommand, resolveTextPosition } from '../../utils';
 
 export const TextProcessor = Extension.create({
     name: 'text_processor',
@@ -13,30 +13,28 @@ export const TextProcessor = Extension.create({
             }),
 
             unsetMarks: createCommand(({ commands }, marks) => {
+                // TODO check unset mark
                 marks.forEach((mark) => commands.unsetMark(mark));
             }),
 
             transformText: createCommand(({ state }, transform) => {
-                const { selection } = state.tr;
+                const { $from, $to } = state.tr.selection;
 
-                if (selection.from === selection.to) return;
+                if ($from.pos === $to.pos) return;
 
-                state.doc.nodesBetween(selection.from, selection.to, (node, position) => {
+                state.doc.nodesBetween($from.pos, $to.pos, (node, position) => {
                     if (!node.isText) return;
 
-                    const startPosition = Math.max(position, selection.from);
-                    const endPosition = Math.min(position + node.nodeSize, selection.to);
-
-                    const substringFrom = Math.max(0, selection.from - position);
-                    const substringTo = Math.max(0, selection.to - position);
+                    const textPosition = resolveTextPosition($from, $to, node, position);
+                    const substringFrom = Math.max(0, $from.pos - position);
+                    const substringTo = Math.max(0, $to.pos - position);
 
                     const updatedText = transform({
-                        text: node.textContent.substring(substringFrom, substringTo),
-                        position: { start: startPosition, end: endPosition }
+                        text: node.textContent.substring(substringFrom, substringTo)
                     });
                     const updatedNode = state.schema.text(updatedText, node.marks);
 
-                    state.tr.replaceWith(startPosition, endPosition, updatedNode);
+                    state.tr.replaceWith(textPosition.from, textPosition.to, updatedNode);
                 });
             })
         };

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,67 @@ 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();
     });

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();
     });

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 [

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/RemoveNodeMarkStep.js

@@ -0,0 +1,50 @@
+import { Step, StepResult } from 'prosemirror-transform';
+import { Slice, Fragment } from 'prosemirror-model';
+import { AddNodeMarkStep } from './AddNodeMarkStep';
+
+export class RemoveNodeMarkStep extends Step {
+    static fromJSON(schema, json) {
+        if (typeof json.pos != 'number') {
+            throw new RangeError('Invalid input for RemoveNodeMarkStep.fromJSON');
+        }
+
+        return new RemoveNodeMarkStep(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.removeFromSet(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 || !this.mark.isInSet(node.marks)) return this;
+
+        return new AddNodeMarkStep(this.pos, this.mark);
+    }
+
+    map(mapping) {
+        const pos = mapping.mapResult(this.pos, 1);
+
+        return pos.deletedAfter ? null : new RemoveNodeMarkStep(pos.pos, this.mark);
+    }
+
+    toJSON() {
+        return { stepType: 'removeNodeMark', pos: this.pos, mark: this.mark.toJSON() };
+    }
+}
+
+Step.jsonID('removeNodeMark', RemoveNodeMarkStep);

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

@@ -0,0 +1,2 @@
+export { AddNodeMarkStep } from './AddNodeMarkStep';
+export { RemoveNodeMarkStep } from './RemoveNodeMarkStep';

package/lib/extensions/list/List.js

@@ -8,6 +8,7 @@ export const List = Node.create({
     name: NodeTypes.LIST,
     content: `${NodeTypes.LIST_ITEM}+`,
     group: 'block list',
+    marks: 'settings',
 
     addExtensions: () => [
         ListItem

package/lib/extensions/list/ListItem.js

@@ -3,6 +3,11 @@ import { NodeTypes } from '../../enums';
 
 export const ListItem = Base.extend({
     name: NodeTypes.LIST_ITEM,
+    marks: 'settings',
+
+    addOptions: () => ({
+        HTMLAttributes: { class: 'zw-style' }
+    }),
 
     addKeyboardShortcuts() {
         const { Enter } = this.parent();

package/lib/extensions/list/__tests__/List.test.js

@@ -1,32 +1,32 @@
 import { Editor } from '@tiptap/vue-2';
+import { buildTestExtensions } from '../../../__tests__/utils';
 import { ListTypes } from '../../../enums';
 import { StylePreset } from '../../StylePreset';
-import { List } from '../List';
 import { ContentNormalizer, NodeFactory } from '../../../services';
-import { buildCoreExtensions } from '../../core';
+import { List } from '../List';
 
 function createEditor({ content }) {
     return new Editor({
         content: ContentNormalizer.normalize(content),
         element: document.createElement('div'),
-        extensions: buildCoreExtensions().concat(
-            List.configure({
-                baseClass: 'zw-list--'
-            }),
-            StylePreset.configure({
-                presets: [
-                    {
-                        id: 'regular-1',
-                        common: {},
-                        mobile: {},
-                        tablet: {},
-                        desktop: {}
-                    }
-                ],
-                defaultId: 'regular-1',
-                baseClass: 'zw ts-'
-            })
-        )
+        extensions: buildTestExtensions({
+            include: [
+                List.configure({ baseClass: 'zw-list--' }),
+                StylePreset.configure({
+                    presets: [
+                        {
+                            id: 'regular-1',
+                            common: {},
+                            mobile: {},
+                            tablet: {},
+                            desktop: {}
+                        }
+                    ],
+                    defaultId: 'regular-1',
+                    baseClass: 'zw ts-'
+                })
+            ]
+        })
     });
 }
 
@@ -67,7 +67,8 @@ describe('apply list', () => {
             ])
         });
 
-        editor.chain().selectAll().applyList(ListTypes.LATIN).run();
+        editor.commands.selectAll();
+        editor.commands.applyList(ListTypes.LATIN);
 
         expect(editor.getJSON()).toMatchSnapshot();
     });
@@ -82,7 +83,8 @@ describe('apply list', () => {
             ])
         });
 
-        editor.chain().selectAll().removeList().run();
+        editor.commands.selectAll();
+        editor.commands.removeList();
 
         expect(editor.getJSON()).toMatchSnapshot();
     });
@@ -97,7 +99,8 @@ describe('apply list', () => {
             ])
         });
 
-        editor.chain().selectAll().applyList(ListTypes.LATIN).run();
+        editor.commands.selectAll();
+        editor.commands.applyList(ListTypes.LATIN);
 
         expect(editor.getJSON()).toMatchSnapshot();
     });
@@ -112,7 +115,8 @@ describe('apply list', () => {
             ])
         });
 
-        editor.chain().selectAll().applyList(ListTypes.ROMAN).run();
+        editor.commands.selectAll();
+        editor.commands.applyList(ListTypes.ROMAN);
 
         expect(editor.getJSON()).toMatchSnapshot();
     });
@@ -125,7 +129,8 @@ describe('apply list', () => {
             ])
         });
 
-        editor.chain().selectAll().applyList(ListTypes.LATIN).run();
+        editor.commands.selectAll();
+        editor.commands.applyList(ListTypes.LATIN);
 
         expect(editor.getJSON()).toMatchSnapshot();
     });