@zipify/wysiwyg 1.0.0-dev.9 → 1.0.0-dev.92

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

@@ -225,6 +225,36 @@ Object {
 }
 `;
 
+exports[`parsing html should get both from rendered view 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "marks": Array [
+            Object {
+              "attrs": Object {
+                "strike_through": true,
+                "underline": true,
+              },
+              "type": "text_decoration",
+            },
+          ],
+          "text": "lorem",
+          "type": "text",
+        },
+        Object {
+          "text": " ipsum",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
 exports[`parsing html should get both from text 1`] = `
 Object {
   "content": Array [
@@ -255,6 +285,36 @@ Object {
 }
 `;
 
+exports[`parsing html should get both from text with property shorthand 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "marks": Array [
+            Object {
+              "attrs": Object {
+                "strike_through": true,
+                "underline": true,
+              },
+              "type": "text_decoration",
+            },
+          ],
+          "text": "lorem",
+          "type": "text",
+        },
+        Object {
+          "text": " ipsum",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
 exports[`parsing html should get strike through from paragraph 1`] = `
 Object {
   "content": Array [
@@ -281,6 +341,36 @@ Object {
 }
 `;
 
+exports[`parsing html should get strike through from rendered view 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "marks": Array [
+            Object {
+              "attrs": Object {
+                "strike_through": true,
+                "underline": false,
+              },
+              "type": "text_decoration",
+            },
+          ],
+          "text": "lorem",
+          "type": "text",
+        },
+        Object {
+          "text": " ipsum",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
 exports[`parsing html should get strike through from text 1`] = `
 Object {
   "content": Array [
@@ -337,6 +427,36 @@ Object {
 }
 `;
 
+exports[`parsing html should get underline from rendered view 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "marks": Array [
+            Object {
+              "attrs": Object {
+                "strike_through": false,
+                "underline": true,
+              },
+              "type": "text_decoration",
+            },
+          ],
+          "text": "lorem",
+          "type": "text",
+        },
+        Object {
+          "text": " ipsum",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
 exports[`parsing html should get underline from text 1`] = `
 Object {
   "content": Array [
@@ -406,8 +526,68 @@ Object {
 }
 `;
 
-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[`parsing html should parse strike through from tag 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "marks": Array [
+            Object {
+              "attrs": Object {
+                "strike_through": true,
+                "underline": false,
+              },
+              "type": "text_decoration",
+            },
+          ],
+          "text": "lorem",
+          "type": "text",
+        },
+        Object {
+          "text": " ipsum",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`parsing html should parse underline from tag 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "marks": Array [
+            Object {
+              "attrs": Object {
+                "strike_through": false,
+                "underline": true,
+              },
+              "type": "text_decoration",
+            },
+          ],
+          "text": "lorem",
+          "type": "text",
+        },
+        Object {
+          "text": " ipsum",
+          "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 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>"`;
+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/CopyPasteProcessor.js

@@ -0,0 +1,10 @@
+import { Extension } from '@tiptap/vue-2';
+import { PastePlugin } from './plugins';
+
+export const CopyPasteProcessor = Extension.create({
+    name: 'copy_paste_processor',
+
+    addProseMirrorPlugins() {
+        return [PastePlugin.create()];
+    }
+});

package/lib/extensions/core/NodeProcessor.js

@@ -1,5 +1,5 @@
 import { Extension } from '@tiptap/vue-2';
-import { computed } from '@vue/composition-api';
+import { computed, unref } from 'vue';
 import { createCommand } from '../../utils';
 import { NodeTypes } from '../../enums';
 
@@ -9,7 +9,7 @@ export const NodeProcessor = Extension.create({
     addCommands() {
         return {
             setBlockAttributes: createCommand(({ commands }, name, attrs, defaults = {}) => {
-                const current = commands.getBlockAttributes(name).value ?? {};
+                const current = unref(commands.getBlockAttributes(name)) ?? {};
 
                 for (const type of NodeTypes.blocks) {
                     commands.updateAttributes(type, {

package/lib/extensions/core/TextProcessor.js

@@ -1,22 +1,21 @@
 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 {
+            getSelectedText: createCommand(({ state }) => {
+                const { from, to } = state.selection;
+
+                return state.doc.textBetween(from, to, ' ');
+            }),
+
+            unsetMarks: createCommand(({ commands }, marks) => {
+                marks.forEach((mark) => commands.unsetMark(mark));
+            }),
+
             transformText: createCommand(({ state }, transform) => {
                 const { selection } = state.tr;
 
@@ -41,17 +40,5 @@ export const TextProcessor = Extension.create({
                 });
             })
         };
-    },
-
-    addInputRules: () => [
-        emDash,
-        registeredTrademark,
-        trademark,
-        ellipsis,
-        openDoubleQuote,
-        openSingleQuote,
-        closeDoubleQuote,
-        closeSingleQuote,
-        copyright
-    ]
+    }
 });

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

@@ -1,8 +1,7 @@
 import { Editor, Extension } from '@tiptap/vue-2';
-import { NodeFactory } from '../../../__tests__/utils';
-import { CORE_EXTENSIONS } from '../index';
 import { NodeTypes } from '../../../enums';
-import { ContentNormalizer } from '../../../services';
+import { ContentNormalizer, NodeFactory } from '../../../services';
+import { buildCoreExtensions } from '../index';
 
 const LineHeight = Extension.create({
     name: 'line_height',
@@ -21,11 +20,9 @@ const LineHeight = Extension.create({
 });
 
 function createEditor({ content }) {
-    const normalizer = new ContentNormalizer();
-
     return new Editor({
-        content: normalizer.normalize(content),
-        extensions: CORE_EXTENSIONS.concat(LineHeight) // Included to core extensions
+        content: ContentNormalizer.normalize(content),
+        extensions: buildCoreExtensions().concat(LineHeight) // Included to core extensions
     });
 }
 

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

@@ -1,19 +1,16 @@
 import { Editor } from '@tiptap/vue-2';
-import { CORE_EXTENSIONS } from '../index';
-import { NodeFactory } from '../../../__tests__/utils';
-import { ContentNormalizer } from '../../../services';
+import { ContentNormalizer, NodeFactory } from '../../../services';
+import { buildCoreExtensions } from '../index';
 
 function createEditor() {
-    const normalizer = new ContentNormalizer();
-
     const content = NodeFactory.doc([
         NodeFactory.paragraph('Lorem ipsum dolor sit amet'),
         NodeFactory.paragraph('consectetur adipisicing elit')
     ]);
 
     return new Editor({
-        content: normalizer.normalize(content),
-        extensions: CORE_EXTENSIONS // included to core
+        content: ContentNormalizer.normalize(content),
+        extensions: buildCoreExtensions() // included to core
     });
 }
 

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

@@ -1,29 +1,119 @@
-import { Editor, Mark } from '@tiptap/vue-2';
-import { NodeFactory } from '../../../__tests__/utils';
-import { CORE_EXTENSIONS } from '../index';
-import { ContentNormalizer } from '../../../services';
+import { Editor, Mark, Extension } from '@tiptap/vue-2';
+import { ContentNormalizer, NodeFactory } from '../../../services';
+import { NodeTypes, TextSettings } from '../../../enums';
+import { buildCoreExtensions } from '../index';
+
+const MockFontSize = Mark.create({
+    name: TextSettings.FONT_SIZE,
+
+    addAttributes: () => ({
+        value: { default: null }
+    }),
+
+    renderHTML: () => ['span', {}, 0]
+});
 
 const MockFontWeight = Mark.create({
-    name: 'font_weight',
+    name: TextSettings.FONT_WEIGHT,
 
     addAttributes: () => ({
-        value: { required: true }
+        value: { default: null }
     }),
 
-    renderHTML(context) {
-        const { value } = context.HTMLAttributes;
+    renderHTML: () => ['span', {}, 0]
+});
+
+const MockAlignment = Extension.create({
+    name: TextSettings.ALIGNMENT,
 
-        return ['span', { style: `font-weight: ${value}` }, 0];
-    }
+    addGlobalAttributes: () => [
+        {
+            types: [NodeTypes.PARAGRAPH, NodeTypes.HEADING],
+            attributes: {
+                [TextSettings.ALIGNMENT]: {
+                    default: null,
+                    renderHTML: () => ({})
+                }
+            }
+        }
+    ]
 });
 
-function createEditor({ content }) {
-    const normalizer = new ContentNormalizer();
+const MockBackgroundColor = Mark.create({
+    name: TextSettings.BACKGROUND_COLOR,
+
+    addAttributes: () => ({
+        value: { default: null }
+    }),
+
+    renderHTML: () => ['span', {}, 0]
+});
+
+const MockFontColor = Mark.create({
+    name: TextSettings.FONT_COLOR,
+
+    addAttributes: () => ({
+        value: { default: null }
+    }),
+
+    renderHTML: () => ['span', {}, 0]
+});
+
+const MockFontFamily = Mark.create({
+    name: TextSettings.FONT_FAMILY,
+
+    addAttributes: () => ({
+        value: { default: null }
+    }),
+
+    renderHTML: () => ['span', {}, 0]
+});
+
+const MockFontStyle = Mark.create({
+    name: TextSettings.FONT_STYLE,
+
+    addAttributes: () => ({
+        value: { default: null }
+    }),
+
+    renderHTML: () => ['span', {}, 0]
+});
+
+const MockTextDecoration = Mark.create({
+    name: TextSettings.TEXT_DECORATION,
+
+    addAttributes: () => ({
+        value: { default: null }
+    }),
 
+    renderHTML: () => ['span', {}, 0]
+});
+
+const MockSuperscript = Mark.create({
+    name: TextSettings.SUPERSCRIPT,
+
+    addAttributes: () => ({
+        value: { default: null }
+    }),
+
+    renderHTML: () => ['span', {}, 0]
+});
+
+function createEditor({ content }) {
     return new Editor({
-        content: normalizer.normalize(content),
+        content: ContentNormalizer.normalize(content),
         element: document.createElement('div'),
-        extensions: CORE_EXTENSIONS.concat(MockFontWeight)
+        extensions: buildCoreExtensions().concat(
+            MockFontSize,
+            MockFontWeight,
+            MockAlignment,
+            MockBackgroundColor,
+            MockFontColor,
+            MockFontFamily,
+            MockFontStyle,
+            MockTextDecoration,
+            MockSuperscript
+        )
     });
 }
 
@@ -62,3 +152,38 @@ describe('transform text', () => {
         expect(editor.getJSON()).toMatchSnapshot();
     });
 });
+
+describe('selected text', () => {
+    test('should return selected text', () => {
+        const editor = createEditor({
+            content: NodeFactory.doc([
+                NodeFactory.paragraph('hello world')
+            ])
+        });
+
+        editor.commands.setTextSelection({ from: 5, to: 11 });
+
+        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__/TextProcessor.test.js.snap

@@ -4,6 +4,9 @@ exports[`transform text should keep text marks 1`] = `
 Object {
   "content": Array [
     Object {
+      "attrs": Object {
+        "alignment": null,
+      },
       "content": Array [
         Object {
           "marks": Array [
@@ -29,6 +32,9 @@ exports[`transform text should transform selected text 1`] = `
 Object {
   "content": Array [
     Object {
+      "attrs": Object {
+        "alignment": null,
+      },
       "content": Array [
         Object {
           "text": "hELLO world",
@@ -41,3 +47,23 @@ Object {
   "type": "doc",
 }
 `;
+
+exports[`unset marks should reset all marks 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "attrs": Object {
+        "alignment": null,
+      },
+      "content": Array [
+        Object {
+          "text": "hello world",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;

package/lib/extensions/core/index.js

@@ -1,17 +1,26 @@
 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';
 import { NodeProcessor } from './NodeProcessor';
 import { TextProcessor } from './TextProcessor';
 import { SelectionProcessor } from './SelectionProcessor';
+import { CopyPasteProcessor } from './CopyPasteProcessor';
 
-export const CORE_EXTENSIONS = [
+export const buildCoreExtensions = () => [
     Document,
     Paragraph.configure({
         HTMLAttributes: { class: 'zw-style' }
     }),
+    Placeholder.configure({
+        placeholder: 'Type your text here...',
+        emptyNodeClass: 'zw-wysiwyg__placeholder'
+    }),
     Text,
+    History,
     NodeProcessor,
     TextProcessor,
-    SelectionProcessor
+    SelectionProcessor,
+    CopyPasteProcessor
 ];

package/lib/extensions/core/plugins/PastePlugin.js

@@ -0,0 +1,57 @@
+import { ContentNormalizer } from '../../../services';
+import { NodeTypes } from '../../../enums';
+import { ProseMirrorPlugin } from './ProseMirrorPlugin';
+
+export class PastePlugin extends ProseMirrorPlugin {
+    buildProps() {
+        return {
+            transformPastedHTML: ContentNormalizer.normalize,
+            handlePaste: this._handlePaste.bind(this)
+        };
+    }
+
+    _handlePaste(view, _, slice) {
+        const transaction = this._insertPastedContent(view, slice)
+            .scrollIntoView()
+            .setMeta('paste', true)
+            .setMeta('uiEvent', 'paste');
+
+        view.dispatch(transaction);
+
+        return true;
+    }
+
+    _insertPastedContent({ state, input }, slice) {
+        if (!this._isFullBlockSelected(state)) {
+            return state.tr.replaceSelection(slice);
+        }
+
+        return state.tr.replaceSelectionWith(slice.content, input.shiftKey);
+    }
+
+    _isFullBlockSelected(state) {
+        const blocksSelection = this._expandSelectionToBlocks(state);
+        const isFromMatch = this._isMatchPosition(blocksSelection.from, state.selection.from);
+        const isToMatch = this._isMatchPosition(blocksSelection.to, state.selection.to);
+
+        return isFromMatch && isToMatch;
+    }
+
+    _expandSelectionToBlocks({ selection, doc }) {
+        let from = selection.from;
+        let to = selection.to;
+
+        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);
+        });
+
+        return { from, to };
+    }
+
+    _isMatchPosition(position1, position2) {
+        return Math.abs(position1 - position2) < 5;
+    }
+}

package/lib/extensions/core/plugins/ProseMirrorPlugin.js

@@ -0,0 +1,20 @@
+import { Plugin, PluginKey } from 'prosemirror-state';
+
+export class ProseMirrorPlugin {
+    static create(options) {
+        const plugin = new this(options || {});
+
+        return new Plugin({
+            key: new PluginKey(this.name),
+            props: plugin.buildProps()
+        });
+    }
+
+    constructor(options) {
+        this.options = options;
+    }
+
+    buildProps() {
+        return {};
+    }
+}

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

@@ -0,0 +1 @@
+export { PastePlugin } from './PastePlugin';