@zipify/wysiwyg 3.1.2 → 4.0.0-vue3.0

package/lib/components/toolbar/controls/FontWeightControl.vue

@@ -8,40 +8,20 @@
     />
 </template>
 
-<script>
+<script setup>
 import { computed, inject, unref } from 'vue';
 import { InjectionTokens } from '../../../injectionTokens';
 import { Dropdown } from '../../base';
-import { tooltip } from '../../../directives';
+import { tooltip as vTooltip } from '../../../directives';
 
-export default {
-    name: 'FontWeightControl',
+const editor = inject(InjectionTokens.EDITOR);
+const font = editor.commands.getFont();
 
-    components: {
-        Dropdown
-    },
+const options = computed(() => unref(font).weights.map((style) => ({ id: style })));
 
-    directives: {
-        tooltip
-    },
+const currentValue = editor.commands.getFontWeight();
 
-    setup() {
-        const editor = inject(InjectionTokens.EDITOR);
-        const font = editor.commands.getFont();
-
-        const options = computed(() => unref(font).weights.map((style) => ({ id: style })));
-
-        const currentValue = editor.commands.getFontWeight();
-
-        const apply = (value) => editor.chain().focus().applyFontWeight(value).run();
-
-        return {
-            options,
-            currentValue,
-            apply
-        };
-    }
-};
+const apply = (value) => editor.chain().focus().applyFontWeight(value).run();
 </script>
 
 <style scoped>

package/lib/components/toolbar/controls/ItalicControl.vue

@@ -11,38 +11,17 @@
     </Button>
 </template>
 
-<script>
+<script setup>
 import { inject } from 'vue';
 import { Button, Icon } from '../../base';
 import { InjectionTokens } from '../../../injectionTokens';
-import { tooltip } from '../../../directives';
+import { tooltip as vTooltip } from '../../../directives';
 
-export default {
-    name: 'ItalicControl',
+const editor = inject(InjectionTokens.EDITOR);
 
-    components: {
-        Button,
-        Icon
-    },
+const currentValue = editor.commands.isItalic();
 
-    directives: {
-        tooltip
-    },
-
-    setup() {
-        const editor = inject(InjectionTokens.EDITOR);
-
-        const currentValue = editor.commands.isItalic();
-
-        const isAvailable = editor.commands.isItalicAvailable();
-        const apply = () => editor.chain().focus().toggleItalic().run();
-
-        return {
-            isAvailable,
-            currentValue,
-            apply
-        };
-    }
-};
+const isAvailable = editor.commands.isItalicAvailable();
+const apply = () => editor.chain().focus().toggleItalic().run();
 </script>
 

package/lib/components/toolbar/controls/LineHeightControl.vue

@@ -39,48 +39,21 @@
     </div>
 </template>
 
-<script>
-import { inject, ref } from 'vue';
+<script setup>
+import { computed, inject, ref, unref } from 'vue';
 import { Button, Icon, Modal, Range, NumberField, FieldLabel, useModalToggler } from '../../base';
 import { InjectionTokens } from '../../../injectionTokens';
-import { tooltip } from '../../../directives';
+import { tooltip as vTooltip } from '../../../directives';
 
-export default {
-    name: 'LineHeightControl',
+const wrapperRef = ref(null);
+const modalRef = ref(null);
+const editor = inject(InjectionTokens.EDITOR);
+const toggler = useModalToggler({ wrapperRef, modalRef });
 
-    components: {
-        Range,
-        Modal,
-        Icon,
-        Button,
-        NumberField,
-        FieldLabel
-    },
+const currentValue = editor.commands.getLineHeight();
 
-    directives: {
-        tooltip
-    },
-
-    setup() {
-        const wrapperRef = ref(null);
-        const modalRef = ref(null);
-        const editor = inject(InjectionTokens.EDITOR);
-        const toggler = useModalToggler({ wrapperRef, modalRef });
-
-        const currentValue = editor.commands.getLineHeight();
-
-        const apply = (value) => editor.commands.applyLineHeight(String(value));
-
-        return {
-            wrapperRef,
-            modalRef,
-            isOpened: toggler.isOpened,
-            toggler,
-            currentValue,
-            apply
-        };
-    }
-};
+const apply = (value) => editor.commands.applyLineHeight(String(value));
+const isOpened = computed(() => unref(toggler.isOpened));
 </script>
 
 <style scoped>

package/lib/components/toolbar/controls/ListControl.vue

@@ -10,11 +10,7 @@
             <Icon :name="currentIcon" size="28px" auto-color />
         </Button>
 
-        <Dropdown
-            :value="currentValue"
-            :options="$options.listTypes"
-            @change="apply"
-        >
+        <Dropdown :value="currentValue" :options="listTypes" @change="apply">
             <template #activator="{ open, isOpened }">
                 <Button
                     icon
@@ -44,59 +40,32 @@
     </div>
 </template>
 
-<script>
+<script setup>
 import { computed, inject, ref, unref } from 'vue';
 import { InjectionTokens } from '../../../injectionTokens';
 import { Dropdown, DropdownOption, Button, Icon } from '../../base';
 import { ListTypes } from '../../../enums';
-import { tooltip } from '../../../directives';
-
-export default {
-    name: 'ListControl',
-
-    listTypes: ListTypes.values.map((type) => ({
-        id: type,
-        icon: `list-${type}`
-    })),
-
-    components: {
-        Dropdown,
-        DropdownOption,
-        Button,
-        Icon
-    },
+import { tooltip as vTooltip } from '../../../directives';
 
-    directives: {
-        tooltip
-    },
+const listTypes = ListTypes.values.map((type) => ({
+    id: type,
+    icon: `list-${type}`
+}));
 
-    setup() {
-        const editor = inject(InjectionTokens.EDITOR);
-        const selectionValue = editor.commands.getListType();
-        const isList = computed(() => !!unref(selectionValue));
-        const currentValue = computed(() => unref(selectionValue) || 'none');
-        const recentListType = ref(ListTypes.DISC);
-        const isCurrentListSelected = computed(() => unref(selectionValue) === recentListType.value);
+const editor = inject(InjectionTokens.EDITOR);
+const selectionValue = editor.commands.getListType();
+const currentValue = computed(() => unref(selectionValue) || 'none');
+const recentListType = ref(ListTypes.DISC);
+const isCurrentListSelected = computed(() => unref(selectionValue) === recentListType.value);
 
-        const currentIcon = computed(() => `list-${recentListType.value}`);
+const currentIcon = computed(() => `list-${recentListType.value}`);
 
-        const apply = (type) => {
-            recentListType.value = type;
-            editor.chain().focus().applyList(type).run();
-        };
-
-        const toggle = () => apply(recentListType.value || ListTypes.DISC);
-
-        return {
-            isList,
-            currentValue,
-            currentIcon,
-            isCurrentListSelected,
-            apply,
-            toggle
-        };
-    }
+const apply = (type) => {
+    recentListType.value = type;
+    editor.chain().focus().applyList(type).run();
 };
+
+const toggle = () => apply(recentListType.value || ListTypes.DISC);
 </script>
 
 <style scoped>

package/lib/components/toolbar/controls/RemoveFormatControl.vue

@@ -9,29 +9,12 @@
     </Button>
 </template>
 
-<script>
+<script setup>
 import { inject } from 'vue';
 import { Button, Icon } from '../../base';
 import { InjectionTokens } from '../../../injectionTokens';
-import { tooltip } from '../../../directives';
+import { tooltip as vTooltip } from '../../../directives';
 
-export default {
-    name: 'RemoveFormatControl',
-
-    components: {
-        Icon,
-        Button
-    },
-
-    directives: {
-        tooltip
-    },
-
-    setup() {
-        const editor = inject(InjectionTokens.EDITOR);
-        const apply = () => editor.chain().focus().removeFormat().run();
-
-        return { apply };
-    }
-};
+const editor = inject(InjectionTokens.EDITOR);
+const apply = () => editor.chain().focus().removeFormat().run();
 </script>

package/lib/components/toolbar/controls/StrikeThroughControl.vue

@@ -10,35 +10,15 @@
     </Button>
 </template>
 
-<script>
+<script setup>
 import { inject } from 'vue';
 import { Button, Icon } from '../../base';
 import { InjectionTokens } from '../../../injectionTokens';
-import { tooltip } from '../../../directives';
+import { tooltip as vTooltip } from '../../../directives';
 
-export default {
-    name: 'StrikeThroughControl',
+const editor = inject(InjectionTokens.EDITOR);
 
-    components: {
-        Button,
-        Icon
-    },
-
-    directives: {
-        tooltip
-    },
-
-    setup() {
-        const editor = inject(InjectionTokens.EDITOR);
-
-        const currentValue = editor.commands.isStrikeThrough();
-        const apply = () => editor.chain().focus().toggleStrikeThrough().run();
-
-        return {
-            currentValue,
-            apply
-        };
-    }
-};
+const currentValue = editor.commands.isStrikeThrough();
+const apply = () => editor.chain().focus().toggleStrikeThrough().run();
 </script>
 

package/lib/components/toolbar/controls/StylePresetControl.vue

@@ -20,73 +20,48 @@
     </div>
 </template>
 
-<script>
+<script setup>
 import { computed, inject, unref } from 'vue';
 import { InjectionTokens } from '../../../injectionTokens';
 import { Dropdown, Button, Icon } from '../../base';
-import { tooltip } from '../../../directives';
+import { tooltip as vTooltip } from '../../../directives';
 import { TextSettings } from '../../../enums';
 
 const CLEAR_MARKS = [TextSettings.FONT_SIZE, TextSettings.FONT_WEIGHT];
 
-export default {
-    name: 'StylePresetControl',
-
-    components: {
-        Icon,
-        Button,
-        Dropdown
-    },
-
-    directives: {
-        tooltip
-    },
-
-    setup() {
-        const editor = inject(InjectionTokens.EDITOR);
-
-        const presets = editor.commands.getPresetList();
-        const preset = editor.commands.getPreset();
-        const customization = editor.commands.getPresetCustomization();
-
-        const isCustomized = computed(() => {
-            const { attributes, marks } = unref(customization);
-
-            return !!attributes.length || !!marks.length;
-        });
-
-        const options = computed(() => {
-            return unref(presets).map((preset) => ({
-                id: preset.id,
-                title: preset.name
-            }));
-        });
-
-        const apply = (value) => {
-            editor.chain()
-                .focus()
-                .applyPreset(value)
-                .storeSelection()
-                .expandSelectionToBlock()
-                .removeMarks(CLEAR_MARKS)
-                .restoreSelection()
-                .run();
-        };
-
-        const tooltip = computed(() => isCustomized.value ? 'Reset Styles to Page Styles' : '');
-
-        const removeCustomization = () => editor.chain().focus().removePresetCustomization().run();
-
-        return {
-            options,
-            preset,
-            tooltip,
-            isCustomized,
-            apply,
-            removeCustomization
-        };
-    }
+const editor = inject(InjectionTokens.EDITOR);
+
+const presets = editor.commands.getPresetList();
+const preset = editor.commands.getPreset();
+const customization = editor.commands.getPresetCustomization();
+
+const isCustomized = computed(() => {
+    const { attributes, marks } = unref(customization);
+
+    return !!attributes.length || !!marks.length;
+});
+
+const options = computed(() => {
+    return unref(presets).map((preset) => ({
+        id: preset.id,
+        title: preset.name
+    }));
+});
+
+const apply = (value) => {
+    editor.chain()
+        .focus()
+        .applyPreset(value)
+        .storeSelection()
+        .expandSelectionToBlock()
+        .removeMarks(CLEAR_MARKS)
+        .restoreSelection()
+        .run();
 };
+
+const tooltip = computed(() => isCustomized.value ? 'Reset Styles to Page Styles' : '');
+
+const removeCustomization = () => editor.chain().focus().removePresetCustomization().run();
 </script>
 
 <style scoped>

package/lib/components/toolbar/controls/SuperscriptControl.vue

@@ -10,35 +10,15 @@
     </Button>
 </template>
 
-<script>
+<script setup>
 import { inject } from 'vue';
 import { Button, Icon } from '../../base';
 import { InjectionTokens } from '../../../injectionTokens';
-import { tooltip } from '../../../directives';
+import { tooltip as vTooltip } from '../../../directives';
 
-export default {
-    name: 'SuperscriptControl',
+const editor = inject(InjectionTokens.EDITOR);
 
-    components: {
-        Button,
-        Icon
-    },
-
-    directives: {
-        tooltip
-    },
-
-    setup() {
-        const editor = inject(InjectionTokens.EDITOR);
-
-        const currentValue = editor.commands.isSuperscript();
-        const apply = () => editor.chain().focus().toggleSuperscript().run();
-
-        return {
-            currentValue,
-            apply
-        };
-    }
-};
+const currentValue = editor.commands.isSuperscript();
+const apply = () => editor.chain().focus().toggleSuperscript().run();
 </script>
 

package/lib/components/toolbar/controls/UnderlineControl.vue

@@ -10,36 +10,15 @@
     </Button>
 </template>
 
-<script>
+<script setup>
 import { inject } from 'vue';
 import { Button, Icon } from '../../base';
 import { InjectionTokens } from '../../../injectionTokens';
-import { tooltip } from '../../../directives';
+import { tooltip as vTooltip } from '../../../directives';
 
-export default {
-    name: 'UnderlineControl',
+const editor = inject(InjectionTokens.EDITOR);
 
-    components: {
-        Button,
-        Icon
-    },
-
-    directives: {
-        tooltip
-    },
-
-    setup() {
-        const editor = inject(InjectionTokens.EDITOR);
-
-        const currentValue = editor.commands.isUnderline();
-
-        const apply = () => editor.chain().focus().toggleUnderline().run();
-
-        return {
-            currentValue,
-            apply
-        };
-    }
-};
+const currentValue = editor.commands.isUnderline();
+const apply = () => editor.chain().focus().toggleUnderline().run();
 </script>
 

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

@@ -20,20 +20,22 @@ const createEditor = ({ alignment } = {}) => ({
 
 function createComponent({ editor, slotParams }) {
     return shallowMount(AlignmentControl, {
-        stubs: {
-            ButtonToggle: {
-                render() {
-                    const children = this.$scopedSlots.option({
-                        ...slotParams,
-                        activate: jest.fn()
-                    });
+        global: {
+            stubs: {
+                ButtonToggle: {
+                    render() {
+                        const children = this.$slots.option({
+                            ...slotParams,
+                            activate: jest.fn()
+                        });
 
-                    return h('div', null, children);
-                },
-                props: ['value']
-            }
-        },
-        provide: { [InjectionTokens.EDITOR]: editor }
+                        return h('div', null, children);
+                    },
+                    props: ['value']
+                }
+            },
+            provide: { [InjectionTokens.EDITOR]: editor }
+        }
     });
 }
 

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

@@ -19,22 +19,24 @@ const createEditor = ({ backgroundColor } = {}) => ({
 
 function createComponent({ editor }) {
     return shallowMount(BackgroundColorControl, {
-        stubs: {
-            ColorPicker: {
-                name: 'ColorPicker',
-                props: ['value'],
-
-                render() {
-                    const children = this.$scopedSlots.activator({
-                        toggle: jest.fn(),
-                        isOpened: false
-                    });
-
-                    return h('div', null, children);
+        global: {
+            stubs: {
+                ColorPicker: {
+                    name: 'ColorPicker',
+                    props: ['value'],
+
+                    render() {
+                        const children = this.$slots.activator({
+                            toggle: jest.fn(),
+                            isOpened: false
+                        });
+
+                        return h('div', null, children);
+                    }
                 }
-            }
-        },
-        provide: { [InjectionTokens.EDITOR]: editor }
+            },
+            provide: { [InjectionTokens.EDITOR]: editor }
+        }
     });
 }
 

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

@@ -19,14 +19,15 @@ const createEditor = () => ({
 
 function createComponent({ editor }) {
     return shallowMount(CaseStyleControl, {
-        stubs: {
-            Dropdown: {
-                render: () => h('div'),
-                props: ['value']
-            }
-        },
-
-        provide: { [InjectionTokens.EDITOR]: editor }
+        global: {
+            stubs: {
+                Dropdown: {
+                    render: () => h('div'),
+                    props: ['value']
+                }
+            },
+            provide: { [InjectionTokens.EDITOR]: editor }
+        }
     });
 }
 

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

@@ -19,22 +19,24 @@ const createEditor = ({ fontColor } = {}) => ({
 
 function createComponent({ editor }) {
     return shallowMount(FontColorControl, {
-        stubs: {
-            ColorPicker: {
-                name: 'ColorPicker',
-                props: ['value'],
-
-                render() {
-                    const children = this.$scopedSlots.activator({
-                        toggle: jest.fn(),
-                        isOpened: false
-                    });
-
-                    return h('div', null, children);
+        global: {
+            stubs: {
+                ColorPicker: {
+                    name: 'ColorPicker',
+                    props: ['value'],
+
+                    render() {
+                        const children = this.$slots.activator({
+                            toggle: jest.fn(),
+                            isOpened: false
+                        });
+
+                        return h('div', null, children);
+                    }
                 }
-            }
-        },
-        provide: { [InjectionTokens.EDITOR]: editor }
+            },
+            provide: { [InjectionTokens.EDITOR]: editor }
+        }
     });
 }