@zipify/wysiwyg 1.0.0-dev.17 → 1.0.0-dev.18

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/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>
+

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

@@ -0,0 +1,52 @@
+<template>
+    <div>
+        <TextField
+            class="zw-margin-bottom--xs"
+            label="To what URL should this link go?"
+            placeholder="https://"
+            :value="href"
+            :error="validator.error.value"
+            @input="updateLink"
+        />
+
+        <Checkbox
+            label="Open in new tab"
+            :value="isTargetBlank"
+            @input="updateTarget"
+        />
+    </div>
+</template>
+
+<script>
+import { TextField, Checkbox } from '../../../../base';
+
+export default {
+    name: 'LinkControlUrl',
+
+    components: { TextField, Checkbox },
+
+    props: {
+        href: {
+            type: String,
+            required: true
+        },
+
+        isTargetBlank: {
+            type: Boolean,
+            required: true
+        },
+
+        validator: {
+            type: Object,
+            required: true
+        }
+    },
+
+    setup(props, { emit }) {
+        const updateLink = (value) => emit('updateLink', value);
+        const updateTarget = (value) => emit('updateTarget', value);
+
+        return { updateLink, updateTarget };
+    }
+};
+</script>

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

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

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

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

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

@@ -1,9 +1,9 @@
 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';
+import { buildCoreExtensions } from '../../extensions/core';
 
 const TestComponent = {
     name: 'Test',
@@ -19,7 +19,7 @@ const TestComponent = {
     setup(props, { emit }) {
         const editor = useEditor({
             content: toRef(props, 'value'),
-            extensions: CORE_EXTENSIONS,
+            extensions: buildCoreExtensions(),
             onChange: (content) => emit('input', content),
             onFocus: () => emit('focus')
         });

package/lib/composables/useEditor.js

@@ -3,10 +3,8 @@ import { onUnmounted, watch, reactive } from '@vue/composition-api';
 import { ContentNormalizer } from '../services';
 
 export function useEditor({ content, onChange, extensions }) {
-    const normalizer = new ContentNormalizer();
-
     const editor = reactive(new Editor({
-        content: normalizer.normalize(content.value),
+        content: ContentNormalizer.normalize(content.value),
         onUpdate: () => onChange(editor.getJSON()),
         extensions
     }));
@@ -17,7 +15,7 @@ export function useEditor({ content, onChange, extensions }) {
         const isChanged = JSON.stringify(editor.getJSON()) !== JSON.stringify(value);
 
         if (isChanged) {
-            const content = normalizer.normalize(value);
+            const content = ContentNormalizer.normalize(value);
 
             editor.commands.setContent(content, false);
         }

package/lib/enums/LinkDestinations.js

@@ -0,0 +1,4 @@
+export const LinkDestinations = Object.freeze({
+    URL: 'url',
+    BLOCK: 'block'
+});

package/lib/enums/LinkTargets.js

@@ -0,0 +1,4 @@
+export const LinkTargets = Object.freeze({
+    BLANK: '_blank',
+    SELF: '_self'
+});