@zipify/wysiwyg 1.0.0-dev.1

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

@@ -0,0 +1,43 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`transform text should keep text marks 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "marks": Array [
+            Object {
+              "attrs": Object {
+                "value": "700",
+              },
+              "type": "font_weight",
+            },
+          ],
+          "text": "hELLO world",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`transform text should transform selected text 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "text": "hELLO world",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;

package/lib/extensions/core/index.js

@@ -0,0 +1,17 @@
+import Document from '@tiptap/extension-document';
+import Paragraph from '@tiptap/extension-paragraph';
+import Text from '@tiptap/extension-text';
+import { NodeProcessor } from './NodeProcessor';
+import { TextProcessor } from './TextProcessor';
+import { SelectionProcessor } from './SelectionProcessor';
+
+export const CORE_EXTENSIONS = [
+    Document,
+    Paragraph.configure({
+        HTMLAttributes: { class: 'zw-style' }
+    }),
+    Text,
+    NodeProcessor,
+    TextProcessor,
+    SelectionProcessor
+];

package/lib/extensions/core/inputRules/closeDoubleQuote.js

@@ -0,0 +1,6 @@
+import { textInputRule } from '@tiptap/core';
+
+export const closeDoubleQuote = textInputRule({
+    find: /"/,
+    replace: '”'
+});

package/lib/extensions/core/inputRules/closeSingleQuote.js

@@ -0,0 +1,6 @@
+import { textInputRule } from '@tiptap/core';
+
+export const closeSingleQuote = textInputRule({
+    find: /'/,
+    replace: '’'
+});

package/lib/extensions/core/inputRules/copyright.js

@@ -0,0 +1,6 @@
+import { textInputRule } from '@tiptap/core';
+
+export const copyright = textInputRule({
+    find: /\(c\)/i,
+    replace: '©'
+});

package/lib/extensions/core/inputRules/ellipsis.js

@@ -0,0 +1,6 @@
+import { textInputRule } from '@tiptap/core';
+
+export const ellipsis = textInputRule({
+    find: /\.\.\./,
+    replace: '…'
+});

package/lib/extensions/core/inputRules/emDash.js

@@ -0,0 +1,6 @@
+import { textInputRule } from '@tiptap/core';
+
+export const emDash = textInputRule({
+    find: /--/,
+    replace: '—'
+});

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

@@ -0,0 +1,9 @@
+export { closeDoubleQuote } from './closeDoubleQuote';
+export { closeSingleQuote } from './closeSingleQuote';
+export { copyright } from './copyright';
+export { ellipsis } from './ellipsis';
+export { emDash } from './emDash';
+export { openDoubleQuote } from './openDoubleQuote';
+export { openSingleQuote } from './openSingleQuote';
+export { registeredTrademark } from './registeredTrademark';
+export { trademark } from './trademark';

package/lib/extensions/core/inputRules/openDoubleQuote.js

@@ -0,0 +1,6 @@
+import { textInputRule } from '@tiptap/core';
+
+export const openDoubleQuote = textInputRule({
+    find: /(?:^|[\s{[(<'"\u2018\u201C])(")/,
+    replace: '“'
+});

package/lib/extensions/core/inputRules/openSingleQuote.js

@@ -0,0 +1,6 @@
+import { textInputRule } from '@tiptap/core';
+
+export const openSingleQuote = textInputRule({
+    find: /(?:^|[\s{[(<'"\u2018\u201C])(')/,
+    replace: '‘'
+});

package/lib/extensions/core/inputRules/registeredTrademark.js

@@ -0,0 +1,6 @@
+import { textInputRule } from '@tiptap/core';
+
+export const registeredTrademark = textInputRule({
+    find: /\(r\)/i,
+    replace: '®'
+});

package/lib/extensions/core/inputRules/trademark.js

@@ -0,0 +1,6 @@
+import { textInputRule } from '@tiptap/core';
+
+export const trademark = textInputRule({
+    find: /\(tm\)/i,
+    replace: '™'
+});

package/lib/extensions/index.js

@@ -0,0 +1,49 @@
+import History from '@tiptap/extension-history';
+import { CORE_EXTENSIONS } from './core';
+import { FontFamily } from './FontFamily';
+import { StylePreset } from './StylePreset';
+import { FontWeight } from './FontWeight';
+import { FontSize } from './FontSize';
+import { FontColor } from './FontColor';
+import { BackgroundColor } from './BackgroundColor';
+import { DeviceManager } from './DeviceManager';
+import { FontStyle } from './FontStyle';
+import { TextDecoration } from './TextDecoration';
+import { CaseStyle } from './CaseStyle';
+import { Alignment } from './Alignment';
+import { LineHeight } from './LineHeight';
+import { List } from './list';
+import { Superscript } from './Superscript';
+
+export { CORE_EXTENSIONS };
+
+export const getExtensions = (options) => CORE_EXTENSIONS.concat([
+    History,
+    StylePreset.configure({
+        presetsRef: options.presetsRef,
+        defaultId: options.defaultPresetId,
+        makeVariable: options.makePresetVariable
+    }),
+    List.configure({
+        baseClass: options.baseListClass
+    }),
+    DeviceManager.configure({
+        deviceRef: options.deviceRef
+    }),
+    FontFamily.configure({
+        fonts: options.fonts
+    }),
+    FontWeight,
+    FontSize.configure({
+        minSize: options.minFontSize,
+        maxSize: options.maxFontSize
+    }),
+    FontColor,
+    BackgroundColor,
+    FontStyle,
+    TextDecoration,
+    CaseStyle,
+    Superscript,
+    Alignment,
+    LineHeight
+]);

package/lib/extensions/list/List.js

@@ -0,0 +1,81 @@
+import { Node, wrappingInputRule } from '@tiptap/vue-2';
+import { computed } from '@vue/composition-api';
+import { createCommand } from '../../utils';
+import { ListTypes, NodeTypes } from '../../enums';
+import { ListItem } from './ListItem';
+
+export const List = Node.create({
+    name: NodeTypes.LIST,
+    content: `${NodeTypes.LIST_ITEM}+`,
+    group: 'block list',
+
+    addExtensions: () => [
+        ListItem
+    ],
+
+    addOptions: () => ({
+        baseClass: ''
+    }),
+
+    addAttributes: () => ({
+        bullet: { isRequired: true }
+    }),
+
+    renderHTML({ HTMLAttributes: attrs }) {
+        const isOrdered = ListTypes.ordered.includes(attrs.bullet.type);
+        const tag = isOrdered ? 'ol' : 'ul';
+        const bulletClass = this.options.baseClass + attrs.bullet.type;
+
+        return [tag, { class: bulletClass }, 0];
+    },
+
+    addCommands() {
+        return {
+            getListType: createCommand(({ commands }) => {
+                const attribute = commands.getBlockAttributes('bullet', { type: null });
+
+                return computed(() => attribute.value.type ?? null);
+            }),
+
+            applyList: createCommand(({ commands, chain }, type) => {
+                const currentType = commands.getListType().value;
+
+                // Remove List
+                if (currentType === type) {
+                    commands.applyDefaultPreset();
+                    return;
+                }
+
+                return chain().removeList()._addList(type).run();
+            }),
+
+            _addList: createCommand(({ chain }, type) => {
+                return chain()
+                    .removePreset()
+                    .toggleList(NodeTypes.LIST, NodeTypes.LIST_ITEM)
+                    .setBlockAttributes('bullet', { type })
+                    .run();
+            }),
+
+            removeList: createCommand(({ commands }) => {
+                commands.liftListItem(NodeTypes.LIST_ITEM);
+            })
+        };
+    },
+
+    addInputRules() {
+        const wrappingListRule = (bullet, regex) => wrappingInputRule({
+            find: regex,
+            type: this.type,
+            getAttributes: { bullet: { type: bullet } },
+            joinPredicate: (_, { attrs }) => attrs.bullet.type === bullet
+        });
+
+        return [
+            wrappingListRule(ListTypes.DISC, /^\s*([-+*])\s$/),
+            wrappingListRule(ListTypes.DECIMAL, /^(\d+)\.\s$/),
+            wrappingListRule(ListTypes.LATIN, /^([ivx]{1,3})\.\s$/i),
+            wrappingListRule(ListTypes.ROMAN, /^([a-z])\.\s$/i)
+        ];
+    }
+});

package/lib/extensions/list/ListItem.js

@@ -0,0 +1,12 @@
+import Base from '@tiptap/extension-list-item';
+import { NodeTypes } from '../../enums';
+
+export const ListItem = Base.extend({
+    name: NodeTypes.LIST_ITEM,
+
+    addKeyboardShortcuts() {
+        const { Enter } = this.parent();
+
+        return { Enter };
+    }
+});

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

@@ -0,0 +1,130 @@
+import { Editor } from '@tiptap/vue-2';
+import { ref } from '@vue/composition-api';
+import { NodeFactory } from '../../../__tests__/utils';
+import { ListTypes } from '../../../enums';
+import { CORE_EXTENSIONS } from '../../core';
+import { StylePreset } from '../../StylePreset';
+import { List } from '../List';
+
+function createEditor({ content }) {
+    return new Editor({
+        content,
+        element: document.createElement('div'),
+        extensions: CORE_EXTENSIONS.concat(
+            List,
+            StylePreset.configure({
+                presetsRef: ref([
+                    {
+                        id: 'regular-1',
+                        common: {},
+                        mobile: {},
+                        tablet: {},
+                        desktop: {}
+                    }
+                ]),
+                defaultId: 'regular-1'
+            })
+        )
+    });
+}
+
+describe('get list type', () => {
+    test('should get list from selection', () => {
+        const editor = createEditor({
+            content: NodeFactory.doc([
+                NodeFactory.list(ListTypes.LATIN, [
+                    NodeFactory.paragraph('Item 1'),
+                    NodeFactory.paragraph('Item 2')
+                ])
+            ])
+        });
+
+        editor.commands.selectAll();
+
+        expect(editor.commands.getListType().value).toBe(ListTypes.LATIN);
+    });
+
+    test('should return null if no list in selection', () => {
+        const editor = createEditor({
+            content: NodeFactory.doc([
+                NodeFactory.paragraph('Plain text')
+            ])
+        });
+
+        editor.commands.selectAll();
+
+        expect(editor.commands.getListType().value).toBe(null);
+    });
+});
+
+describe('apply list', () => {
+    test('should apply list to text', () => {
+        const editor = createEditor({
+            content: NodeFactory.doc([
+                NodeFactory.paragraph('Plain text')
+            ])
+        });
+
+        editor.chain().selectAll().applyList(ListTypes.LATIN).run();
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should remove list', () => {
+        const editor = createEditor({
+            content: NodeFactory.doc([
+                NodeFactory.list(ListTypes.LATIN, [
+                    NodeFactory.paragraph('Item 1'),
+                    NodeFactory.paragraph('Item 2')
+                ])
+            ])
+        });
+
+        editor.chain().selectAll().removeList().run();
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should toggle list', () => {
+        const editor = createEditor({
+            content: NodeFactory.doc([
+                NodeFactory.list(ListTypes.LATIN, [
+                    NodeFactory.paragraph('Item 1'),
+                    NodeFactory.paragraph('Item 2')
+                ])
+            ])
+        });
+
+        editor.chain().selectAll().applyList(ListTypes.LATIN).run();
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should change list type', () => {
+        const editor = createEditor({
+            content: NodeFactory.doc([
+                NodeFactory.list(ListTypes.LATIN, [
+                    NodeFactory.paragraph('Item 1'),
+                    NodeFactory.paragraph('Item 2')
+                ])
+            ])
+        });
+
+        editor.chain().selectAll().applyList(ListTypes.ROMAN).run();
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should remove preset', () => {
+        const editor = createEditor({
+            content: NodeFactory.doc([
+                NodeFactory.paragraph({ preset: { id: 'regular-1' } }, 'Item 1'),
+                NodeFactory.paragraph({ preset: { id: 'regular-1' } }, 'Item 2')
+            ])
+        });
+
+        editor.chain().selectAll().applyList(ListTypes.LATIN).run();
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+});

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

@@ -0,0 +1,212 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`apply list should apply list to text 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "attrs": Object {
+        "bullet": Object {
+          "type": "latin",
+        },
+      },
+      "content": Array [
+        Object {
+          "content": Array [
+            Object {
+              "attrs": Object {
+                "preset": null,
+              },
+              "content": Array [
+                Object {
+                  "text": "Plain text",
+                  "type": "text",
+                },
+              ],
+              "type": "paragraph",
+            },
+          ],
+          "type": "listItem",
+        },
+      ],
+      "type": "list",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`apply list should change list type 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "attrs": Object {
+        "bullet": Object {
+          "type": "roman",
+        },
+      },
+      "content": Array [
+        Object {
+          "content": Array [
+            Object {
+              "attrs": Object {
+                "preset": null,
+              },
+              "content": Array [
+                Object {
+                  "text": "Item 1",
+                  "type": "text",
+                },
+              ],
+              "type": "paragraph",
+            },
+          ],
+          "type": "listItem",
+        },
+        Object {
+          "content": Array [
+            Object {
+              "attrs": Object {
+                "preset": null,
+              },
+              "content": Array [
+                Object {
+                  "text": "Item 2",
+                  "type": "text",
+                },
+              ],
+              "type": "paragraph",
+            },
+          ],
+          "type": "listItem",
+        },
+      ],
+      "type": "list",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+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 [
+    Object {
+      "attrs": Object {
+        "bullet": Object {
+          "type": "latin",
+        },
+      },
+      "content": Array [
+        Object {
+          "content": Array [
+            Object {
+              "attrs": Object {
+                "preset": null,
+              },
+              "content": Array [
+                Object {
+                  "text": "Item 1",
+                  "type": "text",
+                },
+              ],
+              "type": "paragraph",
+            },
+          ],
+          "type": "listItem",
+        },
+        Object {
+          "content": Array [
+            Object {
+              "attrs": Object {
+                "preset": null,
+              },
+              "content": Array [
+                Object {
+                  "text": "Item 2",
+                  "type": "text",
+                },
+              ],
+              "type": "paragraph",
+            },
+          ],
+          "type": "listItem",
+        },
+      ],
+      "type": "list",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`apply list should toggle 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/extensions/list/index.js

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

package/lib/index.js

@@ -0,0 +1 @@
+export { default as Wysiwyg } from './Wysiwyg';

package/lib/injectionTokens.js

@@ -0,0 +1,7 @@
+export const InjectionTokens = Object.freeze({
+    FONTS: Symbol('fonts'),
+    FONT_SIZES: Symbol('fontSizes'),
+    EDITOR: Symbol('editor'),
+    LOCAL_STORAGE: Symbol('localStorage'),
+    FAVORITE_COLORS: Symbol('favoriteColors')
+});

package/lib/models/Font.js

@@ -0,0 +1,37 @@
+export class Font {
+    constructor({ name, category, styles }) {
+        this.name = name;
+        this.category = category;
+        this.styles = styles;
+    }
+
+    get weights() {
+        return this.styles.filter((style) => !style.endsWith('i'));
+    }
+
+    isWeightSupported(weight) {
+        return this.styles.includes(weight);
+    }
+
+    isItalicSupported(weight) {
+        return this.styles.includes(`${weight}i`);
+    }
+
+    findClosestWeight(searchedWeight) {
+        const weights = this.weights.map((weight) => parseInt(weight));
+
+        let closestWeight;
+        let closestDifferance = null;
+
+        for (const weight of weights) {
+            const differance = Math.abs(searchedWeight - weight);
+
+            if (closestDifferance === null || differance < closestDifferance) {
+                closestDifferance = differance;
+                closestWeight = weight;
+            }
+        }
+
+        return String(closestWeight);
+    }
+}