@zipify/wysiwyg 3.1.2 → 4.0.0-vue3.0

package/lib/extensions/FontSize.js

@@ -1,4 +1,4 @@
-import { Mark } from '@tiptap/vue-2';
+import { Mark } from '@tiptap/vue-3';
 import { computed, unref } from 'vue';
 import { convertFontSize, createCommand, createKeyboardShortcut, renderMark } from '../utils';
 import { MarkGroups, TextSettings } from '../enums';
@@ -63,14 +63,14 @@ export const FontSize = Mark.create({
 
             increaseFontSize: createCommand(({ commands }) => {
                 const size = Number(unref(commands.getFontSize()));
-                const nextSize = Math.min(size + 1, this.options.maxSize);
+                const nextSize = Math.min(size + 1, unref(this.options.maxSize));
 
                 commands.applyFontSize(String(nextSize));
             }),
 
             decreaseFontSize: createCommand(({ commands }) => {
                 const size = Number(unref(commands.getFontSize()));
-                const nextSize = Math.max(size - 1, this.options.minSize);
+                const nextSize = Math.max(size - 1, unref(this.options.minSize));
 
                 commands.applyFontSize(String(nextSize));
             })

package/lib/extensions/FontStyle.js

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

package/lib/extensions/FontWeight.js

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

package/lib/extensions/LineHeight.js

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

package/lib/extensions/Link.js

@@ -78,7 +78,7 @@ export const Link = Base.extend({
             }),
 
             isLink: createCommand(({ commands }) => commands.hasMark(this.name)),
-            getLinkPreset: createCommand(() => computed(() => this.options.preset))
+            getLinkPreset: createCommand(() => computed(() => unref(this.options.preset)))
         };
     },
 

package/lib/extensions/Margin.js

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

package/lib/extensions/StylePreset.js

@@ -1,4 +1,4 @@
-import { Extension } from '@tiptap/vue-2';
+import { Extension } from '@tiptap/vue-3';
 import { computed, toRef, unref } from 'vue';
 import { createCommand } from '../utils';
 import { NodeTypes, TextSettings } from '../enums';
@@ -14,7 +14,7 @@ export const StylePreset = Extension.create({
                 attributes: {
                     preset: {
                         isRequired: false,
-                        default: { id: this.options.defaultId },
+                        default: { id: unref(this.options.defaultId) },
 
                         parseHTML: (element) => {
                             const presets = unref(this.options.presets);
@@ -26,20 +26,20 @@ export const StylePreset = Extension.create({
                                     return { id };
                                 }
 
-                                const presetSelector = this.options.styleRenderer.makePresetCssClass({ id });
+                                const presetSelector = unref(this.options.styleRenderer).makePresetCssClass({ id });
 
                                 if (element.matches(presetSelector)) return { id };
                                 if (element.tagName === `H${node?.level}`) return { id };
                             }
 
                             // Matches all paragraphs without classes to default preset
-                            return element.tagName === 'P' ? { id: this.options.defaultId } : null;
+                            return element.tagName === 'P' ? { id: unref(this.options.defaultId) } : null;
                         },
 
                         renderHTML: (attrs) => {
                             if (!attrs.preset) return null;
 
-                            return { class: this.options.styleRenderer.makePresetHtmlClass(attrs.preset) };
+                            return { class: unref(this.options.styleRenderer).makePresetHtmlClass(attrs.preset) };
                         }
                     }
                 }
@@ -68,11 +68,11 @@ export const StylePreset = Extension.create({
 
         return {
             getPresetList: createCommand(() => computed(() => {
-                return this.options.presets.filter((preset) => !preset.hidden);
+                return unref(this.options.presets).filter((preset) => !preset.hidden);
             })),
 
             getPreset: createCommand(({ commands }) => {
-                const selectionRef = commands.getBlockAttributes('preset', { id: this.options.defaultId });
+                const selectionRef = commands.getBlockAttributes('preset', { id: unref(this.options.defaultId) });
                 const presetsRef = commands.getPresetList();
                 const isLinkRef = commands.isLink();
                 const linkPresetRef = commands.getLinkPreset();
@@ -115,7 +115,7 @@ export const StylePreset = Extension.create({
             }),
 
             applyDefaultPreset: createCommand(({ commands }) => {
-                commands.applyPreset(this.options.defaultId);
+                commands.applyPreset(unref(this.options.defaultId));
             }),
 
             removePreset: createCommand(({ commands }) => {
@@ -198,6 +198,6 @@ export const StylePreset = Extension.create({
     },
 
     onCreate() {
-        this.options.styleRenderer.inject(ContextWindow.head, this.options.presets);
+        this.options.styleRenderer.inject(ContextWindow.head, unref(this.options.presets));
     }
 });

package/lib/extensions/Superscript.js

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

package/lib/extensions/TextDecoration.js

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

package/lib/extensions/__tests__/Alignment.test.js

@@ -1,4 +1,4 @@
-import { Editor, Extension } from '@tiptap/vue-2';
+import { Editor, Extension } from '@tiptap/vue-3';
 import { ref } from 'vue';
 import { buildTestExtensions } from '../../__tests__/utils';
 import { createCommand } from '../../utils';

package/lib/extensions/__tests__/BackgroundColor.test.js

@@ -1,4 +1,4 @@
-import { Editor, Extension } from '@tiptap/vue-2';
+import { Editor, Extension } from '@tiptap/vue-3';
 import { ref } from 'vue';
 import { buildTestExtensions } from '../../__tests__/utils';
 import { createCommand } from '../../utils';

package/lib/extensions/__tests__/CaseStyle.test.js

@@ -1,4 +1,4 @@
-import { Editor } from '@tiptap/vue-2';
+import { Editor } from '@tiptap/vue-3';
 import { buildTestExtensions } from '../../__tests__/utils';
 import { ContentNormalizer, NodeFactory } from '../../services';
 import { CaseStyles } from '../../enums';

package/lib/extensions/__tests__/FontColor.test.js

@@ -1,4 +1,4 @@
-import { Editor, Extension } from '@tiptap/vue-2';
+import { Editor, Extension } from '@tiptap/vue-3';
 import { ref } from 'vue';
 import { buildTestExtensions } from '../../__tests__/utils';
 import { createCommand } from '../../utils';

package/lib/extensions/__tests__/FontFamily.test.js

@@ -1,4 +1,4 @@
-import { Editor, Extension } from '@tiptap/vue-2';
+import { Editor, Extension } from '@tiptap/vue-3';
 import { ref } from 'vue';
 import { createCommand } from '../../utils';
 import { buildTestExtensions } from '../../__tests__/utils';

package/lib/extensions/__tests__/FontSize.test.js

@@ -1,4 +1,4 @@
-import { Editor, Extension } from '@tiptap/vue-2';
+import { Editor, Extension } from '@tiptap/vue-3';
 import { ref } from 'vue';
 import { buildTestExtensions } from '../../__tests__/utils';
 import { createCommand } from '../../utils';

package/lib/extensions/__tests__/FontStyle.test.js

@@ -1,4 +1,4 @@
-import { Editor, Extension } from '@tiptap/vue-2';
+import { Editor, Extension } from '@tiptap/vue-3';
 import { ref } from 'vue';
 import { buildTestExtensions } from '../../__tests__/utils';
 import { createCommand } from '../../utils';

package/lib/extensions/__tests__/FontWeight.test.js

@@ -1,4 +1,4 @@
-import { Editor, Extension } from '@tiptap/vue-2';
+import { Editor, Extension } from '@tiptap/vue-3';
 import { ref } from 'vue';
 import { buildTestExtensions } from '../../__tests__/utils';
 import { createCommand } from '../../utils';

package/lib/extensions/__tests__/LineHeight.test.js

@@ -1,4 +1,4 @@
-import { Editor, Extension } from '@tiptap/vue-2';
+import { Editor, Extension } from '@tiptap/vue-3';
 import { ref } from 'vue';
 import { buildTestExtensions } from '../../__tests__/utils';
 import { createCommand } from '../../utils';

package/lib/extensions/__tests__/Link.test.js

@@ -1,5 +1,5 @@
 import { ref } from 'vue';
-import { Editor, Mark } from '@tiptap/vue-2';
+import { Editor, Mark } from '@tiptap/vue-3';
 import { buildTestExtensions } from '../../__tests__/utils';
 import { ContentNormalizer, NodeFactory } from '../../services';
 import { Link } from '../Link';

package/lib/extensions/__tests__/StylePreset.test.js

@@ -1,4 +1,4 @@
-import { Editor, Extension, Mark } from '@tiptap/vue-2';
+import { Editor, Extension, Mark } from '@tiptap/vue-3';
 import { buildTestExtensions } from '../../__tests__/utils';
 import { StylePreset } from '../StylePreset';
 import { List } from '../list';

package/lib/extensions/__tests__/Superscript.test.js

@@ -1,4 +1,4 @@
-import { Editor } from '@tiptap/vue-2';
+import { Editor } from '@tiptap/vue-3';
 import { buildTestExtensions } from '../../__tests__/utils';
 import { ContentNormalizer, NodeFactory } from '../../services';
 import { Superscript } from '../Superscript';

package/lib/extensions/__tests__/TextDecoration.test.js

@@ -1,4 +1,4 @@
-import { Editor, Extension } from '@tiptap/vue-2';
+import { Editor, Extension } from '@tiptap/vue-3';
 import { ref } from 'vue';
 import { buildTestExtensions } from '../../__tests__/utils';
 import { createCommand } from '../../utils';

package/lib/extensions/core/NodeProcessor.js

@@ -1,4 +1,4 @@
-import { Extension, getMarkType } from '@tiptap/vue-2';
+import { Extension, getMarkType } from '@tiptap/vue-3';
 import { computed, toRef, unref } from 'vue';
 import {
     createCommand,

package/lib/extensions/core/SelectionProcessor.js

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

package/lib/extensions/core/TextProcessor.js

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

package/lib/extensions/core/__tests__/NodeProcessor.test.js

@@ -1,5 +1,5 @@
 import { ref } from 'vue';
-import { Editor, Extension, Mark } from '@tiptap/vue-2';
+import { Editor, Extension, Mark } from '@tiptap/vue-3';
 import { buildTestExtensions } from '../../../__tests__/utils';
 import { Devices, ListTypes, MarkGroups, NodeTypes, TextSettings } from '../../../enums';
 import { ContentNormalizer, NodeFactory } from '../../../services';

package/lib/extensions/core/__tests__/SelectionProcessor.test.js

@@ -1,4 +1,4 @@
-import { Editor } from '@tiptap/vue-2';
+import { Editor } from '@tiptap/vue-3';
 import { buildTestExtensions } from '../../../__tests__/utils';
 import { ContentNormalizer, NodeFactory } from '../../../services';
 

package/lib/extensions/core/__tests__/TextProcessor.test.js

@@ -1,4 +1,4 @@
-import { Editor, Mark, Extension } from '@tiptap/vue-2';
+import { Editor, Mark, Extension } from '@tiptap/vue-3';
 import { buildTestExtensions } from '../../../__tests__/utils';
 import { ContentNormalizer, NodeFactory } from '../../../services';
 import { NodeTypes, TextSettings } from '../../../enums';

package/lib/extensions/core/index.js

@@ -1,4 +1,4 @@
-import { Extension } from '@tiptap/vue-2';
+import { Extension } from '@tiptap/vue-3';
 import Text from '@tiptap/extension-text';
 import History from '@tiptap/extension-history';
 import { NodeProcessor } from './NodeProcessor';

package/lib/extensions/index.js

@@ -25,7 +25,7 @@ export function buildExtensions(options) {
     watch(options.presetsRef, () => {
         presetsMap.default = getPresetById(options.defaultPresetId);
         presetsMap.link = getPresetById(options.linkPresetId);
-    }, { immediate: true });
+    }, { immediate: true, deep: true });
 
     return buildCoreExtensions(options).concat([
         StylePreset.configure({

package/lib/extensions/list/List.js

@@ -1,4 +1,4 @@
-import { Node, wrappingInputRule } from '@tiptap/vue-2';
+import { Node, wrappingInputRule } from '@tiptap/vue-3';
 import { computed, unref } from 'vue';
 import { copyMark, createCommand } from '../../utils';
 import { ListTypes, MarkGroups, NodeTypes, TextSettings } from '../../enums';
@@ -34,7 +34,7 @@ export const List = Node.create({
 
         const getBulletType = (element) => {
             for (const type of ListTypes.values) {
-                const bulletClass = `.${this.options.baseClass}${type}`;
+                const bulletClass = `.${unref(this.options.baseClass)}${type}`;
 
                 if (element.matches(bulletClass)) return type;
                 if (HTML_TYPES[element.type.toLowerCase()] === type) return type;
@@ -61,8 +61,8 @@ export const List = Node.create({
 
     renderHTML({ HTMLAttributes: attrs }) {
         const classes = [
-            this.options.baseClass + attrs.bullet.type,
-            this.options.presetClass
+            unref(this.options.baseClass) + attrs.bullet.type,
+            unref(this.options.presetClass)
         ];
         const isOrdered = ListTypes.ordered.includes(attrs.bullet.type);
 

package/lib/extensions/list/__tests__/List.test.js

@@ -1,4 +1,4 @@
-import { Editor, Mark } from '@tiptap/vue-2';
+import { Editor, Mark } from '@tiptap/vue-3';
 import { buildTestExtensions } from '../../../__tests__/utils';
 import { ListTypes, TextSettings } from '../../../enums';
 import { StylePreset } from '../../StylePreset';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zipify/wysiwyg",
-  "version": "3.1.2",
+  "version": "4.0.0-vue3.0",
   "description": "Zipify modification of TipTap text editor",
   "main": "dist/wysiwyg.mjs",
   "bin": {
@@ -40,15 +40,15 @@
     "@tiptap/extension-list-item": "2.0.0-beta.209",
     "@tiptap/extension-paragraph": "2.0.0-beta.209",
     "@tiptap/extension-text": "2.0.0-beta.209",
-    "@tiptap/vue-2": "2.0.0-beta.209",
-    "commander": "^9.4.1",
-    "jsdom": "^20.0.3",
+    "@tiptap/vue-3": "2.0.0-beta.209",
+    "commander": "^9.5.0",
+    "jsdom": "^21.0.0",
     "lodash": "^4.17.21",
     "simplebar": "^5.3.9"
   },
   "peerDependencies": {
     "@zipify/colorpicker": "^2.2",
-    "vue": "^2.7"
+    "vue": "^3.2.45"
   },
   "peerDependenciesMeta": {
     "@zipify/colorpicker": {
@@ -59,7 +59,7 @@
     }
   },
   "devDependencies": {
-    "@babel/core": "^7.20.7",
+    "@babel/core": "^7.20.12",
     "@babel/eslint-parser": "^7.19.1",
     "@babel/plugin-transform-runtime": "^7.19.6",
     "@babel/preset-env": "^7.20.2",
@@ -70,30 +70,29 @@
     "@rollup/plugin-json": "^6.0.0",
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-replace": "^5.0.2",
-    "@rollup/plugin-terser": "^0.2.1",
-    "@vue/test-utils": "^1.3.3",
-    "@vue/vue2-jest": "^29.2.2",
+    "@rollup/plugin-terser": "^0.3.0",
+    "@vitejs/plugin-vue": "^4.0.0",
+    "@vue/test-utils": "^2.2.7",
+    "@vue/vue3-jest": "^29.2.2",
     "@zipify/colorpicker": "^2.2.1",
-    "@zipify/eslint-config": "^1.0.0",
+    "@zipify/eslint-config": "^1.1.0",
     "babel-jest": "^29.3.1",
-    "eslint": "8.30.0",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jest": "^27.1.7",
+    "eslint": "8.31.0",
+    "eslint-plugin-import": "^2.27.4",
+    "eslint-plugin-jest": "^27.2.1",
     "eslint-plugin-vue": "^9.8.0",
     "gzipper": "^7.2.0",
-    "husky": "^8.0.2",
+    "husky": "^8.0.3",
     "jest": "^29.3.1",
     "jest-environment-jsdom": "^29.3.1",
     "lint-staged": "^13.1.0",
     "postcss-html": "^1.5.0",
     "release-it": "^15.6.0",
-    "rollup": "^3.9.0",
-    "stylelint": "^14.16.0",
+    "rollup": "^3.10.0",
+    "stylelint": "^14.16.1",
     "svgo": "^3.0.2",
-    "vite": "^4.0.3",
-    "vite-plugin-vue2": "^2.0.3",
-    "vue": "^2.7.14",
-    "vue-template-compiler": "^2.7.14"
+    "vite": "^4.0.4",
+    "vue": "^3.2.45"
   },
   "engines": {
     "node": ">=18.12.0"

package/config/jest/matchers/toVueEmpty.js

@@ -1,16 +0,0 @@
-/**
- * @param componentWrapper {Wrapper}
- */
-export function toVueEmpty(componentWrapper) {
-    if (componentWrapper.vnode.isComment || !componentWrapper.html()) {
-        return {
-            pass: true,
-            message: () => 'Vue component is empty'
-        };
-    }
-
-    return {
-        pass: false,
-        message: () => 'Vue component isn\'t empty'
-    };
-}

package/config/jest/matchers/toVuexActionHasBeenDispatched.js

@@ -1,19 +0,0 @@
-export function toVuexActionHasBeenDispatched(store, actionName) {
-    if (!store.dispatch || !jest.isMockFunction(store.dispatch)) {
-        throw new Error('You should mock "dispatch" method in component store');
-    }
-
-    const dispatchCalls = store.dispatch.mock.calls;
-    const isActionDispatched = dispatchCalls.some(([dispatchedAction]) => dispatchedAction === actionName);
-
-    if (isActionDispatched) {
-        return {
-            pass: true,
-            message: () => `Action "${actionName}" has been called`
-        };
-    }
-    return {
-        pass: false,
-        message: () => `Action "${actionName}" hasn't been called`
-    };
-}

package/lib/components/base/__tests__/__snapshots__/TextField.test.js.snap

@@ -1,9 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`input change handling should emit parsed value 1`] = `
-Array [
-  Array [
-    "Hello world!!!",
-  ],
-]
-`;

package/lib/components/base/dropdown/__tests__/DropdownMenu.test.js

@@ -1,67 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import { ref } from 'vue';
-import { InjectionTokens } from '../injectionTokens';
-import DropdownMenu from '../DropdownMenu';
-
-const createToggler = (isOpened) => ({
-    close: jest.fn(),
-    isOpened: ref(isOpened ?? true)
-});
-
-function createComponent({ options, toggler } = {}) {
-    return shallowMount(DropdownMenu, {
-        stubs: {
-            transition: {
-                render() {
-                    return this.$slots.default?.[0];
-                }
-            }
-        },
-        propsData: {
-            options: options ?? []
-        },
-        provide: {
-            [InjectionTokens.TOGGLER]: toggler ?? createToggler()
-        }
-    });
-}
-
-const SELECTORS = {
-    MENU: '[data-test-selector="dropdownMenu"]'
-};
-
-describe('rendering', () => {
-    const getChildEls = (wrapper) => Array.from(wrapper.element.children);
-    const getChildTagNames = (wrapper) => getChildEls(wrapper).map((el) => el.tagName);
-
-    test('should render plain options', () => {
-        const wrapper = createComponent({
-            options: [
-                { id: 'one' },
-                { id: 'two' }
-            ]
-        });
-
-        const menuWrapper = wrapper.find(SELECTORS.MENU);
-        const childTagNames = getChildTagNames(menuWrapper);
-
-        expect(childTagNames).toEqual(['DROPDOWNOPTION-STUB', 'DROPDOWNOPTION-STUB']);
-    });
-
-    test('should render groups options', () => {
-        const wrapper = createComponent({
-            options: [
-                { id: 'one', options: [] },
-                { id: 'two', options: [] }
-            ]
-        });
-        const menuWrapper = wrapper.find(SELECTORS.MENU);
-        const childTagNames = getChildTagNames(menuWrapper);
-
-        expect(childTagNames).toEqual([
-            'DROPDOWNGROUP-STUB',
-            'DROPDOWNDIVIDER-STUB',
-            'DROPDOWNGROUP-STUB'
-        ]);
-    });
-});