@zipify/wysiwyg 2.0.0-1 → 2.0.0-11

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') {

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

@@ -2,6 +2,12 @@ import { Step, StepResult } from 'prosemirror-transform';
 import { Slice, Fragment } from 'prosemirror-model';
 import { AddNodeMarkStep } from './AddNodeMarkStep';
 
+/**
+ * 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#L183
+ */
 export class RemoveNodeMarkStep extends Step {
     static fromJSON(schema, json) {
         if (typeof json.pos != 'number') {

package/lib/extensions/list/List.js

@@ -1,14 +1,15 @@
 import { Node, wrappingInputRule } from '@tiptap/vue-2';
 import { computed, unref } from 'vue';
-import { createCommand } from '../../utils';
-import { ListTypes, NodeTypes } from '../../enums';
+import { copyMark, createCommand } from '../../utils';
+import { ListTypes, MarkGroups, NodeTypes, TextSettings } from '../../enums';
+import { AddNodeMarkStep, RemoveNodeMarkStep } from '../core/steps';
 import { ListItem } from './ListItem';
 
 export const List = Node.create({
     name: NodeTypes.LIST,
     content: `${NodeTypes.LIST_ITEM}+`,
     group: 'block list',
-    marks: 'settings',
+    marks: MarkGroups.SETTINGS,
 
     addExtensions: () => [
         ListItem
@@ -79,21 +80,81 @@ export const List = Node.create({
 
                 // Remove List
                 if (currentType === type) {
-                    commands.applyDefaultPreset();
+                    commands.removeList();
                     return;
                 }
 
-                return chain().applyDefaultPreset()._addList(type).run();
-            }),
-
-            _addList: createCommand(({ chain }, type) => {
                 return chain()
+                    .applyDefaultPreset()
                     .toggleList(NodeTypes.LIST, NodeTypes.LIST_ITEM)
                     .setBlockAttributes('bullet', { type })
+                    .command(({ commands, tr }) => commands._bubbleListItemMarks(tr))
                     .run();
             }),
 
-            removeList: createCommand(({ commands }) => {
+            _bubbleListItemMarks: createCommand((_, tr) => {
+                const { doc, selection } = tr;
+                const from = selection.$from.start();
+                const to = selection.$to.end();
+
+                function canBubbleMark(node, childMark) {
+                    if (TextSettings.inlineMarks.includes(childMark.type)) return false;
+                    if (childMark.type.isInSet(node.marks)) return false;
+
+                    for (const child of node.content.content) {
+                        if (!child.childCount) continue;
+                        if (!child.marks) return false;
+                        if (!childMark.isInSet(child.marks)) return false;
+                    }
+
+                    return true;
+                }
+
+                doc.nodesBetween(from, to, (node, position) => {
+                    if (node.type.name === NodeTypes.LIST) return;
+                    if (node.type.name !== NodeTypes.LIST_ITEM) return false;
+
+                    const bubbled = [];
+
+                    node.forEach((child) => {
+                        for (const childMark of child.marks) {
+                            if (childMark.isInSet(bubbled)) {
+                                tr.step(new RemoveNodeMarkStep(position + 1, childMark));
+                                continue;
+                            }
+
+                            if (canBubbleMark(node, childMark)) {
+                                tr.step(new RemoveNodeMarkStep(position + 1, childMark));
+                                tr.step(new AddNodeMarkStep(position, copyMark(childMark)));
+                                bubbled.push(childMark);
+                            }
+                        }
+                    });
+
+                    return false;
+                });
+            }),
+
+            removeList: createCommand(({ commands, state }) => {
+                const { tr, doc, selection } = state;
+                const from = selection.$from.start();
+                const to = selection.$to.end();
+
+                doc.nodesBetween(from, to, (node, position, parent) => {
+                    if ([NodeTypes.LIST, NodeTypes.LIST_ITEM].includes(node.type.name)) return;
+                    if (parent.type.name !== NodeTypes.LIST_ITEM) return false;
+
+                    const addingMarks = parent.marks.filter(function (mark) {
+                        return !mark.type.isInSet(node.marks);
+                    });
+
+                    for (const mark of addingMarks) {
+                        tr.step(new AddNodeMarkStep(position, copyMark(mark)));
+                    }
+
+                    return false;
+                });
+
                 commands.liftListItem(NodeTypes.LIST_ITEM);
             })
         };

package/lib/extensions/list/ListItem.js

@@ -1,17 +1,39 @@
 import Base from '@tiptap/extension-list-item';
-import { NodeTypes } from '../../enums';
+import { MarkGroups, NodeTypes } from '../../enums';
+import { copyMark, createCommand, createKeyboardShortcut } from '../../utils';
+import { AddNodeMarkStep } from '../core/steps';
 
 export const ListItem = Base.extend({
     name: NodeTypes.LIST_ITEM,
-    marks: 'settings',
+    marks: MarkGroups.SETTINGS,
+
+    addCommands() {
+        const getSelectedListItem = ({ selection, doc }) => {
+            const position = selection.$cursor.before(selection.$cursor.depth - 1);
+
+            return { position, node: doc.nodeAt(position) };
+        };
+
+        return {
+            listItemNewline: createCommand(({ commands, tr }) => {
+                const { node: initialNode } = getSelectedListItem(tr);
+
+                commands.splitListItem(this.name);
+
+                const { position } = getSelectedListItem(tr);
+
+                for (const mark of initialNode.marks) {
+                    tr.step(new AddNodeMarkStep(position, copyMark(mark)));
+                }
+            })
+        };
+    },
 
     addOptions: () => ({
         HTMLAttributes: { class: 'zw-style' }
     }),
 
     addKeyboardShortcuts() {
-        const { Enter } = this.parent();
-
-        return { Enter };
+        return { Enter: createKeyboardShortcut('listItemNewline') };
     }
 });

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

@@ -1,10 +1,16 @@
-import { Editor } from '@tiptap/vue-2';
+import { Editor, Mark } from '@tiptap/vue-2';
 import { buildTestExtensions } from '../../../__tests__/utils';
-import { ListTypes } from '../../../enums';
+import { ListTypes, TextSettings } from '../../../enums';
 import { StylePreset } from '../../StylePreset';
 import { ContentNormalizer, NodeFactory } from '../../../services';
 import { List } from '../List';
 
+const MockFontWeight = Mark.create({
+    name: TextSettings.FONT_WEIGHT,
+    renderHTML: () => ['span', {}, 0],
+    addAttributes: () => ({ value: { required: true } })
+});
+
 function createEditor({ content }) {
     return new Editor({
         content: ContentNormalizer.normalize(content),
@@ -24,7 +30,8 @@ function createEditor({ content }) {
                     ],
                     defaultId: 'regular-1',
                     baseClass: 'zw ts-'
-                })
+                }),
+                MockFontWeight
             ]
         })
     });
@@ -73,7 +80,7 @@ describe('apply list', () => {
         expect(editor.getJSON()).toMatchSnapshot();
     });
 
-    test('should remove list', () => {
+    test('should toggle list', () => {
         const editor = createEditor({
             content: NodeFactory.doc([
                 NodeFactory.list(ListTypes.LATIN, [
@@ -84,12 +91,12 @@ describe('apply list', () => {
         });
 
         editor.commands.selectAll();
-        editor.commands.removeList();
+        editor.commands.applyList(ListTypes.LATIN);
 
         expect(editor.getJSON()).toMatchSnapshot();
     });
 
-    test('should toggle list', () => {
+    test('should change list type', () => {
         const editor = createEditor({
             content: NodeFactory.doc([
                 NodeFactory.list(ListTypes.LATIN, [
@@ -100,37 +107,39 @@ describe('apply list', () => {
         });
 
         editor.commands.selectAll();
-        editor.commands.applyList(ListTypes.LATIN);
+        editor.commands.applyList(ListTypes.ROMAN);
 
         expect(editor.getJSON()).toMatchSnapshot();
     });
 
-    test('should change list type', () => {
+    test('should remove preset', () => {
         const editor = createEditor({
             content: NodeFactory.doc([
-                NodeFactory.list(ListTypes.LATIN, [
-                    NodeFactory.paragraph('Item 1'),
-                    NodeFactory.paragraph('Item 2')
-                ])
+                NodeFactory.paragraph({ preset: { id: 'regular-1' } }, 'Item 1'),
+                NodeFactory.paragraph({ preset: { id: 'regular-1' } }, 'Item 2')
             ])
         });
 
         editor.commands.selectAll();
-        editor.commands.applyList(ListTypes.ROMAN);
+        editor.commands.applyList(ListTypes.LATIN);
 
         expect(editor.getJSON()).toMatchSnapshot();
     });
+});
 
-    test('should remove preset', () => {
+describe('remove list', () => {
+    test('should remove list', () => {
         const editor = createEditor({
             content: NodeFactory.doc([
-                NodeFactory.paragraph({ preset: { id: 'regular-1' } }, 'Item 1'),
-                NodeFactory.paragraph({ preset: { id: 'regular-1' } }, 'Item 2')
+                NodeFactory.list(ListTypes.LATIN, [
+                    NodeFactory.paragraph('Item 1'),
+                    NodeFactory.paragraph('Item 2')
+                ])
             ])
         });
 
         editor.commands.selectAll();
-        editor.commands.applyList(ListTypes.LATIN);
+        editor.commands.removeList();
 
         expect(editor.getJSON()).toMatchSnapshot();
     });

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

@@ -93,42 +93,6 @@ Object {
 }
 `;
 
-exports[`apply list should remove list 1`] = `
-Object {
-  "content": Array [
-    Object {
-      "attrs": Object {
-        "preset": Object {
-          "id": "regular-1",
-        },
-      },
-      "content": Array [
-        Object {
-          "text": "Item 1",
-          "type": "text",
-        },
-      ],
-      "type": "paragraph",
-    },
-    Object {
-      "attrs": Object {
-        "preset": Object {
-          "id": "regular-1",
-        },
-      },
-      "content": Array [
-        Object {
-          "text": "Item 2",
-          "type": "text",
-        },
-      ],
-      "type": "paragraph",
-    },
-  ],
-  "type": "doc",
-}
-`;
-
 exports[`apply list should remove preset 1`] = `
 Object {
   "content": Array [
@@ -701,3 +665,39 @@ Object {
   "type": "doc",
 }
 `;
+
+exports[`remove list should remove list 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "attrs": Object {
+        "preset": Object {
+          "id": "regular-1",
+        },
+      },
+      "content": Array [
+        Object {
+          "text": "Item 1",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+    Object {
+      "attrs": Object {
+        "preset": Object {
+          "id": "regular-1",
+        },
+      },
+      "content": Array [
+        Object {
+          "text": "Item 2",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;