@zipify/wysiwyg 1.0.0-dev.1

package/lib/extensions/StylePreset.js

@@ -0,0 +1,168 @@
+import { Extension } from '@tiptap/vue-2';
+import { computed, toRef } from '@vue/composition-api';
+import { Heading } from '@tiptap/extension-heading';
+import { createCommand } from '../utils';
+import { Devices, NodeTypes, TextSettings } from '../enums';
+
+export const StylePreset = Extension.create({
+    name: 'style_preset',
+
+    addExtensions: () => [
+        Heading.configure({
+            levels: [1, 2, 3, 4],
+            HTMLAttributes: { class: 'zw-style' }
+        })
+    ],
+
+    addOptions: () => ({
+        presetsRef: null,
+        defaultId: null,
+        makeVariable: null
+    }),
+
+    addStorage: () => ({
+        presetStyleEl: null
+    }),
+
+    addGlobalAttributes() {
+        return [
+            {
+                types: [NodeTypes.PARAGRAPH, NodeTypes.HEADING],
+                attributes: {
+                    preset: {
+                        isRequired: false,
+                        default: { id: this.options.defaultId },
+                        renderHTML: (attrs) => {
+                            if (!attrs.preset) return null;
+
+                            return { class: `zw-preset--${attrs.preset.id}` };
+                        }
+                    }
+                }
+            }
+        ];
+    },
+
+    addCommands() {
+        function findPresetById(presets, id) {
+            return presets.find((preset) => id === preset.id);
+        }
+
+        return {
+            getPresetList: createCommand(() => computed(() => {
+                return this.options.presetsRef.value.filter((preset) => !preset.hidden);
+            })),
+
+            getPreset: createCommand(({ commands }) => {
+                const selection = commands.getBlockAttributes('preset', { id: this.options.defaultId });
+                const presets = commands.getPresetList();
+
+                return computed(() => findPresetById(presets.value, selection.value.id));
+            }),
+
+            applyPreset: createCommand(({ commands, chain }, presetId) => {
+                const presets = commands.getPresetList().value;
+                const preset = findPresetById(presets, presetId);
+                const nodeType = preset.node?.type ?? NodeTypes.PARAGRAPH;
+
+                const attrs = {
+                    preset: { id: presetId }
+                };
+
+                if (preset.node) {
+                    attrs.level = preset.node.level;
+                }
+
+                for (const textAttribute of TextSettings.attributes) {
+                    attrs[textAttribute] = commands.getBlockAttributes(textAttribute).value;
+                }
+
+                chain().removeList().setNode(nodeType, attrs).run();
+            }),
+
+            applyDefaultPreset: createCommand(({ commands }) => {
+                commands.applyPreset(this.options.defaultId);
+            }),
+
+            removePreset: createCommand(({ commands }) => {
+                commands.setNode(NodeTypes.PARAGRAPH, { preset: null });
+            }),
+
+            getPresetCustomization: createCommand(({ editor }) => {
+                const state = toRef(editor, 'state');
+
+                return computed(() => {
+                    const attributes = new Set();
+                    const marks = new Set();
+                    const { from, to } = state.value.selection;
+
+                    state.value.doc.nodesBetween(from, to, (node) => {
+                        for (const [name, value] of Object.entries(node.attrs)) {
+                            const isSetting = TextSettings.attributes.includes(name);
+
+                            if (isSetting && value) attributes.add(name);
+                        }
+
+                        for (const { type } of node.marks) {
+                            if (TextSettings.marks.includes(type.name)) {
+                                marks.add(type.name);
+                            }
+                        }
+                    });
+
+                    return {
+                        attributes: Array.from(attributes),
+                        marks: Array.from(marks)
+                    };
+                });
+            }),
+
+            removePresetCustomization: createCommand(({ chain }) => {
+                chain()
+                    .storeSelection()
+                    .expandSelectionToBlock()
+                    .unsetAllMarks()
+                    .resetAttributes(NodeTypes.PARAGRAPH, TextSettings.attributes)
+                    .resetAttributes(NodeTypes.HEADING, TextSettings.attributes)
+                    .restoreSelection()
+                    .run();
+            }),
+
+            removeFormat: createCommand(({ commands }) => {
+                commands.removePresetCustomization();
+                commands.applyDefaultPreset();
+            })
+        };
+    },
+
+    onCreate() {
+        const existingStyleEl = document.querySelector('[data-zw-styles]');
+
+        if (existingStyleEl) {
+            this.storage.presetStyleEl = existingStyleEl;
+            return;
+        }
+
+        this.storage.presetStyleEl = document.createElement('style');
+        this.storage.presetStyleEl.dataset.zwStyles = '';
+
+        for (const preset of this.options.presetsRef.value) {
+            const css = [` .zw-preset--${preset.id} {`];
+
+            for (const device of Devices.values) {
+                for (const setting of Object.keys(preset[device])) {
+                    const variable = this.options.makeVariable({ device, preset, property: setting });
+                    const property = setting.replace(/_/i, '-');
+                    const prefix = device === Devices.COMMON ? 'preset' : `preset-${device}`;
+
+                    css.push(`--zw-${prefix}-${property}: var(${variable}, inherit);`);
+                }
+            }
+
+            css.push('}');
+            this.storage.presetStyleEl.innerHTML += css.join(' ');
+        }
+
+        document.head.append(this.storage.presetStyleEl);
+    }
+});

package/lib/extensions/Superscript.js

@@ -0,0 +1,5 @@
+import Base from '@tiptap/extension-superscript';
+
+export const Superscript = Base.extend({
+    addKeyboardShortcuts: null
+});

package/lib/extensions/TextDecoration.js

@@ -0,0 +1,97 @@
+import { Mark } from '@tiptap/vue-2';
+import { computed } from '@vue/composition-api';
+import { createCommand, createKeyboardShortcut, renderMark } from '../utils';
+import { TextSettings } from '../enums';
+
+export const TextDecoration = Mark.create({
+    name: TextSettings.TEXT_DECORATION,
+
+    addAttributes: () => ({
+        underline: { default: false },
+        strike_through: { default: false }
+    }),
+
+    addCommands() {
+        return {
+            isUnderline: createCommand(({ commands }) => {
+                const decoration = commands.getTextDecoration();
+
+                return computed(() => decoration.value.underline);
+            }),
+
+            isStrikeThrough: createCommand(({ commands }) => {
+                const decoration = commands.getTextDecoration();
+
+                return computed(() => decoration.value.strike_through);
+            }),
+
+            getTextDecoration: createCommand(({ editor, commands }) => {
+                const defaultValue = commands.getDefaultTextDecoration();
+
+                return computed(() => {
+                    const attrs = editor.getAttributes(this.name) ?? {};
+
+                    return {
+                        underline: attrs.underline ?? defaultValue.value.underline,
+                        strike_through: attrs.strike_through ?? defaultValue.value.strike_through
+                    };
+                });
+            }),
+
+            getDefaultTextDecoration: createCommand(({ commands }) => {
+                const preset = commands.getPreset();
+
+                return computed(() => {
+                    const decoration = preset.value.common.text_decoration;
+
+                    return {
+                        underline: decoration.includes('underline'),
+                        strike_through: decoration.includes('line-through')
+                    };
+                });
+            }),
+
+            toggleUnderline: createCommand(({ commands }) => {
+                commands.toggleTextDecoration('underline');
+            }),
+
+            toggleStrikeThrough: createCommand(({ commands }) => {
+                commands.toggleTextDecoration('strike_through');
+            }),
+
+            toggleTextDecoration: createCommand(({ commands }, name) => {
+                const isEnabled = commands.getTextDecoration().value[name];
+
+                isEnabled ? commands.removeTextDecoration(name) : commands.applyTextDecoration(name);
+            }),
+
+            applyTextDecoration: createCommand(({ commands }, name) => {
+                commands.setMark(this.name, { [name]: true });
+            }),
+
+            removeTextDecoration: createCommand(({ commands }, name) => {
+                const mark = {
+                    ...commands.getTextDecoration().value,
+                    [name]: false
+                };
+                const isRemoveMark = !mark.underline && !mark.strike_through;
+
+                isRemoveMark ? commands.unsetMark(this.name) : commands.setMark(this.name, mark);
+            })
+        };
+    },
+
+    addKeyboardShortcuts: () => ({
+        'Mod-u': createKeyboardShortcut('toggleUnderline'),
+        'Mod-U': createKeyboardShortcut('toggleUnderline')
+    }),
+
+    renderHTML({ HTMLAttributes: attrs }) {
+        const decorations = [];
+
+        if (attrs.underline) decorations.push('underline');
+        if (attrs.strike_through) decorations.push('line-through');
+
+        return renderMark({ text_decoration: decorations.join(' ') });
+    }
+});

package/lib/extensions/__tests__/Alignment.test.js

@@ -0,0 +1,107 @@
+import { Editor, Extension } from '@tiptap/vue-2';
+import { ref } from '@vue/composition-api';
+import { NodeFactory } from '../../__tests__/utils';
+import { createCommand } from '../../utils';
+import { CORE_EXTENSIONS } from '../core';
+import { Alignment } from '../Alignment';
+import { DeviceManager } from '../DeviceManager';
+import { Alignments } from '../../enums';
+
+const MockStylePreset = Extension.create({
+    name: 'style_preset',
+
+    addCommands() {
+        return {
+            getPreset: createCommand(() => ref({
+                mobile: { alignment: Alignments.JUSTIFY },
+                tablet: { alignment: Alignments.JUSTIFY },
+                desktop: { alignment: Alignments.JUSTIFY }
+            }))
+        };
+    }
+});
+
+function createEditor({ content }) {
+    return new Editor({
+        content,
+        extensions: CORE_EXTENSIONS.concat(
+            MockStylePreset,
+            DeviceManager.configure({ deviceRef: ref('desktop') }),
+            Alignment
+        )
+    });
+}
+
+const createContent = (attrs) => NodeFactory.doc([
+    NodeFactory.paragraph(attrs, [
+        NodeFactory.text('hello world')
+    ])
+]);
+
+describe('get value', () => {
+    test('should get from selection', () => {
+        const editor = createEditor({
+            content: createContent({
+                alignment: { desktop: Alignments.CENTER }
+            })
+        });
+
+        editor.commands.selectAll();
+
+        expect(editor.commands.getAlignment().value).toEqual(Alignments.CENTER);
+    });
+
+    test('should get default value', () => {
+        const editor = createEditor({
+            content: createContent({ alignment: null })
+        });
+
+        expect(editor.commands.getDefaultAlignment().value).toEqual(Alignments.JUSTIFY);
+    });
+
+    test('should get from preset', () => {
+        const editor = createEditor({
+            content: createContent({ alignment: null })
+        });
+
+        expect(editor.commands.getAlignment().value).toEqual(Alignments.JUSTIFY);
+    });
+});
+
+describe('apply value', () => {
+    test('should change value', () => {
+        const editor = createEditor({
+            content: createContent({ alignment: null })
+        });
+
+        editor.chain().selectAll().applyAlignment(Alignments.RIGHT).run();
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+});
+
+describe('rendering', () => {
+    test('should render only desktop', () => {
+        const editor = createEditor({
+            content: createContent({
+                alignment: { desktop: Alignments.CENTER }
+            })
+        });
+
+        expect(editor.getHTML()).toMatchSnapshot();
+    });
+
+    test('should render all devices', () => {
+        const editor = createEditor({
+            content: createContent({
+                alignment: {
+                    desktop: Alignments.CENTER,
+                    tablet: Alignments.RIGHT,
+                    mobile: Alignments.LEFT
+                }
+            })
+        });
+
+        expect(editor.getHTML()).toMatchSnapshot();
+    });
+});

package/lib/extensions/__tests__/BackgroundColor.test.js

@@ -0,0 +1,75 @@
+import { Editor, Extension } from '@tiptap/vue-2';
+import { ref } from '@vue/composition-api';
+import { NodeFactory } from '../../__tests__/utils';
+import { createCommand } from '../../utils';
+import { CORE_EXTENSIONS } from '../core';
+import { BackgroundColor } from '../BackgroundColor';
+
+const MockStylePreset = Extension.create({
+    name: 'style_preset',
+
+    addCommands() {
+        return {
+            getPreset: createCommand(() => ref({
+                common: { background_color: 'red' }
+            }))
+        };
+    }
+});
+
+function createEditor({ content }) {
+    return new Editor({
+        content,
+        extensions: CORE_EXTENSIONS.concat(MockStylePreset, BackgroundColor)
+    });
+}
+
+const createContent = (text) => NodeFactory.doc([
+    NodeFactory.paragraph([text])
+]);
+
+describe('get background color', () => {
+    test('should get from selection', () => {
+        const editor = createEditor({
+            content: createContent(NodeFactory.text('hello world', [
+                NodeFactory.mark('background_color', { value: 'green' })
+            ]))
+        });
+
+        editor.commands.selectAll();
+
+        expect(editor.commands.getBackgroundColor().value).toEqual('green');
+    });
+
+    test('should get default background color', () => {
+        const editor = createEditor({
+            content: createContent(NodeFactory.text('hello world'))
+        });
+
+        expect(editor.commands.getBackgroundColor().value).toEqual('rgba(255, 255, 255, 0%)');
+    });
+});
+
+describe('apply background color', () => {
+    test('should change background color', () => {
+        const editor = createEditor({
+            content: createContent(NodeFactory.text('hello world'))
+        });
+
+        editor.chain().selectAll().applyBackgroundColor('green').run();
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+});
+
+describe('rendering', () => {
+    test('should render html', () => {
+        const editor = createEditor({
+            content: createContent(NodeFactory.text('hello world', [
+                NodeFactory.mark('background_color', { value: 'green' })
+            ]))
+        });
+
+        expect(editor.getHTML()).toMatchSnapshot();
+    });
+});

package/lib/extensions/__tests__/CaseStyle.test.js

@@ -0,0 +1,58 @@
+import { Editor } from '@tiptap/vue-2';
+import { NodeFactory } from '../../__tests__/utils';
+import { CaseStyles } from '../../enums';
+import { CORE_EXTENSIONS } from '../core';
+import { CaseStyle } from '../CaseStyle';
+
+function createEditor({ content }) {
+    return new Editor({
+        content,
+        extensions: CORE_EXTENSIONS.concat(CaseStyle)
+    });
+}
+
+const createContent = (text) => NodeFactory.doc([
+    NodeFactory.paragraph([text])
+]);
+
+describe('apply case style', () => {
+    test('should apply capitalize', () => {
+        const editor = createEditor({
+            content: createContent(NodeFactory.text('hello world'))
+        });
+
+        editor.chain().selectAll().applyCapitalize().run();
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should apply lowercase', () => {
+        const editor = createEditor({
+            content: createContent(NodeFactory.text('HeLlO wOrLd'))
+        });
+
+        editor.chain().selectAll().applyLowerCase().run();
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should apply uppercase', () => {
+        const editor = createEditor({
+            content: createContent(NodeFactory.text('hello world'))
+        });
+
+        editor.chain().selectAll().applyUpperCase().run();
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should apply case by type', () => {
+        const editor = createEditor({
+            content: createContent(NodeFactory.text('hello world'))
+        });
+
+        editor.chain().selectAll().applyCaseStyle(CaseStyles.CAPITALIZE).run();
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+});

package/lib/extensions/__tests__/FontColor.test.js

@@ -0,0 +1,85 @@
+import { Editor, Extension } from '@tiptap/vue-2';
+import { ref } from '@vue/composition-api';
+import { NodeFactory } from '../../__tests__/utils';
+import { createCommand } from '../../utils';
+import { CORE_EXTENSIONS } from '../core';
+import { FontColor } from '../FontColor';
+
+const MockStylePreset = Extension.create({
+    name: 'style_preset',
+
+    addCommands() {
+        return {
+            getPreset: createCommand(() => ref({
+                common: { color: 'red' }
+            }))
+        };
+    }
+});
+
+function createEditor({ content }) {
+    return new Editor({
+        content,
+        extensions: CORE_EXTENSIONS.concat(MockStylePreset, FontColor)
+    });
+}
+
+const createContent = (text) => NodeFactory.doc([
+    NodeFactory.paragraph([text])
+]);
+
+describe('get font color', () => {
+    test('should get from selection', () => {
+        const editor = createEditor({
+            content: createContent(NodeFactory.text('hello world', [
+                NodeFactory.mark('font_color', { value: 'green' })
+            ]))
+        });
+
+        editor.commands.selectAll();
+
+        expect(editor.commands.getFontColor().value).toEqual('green');
+    });
+
+    test('should get default font color', () => {
+        const editor = createEditor({
+            content: createContent(NodeFactory.text('hello world'))
+        });
+
+        expect(editor.commands.getDefaultFontColor().value).toEqual('red');
+    });
+
+    test('should get from preset', () => {
+        const editor = createEditor({
+            content: createContent(NodeFactory.text('hello world'))
+        });
+
+        editor.commands.selectAll();
+
+        expect(editor.commands.getFontColor().value).toEqual('red');
+    });
+});
+
+describe('apply font color', () => {
+    test('should change font color', () => {
+        const editor = createEditor({
+            content: createContent(NodeFactory.text('hello world'))
+        });
+
+        editor.chain().selectAll().applyFontColor('green').run();
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+});
+
+describe('rendering', () => {
+    test('should render html', () => {
+        const editor = createEditor({
+            content: createContent(NodeFactory.text('hello world', [
+                NodeFactory.mark('font_color', { value: 'green' })
+            ]))
+        });
+
+        expect(editor.getHTML()).toMatchSnapshot();
+    });
+});