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

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

@@ -0,0 +1,172 @@
+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: LinkDestinations.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);
+    });
+
+    test('should reset destination', () => {
+        const link = useComposable();
+
+        link.resetDestinations();
+
+        expect(link.destinationHrefs.value).toMatchSnapshot();
+    });
+});
+
+describe('format link', () => {
+    test('should format absolute link without href', () => {
+        const link = useComposable();
+
+        link.updateText('hello');
+        link.updateLink('world.com');
+
+        link.apply();
+
+        expect(link.editor.commands.applyLink).toHaveBeenCalledWith({
+            destination: LinkDestinations.URL,
+            href: 'https://world.com',
+            target: LinkTargets.SELF,
+            text: 'hello'
+        });
+    });
+
+    test('should format absolute link with href', () => {
+        const link = useComposable();
+
+        link.updateText('hello');
+        link.updateLink('https://world.com');
+
+        link.apply();
+
+        expect(link.editor.commands.applyLink).toHaveBeenCalledWith({
+            destination: LinkDestinations.URL,
+            href: 'https://world.com',
+            target: LinkTargets.SELF,
+            text: 'hello'
+        });
+    });
+
+    test('should format relative link', () => {
+        const link = useComposable();
+
+        link.updateText('hello');
+        link.updateLink('/world/new');
+
+        link.apply();
+
+        expect(link.editor.commands.applyLink).toHaveBeenCalledWith({
+            destination: LinkDestinations.URL,
+            href: '/world/new',
+            target: LinkTargets.SELF,
+            text: 'hello'
+        });
+    });
+});

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,82 @@
+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;
+        linkData.value.target = editor.getAttributes('link').target || LinkTargets.SELF;
+
+        if (editor.getAttributes('link').href) {
+            destinationHrefs.value[currentDestination.value.id] = editor.getAttributes('link').href;
+        }
+    }
+
+    function resetDestinations() {
+        destinationHrefs.value.block = pageBlocks.value[0].id;
+        destinationHrefs.value.url = '';
+    }
+
+    function getFormattedHref() {
+        if (currentDestination.value.id === LinkDestinations.URL) {
+            const url = destinationHrefs.value.url;
+            const isRelative = !!url.startsWith('/');
+            const hasProtocol = /^https?:\/\/.+$/i.test(url);
+
+            return  isRelative || hasProtocol ? url : `https://${url}`;
+        }
+
+        return destinationHrefs.value[currentDestination.value.id];
+    }
+
+    function apply() {
+        editor
+            .chain()
+            .focus()
+            .applyLink({
+                href: getFormattedHref(),
+                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,
+        resetDestinations,
+        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"
+            @update-link="updateLink"
+            @update-target="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 === LinkDestinations.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('update-link', value);
+        const updateTarget = (value) => emit('update-target', value);
+
+        return { updateLink, updateTarget };
+    }
+};
+</script>

package/lib/components/toolbar/controls/link/destination/__tests__/LinkControlPageBlock.test.js

@@ -0,0 +1,36 @@
+import { ref, h } from 'vue';
+import { shallowMount } from '@vue/test-utils';
+import LinkControlPageBlock from '../LinkControlPageBlock';
+import { InjectionTokens } from '../../../../../../injectionTokens';
+import { Dropdown } from '../../../../../base';
+
+function createComponent() {
+    return shallowMount(LinkControlPageBlock, {
+        propsData: {
+            value: 12
+        },
+
+        stubs: {
+            Dropdown: {
+                render: () => h('div'),
+                props: ['value']
+            }
+        },
+
+        provide: {
+            [InjectionTokens.PAGE_BLOCKS]: ref([{ id: 1 }, { id: 2 }])
+        }
+    });
+}
+
+describe('applying block', () => {
+    test('should apply block', () => {
+        const wrapper = createComponent();
+
+        const dropdownWrapper = wrapper.findComponent(Dropdown);
+
+        dropdownWrapper.vm.$emit('change', 2);
+
+        expect(wrapper.emitted('update')).toMatchSnapshot();
+    });
+});

package/lib/components/toolbar/controls/link/destination/__tests__/LinkControlUrl.test.js

@@ -0,0 +1,46 @@
+import { ref, h } from 'vue';
+import { shallowMount } from '@vue/test-utils';
+import { Checkbox, TextField } from '../../../../../base';
+import LinkControlUrl from '../LinkControlUrl';
+
+function createComponent() {
+    return shallowMount(LinkControlUrl, {
+        propsData: {
+            validator: { error: ref({ value: null }) },
+            href: '',
+            isTargetBlank: false
+        },
+
+        stubs: {
+            TextField: {
+                render: () => h('div'),
+                props: ['value']
+            },
+
+            Checkbox: {
+                render: () => h('div'),
+                props: ['value']
+            }
+        }
+    });
+}
+
+describe('update link', () => {
+    test('should update link url', () => {
+        const wrapper = createComponent();
+        const textFieldWrapper = wrapper.findComponent(TextField);
+
+        textFieldWrapper.vm.$emit('input', 'Some text');
+
+        expect(wrapper.emitted('update-link')).toMatchSnapshot();
+    });
+
+    test('should update link target', () => {
+        const wrapper = createComponent();
+        const textFieldWrapper = wrapper.findComponent(Checkbox);
+
+        textFieldWrapper.vm.$emit('input', true);
+
+        expect(wrapper.emitted('update-target')).toMatchSnapshot();
+    });
+});

package/lib/components/toolbar/controls/link/destination/__tests__/__snapshots__/LinkControlPageBlock.test.js.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`applying block should apply block 1`] = `
+Array [
+  Array [
+    2,
+  ],
+]
+`;

package/lib/components/toolbar/controls/link/destination/__tests__/__snapshots__/LinkControlUrl.test.js.snap

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`update link should update link target 1`] = `
+Array [
+  Array [
+    true,
+  ],
+]
+`;
+
+exports[`update link should update link url 1`] = `
+Array [
+  Array [
+    "Some text",
+  ],
+]
+`;

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__/__snapshots__/useEditor.test.js.snap

@@ -4,6 +4,7 @@ exports[`life cycle should emit changes 1`] = `
 Array [
   Array [
     Object {
+      "__wswg__": true,
       "content": Array [
         Object {
           "content": Array [

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

@@ -1,9 +1,9 @@
-import { h, toRef } from '@vue/composition-api';
+import { h, ref, 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 { NodeFactory } from '../../services';
+import { buildCoreExtensions } from '../../extensions/core';
 
 const TestComponent = {
     name: 'Test',
@@ -18,8 +18,9 @@ const TestComponent = {
 
     setup(props, { emit }) {
         const editor = useEditor({
+            isReadonlyRef: ref(false),
             content: toRef(props, 'value'),
-            extensions: CORE_EXTENSIONS,
+            extensions: buildCoreExtensions(),
             onChange: (content) => emit('input', content),
             onFocus: () => emit('focus')
         });

package/lib/composables/useEditor.js

@@ -1,27 +1,30 @@
 import { Editor } from '@tiptap/vue-2';
-import { onUnmounted, watch, reactive } from '@vue/composition-api';
+import { onUnmounted, watch, reactive } from 'vue';
 import { ContentNormalizer } from '../services';
+import { markWysiwygContent, unmarkWysiwygContent } from '../utils';
 
-export function useEditor({ content, onChange, extensions }) {
-    const normalizer = new ContentNormalizer();
-
+export function useEditor({ content, onChange, extensions, isReadonlyRef }) {
     const editor = reactive(new Editor({
-        content: normalizer.normalize(content.value),
-        onUpdate: () => onChange(editor.getJSON()),
-        extensions
+        content: ContentNormalizer.normalize(content.value),
+        onUpdate: () => onChange(markWysiwygContent(editor.getJSON())),
+        extensions,
+        injectCSS: false
     }));
 
     onUnmounted(() => editor.destroy());
 
     watch(content, (value) => {
-        const isChanged = JSON.stringify(editor.getJSON()) !== JSON.stringify(value);
+        const content = unmarkWysiwygContent(value);
+        const isChanged = JSON.stringify(editor.getJSON()) !== JSON.stringify(content);
 
         if (isChanged) {
-            const content = normalizer.normalize(value);
+            const content = ContentNormalizer.normalize(value);
 
             editor.commands.setContent(content, false);
         }
     });
 
+    watch(isReadonlyRef, (isReadonly) => editor.setEditable(!isReadonly), { immediate: true });
+
     return editor;
 }