@zipify/wysiwyg 3.1.2 → 4.0.0-vue3.0

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

@@ -19,19 +19,21 @@ const createEditor = ({ fontFamily } = {}) => ({
 
 function createComponent({ editor }) {
     return shallowMount(FontFamilyControl, {
-        stubs: {
-            Dropdown: {
-                render: () => h('div'),
-                props: ['value']
+        global: {
+            stubs: {
+                Dropdown: {
+                    render: () => h('div'),
+                    props: ['value']
+                }
+            },
+            provide: {
+                [InjectionTokens.EDITOR]: editor,
+                [InjectionTokens.FONTS]: [
+                    { name: 'Lato', category: 'test' },
+                    { name: 'Bungee', category: 'test' }
+                ],
+                [InjectionTokens.LOCAL_STORAGE]: localStorage
             }
-        },
-        provide: {
-            [InjectionTokens.EDITOR]: editor,
-            [InjectionTokens.FONTS]: [
-                { name: 'Lato', category: 'test' },
-                { name: 'Bungee', category: 'test' }
-            ],
-            [InjectionTokens.LOCAL_STORAGE]: localStorage
         }
     });
 }

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

@@ -19,9 +19,11 @@ const createEditor = ({ fontSize } = {}) => ({
 
 function createComponent({ editor }) {
     return shallowMount(FontSizeControl, {
-        provide: {
-            [InjectionTokens.EDITOR]: editor,
-            [InjectionTokens.FONT_SIZES]: ['12', '23']
+        global: {
+            provide: {
+                [InjectionTokens.EDITOR]: editor,
+                [InjectionTokens.FONT_SIZES]: ['12', '23']
+            }
         }
     });
 }

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

@@ -20,7 +20,9 @@ const createEditor = ({ fontWeight, fontWeightList } = {}) => ({
 
 function createComponent({ editor }) {
     return shallowMount(FontWeightControl, {
-        provide: { [InjectionTokens.EDITOR]: editor }
+        global: {
+            provide: { [InjectionTokens.EDITOR]: editor }
+        }
     });
 }
 

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

@@ -20,7 +20,9 @@ const createEditor = ({ isItalic, isItalicAvailable } = {}) => ({
 
 function createComponent({ editor }) {
     return shallowMount(ItalicControl, {
-        provide: { [InjectionTokens.EDITOR]: editor }
+        global: {
+            provide: { [InjectionTokens.EDITOR]: editor }
+        }
     });
 }
 

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

@@ -28,15 +28,17 @@ const createEditor = ({ height } = {}) => {
 
 function createComponent({ editor } = {}) {
     return shallowMount(LineHeightControl, {
-        stubs: {
-            Modal: {
-                render() {
-                    return h('div', null, this.$slots.default);
-                },
-                props: ['toggler']
-            }
-        },
-        provide: { [InjectionTokens.EDITOR]: editor ?? createEditor() }
+        global: {
+            stubs: {
+                Modal: {
+                    render() {
+                        return h('div', null, this.$slots.default());
+                    },
+                    props: ['toggler']
+                }
+            },
+            provide: { [InjectionTokens.EDITOR]: editor ?? createEditor() }
+        }
     });
 }
 

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

@@ -20,20 +20,22 @@ const createEditor = ({ listType } = {}) => ({
 
 function createComponent({ editor }) {
     return shallowMount(ListControl, {
-        stubs: {
-            Dropdown: {
-                render() {
-                    const activator = this.$scopedSlots.activator({
-                        open: jest.fn(),
-                        isOpened: false
-                    });
-
-                    return h('div', null, [activator]);
-                },
-                props: ['value']
-            }
-        },
-        provide: { [InjectionTokens.EDITOR]: editor }
+        global: {
+            stubs: {
+                Dropdown: {
+                    render() {
+                        const activator = this.$slots.activator({
+                            open: jest.fn(),
+                            isOpened: false
+                        });
+
+                        return h('div', null, [activator]);
+                    },
+                    props: ['value']
+                }
+            },
+            provide: { [InjectionTokens.EDITOR]: editor }
+        }
     });
 }
 

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

@@ -17,7 +17,9 @@ const createEditor = () => ({
 
 function createComponent({ editor }) {
     return shallowMount(RemoveFormatControl, {
-        provide: { [InjectionTokens.EDITOR]: editor }
+        global: {
+            provide: { [InjectionTokens.EDITOR]: editor }
+        }
     });
 }
 

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

@@ -19,7 +19,9 @@ const createEditor = ({ isStrikeThrough } = {}) => ({
 
 function createComponent({ editor }) {
     return shallowMount(StrikeThroughControl, {
-        provide: { [InjectionTokens.EDITOR]: editor }
+        global: {
+            provide: { [InjectionTokens.EDITOR]: editor }
+        }
     });
 }
 

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

@@ -27,7 +27,9 @@ const createEditor = ({ presets, preset, customization } = {}) => ({
 
 function createComponent({ editor }) {
     return shallowMount(StylePresetControl, {
-        provide: { [InjectionTokens.EDITOR]: editor }
+        global: {
+            provide: { [InjectionTokens.EDITOR]: editor }
+        }
     });
 }
 

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

@@ -19,7 +19,9 @@ const createEditor = ({ isSuperscript } = {}) => ({
 
 function createComponent({ editor }) {
     return shallowMount(SuperscriptControl, {
-        provide: { [InjectionTokens.EDITOR]: editor }
+        global: {
+            provide: { [InjectionTokens.EDITOR]: editor }
+        }
     });
 }
 

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

@@ -23,7 +23,9 @@ const createEditor = ({ isUnderline } = {}) => ({
 
 function createComponent({ editor }) {
     return shallowMount(UnderlineControl, {
-        provide: { [InjectionTokens.EDITOR]: editor }
+        global: {
+            provide: { [InjectionTokens.EDITOR]: editor }
+        }
     });
 }
 

package/lib/components/toolbar/controls/composables/__tests__/useRecentFonts.test.js

@@ -18,10 +18,12 @@ function createWrapper({ initial } = {}) {
     return withComponentContext(() => {
         return useRecentFonts({ limit: 3 });
     }, {
-        provide: {
-            [InjectionTokens.LOCAL_STORAGE]: createStorage({
-                'wswg.recently_used_fonts': initial
-            })
+        global: {
+            provide: {
+                [InjectionTokens.LOCAL_STORAGE]: createStorage({
+                    'wswg.recently_used_fonts': initial
+                })
+            }
         }
     });
 }

package/lib/components/toolbar/controls/link/LinkControl.vue

@@ -38,123 +38,90 @@
     </div>
 </template>
 
-<script>
+<script setup>
 import { computed, ref, inject, unref } from 'vue';
 import { LinkDestinations, TextSettings } from '../../../../enums';
 import { InjectionTokens } from '../../../../injectionTokens';
 import { RegExps } from '../../../../regExps';
-import { tooltip } from '../../../../directives';
+import { tooltip as vTooltip } from '../../../../directives';
 import { useValidator } from '../../../base/composables';
 import { Button, Icon, Modal, TextField, useModalToggler } from '../../../base';
 import LinkControlHeader from './LinkControlHeader';
 import { useLink } from './composables';
 import { LinkControlDestination } from './destination';
 
-export default {
-    name: 'LinkControl',
-
-    components: {
-        LinkControlDestination,
-        LinkControlHeader,
-        TextField,
-        Modal,
-        Icon,
-        Button
-    },
-
-    directives: {
-        tooltip
-    },
-
-    setup() {
-        const wrapperRef = ref(null);
-        const modalRef = ref(null);
-
-        const editor = inject(InjectionTokens.EDITOR);
-
-        const link = useLink();
-
-        const isEmpty = () => {
-            return link.linkData.value.text ? false : 'Can\'t be empty';
-        };
-
-        const isValidUrl = () => {
-            if (link.currentDestination.value.id !== LinkDestinations.URL) return false;
-
-            const href = link.destinationHrefs.value.url;
-            const isTelOrMail = RegExps.TEL_PROTOCOL.test(href) || RegExps.MAILTO_PROTOCOL.test(href);
-
-            if (isTelOrMail) return false;
-            if (href.startsWith('/')) return false;
-
-            const isUrl = RegExps.URL.test(href);
-
-            return isUrl ? false : 'Please enter a valid URL';
-        };
-
-        const nameValidator = useValidator({
-            validations: [isEmpty]
-        });
-
-        const urlValidator = useValidator({
-            validations: [isValidUrl]
-        });
-
-        const resetErrors = () => {
-            nameValidator.reset();
-            urlValidator.reset();
-        };
-
-        const onBeforeOpened = () => {
-            editor.commands.extendMarkRange(TextSettings.LINK);
-            resetErrors();
-            link.prepareInitialFields();
-        };
-
-        const toggler = useModalToggler({
-            onBeforeOpened: () => onBeforeOpened(),
-            wrapperRef,
-            modalRef
-        });
-
-        const isLink = editor.commands.isLink();
-        const isActive = computed(() => unref(toggler.isOpened) || unref(isLink));
-
-        const updateLinkText = (value) => {
-            resetErrors();
-            link.updateText(value);
-        };
-
-        const applyLink = () => {
-            urlValidator.validate();
-            nameValidator.validate();
-
-            if (urlValidator.error.value || nameValidator.error.value) return;
-
-            link.apply();
-            toggler.close();
-            link.resetDestinations();
-        };
-
-        const removeLink = () => {
-            link.removeLink();
-            toggler.close();
-        };
-
-        return {
-            wrapperRef,
-            modalRef,
-            link,
-            toggler,
-            isActive,
-            nameValidator,
-            urlValidator,
-            updateLinkText,
-            resetErrors,
-            applyLink,
-            removeLink
-        };
-    }
+const wrapperRef = ref(null);
+const modalRef = ref(null);
+
+const editor = inject(InjectionTokens.EDITOR);
+
+const link = useLink();
+
+const isEmpty = () => {
+    return link.linkData.value.text ? false : 'Can\'t be empty';
+};
+
+const isValidUrl = () => {
+    if (link.currentDestination.value.id !== LinkDestinations.URL) return false;
+
+    const href = link.destinationHrefs.value.url;
+    const isTelOrMail = RegExps.TEL_PROTOCOL.test(href) || RegExps.MAILTO_PROTOCOL.test(href);
+
+    if (isTelOrMail) return false;
+    if (href.startsWith('/')) return false;
+
+    const isUrl = RegExps.URL.test(href);
+
+    return isUrl ? false : 'Please enter a valid URL';
+};
+
+const nameValidator = useValidator({
+    validations: [isEmpty]
+});
+
+const urlValidator = useValidator({
+    validations: [isValidUrl]
+});
+
+const resetErrors = () => {
+    nameValidator.reset();
+    urlValidator.reset();
+};
+
+const onBeforeOpened = () => {
+    editor.commands.extendMarkRange(TextSettings.LINK);
+    resetErrors();
+    link.prepareInitialFields();
+};
+
+const toggler = useModalToggler({
+    onBeforeOpened: () => onBeforeOpened(),
+    wrapperRef,
+    modalRef
+});
+
+const isLink = editor.commands.isLink();
+const isActive = computed(() => unref(toggler.isOpened) || unref(isLink));
+
+const updateLinkText = (value) => {
+    resetErrors();
+    link.updateText(value);
+};
+
+const applyLink = () => {
+    urlValidator.validate();
+    nameValidator.validate();
+
+    if (urlValidator.error.value || nameValidator.error.value) return;
+
+    link.apply();
+    toggler.close();
+    link.resetDestinations();
+};
+
+const removeLink = () => {
+    link.removeLink();
+    toggler.close();
 };
 </script>
 
@@ -172,7 +139,7 @@ export default {
     justify-content: flex-end;
 }
 
-::v-deep .zw-link-modal-dropdown__option {
+:deep(.zw-link-modal-dropdown__option) {
     width: 234px;
 }
 </style>

package/lib/components/toolbar/controls/link/LinkControlHeader.vue

@@ -1,6 +1,8 @@
 <template>
     <div class="zw-link-modal-header">
-        <span class="zw-link-modal-header__title">Link</span>
+        <span class="zw-link-modal-header__title">
+            Link
+        </span>
 
         <Button class="zw-link-modal-header__unlink-button" :disabled="!isLink" data-initial-focus="false" @click="removeLink">
             <Icon class="zw-link-modal-header__unlink-icon" name="unlink" size="14px" auto-color />
@@ -9,25 +11,17 @@
     </div>
 </template>
 
-<script>
+<script setup>
 import { inject } from 'vue';
 import { Icon, Button } from '../../../base';
 import { InjectionTokens } from '../../../../injectionTokens';
 
-export default {
-    name: 'LinkControlHeader',
+const emit = defineEmits(['remove-link']);
 
-    components: { Icon, Button },
+const editor = inject(InjectionTokens.EDITOR);
+const isLink = editor.commands.isLink();
 
-    setup(_, { emit }) {
-        const editor = inject(InjectionTokens.EDITOR);
-        const isLink = editor.commands.isLink();
-
-        const removeLink = () => emit('remove-link');
-
-        return { isLink, removeLink };
-    }
-};
+const removeLink = () => emit('remove-link');
 </script>
 
 <style scoped>

package/lib/components/toolbar/controls/link/__tests__/LinkControl.test.js

@@ -11,9 +11,11 @@ const createEditor = (isActive) => ({
 
 function createComponent({ editor }) {
     return shallowMount(LinkControl, {
-        provide: {
-            [InjectionTokens.EDITOR]: editor,
-            [InjectionTokens.PAGE_BLOCKS]: ref([{ id: 1 }])
+        global: {
+            provide: {
+                [InjectionTokens.EDITOR]: editor,
+                [InjectionTokens.PAGE_BLOCKS]: ref([{ id: 1 }])
+            }
         }
     });
 }

package/lib/components/toolbar/controls/link/__tests__/LinkControlHeader.test.js

@@ -9,7 +9,9 @@ const createEditor = (isActive) => ({
 
 function createComponent({ editor }) {
     return shallowMount(LinkControlHeader, {
-        provide: { [InjectionTokens.EDITOR]: editor }
+        global: {
+            provide: { [InjectionTokens.EDITOR]: editor }
+        }
     });
 }
 

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

@@ -27,10 +27,11 @@ const createEditor = (text, destination) => ({
 
 function useComposable(text, destination) {
     return withComponentContext(() => useLink(), {
-        provide: {
-            [InjectionTokens.EDITOR]: createEditor(text, destination),
-            [InjectionTokens.PAGE_BLOCKS]: ref([{ id: 1 }, { id: 2 }])
-
+        global: {
+            provide: {
+                [InjectionTokens.EDITOR]: createEditor(text, destination),
+                [InjectionTokens.PAGE_BLOCKS]: ref([{ id: 1 }, { id: 2 }])
+            }
         }
     });
 }

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

@@ -9,7 +9,7 @@
             color="gray"
             :max-width="266"
             :value="link.currentDestination.value.id"
-            :options="$options.destinationTypes"
+            :options="destinationTypes"
             @change="changeDestination"
         >
             <template #option="{ option }">
@@ -38,66 +38,47 @@
     </div>
 </template>
 
-<script>
+<script setup>
 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',
+const destinationTypes = [
+    { id: LinkDestinations.URL, title: 'URL' },
+    { id: LinkDestinations.BLOCK, title: 'Page Block' }
+];
 
-    destinationTypes: [
-        { id: LinkDestinations.URL, title: 'URL' },
-        { id: LinkDestinations.BLOCK, title: 'Page Block' }
-    ],
-
-    components: {
-        LinkControlPageBlock,
-        LinkControlUrl,
-        FieldLabel,
-        DropdownOption,
-        Dropdown
+const props = defineProps({
+    link: {
+        type: Object,
+        required: true
     },
 
-    props: {
-        link: {
-            type: Object,
-            required: true
-        },
-
-        validator: {
-            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 emit = defineEmits(['reset-errors']);
 
-        const changeDestination = (value) => {
-            emit('reset-errors');
-            link.value.currentDestination.value.id = value;
-            if (!isURLDestination.value) link.value.target = LinkTargets.SELF;
+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);
 
-            link.value.destinationHrefs.value.url = '';
-        };
+const changeDestination = (value) => {
+    emit('reset-errors');
+    link.value.currentDestination.value.id = value;
+    if (!isURLDestination.value) link.value.target = LinkTargets.SELF;
 
-        const updateLink = (value) => {
-            emit('reset-errors');
+    link.value.destinationHrefs.value.url = '';
+};
 
-            link.value.updateLink(value);
-        };
+const updateLink = (value) => {
+    emit('reset-errors');
 
-        return {
-            isTargetBlank,
-            isURLDestination,
-            changeDestination,
-            updateLink
-        };
-    }
+    link.value.updateLink(value);
 };
 </script>

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

@@ -21,34 +21,26 @@
     </div>
 </template>
 
-<script>
+<script setup>
 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
-        }
-    },
+defineProps({
+    value: {
+        type: Number,
+        required: true
+    }
+});
 
-    setup(_, { emit }) {
-        const pageBlocks = inject(InjectionTokens.PAGE_BLOCKS);
+const emit = defineEmits(['update']);
 
-        const applyBlock = (id) => {
-            const block = pageBlocks.value.find((block) => block.id === id);
+const pageBlocks = inject(InjectionTokens.PAGE_BLOCKS);
 
-            emit('update', block.id);
-        };
+const applyBlock = (id) => {
+    const block = pageBlocks.value.find((block) => block.id === id);
 
-        return  { pageBlocks, applyBlock };
-    }
+    emit('update', block.id);
 };
 </script>