@zipify/wysiwyg 1.0.0-dev.1

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

@@ -0,0 +1,106 @@
+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 { DeviceManager } from '../DeviceManager';
+import { LineHeight } from '../LineHeight';
+
+const MockStylePreset = Extension.create({
+    name: 'style_preset',
+
+    addCommands() {
+        return {
+            getPreset: createCommand(() => ref({
+                mobile: { line_height: '1.2' },
+                tablet: { line_height: '1.2' },
+                desktop: { line_height: '1.2' }
+            }))
+        };
+    }
+});
+
+function createEditor({ content }) {
+    return new Editor({
+        content,
+        extensions: CORE_EXTENSIONS.concat(
+            MockStylePreset,
+            DeviceManager.configure({ deviceRef: ref('desktop') }),
+            LineHeight
+        )
+    });
+}
+
+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({
+                line_height: { desktop: '1.4' }
+            })
+        });
+
+        editor.commands.selectAll();
+
+        expect(editor.commands.getLineHeight().value).toBe('1.4');
+    });
+
+    test('should get default value', () => {
+        const editor = createEditor({
+            content: createContent({ line_height: null })
+        });
+
+        expect(editor.commands.getDefaultLineHeight().value).toEqual('1.2');
+    });
+
+    test('should get from preset', () => {
+        const editor = createEditor({
+            content: createContent({ line_height: null })
+        });
+
+        expect(editor.commands.getLineHeight().value).toEqual('1.2');
+    });
+});
+
+describe('apply value', () => {
+    test('should change value', () => {
+        const editor = createEditor({
+            content: createContent({ line_height: null })
+        });
+
+        editor.chain().selectAll().applyLineHeight('1.41').run();
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+});
+
+describe('rendering', () => {
+    test('should render only desktop', () => {
+        const editor = createEditor({
+            content: createContent({
+                line_height: { desktop: '1.3' }
+            })
+        });
+
+        expect(editor.getHTML()).toMatchSnapshot();
+    });
+
+    test('should render all devices', () => {
+        const editor = createEditor({
+            content: createContent({
+                line_height: {
+                    desktop: '1.6',
+                    tablet: '1.4',
+                    mobile: '1.21'
+                }
+            })
+        });
+
+        expect(editor.getHTML()).toMatchSnapshot();
+    });
+});

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

@@ -0,0 +1,400 @@
+import { Editor, Extension, Mark } from '@tiptap/vue-2';
+import { ref } from '@vue/composition-api';
+import { NodeFactory } from '../../__tests__/utils';
+import { CORE_EXTENSIONS } from '../core';
+import { StylePreset } from '../StylePreset';
+import { List } from '../list';
+import { ListTypes, NodeTypes, TextSettings } from '../../enums';
+
+const MockFontSize = Mark.create({
+    name: TextSettings.FONT_SIZE,
+
+    addAttributes: () => ({
+        value: { default: null }
+    }),
+
+    renderHTML: () => ['span', {}, 0]
+});
+
+const MockFontWeight = Mark.create({
+    name: TextSettings.FONT_WEIGHT,
+
+    addAttributes: () => ({
+        value: { default: null }
+    }),
+
+    renderHTML: () => ['span', {}, 0]
+});
+
+const MockAlignment = Extension.create({
+    name: TextSettings.ALIGNMENT,
+
+    addGlobalAttributes: () => [
+        {
+            types: [NodeTypes.PARAGRAPH, NodeTypes.HEADING],
+            attributes: {
+                [TextSettings.ALIGNMENT]: {
+                    default: null,
+                    renderHTML: () => ({})
+                }
+            }
+        }
+    ]
+});
+
+function createEditor({ content, presets, defaultId }) {
+    return new Promise((resolve) => {
+        const editor = new Editor({
+            content,
+            onCreate: () => resolve(editor),
+
+            extensions: CORE_EXTENSIONS.concat(
+                StylePreset.configure({
+                    presetsRef: ref(presets),
+                    defaultId,
+
+                    makeVariable({ device, preset, property }) {
+                        const formattedProperty = property.replace(/_/i, '-');
+
+                        return `--${device}-${preset.id}-${formattedProperty}`;
+                    }
+                }),
+                List.configure({
+                    baseClass: 'zw-list--'
+                }),
+                MockFontSize,
+                MockFontWeight,
+                MockAlignment
+            )
+        });
+    });
+}
+
+const createPreset = (attrs = {}) => ({
+    id: 'regular-1',
+    common: { font_weight: '400' },
+    mobile: { font_size: '12' },
+    tablet: { font_size: '14' },
+    desktop: { font_size: '16' },
+    ...attrs
+});
+
+describe('render preset styles', () => {
+    const getStyleEl = (editor) => editor.storage.style_preset.presetStyleEl;
+
+    test('should render styles', async () => {
+        const editor = await createEditor({
+            content: NodeFactory.doc([]),
+            presets: [createPreset()]
+        });
+
+        expect(getStyleEl(editor).innerHTML).toMatchSnapshot();
+    });
+
+    test('should not create multiple style elements', async () => {
+        const editor1 = await createEditor({
+            content: NodeFactory.doc([]),
+            presets: [createPreset()]
+        });
+
+        const editor2 = await createEditor({
+            content: NodeFactory.doc([]),
+            presets: [createPreset()]
+        });
+
+        expect(getStyleEl(editor1)).toBe(getStyleEl(editor2));
+    });
+
+    test('should render preset class', async () => {
+        const editor = await createEditor({
+            content: NodeFactory.doc([
+                NodeFactory.paragraph({ preset: { id: 'regular-1' } }, 'test')
+            ]),
+            presets: [createPreset({ id: 'regular-1' })]
+        });
+
+        expect(editor.getHTML()).toMatchSnapshot();
+    });
+
+    test('should render node without preset', async () => {
+        const editor = await createEditor({
+            content: NodeFactory.doc([
+                NodeFactory.paragraph({ preset: null }, 'test')
+            ]),
+            presets: [createPreset()]
+        });
+
+        expect(editor.getHTML()).toMatchSnapshot();
+    });
+});
+
+describe('get preset', () => {
+    test('should get preset from selection', async () => {
+        const editor = await createEditor({
+            content: NodeFactory.doc([
+                NodeFactory.paragraph({ preset: { id: 'regular-1' } }, 'test')
+            ]),
+            presets: [createPreset({ id: 'regular-1' })]
+        });
+        const preset = editor.commands.getPreset();
+
+        expect(preset.value).toMatchSnapshot();
+    });
+
+    test('should return null if no preset in selection', async () => {
+        const editor = await createEditor({
+            content: NodeFactory.doc([
+                NodeFactory.paragraph({ preset: null }, 'test')
+            ]),
+            presets: [createPreset()]
+        });
+        const preset = editor.commands.getPreset();
+
+        expect(preset.value).toBeFalsy();
+    });
+});
+
+describe('apply preset', () => {
+    test('should apply preset to text', async () => {
+        const editor = await createEditor({
+            content: NodeFactory.doc([
+                NodeFactory.paragraph({ preset: null }, 'test')
+            ]),
+            presets: [createPreset({ id: 'regular-1' })]
+        });
+
+        editor.chain().selectAll().applyPreset('regular-1').run();
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should apply heading to text', async () => {
+        const editor = await createEditor({
+            content: NodeFactory.doc([
+                NodeFactory.paragraph({ preset: null }, 'test')
+            ]),
+            presets: [
+                createPreset({ id: 'h1', node: { type: 'heading', level: 1 } })
+            ]
+        });
+
+        editor.chain().selectAll().applyPreset('h1').run();
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should change paragraph to heading', async () => {
+        const editor = await createEditor({
+            content: NodeFactory.doc([
+                NodeFactory.paragraph({ preset: { id: 'regular-1' } }, 'test')
+            ]),
+            presets: [
+                createPreset({ id: 'regular-1' }),
+                createPreset({ id: 'h1', node: { type: 'heading', level: 1 } })
+            ]
+        });
+
+        editor.chain().selectAll().applyPreset('h1').run();
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should apply regular to list', async () => {
+        const editor = await createEditor({
+            content: NodeFactory.doc([
+                NodeFactory.list(ListTypes.LATIN, [
+                    NodeFactory.paragraph('Item 1'),
+                    NodeFactory.paragraph('Item 2')
+                ])
+            ]),
+            presets: [createPreset({ id: 'regular-1' })]
+        });
+
+        editor.chain().selectAll().applyPreset('regular-1').run();
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should apply heading to list', async () => {
+        const editor = await createEditor({
+            content: NodeFactory.doc([
+                NodeFactory.list(ListTypes.LATIN, [
+                    NodeFactory.paragraph('Item 1'),
+                    NodeFactory.paragraph('Item 2')
+                ])
+            ]),
+            presets: [
+                createPreset({ id: 'h1', node: { type: 'heading', level: 1 } })
+            ]
+        });
+
+        editor.chain().selectAll().applyPreset('h1').run();
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should apply default preset', async () => {
+        const editor = await createEditor({
+            content: NodeFactory.doc([
+                NodeFactory.paragraph({ preset: null }, 'test')
+            ]),
+            presets: [createPreset({ id: 'regular-1' })],
+            defaultId: 'regular-1'
+        });
+
+        editor.chain().selectAll().applyDefaultPreset().run();
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should keep text attributes on apply', async () => {
+        const editor = await createEditor({
+            content: NodeFactory.doc([
+                NodeFactory.paragraph({
+                    preset: { id: 'regular-1' },
+                    alignment: { value: 'center' }
+                }, 'test')
+            ]),
+            presets: [
+                createPreset({ id: 'regular-1' }),
+                createPreset({ id: 'regular-2' })
+            ]
+        });
+
+        editor.chain().selectAll().applyPreset('regular-2').run();
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+});
+
+describe('get preset customization', () => {
+    test('should return empty customization', async () => {
+        const editor = await createEditor({
+            content: NodeFactory.doc([
+                NodeFactory.paragraph({ preset: { id: 'regular-1' } }, 'test')
+            ]),
+            presets: [createPreset({ id: 'regular-1' })]
+        });
+        const customization = editor.commands.getPresetCustomization();
+
+        expect(customization.value).toMatchSnapshot();
+    });
+
+    test('should find marks', async () => {
+        const editor = await createEditor({
+            content: NodeFactory.doc([
+                NodeFactory.paragraph({ preset: { id: 'regular-1' } }, [
+                    NodeFactory.text('test', [
+                        NodeFactory.mark(TextSettings.FONT_SIZE, { value: '12' }),
+                        NodeFactory.mark(TextSettings.FONT_WEIGHT, { value: '400' })
+                    ])
+                ])
+            ]),
+            presets: [createPreset({ id: 'regular-1' })]
+        });
+
+        editor.commands.selectAll();
+
+        const customization = editor.commands.getPresetCustomization();
+
+        expect(customization.value).toMatchSnapshot();
+    });
+
+    test('should find attributes', async () => {
+        const editor = await createEditor({
+            content: NodeFactory.doc([
+                NodeFactory.paragraph({
+                    preset: { id: 'regular-1' },
+                    alignment: { value: 'center' }
+                }, 'test')
+            ]),
+            presets: [createPreset({ id: 'regular-1' })]
+        });
+
+        editor.commands.selectAll();
+
+        const customization = editor.commands.getPresetCustomization();
+
+        expect(customization.value).toMatchSnapshot();
+    });
+});
+
+describe('remove preset customization', () => {
+    test('should remove all marks in block', async () => {
+        const editor = await createEditor({
+            content: NodeFactory.doc([
+                NodeFactory.paragraph({ preset: { id: 'regular-1' } }, [
+                    NodeFactory.text('test', [
+                        NodeFactory.mark(TextSettings.FONT_SIZE, { value: '12' }),
+                        NodeFactory.mark(TextSettings.FONT_WEIGHT, { value: '400' })
+                    ]),
+                    NodeFactory.text(' test', [
+                        NodeFactory.mark(TextSettings.FONT_SIZE, { value: '12' })
+                    ])
+                ])
+            ]),
+            presets: [createPreset({ id: 'regular-1' })]
+        });
+
+        editor
+            .chain()
+            .setTextSelection({ from: 1, to: 2 })
+            .removePresetCustomization()
+            .run();
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should remove all attributes', async () => {
+        const editor = await createEditor({
+            content: NodeFactory.doc([
+                NodeFactory.heading(1, {
+                    preset: { id: 'regular-1' },
+                    alignment: { value: 'center' }
+                }, 'heading'),
+
+                NodeFactory.paragraph({
+                    preset: { id: 'regular-1' },
+                    alignment: { value: 'center' }
+                }, 'paragraph')
+            ]),
+
+            presets: [createPreset({ id: 'regular-1' })]
+        });
+
+        editor
+            .chain()
+            .setTextSelection({ from: 1, to: 10 })
+            .removePresetCustomization()
+            .run();
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should keep selection', async () => {
+        const editor = await createEditor({
+            content: NodeFactory.doc([
+                NodeFactory.paragraph({ preset: { id: 'regular-1' } }, [
+                    NodeFactory.text('test', [
+                        NodeFactory.mark(TextSettings.FONT_SIZE, { value: '12' }),
+                        NodeFactory.mark(TextSettings.FONT_WEIGHT, { value: '400' })
+                    ]),
+                    NodeFactory.text(' test', [
+                        NodeFactory.mark(TextSettings.FONT_SIZE, { value: '12' })
+                    ])
+                ])
+            ]),
+            presets: [createPreset({ id: 'regular-1' })]
+        });
+
+        editor
+            .chain()
+            .setTextSelection({ from: 1, to: 2 })
+            .removePresetCustomization()
+            .run();
+
+        expect(editor.state.selection).toEqual(
+            expect.objectContaining({ from: 1, to: 2 })
+        );
+    });
+});