@zipify/wysiwyg 1.0.0-dev.5 → 1.0.0-dev.52

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/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('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/composition-api';
+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/composition-api';
+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__/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

@@ -2,14 +2,12 @@ import { Editor } from '@tiptap/vue-2';
 import { onUnmounted, watch, reactive } from '@vue/composition-api';
 import { ContentNormalizer } from '../services';
 
-export function useEditor({ content, onChange, onFocus, extensions }) {
-    const normalizer = new ContentNormalizer();
-
+export function useEditor({ content, onChange, extensions }) {
     const editor = reactive(new Editor({
-        content: normalizer.normalize(content.value),
+        content: ContentNormalizer.normalize(content.value),
         onUpdate: () => onChange(editor.getJSON()),
-        onFocus: () => onFocus(),
-        extensions
+        extensions,
+        injectCSS: false
     }));
 
     onUnmounted(() => editor.destroy());
@@ -18,7 +16,7 @@ export function useEditor({ content, onChange, onFocus, 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/composables/useToolbar.js

@@ -1,44 +1,39 @@
 import { createPopper } from '@popperjs/core';
-import { onUnmounted, onMounted, ref } from '@vue/composition-api';
-import { useElementRef } from '../components/base/composables';
+import { useElementRef } from '../components/base';
 
-export function useToolbar({ wrapperRef, popperRef, offsets }) {
-    let toolbar;
-    const isShow = ref(false);
+export function useToolbar({ wrapperRef, offsets, isActiveRef }) {
+    const wrapperEl = useElementRef(wrapperRef);
+    let popper;
 
-    onMounted(() => {
-        const wrapperEl = useElementRef(wrapperRef).value;
-        const toolbarEl = useElementRef(popperRef).value;
-
-        toolbar = createPopper(wrapperEl, toolbarEl, {
+    function mount(element) {
+        popper = createPopper(wrapperEl.value, element, {
             placement: 'top-start',
             modifiers: [
                 {
                     name: 'offset',
+                    options: { offset: offsets }
+                },
+                {
+                    name: 'preventOverflow',
                     options: {
-                        offset: offsets
+                        altAxis: true,
+                        padding: 2
                     }
+                },
+                {
+                    name: 'flip',
+                    enabled: false
                 }
             ]
         });
-    });
-
-    onUnmounted(() => {
-        toolbar.destroy();
-    });
-
-    function hide() {
-        isShow.value = false;
-    }
-
-    function show() {
-        isShow.value = true;
-        this.update();
     }
 
-    function update() {
-        toolbar.update();
-    }
+    const update = () => popper?.update();
 
-    return { toolbar, show, hide, update, isShow };
+    return {
+        update,
+        mount,
+        isActiveRef,
+        offsets
+    };
 }

package/lib/directives/__tests__/outClick.test.js

@@ -10,6 +10,7 @@ describe('out click', () => {
         await waitAsyncOperation();
 
         document.dispatchEvent(new Event('click'));
+        await waitAsyncOperation();
 
         expect(onOutClick).toHaveBeenCalled();
     });
@@ -22,6 +23,7 @@ describe('out click', () => {
         await waitAsyncOperation();
 
         el.dispatchEvent(new Event('click'));
+        await waitAsyncOperation();
 
         expect(onOutClick).not.toHaveBeenCalled();
     });
@@ -36,6 +38,7 @@ describe('out click', () => {
         await waitAsyncOperation();
 
         child.dispatchEvent(new Event('click'));
+        await waitAsyncOperation();
 
         expect(onOutClick).not.toHaveBeenCalled();
     });
@@ -50,6 +53,7 @@ describe('out click', () => {
         outClick.unbind(el);
 
         document.dispatchEvent(new Event('click'));
+        await waitAsyncOperation();
 
         expect(onOutClick).not.toHaveBeenCalled();
     });
@@ -65,6 +69,7 @@ describe('out click', () => {
         await waitAsyncOperation();
 
         document.dispatchEvent(new Event('click'));
+        await waitAsyncOperation();
 
         expect(onOutClick).toHaveBeenCalled();
     });
@@ -80,6 +85,7 @@ describe('out click', () => {
         await waitAsyncOperation();
 
         document.dispatchEvent(new Event('click'));
+        await waitAsyncOperation();
 
         expect(onOutClick).not.toHaveBeenCalled();
     });

package/lib/directives/outClick.js

@@ -1,5 +1,18 @@
+import { ContextWindow } from '../services';
+
 const dataStorage = new WeakMap();
 
+function toggleListener(toEnable, onClick) {
+    const args = ['click', onClick, { capture: true }];
+    const action = toEnable ? 'addEventListener' : 'removeEventListener';
+
+    if (ContextWindow.window !== window) {
+        window.document[action](...args);
+    }
+
+    ContextWindow.document[action](...args);
+}
+
 export const outClick = {
     bind(el, { value }) {
         const onOutClick = value.onOutClick || value;
@@ -8,13 +21,15 @@ export const outClick = {
         function onClick(event) {
             const isInside = event.target === el || el.contains(event.target);
 
-            if (event.target.isConnected && !isInside) onOutClick(event);
+            if (event.target.isConnected && !isInside) {
+                setTimeout(() => onOutClick(event));
+            }
         }
 
         dataStorage.set(el, { callback: onClick, isEnabled });
 
         if (isEnabled) {
-            setTimeout(() => document.addEventListener('click', onClick));
+            setTimeout(() => toggleListener(true, onClick));
         }
     },
 
@@ -24,14 +39,12 @@ export const outClick = {
 
         if (isEnabled === data.isEnabled) return;
 
-        isEnabled
-            ? document.addEventListener('click', data.callback)
-            : document.removeEventListener('click', data.callback);
+        toggleListener(isEnabled, data.callback);
 
         dataStorage.set(el, { callback: data.callback, isEnabled });
     },
 
     unbind(el) {
-        document.removeEventListener('click', dataStorage.get(el).callback);
+        toggleListener(false, dataStorage.get(el).callback);
     }
 };

package/lib/enums/Alignments.js

@@ -2,5 +2,14 @@ export const Alignments = Object.freeze({
     LEFT: 'left',
     CENTER: 'center',
     RIGHT: 'right',
-    JUSTIFY: 'justify'
+    JUSTIFY: 'justify',
+
+    get values() {
+        return [
+            this.LEFT,
+            this.CENTER,
+            this.RIGHT,
+            this.JUSTIFY
+        ];
+    }
 });

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'
+});

package/lib/enums/TextSettings.js

@@ -8,6 +8,7 @@ export const TextSettings = Object.freeze({
     FONT_WEIGHT: 'font_weight',
     LINE_HEIGHT: 'line_height',
     TEXT_DECORATION: 'text_decoration',
+    SUPERSCRIPT: 'superscript',
 
     get attributes() {
         return [
@@ -24,7 +25,8 @@ export const TextSettings = Object.freeze({
             this.FONT_SIZE,
             this.FONT_STYLE,
             this.FONT_WEIGHT,
-            this.TEXT_DECORATION
+            this.TEXT_DECORATION,
+            this.SUPERSCRIPT
         ];
     }
 });

package/lib/enums/index.js

@@ -4,3 +4,5 @@ export { Alignments } from './Alignments';
 export { NodeTypes } from './NodeTypes';
 export { ListTypes } from './ListTypes';
 export { TextSettings } from './TextSettings';
+export { LinkTargets } from './LinkTargets';
+export { LinkDestinations } from './LinkDestinations';

package/lib/extensions/Alignment.js

@@ -1,6 +1,6 @@
 import { Extension } from '@tiptap/vue-2';
 import { computed } from '@vue/composition-api';
-import { createCommand, createKeyboardShortcut, renderInlineSetting } from '../utils';
+import { convertAlignment, createCommand, createKeyboardShortcut, renderInlineSetting } from '../utils';
 import { Alignments, NodeTypes, TextSettings } from '../enums';
 
 const DEFAULTS = {
@@ -19,19 +19,33 @@ export const Alignment = Extension.create({
                 [TextSettings.ALIGNMENT]: {
                     isRequired: false,
 
-                    parseHTML(el) {
-                        const value = el.style.textAlign;
+                    parseHTML({ style }) {
+                        const textAlign = convertAlignment(style.textAlign);
 
-                        return value ? { desktop: value, tablet: value, mobile: value } : null;
+                        if (textAlign) {
+                            return {
+                                desktop: textAlign,
+                                tablet: textAlign,
+                                mobile: textAlign
+                            };
+                        }
+
+                        const mobile = style.getPropertyValue('--zw-text-align-mobile') || null;
+                        const tablet = style.getPropertyValue('--zw-text-align-tablet') || null;
+                        const desktop = style.getPropertyValue('--zw-text-align-desktop') || null;
+
+                        if (!mobile && !tablet && !desktop) return null;
+
+                        return { desktop, tablet, mobile };
                     },
 
                     renderHTML(attrs) {
                         if (!attrs.alignment) return null;
 
                         return renderInlineSetting({
-                            mobile_text_align: attrs.alignment.mobile,
-                            tablet_text_align: attrs.alignment.tablet,
-                            desktop_text_align: attrs.alignment.desktop
+                            text_align_mobile: attrs.alignment.mobile,
+                            text_align_tablet: attrs.alignment.tablet,
+                            text_align_desktop: attrs.alignment.desktop
                         });
                     }
                 }

package/lib/extensions/BackgroundColor.js

@@ -22,12 +22,20 @@ export const BackgroundColor = Mark.create({
         };
     },
 
-    parseHTML: () => [
-        {
-            style: 'background-color',
-            getAttrs: (value) => ({ value: convertColor(value) })
-        }
-    ],
+    parseHTML() {
+        const getAttrs = (value) => ({ value: convertColor(value) });
+
+        return [
+            {
+                style: '--zw-background-color',
+                getAttrs
+            },
+            {
+                style: 'background-color',
+                getAttrs
+            }
+        ];
+    },
 
     renderHTML({ HTMLAttributes: attrs }) {
         return renderMark({ background_color: attrs.value });