@zipify/wysiwyg 1.0.0-dev.1

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

@@ -0,0 +1,206 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`apply decoration should apply decoration 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "marks": Array [
+            Object {
+              "attrs": Object {
+                "strike_through": false,
+                "underline": true,
+              },
+              "type": "text_decoration",
+            },
+          ],
+          "text": "hello world",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`apply decoration should remove decoration 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "marks": Array [
+            Object {
+              "attrs": Object {
+                "strike_through": false,
+                "underline": true,
+              },
+              "type": "text_decoration",
+            },
+          ],
+          "text": "hello world",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`apply decoration should remove mark if no decoration 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "text": "hello world",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`apply decoration should second decoration 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "marks": Array [
+            Object {
+              "attrs": Object {
+                "strike_through": true,
+                "underline": true,
+              },
+              "type": "text_decoration",
+            },
+          ],
+          "text": "hello world",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`apply decoration strike through should toggle to removed 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "marks": Array [
+            Object {
+              "attrs": Object {
+                "strike_through": false,
+                "underline": true,
+              },
+              "type": "text_decoration",
+            },
+          ],
+          "text": "hello world",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`apply decoration strike through should toggle to used 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "marks": Array [
+            Object {
+              "attrs": Object {
+                "strike_through": true,
+                "underline": false,
+              },
+              "type": "text_decoration",
+            },
+          ],
+          "text": "hello world",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`apply decoration underline should toggle to removed 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "marks": Array [
+            Object {
+              "attrs": Object {
+                "strike_through": true,
+                "underline": false,
+              },
+              "type": "text_decoration",
+            },
+          ],
+          "text": "hello world",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`apply decoration underline should toggle to used 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "marks": Array [
+            Object {
+              "attrs": Object {
+                "strike_through": false,
+                "underline": true,
+              },
+              "type": "text_decoration",
+            },
+          ],
+          "text": "hello world",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`rendering should render both 1`] = `"<p class=\\"zw-style\\"><span style=\\"--zw-text-decoration: underline line-through;\\" class=\\"zw-style\\">hello world</span></p>"`;
+
+exports[`rendering should render strike through only 1`] = `"<p class=\\"zw-style\\"><span style=\\"--zw-text-decoration: line-through;\\" class=\\"zw-style\\">hello world</span></p>"`;
+
+exports[`rendering should render underline only 1`] = `"<p class=\\"zw-style\\"><span style=\\"--zw-text-decoration: underline;\\" class=\\"zw-style\\">hello world</span></p>"`;

package/lib/extensions/core/NodeProcessor.js

@@ -0,0 +1,32 @@
+import { Extension } from '@tiptap/vue-2';
+import { computed } from '@vue/composition-api';
+import { createCommand } from '../../utils';
+import { NodeTypes } from '../../enums';
+
+export const NodeProcessor = Extension.create({
+    name: 'node_processor',
+
+    addCommands() {
+        return {
+            setBlockAttributes: createCommand(({ commands }, name, attrs, defaults = {}) => {
+                const current = commands.getBlockAttributes(name).value ?? {};
+
+                for (const type of NodeTypes.blocks) {
+                    commands.updateAttributes(type, {
+                        [name]: { ...defaults, ...current, ...attrs }
+                    });
+                }
+            }),
+
+            getBlockAttributes: createCommand(({ editor }, name, defaults) => computed(() => {
+                let attrs = Object.assign({}, defaults || {});
+
+                for (const type of NodeTypes.blocks) {
+                    Object.assign(attrs, editor.getAttributes(type)?.[name] || {});
+                }
+
+                return Object.keys(attrs).length ? attrs : null;
+            }))
+        };
+    }
+});

package/lib/extensions/core/SelectionProcessor.js

@@ -0,0 +1,37 @@
+import { Extension } from '@tiptap/vue-2';
+import { createCommand } from '../../utils';
+import { NodeTypes } from '../../enums';
+
+export const SelectionProcessor = Extension.create({
+    name: 'selection_processor',
+
+    addStorage: () => ({
+        selection: null
+    }),
+
+    addCommands() {
+        return {
+            storeSelection: createCommand(({ state }) => {
+                this.storage.selection = state.selection;
+            }),
+
+            restoreSelection: createCommand(({ commands }) => {
+                commands.setTextSelection(this.storage.selection);
+            }),
+
+            expandSelectionToBlock: createCommand(({ state, commands }) => {
+                let from = state.selection.from;
+                let to = state.selection.to;
+
+                state.doc.nodesBetween(from, to, (node, position, parent) => {
+                    if (parent.type.name !== NodeTypes.DOCUMENT) return;
+
+                    from = Math.min(from, position + 1);
+                    to = Math.max(to, position + node.nodeSize - 1);
+                });
+
+                commands.setTextSelection({ from, to });
+            })
+        };
+    }
+});

package/lib/extensions/core/TextProcessor.js

@@ -0,0 +1,57 @@
+import { Extension } from '@tiptap/vue-2';
+import { createCommand } from '../../utils';
+import {
+    emDash,
+    registeredTrademark,
+    trademark,
+    ellipsis,
+    openDoubleQuote,
+    openSingleQuote,
+    closeDoubleQuote,
+    closeSingleQuote,
+    copyright
+} from './inputRules';
+
+export const TextProcessor = Extension.create({
+    name: 'text_processor',
+
+    addCommands() {
+        return {
+            transformText: createCommand(({ state }, transform) => {
+                const { selection } = state.tr;
+
+                if (selection.from === selection.to) return;
+
+                state.doc.nodesBetween(selection.from, selection.to, (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 updatedText = transform({
+                        text: node.textContent.substring(substringFrom, substringTo),
+                        position: { start: startPosition, end: endPosition }
+                    });
+                    const updatedNode = state.schema.text(updatedText, node.marks);
+
+                    state.tr.replaceWith(startPosition, endPosition, updatedNode);
+                });
+            })
+        };
+    },
+
+    addInputRules: () => [
+        emDash,
+        registeredTrademark,
+        trademark,
+        ellipsis,
+        openDoubleQuote,
+        openSingleQuote,
+        closeDoubleQuote,
+        closeSingleQuote,
+        copyright
+    ]
+});

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

@@ -0,0 +1,120 @@
+import { Editor, Extension } from '@tiptap/vue-2';
+import { NodeFactory } from '../../../__tests__/utils';
+import { CORE_EXTENSIONS } from '../index';
+import { NodeTypes } from '../../../enums';
+
+const LineHeight = Extension.create({
+    name: 'line_height',
+
+    addGlobalAttributes: () => [
+        {
+            types: [NodeTypes.PARAGRAPH],
+            attributes: {
+                line_height: {
+                    isRequired: false,
+                    renderHTML: (attrs) => ({ style: `line-height: ${attrs.line_height}` })
+                }
+            }
+        }
+    ]
+});
+
+function createEditor({ content }) {
+    return new Editor({
+        content,
+        extensions: CORE_EXTENSIONS.concat(LineHeight) // Included to core extensions
+    });
+}
+
+describe('block attributes', () => {
+    const createContent = (attrs) => NodeFactory.doc([
+        NodeFactory.paragraph(attrs, [
+            NodeFactory.text('hello world')
+        ])
+    ]);
+
+    const DEFAULTS = {
+        mobile: null,
+        tablet: null,
+        desktop: null
+    };
+
+    test('should get attributes', () => {
+        const editor = createEditor({
+            content: createContent({
+                line_height: { mobile: '1.2' }
+            })
+        });
+        const attrs = editor.commands.getBlockAttributes('line_height');
+
+        expect(attrs.value).toEqual({ mobile: '1.2' });
+    });
+
+    test('should get attributes with defaults', () => {
+        const editor = createEditor({
+            content: createContent({
+                line_height: { mobile: '1.2' }
+            })
+        });
+        const attrs = editor.commands.getBlockAttributes('line_height', DEFAULTS);
+
+        expect(attrs.value).toEqual({
+            mobile: '1.2',
+            tablet: null,
+            desktop: null
+        });
+    });
+
+    test('should get null if no attributes set', () => {
+        const editor = createEditor({
+            content: createContent({ line_height: null })
+        });
+        const attrs = editor.commands.getBlockAttributes('line_height');
+
+        expect(attrs.value).toEqual(null);
+    });
+
+    test('should set attributes', () => {
+        const editor = createEditor({
+            content: createContent({ line_height: null })
+        });
+
+        editor.chain().selectAll().setBlockAttributes('line_height', { mobile: '1.3' }).run();
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should set attributes with defaults', () => {
+        const editor = createEditor({
+            content: createContent({ line_height: null })
+        });
+
+        editor.chain().selectAll().setBlockAttributes('line_height', { mobile: '1.3' }, DEFAULTS).run();
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should update attributes', () => {
+        const editor = createEditor({
+            content: createContent({
+                line_height: { mobile: '1.1' }
+            })
+        });
+
+        editor.chain().selectAll().setBlockAttributes('line_height', { mobile: '1.3' }).run();
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should update attributes with defaults', () => {
+        const editor = createEditor({
+            content: createContent({
+                line_height: { mobile: '1.1' }
+            })
+        });
+
+        editor.chain().selectAll().setBlockAttributes('line_height', { mobile: '1.3' }, DEFAULTS).run();
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+});

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

@@ -0,0 +1,78 @@
+import { Editor } from '@tiptap/vue-2';
+import { CORE_EXTENSIONS } from '../index';
+import { NodeFactory } from '../../../__tests__/utils';
+
+function createEditor() {
+    return new Editor({
+        content: NodeFactory.doc([
+            NodeFactory.paragraph('Lorem ipsum dolor sit amet'),
+            NodeFactory.paragraph('consectetur adipisicing elit')
+        ]),
+        extensions: CORE_EXTENSIONS // included to core
+    });
+}
+
+describe('store/restore selection', () => {
+    const getStoredSelection = (editor) => editor.storage.selection_processor.selection;
+
+    test('should store selection', () => {
+        const editor = createEditor();
+
+        editor
+            .chain()
+            .setTextSelection({ from: 10, to: 20 })
+            .storeSelection()
+            .selectAll()
+            .run();
+
+        expect(getStoredSelection(editor)).toEqual(
+            expect.objectContaining({ from: 10, to: 20 })
+        );
+    });
+
+    test('should restore selection', () => {
+        const editor = createEditor();
+
+        editor
+            .chain()
+            .setTextSelection({ from: 10, to: 20 })
+            .storeSelection()
+            .selectAll()
+            .restoreSelection()
+            .run();
+
+        expect(editor.state.selection).toEqual(
+            expect.objectContaining({ from: 10, to: 20 })
+        );
+    });
+});
+
+describe('expand selection to block', () => {
+    test('should exand selection to one block', () => {
+        const editor = createEditor();
+
+        editor
+            .chain()
+            .setTextSelection({ from: 10, to: 20 })
+            .expandSelectionToBlock()
+            .run();
+
+        expect(editor.state.selection).toEqual(
+            expect.objectContaining({ from: 1, to: 27 })
+        );
+    });
+
+    test('should exand selection to multiple blocks', () => {
+        const editor = createEditor();
+
+        editor
+            .chain()
+            .setTextSelection({ from: 10, to: 30 })
+            .expandSelectionToBlock()
+            .run();
+
+        expect(editor.state.selection).toEqual(
+            expect.objectContaining({ from: 1, to: 57 })
+        );
+    });
+});

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

@@ -0,0 +1,61 @@
+import { Editor, Mark } from '@tiptap/vue-2';
+import { NodeFactory } from '../../../__tests__/utils';
+import { CORE_EXTENSIONS } from '../index';
+
+const MockFontWeight = Mark.create({
+    name: 'font_weight',
+
+    addAttributes: () => ({
+        value: { required: true }
+    }),
+
+    renderHTML(context) {
+        const { value } = context.HTMLAttributes;
+
+        return ['span', { style: `font-weight: ${value}` }, 0];
+    }
+});
+
+function createEditor({ content }) {
+    return new Editor({
+        content,
+        element: document.createElement('div'),
+        extensions: CORE_EXTENSIONS.concat(MockFontWeight)
+    });
+}
+
+describe('transform text', () => {
+    test('should transform selected text', () => {
+        const editor = createEditor({
+            content: NodeFactory.doc([
+                NodeFactory.paragraph('hello world')
+            ])
+        });
+
+        editor.chain()
+            .setTextSelection({ from: 2, to: 6 })
+            .transformText(({ text }) => text.toUpperCase())
+            .run();
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should keep text marks', () => {
+        const editor = createEditor({
+            content: NodeFactory.doc([
+                NodeFactory.paragraph([
+                    NodeFactory.text('hello world', [
+                        NodeFactory.mark('font_weight', { value: '700' })
+                    ])
+                ])
+            ])
+        });
+
+        editor.chain()
+            .setTextSelection({ from: 2, to: 6 })
+            .transformText(({ text }) => text.toUpperCase())
+            .run();
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+});

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

@@ -0,0 +1,93 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`block attributes should set attributes 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "attrs": Object {
+        "line_height": Object {
+          "mobile": "1.3",
+        },
+      },
+      "content": Array [
+        Object {
+          "text": "hello world",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`block attributes should set attributes with defaults 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "attrs": Object {
+        "line_height": Object {
+          "desktop": null,
+          "mobile": "1.3",
+          "tablet": null,
+        },
+      },
+      "content": Array [
+        Object {
+          "text": "hello world",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`block attributes should update attributes 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "attrs": Object {
+        "line_height": Object {
+          "mobile": "1.3",
+        },
+      },
+      "content": Array [
+        Object {
+          "text": "hello world",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`block attributes should update attributes with defaults 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "attrs": Object {
+        "line_height": Object {
+          "desktop": null,
+          "mobile": "1.3",
+          "tablet": null,
+        },
+      },
+      "content": Array [
+        Object {
+          "text": "hello world",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;