@zipify/wysiwyg 1.0.0-dev.9 → 1.0.0-dev.90

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

@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { ref, h, nextTick } from '@vue/composition-api';
+import { ref, h, nextTick } from 'vue';
 import { InjectionTokens } from '../../../../injectionTokens';
 import { Alignments } from '../../../../enums';
 import { Button, Icon, Modal } from '../../../base';

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

@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { h, ref } from '@vue/composition-api';
+import { h, ref } from 'vue';
 import { InjectionTokens } from '../../../../injectionTokens';
 import { ColorPicker } from '../../../base';
 import BackgroundColorControl from '../BackgroundColorControl';

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

@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { h } from '@vue/composition-api';
+import { h } from 'vue';
 import { InjectionTokens } from '../../../../injectionTokens';
 import { Dropdown } from '../../../base';
 import CaseStyleControl from '../CaseStyleControl';

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

@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { h, ref } from '@vue/composition-api';
+import { h, ref } from 'vue';
 import { InjectionTokens } from '../../../../injectionTokens';
 import { ColorPicker } from '../../../base';
 import FontColorControl from '../FontColorControl';

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

@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { h, ref } from '@vue/composition-api';
+import { h, ref } from 'vue';
 import { InjectionTokens } from '../../../../injectionTokens';
 import { Dropdown } from '../../../base';
 import FontFamilyControl from '../FontFamilyControl';

package/lib/components/toolbar/controls/__tests__/FontSizeControl.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 { Dropdown } from '../../../base';
 import FontSizeControl from '../FontSizeControl';

package/lib/components/toolbar/controls/__tests__/FontWeightControl.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 { Dropdown } from '../../../base';
 import FontWeightControl from '../FontWeightControl';

package/lib/components/toolbar/controls/__tests__/ItalicControl.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 ItalicControl from '../ItalicControl';

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

@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { h, nextTick, ref } from '@vue/composition-api';
+import { h, nextTick, ref } from 'vue';
 import { InjectionTokens } from '../../../../injectionTokens';
 import { Button, Modal, NumberField, Range } from '../../../base';
 import LineHeightControl from '../LineHeightControl';

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

@@ -1,7 +1,7 @@
 import { shallowMount } from '@vue/test-utils';
-import { h, ref } from '@vue/composition-api';
+import { h, ref, nextTick } from 'vue';
 import { InjectionTokens } from '../../../../injectionTokens';
-import { Dropdown, Icon } from '../../../base';
+import { Button, Dropdown, Icon } from '../../../base';
 import ListControl from '../ListControl';
 import { ListTypes } from '../../../../enums';
 
@@ -62,10 +62,15 @@ describe('selection value', () => {
         expect(iconWrapper.props('name')).toBe('list-disc');
     });
 
-    test('should render type icon', () => {
+    test('should render type icon', async () => {
         const editor = createEditor({ listType: ListTypes.DECIMAL });
         const wrapper = createComponent({ editor });
         const iconWrapper = wrapper.findComponent(Icon);
+        const dropdownWrapper = wrapper.findComponent(Dropdown);
+
+        dropdownWrapper.vm.$emit('change', ListTypes.DECIMAL);
+
+        await nextTick();
 
         expect(iconWrapper.props('name')).toBe('list-decimal');
     });
@@ -79,4 +84,14 @@ describe('selection value', () => {
 
         expect(editor.commands.applyList).toHaveBeenCalledWith(ListTypes.LATIN);
     });
+
+    test('should apply list with default type', () => {
+        const editor = createEditor();
+        const wrapper = createComponent({ editor });
+        const buttonWrapper = wrapper.findComponent(Button);
+
+        buttonWrapper.vm.$emit('click');
+
+        expect(editor.commands.applyList).toHaveBeenCalledWith(ListTypes.DISC);
+    });
 });

package/lib/components/toolbar/controls/__tests__/StrikeThroughControl.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 StrikeThroughControl from '../StrikeThroughControl';

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,160 @@
+<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 { LinkDestinations } from '../../../../enums';
+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\.|https:\/\/)?[a-z0-9]+([-.]{1}[a-z0-9]+)*\.[a-z]{2,100}(:[0-9]{1,5})?(\/.*)?$/i;
+
+        const isEmpty = () => {
+            return link.linkData.value.text ? false : 'Can\'t be empty';
+        };
+        const isUrl = () => {
+            if (link.currentDestination.value.id !== LinkDestinations.URL) return false;
+
+            const href = link.destinationHrefs.value.url;
+            const isValidUrl = href.startsWith('/') || urlRegExp.test(href);
+
+            return isValidUrl ? 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();
+            link.resetDestinations();
+        };
+
+        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,69 @@
+<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, 0.1s color ease-out;
+    will-change: opacity, color;
+}
+
+.zw-link-modal-header__unlink-button:disabled {
+    opacity: 0.35;
+}
+
+.zw-link-modal-header__unlink-button:focus,
+.zw-link-modal-header__unlink-button:focus-within,
+.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,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`actions with link should reset destination 1`] = `
+Object {
+  "block": 1,
+  "url": "",
+}
+`;
+
+exports[`init link should prepare initial fields 1`] = `
+Object {
+  "block": 1,
+  "url": "",
+}
+`;