@zipify/wysiwyg 1.0.0-dev.1

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

@@ -0,0 +1,171 @@
+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 { Font } from '../../models';
+import { FontFamily } from '../FontFamily';
+import { FontWeight } from '../FontWeight';
+import { FontStyle } from '../FontStyle';
+
+const MockStylePreset = Extension.create({
+    name: 'style_preset',
+
+    addCommands() {
+        return {
+            getPreset: createCommand(() => ref({
+                common: {
+                    font_family: 'Lato',
+                    font_weight: '400'
+                }
+            }))
+        };
+    }
+});
+
+function createEditor({ content }) {
+    return new Editor({
+        content,
+        extensions: CORE_EXTENSIONS.concat(
+            MockStylePreset,
+            FontFamily.configure({
+                fonts: [
+                    new Font({ name: 'Lato', styles: ['400', '700', '700i'] }),
+                    new Font({ name: 'Bungee', styles: ['400'] })
+                ]
+            }),
+            FontWeight,
+            FontStyle
+        )
+    });
+}
+
+const createContent = (text) => NodeFactory.doc([
+    NodeFactory.paragraph([text])
+]);
+
+describe('get font family', () => {
+    test('should get from selection', () => {
+        const editor = createEditor({
+            content: createContent(NodeFactory.text('hello world', [
+                NodeFactory.mark('font_family', { value: 'Bungee' })
+            ]))
+        });
+
+        editor.commands.selectAll();
+
+        expect(editor.commands.getFontFamily().value).toEqual('Bungee');
+    });
+
+    test('should get default font family', () => {
+        const editor = createEditor({
+            content: createContent(NodeFactory.text('hello world'))
+        });
+
+        expect(editor.commands.getDefaultFontFamily().value).toEqual('Lato');
+    });
+
+    test('should get from preset', () => {
+        const editor = createEditor({
+            content: createContent(NodeFactory.text('hello world'))
+        });
+
+        editor.commands.selectAll();
+
+        expect(editor.commands.getFontFamily().value).toEqual('Lato');
+    });
+
+    test('should find font model by name', () => {
+        const editor = createEditor({
+            content: createContent(NodeFactory.text('hello world'))
+        });
+
+        expect(editor.commands.findFontByName('Bungee')).toEqual({ name: 'Bungee', styles: ['400'] });
+    });
+
+    test('should get font model from selection', () => {
+        const editor = createEditor({
+            content: createContent(NodeFactory.text('hello world'))
+        });
+
+        editor.commands.selectAll();
+
+        expect(editor.commands.getFont().value).toEqual(
+            expect.objectContaining({ name: 'Lato' })
+        );
+    });
+});
+
+describe('apply font family', () => {
+    test('should change font family', () => {
+        const editor = createEditor({
+            content: createContent(NodeFactory.text('hello world'))
+        });
+
+        editor.chain().selectAll().applyFontFamily('Bungee').run();
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should not change current font weight if available', () => {
+        const editor = createEditor({
+            content: createContent(NodeFactory.text('hello world', [
+                NodeFactory.mark('font_weight', { value: '700' })
+            ]))
+        });
+
+        editor.chain().selectAll().applyFontFamily('Lato').run();
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should apply closest font weight if current is unavailable', () => {
+        const editor = createEditor({
+            content: createContent(NodeFactory.text('hello world', [
+                NodeFactory.mark('font_weight', { value: '700' })
+            ]))
+        });
+
+        editor.chain().selectAll().applyFontFamily('Bungee').run();
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should not change italic if available', () => {
+        const editor = createEditor({
+            content: createContent(NodeFactory.text('hello world', [
+                NodeFactory.mark('font_weight', { value: '700' }),
+                NodeFactory.mark('font_style', { italic: true })
+            ]))
+        });
+
+        editor.chain().selectAll().applyFontFamily('Lato').run();
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should remove italic if unavailable', () => {
+        const editor = createEditor({
+            content: createContent(NodeFactory.text('hello world', [
+                NodeFactory.mark('font_weight', { value: '700' }),
+                NodeFactory.mark('font_style', { italic: true })
+            ]))
+        });
+
+        editor.chain().selectAll().applyFontFamily('Bungee').run();
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+});
+
+describe('rendering', () => {
+    test('should render html', () => {
+        const editor = createEditor({
+            content: createContent(NodeFactory.text('hello world', [
+                NodeFactory.mark('font_family', { value: 'Bungee' })
+            ]))
+        });
+
+        expect(editor.getHTML()).toMatchSnapshot();
+    });
+});

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

@@ -0,0 +1,183 @@
+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 { FontSize } from '../FontSize';
+import { DeviceManager } from '../DeviceManager';
+
+const MockStylePreset = Extension.create({
+    name: 'style_preset',
+
+    addCommands() {
+        return {
+            getPreset: createCommand(() => ref({
+                mobile: { font_size: '14' },
+                tablet: { font_size: '14' },
+                desktop: { font_size: '14' }
+            }))
+        };
+    }
+});
+
+function createEditor({ content }) {
+    return new Editor({
+        content,
+        extensions: CORE_EXTENSIONS.concat(
+            MockStylePreset,
+            DeviceManager.configure({
+                deviceRef: ref('desktop')
+            }),
+            FontSize.configure({
+                minSize: 5,
+                maxSize: 20
+            })
+        )
+    });
+}
+
+const createContent = (text) => NodeFactory.doc([
+    NodeFactory.paragraph([text])
+]);
+
+describe('get font size', () => {
+    test('should get from selection', () => {
+        const editor = createEditor({
+            content: createContent(NodeFactory.text('hello world'[
+                NodeFactory.mark('font_size', {
+                    mobile: null,
+                    tablet: null,
+                    desktop: '14'
+                })
+            ]))
+        });
+
+        editor.commands.selectAll();
+
+        expect(editor.commands.getFontSize().value).toEqual('14');
+    });
+
+    test('should default value', () => {
+        const editor = createEditor({
+            content: createContent(NodeFactory.text('hello world'))
+        });
+
+        expect(editor.commands.getDefaultFontSize().value).toEqual('14');
+    });
+
+    test('should get from preset', () => {
+        const editor = createEditor({
+            content: createContent(NodeFactory.text('hello world'))
+        });
+
+        editor.commands.selectAll();
+
+        expect(editor.commands.getFontSize().value).toEqual('14');
+    });
+});
+
+describe('apply font size', () => {
+    test('should change font size', () => {
+        const editor = createEditor({
+            content: createContent(NodeFactory.text('hello world'))
+        });
+
+        editor.chain().selectAll().applyFontSize('16').run();
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should increase font size', () => {
+        const editor = createEditor({
+            content: createContent(NodeFactory.text('hello world', [
+                NodeFactory.mark('font_size', {
+                    mobile: null,
+                    tablet: null,
+                    desktop: '14'
+                })
+            ]))
+        });
+
+        editor.chain().selectAll().increaseFontSize().run();
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should not increase font size if reached limit', () => {
+        const editor = createEditor({
+            content: createContent(NodeFactory.text('hello world', [
+                NodeFactory.mark('font_size', {
+                    mobile: null,
+                    tablet: null,
+                    desktop: '20'
+                })
+            ]))
+        });
+
+        editor.chain().selectAll().increaseFontSize().run();
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should decrease font size', () => {
+        const editor = createEditor({
+            content: createContent(NodeFactory.text('hello world', [
+                NodeFactory.mark('font_size', {
+                    mobile: null,
+                    tablet: null,
+                    desktop: '14'
+                })
+            ]))
+        });
+
+        editor.chain().selectAll().decreaseFontSize().run();
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should not decrease font size if reached limit', () => {
+        const editor = createEditor({
+            content: createContent(NodeFactory.text('hello world', [
+                NodeFactory.mark('font_size', {
+                    mobile: null,
+                    tablet: null,
+                    desktop: '5'
+                })
+            ]))
+        });
+
+        editor.chain().selectAll().decreaseFontSize().run();
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+});
+
+describe('rendering', () => {
+    test('should render only desktop', () => {
+        const editor = createEditor({
+            content: createContent(NodeFactory.text('hello world', [
+                NodeFactory.mark('font_size', {
+                    mobile: null,
+                    tablet: null,
+                    desktop: '14'
+                })
+            ]))
+        });
+
+        expect(editor.getHTML()).toMatchSnapshot();
+    });
+
+    test('should render all devices', () => {
+        const editor = createEditor({
+            content: createContent(NodeFactory.text('hello world', [
+                NodeFactory.mark('font_size', {
+                    mobile: '12',
+                    tablet: '14',
+                    desktop: '16'
+                })
+            ]))
+        });
+
+        expect(editor.getHTML()).toMatchSnapshot();
+    });
+});

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

@@ -0,0 +1,136 @@
+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 { FontStyle } from '../FontStyle';
+import { FontFamily } from '../FontFamily';
+import { Font } from '../../models';
+import { FontWeight } from '../FontWeight';
+
+const MockStylePreset = Extension.create({
+    name: 'style_preset',
+
+    addCommands() {
+        return {
+            getPreset: createCommand(() => ref({
+                common: {
+                    font_style: 'normal',
+                    font_family: 'Lato',
+                    font_weight: '400'
+                }
+            }))
+        };
+    }
+});
+
+function createEditor({ content }) {
+    return new Editor({
+        content,
+        extensions: CORE_EXTENSIONS.concat(
+            MockStylePreset,
+            FontStyle,
+            FontWeight,
+            FontFamily.configure({
+                fonts: [
+                    new Font({ name: 'Lato', styles: ['400', '400i'] }),
+                    new Font({ name: 'Bungee', styles: ['400'] })
+                ]
+            })
+        )
+    });
+}
+
+const createContent = (text) => NodeFactory.doc([
+    NodeFactory.paragraph([text])
+]);
+
+describe('get font style', () => {
+    test('should get italic from selection', () => {
+        const editor = createEditor({
+            content: createContent(NodeFactory.text('hello world', [
+                NodeFactory.mark('font_style', { italic: true })
+            ]))
+        });
+
+        editor.commands.selectAll();
+
+        expect(editor.commands.isItalic().value).toBe(true);
+    });
+
+    test('should get default font style', () => {
+        const editor = createEditor({
+            content: createContent(NodeFactory.text('hello world'))
+        });
+
+        expect(editor.commands.getDefaultFontStyle().value).toEqual({ italic: false });
+    });
+
+    test('should italic get from preset', () => {
+        const editor = createEditor({
+            content: createContent(NodeFactory.text('hello world'))
+        });
+
+        editor.commands.selectAll();
+
+        expect(editor.commands.isItalic().value).toBe(false);
+    });
+});
+
+describe('apply font style', () => {
+    test('should make italic', () => {
+        const editor = createEditor({
+            content: createContent(NodeFactory.text('hello world'))
+        });
+
+        editor.chain().selectAll().applyItalic().run();
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should remove italic', () => {
+        const editor = createEditor({
+            content: createContent(NodeFactory.text('hello world', [
+                NodeFactory.mark('font_style', { italic: true })
+            ]))
+        });
+
+        editor.chain().selectAll().removeItalic().run();
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should toggle italic to removed', () => {
+        const editor = createEditor({
+            content: createContent(NodeFactory.text('hello world', [
+                NodeFactory.mark('font_style', { italic: true })
+            ]))
+        });
+
+        editor.chain().selectAll().toggleItalic().run();
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should toggle italic to used', () => {
+        const editor = createEditor({
+            content: createContent(NodeFactory.text('hello world'))
+        });
+
+        editor.chain().selectAll().toggleItalic().run();
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+});
+
+describe('rendering', () => {
+    test('should render html', () => {
+        const editor = createEditor({
+            content: createContent(NodeFactory.text('hello world', [
+                NodeFactory.mark('font_style', { italic: true })
+            ]))
+        });
+
+        expect(editor.getHTML()).toMatchSnapshot();
+    });
+});

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

@@ -0,0 +1,151 @@
+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 { Font } from '../../models';
+import { FontWeight } from '../FontWeight';
+import { FontFamily } from '../FontFamily';
+import { FontStyle } from '../FontStyle';
+
+const MockStylePreset = Extension.create({
+    name: 'style_preset',
+
+    addCommands() {
+        return {
+            getPreset: createCommand(() => ref({
+                common: {
+                    font_weight: '400',
+                    font_family: 'Lato'
+                }
+            }))
+        };
+    }
+});
+
+function createEditor({ content }) {
+    return new Editor({
+        content,
+        extensions: CORE_EXTENSIONS.concat(
+            MockStylePreset,
+            FontFamily.configure({
+                fonts: [
+                    new Font({ name: 'Lato', styles: ['400', '700'] }),
+                    new Font({ name: 'Bungee', styles: ['300', '800'] })
+                ]
+            }),
+            FontWeight,
+            FontStyle
+        )
+    });
+}
+
+const createContent = (text) => NodeFactory.doc([
+    NodeFactory.paragraph([text])
+]);
+
+describe('get font weight', () => {
+    test('should get from selection', () => {
+        const editor = createEditor({
+            content: createContent(NodeFactory.text('hello world', [
+                NodeFactory.mark('font_weight', { value: '700' })
+            ]))
+        });
+
+        editor.commands.selectAll();
+
+        expect(editor.commands.getFontWeight().value).toEqual('700');
+    });
+
+    test('should default value', () => {
+        const editor = createEditor({
+            content: createContent(NodeFactory.text('hello world'))
+        });
+
+        expect(editor.commands.getDefaultFontWeight().value).toEqual('400');
+    });
+
+    test('should get from preset', () => {
+        const editor = createEditor({
+            content: createContent(NodeFactory.text('hello world'))
+        });
+
+        editor.commands.selectAll();
+
+        expect(editor.commands.getFontWeight().value).toEqual('400');
+    });
+});
+
+describe('apply font weight', () => {
+    test('should change font weight', () => {
+        const editor = createEditor({
+            content: createContent(NodeFactory.text('hello world'))
+        });
+
+        editor.chain().selectAll().applyFontWeight('700').run();
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should toggle weight to bold', () => {
+        const editor = createEditor({
+            content: createContent(NodeFactory.text('hello world', [
+                NodeFactory.mark('font_weight', { value: '400' })
+            ]))
+        });
+
+        editor.chain().selectAll().toggleBold().run();
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should toggle weight to closest bold', () => {
+        const editor = createEditor({
+            content: createContent(NodeFactory.text('hello world', [
+                NodeFactory.mark('font_family', { value: 'Bungee' }),
+                NodeFactory.mark('font_weight', { value: '400' })
+            ]))
+        });
+
+        editor.chain().selectAll().toggleBold().run();
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should toggle weight to medium', () => {
+        const editor = createEditor({
+            content: createContent(NodeFactory.text('hello world', [
+                NodeFactory.mark('font_weight', { value: '700' })
+            ]))
+        });
+
+        editor.chain().selectAll().toggleBold().run();
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should toggle weight to closest medium', () => {
+        const editor = createEditor({
+            content: createContent(NodeFactory.text('hello world', [
+                NodeFactory.mark('font_family', { value: 'Bungee' }),
+                NodeFactory.mark('font_weight', { value: '800' })
+            ]))
+        });
+
+        editor.chain().selectAll().toggleBold().run();
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+});
+
+describe('rendering', () => {
+    test('should render html', () => {
+        const editor = createEditor({
+            content: createContent(NodeFactory.text('hello world', [
+                NodeFactory.mark('font_weight', { value: '700' })
+            ]))
+        });
+
+        expect(editor.getHTML()).toMatchSnapshot();
+    });
+});