@zipify/wysiwyg 1.0.0-dev.16 → 1.0.0-dev.19

package/lib/components/toolbar/Toolbar.vue

@@ -1,13 +1,15 @@
 <template>
-    <Transition name="zw-toolbar-" :duration="800">
-        <div class="zw-toolbar">
-            <component :is="toolbarComponent" />
-        </div>
-    </Transition>
+    <keep-alive>
+        <transition name="zw-toolbar-" duration="150">
+            <div class="zw-toolbar" :style="toolbarStyles" ref="toolbarRef" v-if="isVisible">
+                <component :is="toolbarComponent" />
+            </div>
+        </transition>
+    </keep-alive>
 </template>
 
 <script>
-import { computed } from '@vue/composition-api';
+import { computed, ref, watch } from '@vue/composition-api';
 import { Devices } from '../../enums';
 import ToolbarFull from './ToolbarFull';
 import ToolbarDevice from './ToolbarDevice';
@@ -19,6 +21,11 @@ export default {
         device: {
             type: String,
             required: true
+        },
+
+        toolbar: {
+            type: Object,
+            required: true
         }
     },
 
@@ -26,8 +33,23 @@ export default {
         const toolbarComponent = computed(() => {
             return props.device === Devices.DESKTOP ? ToolbarFull : ToolbarDevice;
         });
+        const isVisible = computed(() => props.toolbar.isActiveRef.value);
+        const toolbarRef = ref(null);
+
+        watch(toolbarRef, (toolbarEl) => {
+            toolbarEl && props.toolbar.mount(toolbarEl);
+        });
+
+        const toolbarStyles = computed(() => ({
+            '--zw-toolbar-offset-y': `${props.toolbar.offsets[1]}px`
+        }));
 
-        return { toolbarComponent };
+        return {
+            toolbarComponent,
+            isVisible,
+            toolbarRef,
+            toolbarStyles
+        };
     }
 };
 </script>
@@ -40,9 +62,27 @@ export default {
     z-index: 999999;
 }
 
+.zw-toolbar::before,
+.zw-toolbar::after {
+    content: "";
+    display: block;
+    width: 100%;
+    height: calc(var(--zw-toolbar-offset-y) + 4px);
+    position: absolute;
+    --zw-toolbar-safe-zone: calc(-1 * var(--zw-toolbar-offset-y));
+}
+
+.zw-toolbar::before {
+    top: var(--zw-toolbar-safe-zone);
+}
+
+.zw-toolbar::after {
+    bottom: var(--zw-toolbar-safe-zone);
+}
+
 .zw-toolbar--enter-active,
 .zw-toolbar--leave-active {
-    transition: opacity 0.15s ease-out;
+    transition: opacity 150ms ease-out;
 }
 
 .zw-toolbar--leave-active {

package/lib/components/toolbar/ToolbarFull.vue

@@ -33,12 +33,18 @@
 
             <ToolbarGroup>
                 <LineHeightControl />
+            </ToolbarGroup>
+
+            <ToolbarDivider vertical />
+
+            <ToolbarGroup>
                 <ListControl />
             </ToolbarGroup>
 
             <ToolbarDivider vertical />
 
             <ToolbarGroup>
+                <LinkControl />
                 <RemoveFormatControl />
             </ToolbarGroup>
         </ToolbarRow>
@@ -64,7 +70,8 @@ import {
     SuperscriptControl,
     UnderlineControl,
     ListControl,
-    RemoveFormatControl
+    RemoveFormatControl,
+    LinkControl
 } from './controls';
 
 export default {
@@ -88,7 +95,8 @@ export default {
         AlignmentControl,
         LineHeightControl,
         ListControl,
-        RemoveFormatControl
+        RemoveFormatControl,
+        LinkControl
     }
 };
 </script>

package/lib/components/toolbar/__tests__/Toolbar.test.js

@@ -1,4 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
+import { ref } from '@vue/composition-api';
 import { Devices } from '../../../enums';
 import Toolbar from '../Toolbar';
 import ToolbarFull from '../ToolbarFull';
@@ -7,6 +8,11 @@ import ToolbarDevice from '../ToolbarDevice';
 function createComponent({ device }) {
     return shallowMount(Toolbar, {
         propsData: {
+            toolbar: {
+                mount: jest.fn(),
+                isActiveRef: ref(true),
+                offsets: [0, 8]
+            },
             device: device ?? Devices.DESKTOP
         }
     });

package/lib/components/toolbar/controls/FontSizeControl.vue

@@ -1,5 +1,6 @@
 <template>
     <Dropdown
+        class="zw-font-size-control"
         :options="options"
         :value="currentValue"
         @change="apply"
@@ -43,3 +44,9 @@ export default {
     }
 };
 </script>
+
+<style scoped>
+.zw-font-size-control {
+    width: 64px;
+}
+</style>

package/lib/components/toolbar/controls/UnderlineControl.vue

@@ -11,7 +11,7 @@
 </template>
 
 <script>
-import { inject } from '@vue/composition-api';
+import { inject, computed } from '@vue/composition-api';
 import { Button, Icon } from '../../base';
 import { InjectionTokens } from '../../../injectionTokens';
 import { tooltip } from '../../../directives';
@@ -31,7 +31,7 @@ export default {
     setup() {
         const editor = inject(InjectionTokens.EDITOR);
 
-        const currentValue = editor.commands.isUnderline();
+        const currentValue = computed(() => editor.commands.isUnderline().value);
         const apply = () => editor.chain().focus().toggleUnderline().run();
 
         return {

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

@@ -12,6 +12,10 @@ const createEditor = ({ isUnderline } = {}) => ({
         run: jest.fn()
     },
 
+    isActive() {
+        return false;
+    },
+
     chain() {
         return this.commands;
     }

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,152 @@
+<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="link.updateText"
+                />
+
+                <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/composition-api';
+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 nameError = ref(false);
+        const urlError = ref(false);
+
+        const editor = inject(InjectionTokens.EDITOR);
+
+        const link = useLink();
+
+        const resetErrors = () => {
+            nameError.value = null;
+            urlError.value = null;
+        };
+
+        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 isEmpty = () => {
+            return link.linkData.value.text ? false : 'Can\'t be empty';
+        };
+        const isUrl = () => {
+            if (link.currentDestination.value.id !== 'url') return false;
+
+            return /(^(https?:\/\/|\/)(?:www\.|(?!www))?[^\s])/.test(link.destinationHrefs.value.url) ? false : 'Please enter a valid URL';
+        };
+
+        const nameValidator = useValidator({
+            validations: [isEmpty],
+            value: link.linkData.value.text
+        });
+
+        const urlValidator = useValidator({
+            validations: [isUrl],
+            value: link.linkData.value.text
+        });
+
+        const applyLink = () => {
+            urlError.value = urlValidator.validate();
+            nameError.value = nameValidator.validate();
+
+            if (urlError.value || nameError.value) return;
+
+            link.apply();
+            toggler.close();
+        };
+
+        const removeLink = () => {
+            link.removeLink();
+            toggler.close();
+        };
+
+        return {
+            wrapperRef,
+            modalRef,
+            link,
+            toggler,
+            isActive,
+            nameValidator,
+            urlValidator,
+            nameError,
+            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/composition-api';
+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/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/composition-api';
+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
+    };
+}

package/lib/components/toolbar/controls/link/destination/LinkControlDestination.vue

@@ -0,0 +1,103 @@
+<template>
+    <div>
+        <FieldLabel class="zw-margin-bottom--xxs">
+            Destination
+        </FieldLabel>
+
+        <Dropdown
+            class="zw-margin-bottom--sm"
+            color="gray"
+            :max-width="266"
+            :value="link.currentDestination.value.id"
+            :options="$options.destinationTypes"
+            @change="changeDestination"
+        >
+            <template #option="{ option }">
+                <DropdownOption
+                    class="zw-link-modal-dropdown__option"
+                    :option="option"
+                />
+            </template>
+        </Dropdown>
+
+        <LinkControlUrl
+            class="zw-margin-bottom--md"
+            v-if="isURLDestination"
+            :href="link.destinationHrefs.value.url"
+            :isTargetBlank="isTargetBlank"
+            :validator="validator"
+            @updateLink="updateLink"
+            @updateTarget="link.updateTarget"
+        />
+
+        <LinkControlPageBlock
+            v-else
+            :value="link.destinationHrefs.value.block"
+            @update="updateLink"
+        />
+    </div>
+</template>
+
+<script>
+import { computed, toRef } from '@vue/composition-api';
+import { LinkDestinations, LinkTargets } from '../../../../../enums';
+import { Dropdown, DropdownOption, FieldLabel } from '../../../../base';
+import LinkControlPageBlock from './LinkControlPageBlock';
+import LinkControlUrl from './LinkControlUrl';
+
+export default {
+    name: 'LinkControlDestination',
+
+    destinationTypes: [
+        { id: LinkDestinations.URL, title: 'URL' },
+        { id: LinkDestinations.BLOCK, title: 'Page Block' }
+    ],
+
+    components: {
+        LinkControlPageBlock,
+        LinkControlUrl,
+        FieldLabel,
+        DropdownOption,
+        Dropdown
+    },
+
+    props: {
+        link: {
+            type: Object,
+            required: true
+        },
+
+        validator: {
+            type: Object,
+            required: true
+        }
+    },
+
+    setup(props, { emit }) {
+        const link = toRef(props, 'link');
+        const isURLDestination = computed(() => link.value.currentDestination.value.id === 'url');
+        const isTargetBlank = computed(() => link.value.linkData.value.target === LinkTargets.BLANK);
+
+        const changeDestination = (value) => {
+            emit('reset-errors');
+            link.value.currentDestination.value.id = value;
+            if (!isURLDestination.value) link.value.target = LinkTargets.SELF;
+
+            link.value.destinationHrefs.value.url = '';
+        };
+
+        const updateLink = (value) => {
+            emit('reset-errors');
+
+            link.value.updateLink(value);
+        };
+
+        return {
+            isTargetBlank,
+            isURLDestination,
+            changeDestination,
+            updateLink
+        };
+    }
+};
+</script>

package/lib/components/toolbar/controls/link/destination/LinkControlPageBlock.vue

@@ -0,0 +1,54 @@
+<template>
+    <div>
+        <FieldLabel class="zw-margin-bottom--xxs" field-id="link-destination">
+            Select block
+        </FieldLabel>
+
+        <Dropdown
+            color="gray"
+            :max-width="266"
+            :value="value"
+            :options="pageBlocks"
+            @change="applyBlock"
+        >
+            <template #option="{ option }">
+                <DropdownOption
+                    class="zw-link-modal-dropdown__option"
+                    :option="option"
+                />
+            </template>
+        </Dropdown>
+    </div>
+</template>
+
+<script>
+import { inject } from '@vue/composition-api';
+import { FieldLabel, DropdownOption, Dropdown } from '../../../../base';
+import { InjectionTokens } from '../../../../../injectionTokens';
+
+export default {
+    name: 'LinkControlPageBlock',
+
+    components: { DropdownOption, Dropdown, FieldLabel },
+
+    props: {
+        value: {
+            type: Number,
+            required: true
+        }
+    },
+
+    setup(_, { emit }) {
+        const pageBlocks = inject(InjectionTokens.PAGE_BLOCKS);
+
+        const applyBlock = (id) => {
+            const block = pageBlocks.value.find((block) => block.id === id);
+
+            emit('update', block.id);
+        };
+
+        return  { pageBlocks, applyBlock };
+    }
+};
+</script>
+