@zipify/wysiwyg 2.0.0-0 → 2.0.0-10

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",
+}
+`;

package/lib/services/NodeFactory.js

@@ -1,44 +1,90 @@
 import { NodeTypes } from '../enums';
 
+/**
+ * @typedef {Object} NodeJson
+ * @property {String} type
+ * @property {Array<MarkJson>} [marks]
+ * @property {AttrsJson} [attrs]
+ *
+ * @typedef {Object} MarkJson
+ * @property {String} type
+ * @property {AttrsJson} attrs
+ *
+ * @typedef {Object} AttrsJson
+ */
+
 export class NodeFactory {
+    /**
+     * @param {Array<NodeJson>} content
+     * @returns {NodeJson}
+     */
     static doc(content) {
-        return {
-            type: NodeTypes.DOCUMENT,
-            content
-        };
+        return { type: NodeTypes.DOCUMENT, content };
     }
 
+    /**
+     * @param {String} type
+     * @param {Array<String | NodeJson>} items
+     * @returns {NodeJson}
+     */
     static list(type, items) {
         return {
             type: NodeTypes.LIST,
             attrs: { bullet: { type } },
-            content: items.map((item) => this.listItem([].concat(item)))
+
+            content: items.map((item) => {
+                return item.type === NodeTypes.LIST_ITEM ? item : this.listItem([].concat(item));
+            })
         };
     }
 
-    static listItem(content) {
+    /**
+     * @type {{
+     *     ((content: String | NodeJson) => NodeJson);
+     *     ((attrs: AttrsJson, content: String | NodeJson) => NodeJson);
+     *     ((attrs: AttrsJson, marks: Array<MarkJson>, content: String | NodeJson) => NodeJson);
+     * }}
+     */
+    static listItem(...args) {
+        const { attrs, content: children, marks } = this.#normalizeTextBlockArgs(args);
+
         return {
             type: NodeTypes.LIST_ITEM,
-            content
+            ...(attrs ? { attrs } : {}),
+            ...(marks ? { marks } : {}),
+            content: [].concat(children).map((content) => {
+                return typeof content === 'string' ? this.paragraph(content) : content;
+            })
         };
     }
 
+    /**
+     * @type {{
+     *     ((level: Number, content: String | NodeJson) => NodeJson);
+     *     ((level: Number, attrs: AttrsJson, content: String | NodeJson) => NodeJson);
+     *     ((level: Number, attrs: AttrsJson, marks: Array<MarkJson>, content: String | NodeJson) => NodeJson);
+     * }}
+     */
     static heading(level, ...args) {
-        const config = this.#textBlock(args);
+        const config = this.#textBlock(args, this.text);
 
         config.attrs ??= {};
         config.attrs.level = level;
 
-        return {
-            type: NodeTypes.HEADING,
-            ...config
-        };
+        return { type: NodeTypes.HEADING, ...config };
     }
 
+    /**
+     * @type {{
+     *     ((content: String | NodeJson) => NodeJson);
+     *     ((attrs: AttrsJson, content: String | NodeJson) => NodeJson);
+     *     ((attrs: AttrsJson, marks: Array<MarkJson>, content: String | NodeJson) => NodeJson);
+     * }}
+     */
     static paragraph(...args) {
         return {
             type: NodeTypes.PARAGRAPH,
-            ...this.#textBlock(args)
+            ...this.#textBlock(args, this.text)
         };
     }
 
@@ -63,6 +109,11 @@ export class NodeFactory {
         return { attrs: args[0], marks: args[1], content: args[2] };
     }
 
+    /**
+     * @param {String} text
+     * @param {Array<MarkJson>} marks
+     * @returns {NodeJson}
+     */
     static text(text, marks) {
         return {
             type: NodeTypes.TEXT,
@@ -71,10 +122,19 @@ export class NodeFactory {
         };
     }
 
+    /**
+     * @param {String} type
+     * @param {AttrsJson} attrs
+     * @returns {MarkJson}
+     */
     static mark(type, attrs) {
         return { type, attrs };
     }
 
+    /**
+     * @param {*} value
+     * @returns {{tablet, desktop, mobile}}
+     */
     static populateAllDevices(value) {
         // return { mobile: value, tablet: value, desktop: value };
 

package/lib/services/__tests__/NodeFactory.test.js

@@ -0,0 +1,124 @@
+import { NodeFactory } from '../NodeFactory';
+import { ListTypes, TextSettings } from '../../enums';
+
+describe('build node', () => {
+    test('should build doc node', () => {
+        expect(NodeFactory.doc([])).toMatchSnapshot();
+    });
+
+    test('should build list node with text items', () => {
+        const node = NodeFactory.list(ListTypes.DISC, [
+            'lorem ipsum 1',
+            'lorem ipsum 2'
+        ]);
+
+        expect(node).toMatchSnapshot();
+    });
+
+    test('should build list node with node items', () => {
+        const node = NodeFactory.list(ListTypes.DISC, [
+            NodeFactory.paragraph('lorem ipsum 1'),
+            NodeFactory.paragraph('lorem ipsum 2')
+        ]);
+
+        expect(node).toMatchSnapshot();
+    });
+
+    test('should build list node with custom list item nodes', () => {
+        const node = NodeFactory.list(ListTypes.DISC, [
+            NodeFactory.listItem(null, [
+                NodeFactory.mark(TextSettings.FONT_WEIGHT, { value: '700' })
+            ], 'lorem ipsum 1'),
+
+            NodeFactory.listItem(null, [
+                NodeFactory.mark(TextSettings.FONT_WEIGHT, { value: '700' })
+            ], 'lorem ipsum 2')
+        ]);
+
+        expect(node).toMatchSnapshot();
+    });
+
+    test('should build heading node', () => {
+        const node = NodeFactory.heading(1, 'lorem ipsum');
+
+        expect(node).toMatchSnapshot();
+    });
+
+    test('should build heading node with attrs', () => {
+        const node = NodeFactory.heading(1, { preset: { id: 'h1' } }, 'lorem ipsum');
+
+        expect(node).toMatchSnapshot();
+    });
+
+    test('should build heading node with marks', () => {
+        const node = NodeFactory.heading(1, null, [
+            NodeFactory.mark(TextSettings.FONT_WEIGHT, { value: '700' })
+        ], 'lorem ipsum');
+
+        expect(node).toMatchSnapshot();
+    });
+
+    test('should build heading with custom text node', () => {
+        const node = NodeFactory.heading(1, [
+            NodeFactory.text('lorem ipsum', [
+                NodeFactory.mark(TextSettings.FONT_WEIGHT, { value: '700' })
+            ])
+        ]);
+
+        expect(node).toMatchSnapshot();
+    });
+
+    test('should build paragraph node', () => {
+        const node = NodeFactory.paragraph('lorem ipsum');
+
+        expect(node).toMatchSnapshot();
+    });
+
+    test('should build paragraph node with attrs', () => {
+        const node = NodeFactory.paragraph({ preset: { id: 'regular-1' } }, 'lorem ipsum');
+
+        expect(node).toMatchSnapshot();
+    });
+
+    test('should build paragraph node with marks', () => {
+        const node = NodeFactory.paragraph(null, [
+            NodeFactory.mark(TextSettings.FONT_WEIGHT, { value: '700' })
+        ], 'lorem ipsum');
+
+        expect(node).toMatchSnapshot();
+    });
+
+    test('should build paragraph with custom text node', () => {
+        const node = NodeFactory.paragraph([
+            NodeFactory.text('lorem ipsum', [
+                NodeFactory.mark(TextSettings.FONT_WEIGHT, { value: '700' })
+            ])
+        ]);
+
+        expect(node).toMatchSnapshot();
+    });
+
+    test('should build text node', () => {
+        const node = NodeFactory.text('lorem ipsum');
+
+        expect(node).toMatchSnapshot();
+    });
+
+    test('should build text node with marks', () => {
+        const node = NodeFactory.text('lorem ipsum');
+
+        expect(node).toMatchSnapshot();
+    });
+
+    test('should build mark', () => {
+        const mark = NodeFactory.mark(TextSettings.FONT_WEIGHT, { value: '700' });
+
+        expect(mark).toMatchSnapshot();
+    });
+
+    test('should populate value to all devices', () => {
+        const value = NodeFactory.populateAllDevices('18');
+
+        expect(value).toMatchSnapshot();
+    });
+});