@zipify/wysiwyg 1.0.0-dev.6 → 1.0.0-dev.62

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

@@ -1,8 +1,9 @@
 import { shallowMount } from '@vue/test-utils';
-import { ref } from '@vue/composition-api';
+import { ref } from 'vue';
 import { InjectionTokens } from '../../../../injectionTokens';
 import { Button, Dropdown } from '../../../base';
 import StylePresetControl from '../StylePresetControl';
+import { TextSettings } from '../../../../enums';
 
 const createEditor = ({ presets, preset, customization } = {}) => ({
     commands: {
@@ -12,6 +13,10 @@ const createEditor = ({ presets, preset, customization } = {}) => ({
         getPresetCustomization: () => ref(customization || { attributes: [], marks: [] }),
         applyPreset: jest.fn().mockReturnThis(),
         removePresetCustomization: jest.fn().mockReturnThis(),
+        storeSelection: jest.fn().mockReturnThis(),
+        restoreSelection: jest.fn().mockReturnThis(),
+        expandSelectionToBlock: jest.fn().mockReturnThis(),
+        unsetMarks: jest.fn().mockReturnThis(),
         run: jest.fn()
     },
 
@@ -114,6 +119,17 @@ describe('apply preset', () => {
 
         expect(editor.commands.applyPreset).toHaveBeenCalledWith('regular-1');
     });
+
+    test('should remove settings on preset change', () => {
+        const editor = createEditor();
+        const wrapper = createComponent({ editor });
+        const dropdownWrapper = wrapper.findComponent(Dropdown);
+
+        dropdownWrapper.vm.$emit('change', 'regular-1');
+
+        expect(editor.commands.expandSelectionToBlock).toHaveBeenCalled();
+        expect(editor.commands.unsetMarks).toHaveBeenCalledWith([TextSettings.FONT_SIZE, TextSettings.FONT_WEIGHT]);
+    });
 });
 
 describe('remove customization', () => {

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

@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { ref } from '@vue/composition-api';
+import { ref } from 'vue';
 import { InjectionTokens } from '../../../../injectionTokens';
 import { Button } from '../../../base';
 import UnderlineControl from '../UnderlineControl';
@@ -12,6 +12,10 @@ const createEditor = ({ isUnderline } = {}) => ({
         run: jest.fn()
     },
 
+    isActive() {
+        return false;
+    },
+
     chain() {
         return this.commands;
     }

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

@@ -1,4 +1,4 @@
-import { computed, inject, ref } from '@vue/composition-api';
+import { computed, inject, ref } from 'vue';
 import { InjectionTokens } from '../../../../injectionTokens';
 
 const STORAGE_KEY = 'wswg.recently_used_fonts';

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

@@ -14,3 +14,4 @@ export { default as AlignmentDeviceControl } from './AlignmentDeviceControl';
 export { default as LineHeightControl } from './LineHeightControl';
 export { default as ListControl } from './ListControl';
 export { default as RemoveFormatControl } from './RemoveFormatControl';
+export { LinkControl } from './link';

package/lib/components/toolbar/controls/link/LinkControl.vue

@@ -0,0 +1,155 @@
+<template>
+    <div class="zw-position--relative" ref="wrapperRef">
+        <Button icon skin="toolbar" :active="isActive" @click="toggler.open" v-tooltip="'Link'">
+            <Icon name="link" size="28px" auto-color />
+        </Button>
+
+        <Modal class="zw-link-modal" :toggler="toggler" ref="modalRef">
+            <LinkControlHeader @remove-link="removeLink" />
+
+            <div class="zw-link-modal__body">
+                <TextField
+                    class="zw-margin-bottom--sm"
+                    :value="link.linkData.value.text"
+                    label="Text to display"
+                    placeholder="Type Text"
+                    :error="nameValidator.error.value"
+                    @input="updateLinkText"
+                />
+
+                <LinkControlDestination
+                    class="zw-margin-bottom--md"
+                    :link="link"
+                    :validator="urlValidator"
+                    @reset-errors="resetErrors"
+                />
+
+                <LinkControlApply @cancel="toggler.close" @apply="applyLink" />
+            </div>
+        </Modal>
+    </div>
+</template>
+
+<script>
+import { computed, ref, inject } from 'vue';
+import { InjectionTokens } from '../../../../injectionTokens';
+import { tooltip } from '../../../../directives';
+import { useValidator } from '../../../base/composables';
+import { Button, Icon, Modal, TextField, useModalToggler } from '../../../base';
+import LinkControlHeader from './LinkControlHeader';
+import LinkControlApply from './LinkControlApply';
+import { useLink } from './composables';
+import { LinkControlDestination } from './destination';
+
+export default {
+    name: 'LinkControl',
+
+    components: {
+        LinkControlDestination,
+        LinkControlApply,
+        LinkControlHeader,
+        TextField,
+        Modal,
+        Icon,
+        Button
+    },
+
+    directives: {
+        tooltip
+    },
+
+    setup() {
+        const wrapperRef = ref(null);
+        const modalRef = ref(null);
+
+        const editor = inject(InjectionTokens.EDITOR);
+
+        const link = useLink();
+        const urlRegExp = /(^(https?:\/\/|\/)(?:www\.|(?!www))?[^\s])/;
+
+        const isEmpty = () => {
+            return link.linkData.value.text ? false : 'Can\'t be empty';
+        };
+        const isUrl = () => {
+            if (link.currentDestination.value.id !== 'url') return false;
+
+            return urlRegExp.test(link.destinationHrefs.value.url) ? false : 'Please enter a valid URL';
+        };
+
+        const nameValidator = useValidator({
+            validations: [isEmpty]
+        });
+
+        const urlValidator = useValidator({
+            validations: [isUrl]
+        });
+
+        const resetErrors = () => {
+            nameValidator.reset();
+            urlValidator.reset();
+        };
+
+        const onBeforeOpened = () => {
+            editor.commands.extendMarkRange('link');
+            resetErrors();
+            link.prepareInitialFields();
+        };
+
+        const toggler = useModalToggler({
+            onBeforeOpened: () => onBeforeOpened(),
+            wrapperRef,
+            modalRef
+        });
+
+        const isActive = computed(() => toggler.isOpened.value || editor.isActive('link'));
+
+        const updateLinkText = (value) => {
+            resetErrors();
+            link.updateText(value);
+        };
+
+        const applyLink = () => {
+            urlValidator.validate();
+            nameValidator.validate();
+
+            if (urlValidator.error.value || nameValidator.error.value) return;
+
+            link.apply();
+            toggler.close();
+        };
+
+        const removeLink = () => {
+            link.removeLink();
+            toggler.close();
+        };
+
+        return {
+            wrapperRef,
+            modalRef,
+            link,
+            toggler,
+            isActive,
+            nameValidator,
+            urlValidator,
+            updateLinkText,
+            resetErrors,
+            applyLink,
+            removeLink
+        };
+    }
+};
+</script>
+
+<style scoped>
+.zw-link-modal {
+    width: 266px;
+}
+
+.zw-link-modal__body {
+    padding: var(--zw-offset-sm);
+}
+
+::v-deep .zw-link-modal-dropdown__option {
+    width: 234px;
+}
+</style>

package/lib/components/toolbar/controls/link/LinkControlApply.vue

@@ -0,0 +1,35 @@
+<template>
+    <div class="zw-link-modal__apply">
+        <Button class="zw-margin-right--xs" skin="secondary" @click="cancel">
+            Cancel
+        </Button>
+
+        <Button @click="apply" skin="primary">
+            Save
+        </Button>
+    </div>
+</template>
+
+<script>
+import { Button } from '../../../base';
+
+export default {
+    name: 'LinkControlApply',
+
+    components: { Button },
+
+    setup(_, { emit }) {
+        const cancel = () => emit('cancel');
+        const apply = () => emit('apply');
+
+        return { cancel, apply };
+    }
+};
+</script>
+
+<style scoped>
+.zw-link-modal__apply {
+    display: flex;
+    justify-content: flex-end;
+}
+</style>

package/lib/components/toolbar/controls/link/LinkControlHeader.vue

@@ -0,0 +1,67 @@
+<template>
+    <div class="zw-link-modal-header">
+        <span class="zw-link-modal-header__title">Link</span>
+
+        <Button class="zw-link-modal-header__unlink-button" :disabled="!isLink" @click="removeLink">
+            <Icon class="zw-link-modal-header__unlink-icon" name="unlink" size="14px" auto-color />
+            Remove
+        </Button>
+    </div>
+</template>
+
+<script>
+import { computed, inject } from 'vue';
+import { Icon, Button } from '../../../base';
+import { InjectionTokens } from '../../../../injectionTokens';
+
+export default {
+    name: 'LinkControlHeader',
+
+    components: { Icon, Button },
+
+    setup(_, { emit }) {
+        const editor = inject(InjectionTokens.EDITOR);
+        const isLink = computed(() => editor.isActive('link'));
+
+        const removeLink = () => emit('remove-link');
+
+        return { isLink, removeLink };
+    }
+};
+</script>
+
+<style scoped>
+.zw-link-modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--zw-offset-sm);
+    border-bottom: 2px solid rgb(var(--zw-color-n5));
+}
+
+.zw-link-modal-header__title {
+    text-transform: uppercase;
+    font-weight: var(--zw-font-weight-semibold);
+    font-size: var(--zw-font-size-xxs);
+    color: rgb(var(--zw-color-white));
+}
+
+.zw-link-modal-header__unlink-icon {
+    margin-right: var(--zw-offset-xxs);
+}
+
+.zw-link-modal-header__unlink-button {
+    color: rgb(var(--zw-color-n80));
+    font-size: var(--zw-font-size-xxs);
+    transition: 0.1s opacity ease-out;
+    will-change: opacity;
+}
+
+.zw-link-modal-header__unlink-button:disabled {
+    opacity: 0.35;
+}
+
+.zw-link-modal-header__unlink-button:hover {
+    color: rgb(var(--zw-color-white));
+}
+</style>

package/lib/components/toolbar/controls/link/__tests__/LinkControl.test.js

@@ -0,0 +1,79 @@
+import { shallowMount } from '@vue/test-utils';
+import { ref, nextTick } from 'vue';
+import LinkControl from '../LinkControl';
+import { InjectionTokens } from '../../../../../injectionTokens';
+import { Button, TextField } from '../../../../base';
+import LinkControlApply from '../LinkControlApply';
+import { LinkControlDestination } from '../destination';
+
+const createEditor = (isActive) => ({
+    isActive: () => isActive ?? false
+});
+
+function createComponent({ editor }) {
+    return shallowMount(LinkControl, {
+        provide: {
+            [InjectionTokens.EDITOR]: editor,
+            [InjectionTokens.PAGE_BLOCKS]: ref([{ id: 1 }])
+        }
+    });
+}
+
+describe('selection value', () => {
+    test('should render link status', () => {
+        const editor = createEditor(true );
+        const wrapper = createComponent({ editor });
+        const buttonWrapper = wrapper.findComponent(Button);
+
+        expect(buttonWrapper.props('active')).toBe(true);
+    });
+});
+
+describe('validation', () => {
+    test('should show error on apply', async () => {
+        const editor = createEditor(true );
+        const wrapper = createComponent({ editor });
+        const textFieldWrapper = wrapper.findComponent(TextField);
+        const linkControlDestinationWrapper = wrapper.findComponent(LinkControlDestination);
+        const applyWrapper = wrapper.findComponent(LinkControlApply);
+
+        applyWrapper.vm.$emit('apply');
+        await nextTick();
+
+        expect(textFieldWrapper.props('error')).toBe('Can\'t be empty');
+        expect(linkControlDestinationWrapper.props('validator').error.value).toBe('Please enter a valid URL');
+    });
+
+    test('should reset errors on input', async () => {
+        const editor = createEditor(true );
+        const wrapper = createComponent({ editor });
+        const textFieldWrapper = wrapper.findComponent(TextField);
+        const linkControlDestinationWrapper = wrapper.findComponent(LinkControlDestination);
+        const applyWrapper = wrapper.findComponent(LinkControlApply);
+
+        applyWrapper.vm.$emit('apply');
+        textFieldWrapper.vm.$emit('input', 'hello');
+
+        await nextTick();
+
+        expect(textFieldWrapper.props('error')).toBeNull();
+        expect(linkControlDestinationWrapper.props('validator').error.value).toBeNull();
+    });
+
+    test('should reset errors on change destination', async () => {
+        const editor = createEditor(true );
+        const wrapper = createComponent({ editor });
+        const textFieldWrapper = wrapper.findComponent(TextField);
+        const linkControlDestinationWrapper = wrapper.findComponent(LinkControlDestination);
+        const applyWrapper = wrapper.findComponent(LinkControlApply);
+
+        applyWrapper.vm.$emit('apply');
+        linkControlDestinationWrapper.vm.$emit('reset-errors');
+
+        await nextTick();
+
+        expect(textFieldWrapper.props('error')).toBeNull();
+        expect(linkControlDestinationWrapper.props('validator').error.value).toBeNull();
+    });
+});
+

package/lib/components/toolbar/controls/link/__tests__/LinkControlHeader.test.js

@@ -0,0 +1,42 @@
+import { shallowMount } from '@vue/test-utils';
+import { InjectionTokens } from '../../../../../injectionTokens';
+import { Button } from '../../../../base';
+import LinkControlHeader from '../LinkControlHeader';
+
+const createEditor = (isActive) => ({
+    isActive: () => isActive ?? false
+});
+
+function createComponent({ editor }) {
+    return shallowMount(LinkControlHeader, {
+        provide: { [InjectionTokens.EDITOR]: editor }
+    });
+}
+
+describe('rendering unlink button', () => {
+    test('should button be disabled when no link', () => {
+        const editor = createEditor(true );
+        const wrapper = createComponent({ editor });
+        const buttonWrapper = wrapper.findComponent(Button);
+
+        expect(buttonWrapper.props('disabled')).toBe(false);
+    });
+
+    test('should button be enabled when link selected', () => {
+        const editor = createEditor(false );
+        const wrapper = createComponent({ editor });
+        const buttonWrapper = wrapper.findComponent(Button);
+
+        expect(buttonWrapper.props('disabled')).toBe(true);
+    });
+
+    test('should send unlink event', () => {
+        const editor = createEditor(true );
+        const wrapper = createComponent({ editor });
+        const buttonWrapper = wrapper.findComponent(Button);
+
+        buttonWrapper.vm.$emit('click');
+
+        expect(wrapper.emitted('remove-link')).toBeTruthy();
+    });
+});

package/lib/components/toolbar/controls/link/composables/__tests__/__snapshots__/useLink.test.js.snap

@@ -0,0 +1,8 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`init link should prepare initial fields 1`] = `
+Object {
+  "block": 1,
+  "url": "",
+}
+`;

package/lib/components/toolbar/controls/link/composables/__tests__/useLink.test.js

@@ -0,0 +1,114 @@
+import { ref } from 'vue';
+import { withComponentContext } from '../../../../../../__tests__/utils';
+import { InjectionTokens } from '../../../../../../injectionTokens';
+import { LinkDestinations, LinkTargets } from '../../../../../../enums';
+import { useLink } from '../useLink';
+
+const createEditor = (text, destination) => ({
+    commands: {
+        storeSelection: jest.fn(),
+        restoreSelection: jest.fn(),
+        getSelectedText: jest.fn(() => text ?? ''),
+        focus: jest.fn().mockReturnThis(),
+        unsetLink: jest.fn().mockReturnThis(),
+        applyLink: jest.fn().mockReturnThis(),
+        run: jest.fn()
+    },
+
+    chain() {
+        return this.commands;
+    },
+
+    getAttributes: jest.fn(() => ({
+        destination: destination ?? null
+    }))
+});
+
+function useComposable(text, destination) {
+    return withComponentContext(() => useLink(), {
+        provide: {
+            [InjectionTokens.EDITOR]: createEditor(text, destination),
+            [InjectionTokens.PAGE_BLOCKS]: ref([{ id: 1 }, { id: 2 }])
+
+        }
+    });
+}
+
+describe('init link', () => {
+    test('should prepare initial fields', () => {
+        const link = useComposable();
+
+        link.prepareInitialFields();
+
+        expect(link.currentDestination.value.id).toBe(LinkDestinations.URL);
+        expect(link.linkData.value.target).toBe(LinkTargets.SELF);
+        expect(link.destinationHrefs.value).toMatchSnapshot();
+    });
+
+    test('should take text from selection', () => {
+        const link = useComposable('hello world');
+
+        link.prepareInitialFields();
+
+        expect(link.linkData.value.text).toBe('hello world');
+    });
+});
+
+describe('actions with link', () => {
+    test('should update url', () => {
+        const link = useComposable('hello world');
+
+        link.updateLink('https://hello.world');
+
+        expect(link.destinationHrefs.value.url).toBe('https://hello.world');
+    });
+
+    test('should update block destination', () => {
+        const link = useComposable('hello world', LinkDestinations.BLOCK);
+
+        link.prepareInitialFields();
+        link.updateLink('3456');
+
+        expect(link.destinationHrefs.value.block).toBe('3456');
+    });
+
+    test('should remove link', () => {
+        const link = useComposable();
+
+        link.removeLink();
+
+        expect(link.editor.commands.unsetLink).toHaveBeenCalled();
+    });
+
+    test('should apply link', () => {
+        const link = useComposable();
+
+        link.updateText('hello');
+        link.updateLink('/world');
+
+        link.apply();
+
+        expect(link.editor.commands.applyLink).toHaveBeenCalledWith({
+            destination: 'url',
+            href: '/world',
+            target: LinkTargets.SELF,
+            text: 'hello'
+        });
+    });
+
+    test('should apply link target', () => {
+        const link = useComposable();
+
+        link.updateTarget(false);
+
+        expect(link.linkData.value.target).toBe(LinkTargets.SELF);
+    });
+
+    test('should apply link target', () => {
+        const link = useComposable();
+
+        link.updateTarget(true);
+
+        expect(link.linkData.value.target).toBe(LinkTargets.BLANK);
+    });
+});

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

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

package/lib/components/toolbar/controls/link/composables/useLink.js

@@ -0,0 +1,61 @@
+import { ref, inject } from 'vue';
+import { LinkTargets, LinkDestinations } from '../../../../../enums';
+import { InjectionTokens } from '../../../../../injectionTokens';
+
+export function useLink() {
+    const editor = inject(InjectionTokens.EDITOR);
+    const pageBlocks = inject(InjectionTokens.PAGE_BLOCKS);
+
+    const linkData = ref({ text: '', target: LinkTargets.SELF, destination: LinkDestinations.URL });
+    const destinationHrefs = ref({ block: pageBlocks.value[0].id, url: '' });
+    const currentDestination = ref({ id: LinkDestinations.URL });
+
+    function updateTarget(isChecked) {
+        linkData.value.target = isChecked ? LinkTargets.BLANK : LinkTargets.SELF;
+    }
+
+    function prepareInitialFields() {
+        linkData.value.text = editor.commands.getSelectedText();
+        currentDestination.value.id = editor.getAttributes('link').destination || LinkDestinations.URL;
+        destinationHrefs.value[currentDestination.value.id] = editor.getAttributes('link').href || '';
+        linkData.value.target = editor.getAttributes('link').target || LinkTargets.SELF;
+    }
+
+    function apply() {
+        editor
+            .chain()
+            .focus()
+            .applyLink({
+                href: destinationHrefs.value[currentDestination.value.id],
+                text: linkData.value.text,
+                target: linkData.value.target,
+                destination: currentDestination.value.id
+            })
+            .run();
+    }
+
+    function removeLink() {
+        editor.chain().focus().unsetLink().run();
+    }
+
+    function updateLink(value) {
+        destinationHrefs.value[currentDestination.value.id] = value;
+    }
+
+    function updateText(text) {
+        linkData.value.text = text;
+    }
+
+    return {
+        editor,
+        linkData,
+        destinationHrefs,
+        currentDestination,
+        prepareInitialFields,
+        updateTarget,
+        updateLink,
+        apply,
+        removeLink,
+        updateText
+    };
+}