@zipify/wysiwyg 3.1.2 → 4.0.0-vue3.0

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

@@ -17,36 +17,28 @@
     </div>
 </template>
 
-<script>
+<script setup>
 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
-        }
+defineProps({
+    href: {
+        type: String,
+        required: true
     },
 
-    setup(props, { emit }) {
-        const updateLink = (value) => emit('update-link', value);
-        const updateTarget = (value) => emit('update-target', value);
+    isTargetBlank: {
+        type: Boolean,
+        required: true
+    },
 
-        return { updateLink, updateTarget };
+    validator: {
+        type: Object,
+        required: true
     }
-};
+});
+
+const emit = defineEmits(['update-link', 'update-target']);
+
+const updateLink = (value) => emit('update-link', value);
+const updateTarget = (value) => emit('update-target', value);
 </script>

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

@@ -6,19 +6,19 @@ import { Dropdown } from '../../../../../base';
 
 function createComponent() {
     return shallowMount(LinkControlPageBlock, {
-        propsData: {
+        props: {
             value: 12
         },
-
-        stubs: {
-            Dropdown: {
-                render: () => h('div'),
-                props: ['value']
+        global: {
+            stubs: {
+                Dropdown: {
+                    render: () => h('div'),
+                    props: ['value']
+                }
+            },
+            provide: {
+                [InjectionTokens.PAGE_BLOCKS]: ref([{ id: 1 }, { id: 2 }])
             }
-        },
-
-        provide: {
-            [InjectionTokens.PAGE_BLOCKS]: ref([{ id: 1 }, { id: 2 }])
         }
     });
 }

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

@@ -5,21 +5,23 @@ import LinkControlUrl from '../LinkControlUrl';
 
 function createComponent() {
     return shallowMount(LinkControlUrl, {
-        propsData: {
+        props: {
             validator: { error: ref({ value: null }) },
             href: '',
             isTargetBlank: false
         },
 
-        stubs: {
-            TextField: {
-                render: () => h('div'),
-                props: ['value']
-            },
-
-            Checkbox: {
-                render: () => h('div'),
-                props: ['value']
+        global: {
+            stubs: {
+                TextField: {
+                    render: () => h('div'),
+                    props: ['value']
+                },
+
+                Checkbox: {
+                    render: () => h('div'),
+                    props: ['value']
+                }
             }
         }
     });

package/lib/components/toolbar/layouts/ToolbarDesktop.vue

@@ -1,52 +1,50 @@
 <template>
-    <div>
-        <ToolbarRow>
-            <StylePresetControl />
-            <ToolbarDivider vertical />
-            <FontFamilyControl />
-            <ToolbarDivider vertical />
-            <FontWeightControl />
-            <ToolbarDivider vertical />
-            <FontSizeControl />
-            <ToolbarDivider vertical />
+    <ToolbarRow>
+        <StylePresetControl />
+        <ToolbarDivider vertical />
+        <FontFamilyControl />
+        <ToolbarDivider vertical />
+        <FontWeightControl />
+        <ToolbarDivider vertical />
+        <FontSizeControl />
+        <ToolbarDivider vertical />
 
-            <ToolbarGroup>
-                <FontColorControl />
-                <BackgroundColorControl />
-            </ToolbarGroup>
-        </ToolbarRow>
+        <ToolbarGroup>
+            <FontColorControl />
+            <BackgroundColorControl />
+        </ToolbarGroup>
+    </ToolbarRow>
 
-        <ToolbarDivider horizontal />
+    <ToolbarDivider horizontal />
 
-        <ToolbarRow>
-            <ToolbarGroup>
-                <ItalicControl />
-                <UnderlineControl />
-                <StrikeThroughControl />
-                <SuperscriptControl />
-                <CaseStyleControl />
-            </ToolbarGroup>
+    <ToolbarRow>
+        <ToolbarGroup>
+            <ItalicControl />
+            <UnderlineControl />
+            <StrikeThroughControl />
+            <SuperscriptControl />
+            <CaseStyleControl />
+        </ToolbarGroup>
 
-            <ToolbarDivider vertical />
+        <ToolbarDivider vertical />
 
-            <AlignmentControl />
-            <ToolbarDivider vertical />
+        <AlignmentControl />
+        <ToolbarDivider vertical />
 
-            <LineHeightControl />
-            <ToolbarDivider vertical />
+        <LineHeightControl />
+        <ToolbarDivider vertical />
 
-            <ListControl />
-            <ToolbarDivider vertical />
+        <ListControl />
+        <ToolbarDivider vertical />
 
-            <ToolbarGroup>
-                <LinkControl />
-                <RemoveFormatControl />
-            </ToolbarGroup>
-        </ToolbarRow>
-    </div>
+        <ToolbarGroup>
+            <LinkControl />
+            <RemoveFormatControl />
+        </ToolbarGroup>
+    </ToolbarRow>
 </template>
 
-<script>
+<script setup>
 import { ToolbarDivider, ToolbarRow, ToolbarGroup } from '../base';
 import {
     StylePresetControl,
@@ -66,30 +64,4 @@ import {
     RemoveFormatControl,
     LinkControl
 } from '../controls';
-
-export default {
-    name: 'ToolbarDesktop',
-
-    components: {
-        ToolbarRow,
-        ToolbarGroup,
-        ToolbarDivider,
-        StylePresetControl,
-        CaseStyleControl,
-        FontFamilyControl,
-        FontWeightControl,
-        FontSizeControl,
-        FontColorControl,
-        BackgroundColorControl,
-        ItalicControl,
-        UnderlineControl,
-        SuperscriptControl,
-        StrikeThroughControl,
-        AlignmentControl,
-        LineHeightControl,
-        ListControl,
-        RemoveFormatControl,
-        LinkControl
-    }
-};
 </script>

package/lib/components/toolbar/layouts/ToolbarMobile.vue

@@ -1,57 +1,55 @@
 <template>
-    <div>
-        <ToolbarRow>
-            <StylePresetControl />
-            <ToolbarDivider vertical />
-            <FontFamilyControl />
-            <ToolbarDivider vertical />
-            <FontWeightControl />
-        </ToolbarRow>
+    <ToolbarRow>
+        <StylePresetControl />
+        <ToolbarDivider vertical />
+        <FontFamilyControl />
+        <ToolbarDivider vertical />
+        <FontWeightControl />
+    </ToolbarRow>
 
-        <ToolbarDivider horizontal />
+    <ToolbarDivider horizontal />
 
-        <ToolbarRow>
-            <FontSizeControl />
+    <ToolbarRow>
+        <FontSizeControl />
 
-            <ToolbarDivider vertical />
+        <ToolbarDivider vertical />
 
-            <ToolbarGroup>
-                <FontColorControl />
-                <BackgroundColorControl />
-            </ToolbarGroup>
+        <ToolbarGroup>
+            <FontColorControl />
+            <BackgroundColorControl />
+        </ToolbarGroup>
 
-            <ToolbarDivider vertical />
+        <ToolbarDivider vertical />
 
-            <ToolbarGroup>
-                <ItalicControl />
-                <UnderlineControl />
-                <StrikeThroughControl />
-                <SuperscriptControl />
-                <CaseStyleControl />
-            </ToolbarGroup>
-        </ToolbarRow>
+        <ToolbarGroup>
+            <ItalicControl />
+            <UnderlineControl />
+            <StrikeThroughControl />
+            <SuperscriptControl />
+            <CaseStyleControl />
+        </ToolbarGroup>
+    </ToolbarRow>
 
-        <ToolbarDivider horizontal />
+    <ToolbarDivider horizontal />
 
-        <ToolbarRow>
-            <AlignmentControl />
-            <ToolbarDivider vertical />
+    <ToolbarRow>
+        <AlignmentControl />
+        <ToolbarDivider vertical />
 
-            <LineHeightControl />
-            <ToolbarDivider vertical />
+        <LineHeightControl />
+        <ToolbarDivider vertical />
 
-            <ListControl />
-            <ToolbarDivider vertical />
+        <ListControl />
+        <ToolbarDivider vertical />
 
-            <ToolbarGroup>
-                <LinkControl />
-                <RemoveFormatControl />
-            </ToolbarGroup>
-        </ToolbarRow>
-    </div>
+        <ToolbarGroup>
+            <LinkControl />
+            <RemoveFormatControl />
+        </ToolbarGroup>
+    </ToolbarRow>
 </template>
 
-<script>
+<script setup>
 import { ToolbarDivider, ToolbarRow, ToolbarGroup } from '../base';
 import {
     StylePresetControl,
@@ -71,30 +69,4 @@ import {
     RemoveFormatControl,
     LinkControl
 } from '../controls';
-
-export default {
-    name: 'ToolbarMobile',
-
-    components: {
-        ToolbarRow,
-        ToolbarGroup,
-        ToolbarDivider,
-        StylePresetControl,
-        CaseStyleControl,
-        FontFamilyControl,
-        FontWeightControl,
-        FontSizeControl,
-        FontColorControl,
-        BackgroundColorControl,
-        ItalicControl,
-        UnderlineControl,
-        SuperscriptControl,
-        StrikeThroughControl,
-        AlignmentControl,
-        LineHeightControl,
-        ListControl,
-        RemoveFormatControl,
-        LinkControl
-    }
-};
 </script>

package/lib/components/toolbar/layouts/ToolbarPopup.vue

@@ -1,52 +1,50 @@
 <template>
-    <div>
-        <ToolbarRow>
-            <StylePresetControl />
-            <ToolbarDivider vertical />
-            <FontFamilyControl />
-            <ToolbarDivider vertical />
-            <FontWeightControl />
-            <ToolbarDivider vertical />
-            <FontSizeControl />
-            <ToolbarDivider vertical />
+    <ToolbarRow>
+        <StylePresetControl />
+        <ToolbarDivider vertical />
+        <FontFamilyControl />
+        <ToolbarDivider vertical />
+        <FontWeightControl />
+        <ToolbarDivider vertical />
+        <FontSizeControl />
+        <ToolbarDivider vertical />
 
-            <ToolbarGroup>
-                <FontColorControl />
-                <BackgroundColorControl />
-            </ToolbarGroup>
+        <ToolbarGroup>
+            <FontColorControl />
+            <BackgroundColorControl />
+        </ToolbarGroup>
 
-            <ToolbarDivider vertical />
+        <ToolbarDivider vertical />
 
-            <ToolbarGroup>
-                <ItalicControl />
-                <UnderlineControl />
-                <StrikeThroughControl />
-                <SuperscriptControl />
-                <CaseStyleControl />
-            </ToolbarGroup>
-        </ToolbarRow>
+        <ToolbarGroup>
+            <ItalicControl />
+            <UnderlineControl />
+            <StrikeThroughControl />
+            <SuperscriptControl />
+            <CaseStyleControl />
+        </ToolbarGroup>
+    </ToolbarRow>
 
-        <ToolbarDivider horizontal />
+    <ToolbarDivider horizontal />
 
-        <ToolbarRow>
-            <AlignmentControl />
-            <ToolbarDivider vertical />
+    <ToolbarRow>
+        <AlignmentControl />
+        <ToolbarDivider vertical />
 
-            <LineHeightControl />
-            <ToolbarDivider vertical />
+        <LineHeightControl />
+        <ToolbarDivider vertical />
 
-            <ListControl />
-            <ToolbarDivider vertical />
+        <ListControl />
+        <ToolbarDivider vertical />
 
-            <ToolbarGroup>
-                <LinkControl />
-                <RemoveFormatControl />
-            </ToolbarGroup>
-        </ToolbarRow>
-    </div>
+        <ToolbarGroup>
+            <LinkControl />
+            <RemoveFormatControl />
+        </ToolbarGroup>
+    </ToolbarRow>
 </template>
 
-<script>
+<script setup>
 import { ToolbarDivider, ToolbarRow, ToolbarGroup } from '../base';
 import {
     StylePresetControl,
@@ -66,30 +64,4 @@ import {
     RemoveFormatControl,
     LinkControl
 } from '../controls';
-
-export default {
-    name: 'ToolbarPopup',
-
-    components: {
-        ToolbarRow,
-        ToolbarGroup,
-        ToolbarDivider,
-        StylePresetControl,
-        CaseStyleControl,
-        FontFamilyControl,
-        FontWeightControl,
-        FontSizeControl,
-        FontColorControl,
-        BackgroundColorControl,
-        ItalicControl,
-        UnderlineControl,
-        SuperscriptControl,
-        StrikeThroughControl,
-        AlignmentControl,
-        LineHeightControl,
-        ListControl,
-        RemoveFormatControl,
-        LinkControl
-    }
-};
 </script>

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

@@ -1,5 +1,5 @@
 import { h, ref, toRef } from 'vue';
-import { EditorContent } from '@tiptap/vue-2';
+import { EditorContent } from '@tiptap/vue-3';
 import { shallowMount } from '@vue/test-utils';
 import { buildTestExtensions } from '../../__tests__/utils';
 import { useEditor } from '../useEditor';
@@ -35,7 +35,7 @@ const createContent = (text = 'test') => NodeFactory.doc([
 
 function createComponent({ content } = {}) {
     const wrapper = shallowMount(TestComponent, {
-        propsData: { value: content || createContent('test') }
+        props: { value: content || createContent('test') }
     });
 
     return {
@@ -62,7 +62,7 @@ describe('life cycle', () => {
     test('should destroy editor', () => {
         const { wrapper, editor } = createComponent();
 
-        wrapper.destroy();
+        wrapper.unmount();
 
         expect(editor.isDestroyed).toBe(true);
     });

package/lib/composables/useEditor.js

@@ -1,4 +1,4 @@
-import { Editor } from '@tiptap/vue-2';
+import { Editor } from '@tiptap/vue-3';
 import { onUnmounted, watch, reactive, unref } from 'vue';
 import { ContentNormalizer } from '../services';
 import { markWysiwygContent } from '../utils';

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

@@ -6,7 +6,7 @@ describe('out click', () => {
         const el = document.createElement('div');
         const onOutClick = jest.fn();
 
-        outClick.bind(el, { value: onOutClick });
+        outClick.mounted(el, { value: onOutClick });
         await waitAsyncOperation();
 
         document.dispatchEvent(new Event('click'));
@@ -19,7 +19,7 @@ describe('out click', () => {
         const el = document.createElement('div');
         const onOutClick = jest.fn();
 
-        outClick.bind(el, { value: onOutClick });
+        outClick.mounted(el, { value: onOutClick });
         await waitAsyncOperation();
 
         el.dispatchEvent(new Event('click'));
@@ -34,7 +34,7 @@ describe('out click', () => {
         const onOutClick = jest.fn();
 
         el.append(child);
-        outClick.bind(el, { value: onOutClick });
+        outClick.mounted(el, { value: onOutClick });
         await waitAsyncOperation();
 
         child.dispatchEvent(new Event('click'));
@@ -47,10 +47,10 @@ describe('out click', () => {
         const el = document.createElement('div');
         const onOutClick = jest.fn();
 
-        outClick.bind(el, { value: onOutClick });
+        outClick.mounted(el, { value: onOutClick });
         await waitAsyncOperation();
 
-        outClick.unbind(el);
+        outClick.beforeUnmount(el);
 
         document.dispatchEvent(new Event('click'));
         await waitAsyncOperation();
@@ -62,10 +62,10 @@ describe('out click', () => {
         const el = document.createElement('div');
         const onOutClick = jest.fn();
 
-        outClick.bind(el, { value: { onOutClick, isDisabled: true } });
+        outClick.mounted(el, { value: { onOutClick, isDisabled: true } });
         await waitAsyncOperation();
 
-        outClick.update(el, { value: { isDisabled: false } });
+        outClick.updated(el, { value: { isDisabled: false } });
         await waitAsyncOperation();
 
         document.dispatchEvent(new Event('click'));
@@ -78,10 +78,10 @@ describe('out click', () => {
         const el = document.createElement('div');
         const onOutClick = jest.fn();
 
-        outClick.bind(el, { value: { onOutClick, isDisabled: false } });
+        outClick.mounted(el, { value: { onOutClick, isDisabled: false } });
         await waitAsyncOperation();
 
-        outClick.update(el, { value: { isDisabled: true } });
+        outClick.updated(el, { value: { isDisabled: true } });
         await waitAsyncOperation();
 
         document.dispatchEvent(new Event('click'));

package/lib/directives/outClick.js

@@ -14,7 +14,7 @@ function toggleListener(toEnable, onClick) {
 }
 
 export const outClick = {
-    bind(el, { value }) {
+    mounted(el, { value }) {
         const onOutClick = value.onOutClick || value;
         const isEnabled = !value.isDisabled;
 
@@ -33,7 +33,7 @@ export const outClick = {
         }
     },
 
-    update(el, { value }) {
+    updated(el, { value }) {
         const data = dataStorage.get(el);
         const isEnabled = !value.isDisabled;
 
@@ -44,7 +44,7 @@ export const outClick = {
         dataStorage.set(el, { callback: data.callback, isEnabled });
     },
 
-    unbind(el) {
+    beforeUnmount(el) {
         toggleListener(false, dataStorage.get(el).callback);
     }
 };

package/lib/extensions/Alignment.js

@@ -1,4 +1,4 @@
-import { Extension } from '@tiptap/vue-2';
+import { Extension } from '@tiptap/vue-3';
 import { computed, unref } from 'vue';
 import { convertAlignment, createCommand, createKeyboardShortcut, renderInlineSetting } from '../utils';
 import { Alignments, NodeTypes, TextSettings } from '../enums';

package/lib/extensions/BackgroundColor.js

@@ -1,4 +1,4 @@
-import { Mark } from '@tiptap/vue-2';
+import { Mark } from '@tiptap/vue-3';
 import { convertColor, createCommand, renderMark } from '../utils';
 import { TextSettings } from '../enums';
 

package/lib/extensions/CaseStyle.js

@@ -1,4 +1,4 @@
-import { Extension } from '@tiptap/vue-2';
+import { Extension } from '@tiptap/vue-3';
 import { capitalize, createCommand } from '../utils';
 import { CaseStyles } from '../enums';
 

package/lib/extensions/DeviceManager.js

@@ -1,5 +1,5 @@
 import { toRef } from 'vue';
-import { Extension } from '@tiptap/vue-2';
+import { Extension } from '@tiptap/vue-3';
 import { createCommand } from '../utils';
 
 export const DeviceManager = Extension.create({

package/lib/extensions/FontColor.js

@@ -1,4 +1,4 @@
-import { Mark } from '@tiptap/vue-2';
+import { Mark } from '@tiptap/vue-3';
 import { computed, unref } from 'vue';
 import { convertColor, createCommand, renderMark } from '../utils';
 import { MarkGroups, TextSettings } from '../enums';

package/lib/extensions/FontFamily.js

@@ -1,4 +1,4 @@
-import { Mark } from '@tiptap/vue-2';
+import { Mark } from '@tiptap/vue-3';
 import { computed, unref } from 'vue';
 import { createCommand, renderMark } from '../utils';
 import { MarkGroups, TextSettings } from '../enums';
@@ -42,7 +42,7 @@ export const FontFamily = Mark.create({
             }),
 
             findFontByName: createCommand((_, name) => {
-                return this.options.fonts.find((font) => font.name === name);
+                return unref(this.options.fonts).find((font) => font.name === name);
             }),
 
             getFontFamily: createCommand(({ commands }) => {