@zipify/wysiwyg 1.0.0-dev.1

package/lib/components/toolbar/controls/__tests__/StylePresetControl.test.js

@@ -0,0 +1,129 @@
+import { shallowMount } from '@vue/test-utils';
+import { ref } from '@vue/composition-api';
+import { InjectionTokens } from '../../../../injectionTokens';
+import { Button, Dropdown } from '../../../base';
+import StylePresetControl from '../StylePresetControl';
+
+const createEditor = ({ presets, preset, customization } = {}) => ({
+    commands: {
+        focus: jest.fn().mockReturnThis(),
+        getPresetList: () => ref(presets || []),
+        getPreset: () => ref(preset || { id: 'regular' }),
+        getPresetCustomization: () => ref(customization || { attributes: [], marks: [] }),
+        applyPreset: jest.fn().mockReturnThis(),
+        removePresetCustomization: jest.fn().mockReturnThis(),
+        run: jest.fn()
+    },
+
+    chain() {
+        return this.commands;
+    }
+});
+
+function createComponent({ editor }) {
+    return shallowMount(StylePresetControl, {
+        provide: { [InjectionTokens.EDITOR]: editor }
+    });
+}
+
+describe('rendering', () => {
+    test('should render dropdown options', () => {
+        const editor = createEditor({
+            presets: [
+                { id: 'h1', name: 'H1' },
+                { id: 'regular-1', name: 'Regular 1' }
+            ]
+        });
+        const wrapper = createComponent({ editor });
+        const dropdownWrapper = wrapper.findComponent(Dropdown);
+
+        expect(dropdownWrapper.props('options')).toEqual([
+            { id: 'h1', title: 'H1' },
+            { id: 'regular-1', title: 'Regular 1' }
+        ]);
+    });
+
+    test('should render preset from selection', () => {
+        const editor = createEditor({
+            presets: [{ id: 'regular-1', name: 'Regular 1' }],
+            preset: { id: 'regular-1' }
+        });
+        const wrapper = createComponent({ editor });
+        const dropdownWrapper = wrapper.findComponent(Dropdown);
+
+        expect(dropdownWrapper.props('value')).toBe('regular-1');
+    });
+
+    test('should disable reset if no customization', () => {
+        const editor = createEditor({
+            customization: { marks: [], attributes: [] }
+        });
+        const wrapper = createComponent({ editor });
+        const buttonWrapper = wrapper.findComponent(Button);
+
+        expect(buttonWrapper.props('disabled')).toBe(true);
+    });
+
+    test('should enable reset if marks customized', () => {
+        const editor = createEditor({
+            customization: {
+                marks: ['font_size'],
+                attributes: []
+            }
+        });
+        const wrapper = createComponent({ editor });
+        const buttonWrapper = wrapper.findComponent(Button);
+
+        expect(buttonWrapper.props('disabled')).toBe(false);
+    });
+
+    test('should enable reset if attributes customized', () => {
+        const editor = createEditor({
+            customization: {
+                marks: [],
+                attributes: ['alignment']
+            }
+        });
+        const wrapper = createComponent({ editor });
+        const buttonWrapper = wrapper.findComponent(Button);
+
+        expect(buttonWrapper.props('disabled')).toBe(false);
+    });
+
+    test('should enable reset if attributes and marks customized', () => {
+        const editor = createEditor({
+            customization: {
+                marks: ['font_size'],
+                attributes: ['alignment']
+            }
+        });
+        const wrapper = createComponent({ editor });
+        const buttonWrapper = wrapper.findComponent(Button);
+
+        expect(buttonWrapper.props('disabled')).toBe(false);
+    });
+});
+
+describe('apply preset', () => {
+    test('should apply preset to text', () => {
+        const editor = createEditor();
+        const wrapper = createComponent({ editor });
+        const dropdownWrapper = wrapper.findComponent(Dropdown);
+
+        dropdownWrapper.vm.$emit('change', 'regular-1');
+
+        expect(editor.commands.applyPreset).toHaveBeenCalledWith('regular-1');
+    });
+});
+
+describe('remove customization', () => {
+    test('should remove preset customization text', () => {
+        const editor = createEditor();
+        const wrapper = createComponent({ editor });
+        const buttonWrapper = wrapper.findComponent(Button);
+
+        buttonWrapper.vm.$emit('click');
+
+        expect(editor.commands.removePresetCustomization).toHaveBeenCalled();
+    });
+});

package/lib/components/toolbar/controls/__tests__/SuperscriptControl.test.js

@@ -0,0 +1,44 @@
+import { shallowMount } from '@vue/test-utils';
+import { InjectionTokens } from '../../../../injectionTokens';
+import { Button } from '../../../base';
+import SuperscriptControl from '../SuperscriptControl';
+
+const createEditor = ({ isSuperscript } = {}) => ({
+    isActive: () => isSuperscript,
+
+    commands: {
+        focus: jest.fn().mockReturnThis(),
+        toggleSuperscript: jest.fn().mockReturnThis(),
+        run: jest.fn()
+    },
+
+    chain() {
+        return this.commands;
+    }
+});
+
+function createComponent({ editor }) {
+    return shallowMount(SuperscriptControl, {
+        provide: { [InjectionTokens.EDITOR]: editor }
+    });
+}
+
+describe('selection value', () => {
+    test('should render value from selection', () => {
+        const editor = createEditor({ isSuperscript: true });
+        const wrapper = createComponent({ editor });
+        const buttonWrapper = wrapper.findComponent(Button);
+
+        expect(buttonWrapper.props('active')).toBe(true);
+    });
+
+    test('should apply new value', () => {
+        const editor = createEditor({ isSuperscript: false });
+        const wrapper = createComponent({ editor });
+        const buttonWrapper = wrapper.findComponent(Button);
+
+        buttonWrapper.vm.$emit('click');
+
+        expect(editor.commands.toggleSuperscript).toHaveBeenCalled();
+    });
+});

package/lib/components/toolbar/controls/__tests__/UnderlineControl.test.js

@@ -0,0 +1,44 @@
+import { shallowMount } from '@vue/test-utils';
+import { ref } from '@vue/composition-api';
+import { InjectionTokens } from '../../../../injectionTokens';
+import { Button } from '../../../base';
+import UnderlineControl from '../UnderlineControl';
+
+const createEditor = ({ isUnderline } = {}) => ({
+    commands: {
+        isUnderline: () => ref(isUnderline),
+        focus: jest.fn().mockReturnThis(),
+        toggleUnderline: jest.fn().mockReturnThis(),
+        run: jest.fn()
+    },
+
+    chain() {
+        return this.commands;
+    }
+});
+
+function createComponent({ editor }) {
+    return shallowMount(UnderlineControl, {
+        provide: { [InjectionTokens.EDITOR]: editor }
+    });
+}
+
+describe('selection value', () => {
+    test('should render value from selection', () => {
+        const editor = createEditor({ isUnderline: true });
+        const wrapper = createComponent({ editor });
+        const buttonWrapper = wrapper.findComponent(Button);
+
+        expect(buttonWrapper.props('active')).toBe(true);
+    });
+
+    test('should apply new value', () => {
+        const editor = createEditor({ isUnderline: false });
+        const wrapper = createComponent({ editor });
+        const buttonWrapper = wrapper.findComponent(Button);
+
+        buttonWrapper.vm.$emit('click');
+
+        expect(editor.commands.toggleUnderline).toHaveBeenCalled();
+    });
+});

package/lib/components/toolbar/controls/composables/__tests__/useRecentFonts.test.js

@@ -0,0 +1,69 @@
+import { withComponentContext } from '../../../../../__tests__/utils';
+import { InjectionTokens } from '../../../../../injectionTokens';
+import { useRecentFonts } from '../useRecentFonts';
+
+const createStorage = (initialData = {}) => ({
+    data: initialData,
+
+    getItem(name) {
+        return this.data[name];
+    },
+
+    setItem(name, value) {
+        this.data[name] = value;
+    }
+});
+
+function createWrapper({ initial } = {}) {
+    return withComponentContext(() => {
+        return useRecentFonts({ limit: 3 });
+    }, {
+        provide: {
+            [InjectionTokens.LOCAL_STORAGE]: createStorage({
+                'wswg.recently_used_fonts': initial
+            })
+        }
+    });
+}
+
+describe('list of fonts', () => {
+    test('should get empty', () => {
+        const recentFonts = createWrapper();
+
+        expect(recentFonts.fonts.value).toEqual([]);
+    });
+
+    test('should get initial fonts', () => {
+        const recentFonts = createWrapper({ initial: ['Lato', 'Roboto'] });
+
+        expect(recentFonts.fonts.value).toEqual(['Lato', 'Roboto']);
+    });
+
+    test('should add font', () => {
+        const recentFonts = createWrapper();
+
+        recentFonts.add('Lato');
+
+        expect(recentFonts.fonts.value).toEqual(['Lato']);
+    });
+
+    test('should move up font in list', () => {
+        const recentFonts = createWrapper({
+            initial: ['Roboto', 'Source Sans', 'Lato']
+        });
+
+        recentFonts.add('Lato');
+
+        expect(recentFonts.fonts.value).toEqual(['Lato', 'Roboto', 'Source Sans']);
+    });
+
+    test('should move up font in list', () => {
+        const recentFonts = createWrapper({
+            initial: ['Roboto', 'Source Sans', 'Times New Roman']
+        });
+
+        recentFonts.add('Lato');
+
+        expect(recentFonts.fonts.value).toEqual(['Lato', 'Roboto', 'Source Sans']);
+    });
+});

package/lib/components/toolbar/controls/composables/index.js

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

package/lib/components/toolbar/controls/composables/useRecentFonts.js

@@ -0,0 +1,18 @@
+import { computed, inject, ref } from '@vue/composition-api';
+import { InjectionTokens } from '../../../../injectionTokens';
+
+const STORAGE_KEY = 'wswg.recently_used_fonts';
+
+export function useRecentFonts({ limit }) {
+    const localStorage = inject(InjectionTokens.LOCAL_STORAGE);
+    const fonts = ref(localStorage.getItem(STORAGE_KEY) || []);
+
+    function add(font) {
+        fonts.value = Array.from(new Set([font, ...fonts.value])).slice(0, limit);
+        localStorage.setItem(STORAGE_KEY, fonts.value);
+    }
+
+    const isEmpty = computed(() => !fonts.value.length);
+
+    return { fonts, isEmpty, add };
+}

package/lib/components/toolbar/controls/index.js

@@ -0,0 +1,16 @@
+export { default as StylePresetControl } from './StylePresetControl';
+export { default as FontFamilyControl } from './FontFamilyControl';
+export { default as FontWeightControl } from './FontWeightControl';
+export { default as FontSizeControl } from './FontSizeControl';
+export { default as FontColorControl } from './FontColorControl';
+export { default as BackgroundColorControl } from './BackgroundColorControl';
+export { default as ItalicControl } from './ItalicControl';
+export { default as UnderlineControl } from './UnderlineControl';
+export { default as StrikeThroughControl } from './StrikeThroughControl';
+export { default as SuperscriptControl } from './SuperscriptControl';
+export { default as CaseStyleControl } from './CaseStyleControl';
+export { default as AlignmentControl } from './AlignmentControl';
+export { default as AlignmentDeviceControl } from './AlignmentDeviceControl';
+export { default as LineHeightControl } from './LineHeightControl';
+export { default as ListControl } from './ListControl';
+export { default as RemoveFormatControl } from './RemoveFormatControl';

package/lib/components/toolbar/index.js

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

package/lib/composables/__tests__/__snapshots__/useEditor.test.js.snap

@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`life cycle should emit changes 1`] = `
+Array [
+  Array [
+    Object {
+      "content": Array [
+        Object {
+          "content": Array [
+            Object {
+              "text": "updated",
+              "type": "text",
+            },
+          ],
+          "type": "paragraph",
+        },
+      ],
+      "type": "doc",
+    },
+  ],
+]
+`;
+
+exports[`life cycle should mount editor 1`] = `"<p class=\\"zw-style\\">test</p>"`;

package/lib/composables/__tests__/useEditor.test.js

@@ -0,0 +1,67 @@
+import { h, toRef } from '@vue/composition-api';
+import { EditorContent } from '@tiptap/vue-2';
+import { shallowMount } from '@vue/test-utils';
+import { CORE_EXTENSIONS } from '../../extensions';
+import { useEditor } from '../useEditor';
+import { NodeFactory } from '../../__tests__/utils';
+
+const TestComponent = {
+    name: 'Test',
+    render() {
+        return h(EditorContent, {
+            props: { editor: this.editor }
+        });
+    },
+    props: ['value'],
+
+    setup(props, { emit }) {
+        const editor = useEditor({
+            content: toRef(props, 'value'),
+            extensions: CORE_EXTENSIONS,
+            onChange: (content) => {
+                emit('input', content);
+            }
+        });
+
+        return { editor };
+    }
+};
+
+const createContent = (text = 'test') => NodeFactory.doc([
+    NodeFactory.paragraph(text)
+]);
+
+function createComponent({ content } = {}) {
+    const wrapper = shallowMount(TestComponent, {
+        propsData: { value: content || createContent('test') }
+    });
+
+    return {
+        wrapper,
+        editor: wrapper.vm.editor
+    };
+}
+
+describe('life cycle', () => {
+    test('should mount editor', () => {
+        const { editor } = createComponent();
+
+        expect(editor.getHTML()).toMatchSnapshot();
+    });
+
+    test('should emit changes', () => {
+        const { wrapper, editor } = createComponent();
+
+        editor.commands.setContent('<p>updated</p>', true);
+
+        expect(wrapper.emitted('input')).toMatchSnapshot();
+    });
+
+    test('should destroy editor', () => {
+        const { wrapper, editor } = createComponent();
+
+        wrapper.destroy();
+
+        expect(editor.isDestroyed).toBe(true);
+    });
+});

package/lib/composables/__tests__/useToolbar.test.js

@@ -0,0 +1,56 @@
+import { createPopper } from '@popperjs/core';
+import { ref, nextTick } from '@vue/composition-api';
+import { withComponentContext } from '../../__tests__/utils';
+import { useToolbar } from '../useToolbar';
+import { useElementRef } from '../../components/base/composables';
+
+jest.mock('@popperjs/core', () => ({
+    createPopper: jest.fn(() => ({
+        update: jest.fn()
+    }))
+}));
+
+function createWrapper() {
+    const el = document.createElement('div');
+    const elementRef = useElementRef(ref(el));
+
+    return withComponentContext(() => {
+        return useToolbar({
+            wrapperRef: elementRef,
+            popperRef: elementRef
+        });
+    });
+}
+
+describe('manage opened state', () => {
+    test('should show toolbar', () => {
+        const toolbarComponent = createWrapper();
+
+        toolbarComponent.show();
+
+        expect(toolbarComponent.isShow.value).toBe(true);
+    });
+
+    test('should hide toolbar', () => {
+        const toolbarComponent = createWrapper();
+
+        toolbarComponent.show();
+        toolbarComponent.hide();
+
+        expect(toolbarComponent.isShow.value).toBe(false);
+    });
+
+    test('should update toolbar on open', async () => {
+        const popper = { update: jest.fn() };
+
+        createPopper.mockReturnValueOnce(popper);
+
+        const toolbarComponent = createWrapper();
+
+        await nextTick();
+
+        toolbarComponent.show();
+
+        expect(popper.update).toHaveBeenCalled();
+    });
+});

package/lib/composables/index.js

@@ -0,0 +1,2 @@
+export { useEditor } from './useEditor';
+export { useToolbar } from './useToolbar';

package/lib/composables/useEditor.js

@@ -0,0 +1,21 @@
+import { Editor } from '@tiptap/vue-2';
+import { onUnmounted, watch } from '@vue/composition-api';
+
+export function useEditor({ content, onChange, onFocus, extensions }) {
+    const editor = new Editor({
+        content: content.value,
+        onUpdate: () => onChange(editor.getJSON()),
+        onFocus: () => onFocus(),
+        extensions
+    });
+
+    onUnmounted(() => editor.destroy());
+
+    watch(content, (value) => {
+        const isChanged = JSON.stringify(editor.getJSON()) !== JSON.stringify(value);
+
+        if (isChanged) editor.commands.setContent(value, false);
+    });
+
+    return editor;
+}

package/lib/composables/useToolbar.js

@@ -0,0 +1,44 @@
+import { createPopper } from '@popperjs/core';
+import { onUnmounted, onMounted, ref } from '@vue/composition-api';
+import { useElementRef } from '../components/base/composables';
+
+export function useToolbar({ wrapperRef, popperRef, offsets }) {
+    let toolbar;
+    const isShow = ref(false);
+
+    onMounted(() => {
+        const wrapperEl = useElementRef(wrapperRef).value;
+        const toolbarEl = useElementRef(popperRef).value;
+
+        toolbar = createPopper(wrapperEl, toolbarEl, {
+            placement: 'top-start',
+            modifiers: [
+                {
+                    name: 'offset',
+                    options: {
+                        offset: offsets
+                    }
+                }
+            ]
+        });
+    });
+
+    onUnmounted(() => {
+        toolbar.destroy();
+    });
+
+    function hide() {
+        isShow.value = false;
+    }
+
+    function show() {
+        isShow.value = true;
+        this.update();
+    }
+
+    function update() {
+        toolbar.update();
+    }
+
+    return { toolbar, show, hide, update, isShow };
+}

package/lib/directives/__tests__/outClick.test.js

@@ -0,0 +1,86 @@
+import { waitAsyncOperation } from '../../__tests__/utils';
+import { outClick } from '../outClick';
+
+describe('out click', () => {
+    test('should trigger on out click', async () => {
+        const el = document.createElement('div');
+        const onOutClick = jest.fn();
+
+        outClick.bind(el, { value: onOutClick });
+        await waitAsyncOperation();
+
+        document.dispatchEvent(new Event('click'));
+
+        expect(onOutClick).toHaveBeenCalled();
+    });
+
+    test('should not trigger on element click', async () => {
+        const el = document.createElement('div');
+        const onOutClick = jest.fn();
+
+        outClick.bind(el, { value: onOutClick });
+        await waitAsyncOperation();
+
+        el.dispatchEvent(new Event('click'));
+
+        expect(onOutClick).not.toHaveBeenCalled();
+    });
+
+    test('should not trigger on child element click', async () => {
+        const el = document.createElement('div');
+        const child = document.createElement('div');
+        const onOutClick = jest.fn();
+
+        el.append(child);
+        outClick.bind(el, { value: onOutClick });
+        await waitAsyncOperation();
+
+        child.dispatchEvent(new Event('click'));
+
+        expect(onOutClick).not.toHaveBeenCalled();
+    });
+
+    test('should remove out click listener', async () => {
+        const el = document.createElement('div');
+        const onOutClick = jest.fn();
+
+        outClick.bind(el, { value: onOutClick });
+        await waitAsyncOperation();
+
+        outClick.unbind(el);
+
+        document.dispatchEvent(new Event('click'));
+
+        expect(onOutClick).not.toHaveBeenCalled();
+    });
+
+    test('should add listener on update', async () => {
+        const el = document.createElement('div');
+        const onOutClick = jest.fn();
+
+        outClick.bind(el, { value: { onOutClick, isDisabled: true } });
+        await waitAsyncOperation();
+
+        outClick.update(el, { value: { isDisabled: false } });
+        await waitAsyncOperation();
+
+        document.dispatchEvent(new Event('click'));
+
+        expect(onOutClick).toHaveBeenCalled();
+    });
+
+    test('should remove listener on update', async () => {
+        const el = document.createElement('div');
+        const onOutClick = jest.fn();
+
+        outClick.bind(el, { value: { onOutClick, isDisabled: false } });
+        await waitAsyncOperation();
+
+        outClick.update(el, { value: { isDisabled: true } });
+        await waitAsyncOperation();
+
+        document.dispatchEvent(new Event('click'));
+
+        expect(onOutClick).not.toHaveBeenCalled();
+    });
+});

package/lib/directives/__tests__/tooltip.test.js

@@ -0,0 +1,39 @@
+import { tooltip } from '../tooltip';
+
+describe('rendering', () => {
+    test('should render text only tooltip', () => {
+        const el = document.createElement('div');
+
+        tooltip(el, { value: 'Test' });
+
+        expect(el.dataset.tooltip).toBe('Test');
+    });
+
+    test('should render text only in object mode', () => {
+        const el = document.createElement('div');
+
+        tooltip(el, {
+            value: { text: 'Test' }
+        });
+
+        expect(el.dataset.tooltip).toBe('Test');
+    });
+
+    test('should render with hotkey', () => {
+        const el = document.createElement('div');
+
+        tooltip(el, {
+            value: { text: 'Test', hotkey: 'Mod B' }
+        });
+
+        expect(el.dataset.tooltipHotkey).toBe('Mod B');
+    });
+
+    test('should not render tooltip if no value passed', () => {
+        const el = document.createElement('div');
+
+        tooltip(el, { value: '' });
+
+        expect(el.dataset).not.toHaveProperty('tooltip');
+    });
+});

package/lib/directives/index.js

@@ -0,0 +1,2 @@
+export { outClick } from './outClick';
+export { tooltip } from './tooltip';