@zipify/wysiwyg 1.0.0-dev.4 → 1.0.0-dev.42

package/lib/components/toolbar/controls/__tests__/ListControl.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, Icon } from '../../../base';
 import ListControl from '../ListControl';

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,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, Dropdown } from '../../../base';
 import StylePresetControl from '../StylePresetControl';

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,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';
+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';
+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';
+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';
+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';
+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,26 +1,27 @@
-import { h, toRef } from '@vue/composition-api';
+import { h, toRef } from 'vue';
 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',
+
     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);
-            }
+            extensions: buildCoreExtensions(),
+            onChange: (content) => emit('input', content),
+            onFocus: () => emit('focus')
         });
 
         return { editor };
@@ -64,4 +65,12 @@ describe('life cycle', () => {
 
         expect(editor.isDestroyed).toBe(true);
     });
+
+    test('should update content on value change', async () => {
+        const { editor, wrapper } = createComponent({ content: '<p>old</p>' });
+
+        await wrapper.setProps({ value: '<p>new</p>' });
+
+        expect(editor.getHTML()).toBe('<p class="zw-style">new</p>');
+    });
 });

package/lib/composables/useEditor.js

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