@zipify/wysiwyg 1.0.0-dev.38 → 1.0.0-dev.40

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

@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { ref, h, nextTick } from '@vue/composition-api';
+import { ref, h, nextTick } from 'vue';
 import { InjectionTokens } from '../../../../injectionTokens';
 import { Alignments } from '../../../../enums';
 import { Button, Icon, Modal } from '../../../base';

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

@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { h, ref } from '@vue/composition-api';
+import { h, ref } from 'vue';
 import { InjectionTokens } from '../../../../injectionTokens';
 import { ColorPicker } from '../../../base';
 import BackgroundColorControl from '../BackgroundColorControl';

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

@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { h } from '@vue/composition-api';
+import { h } from 'vue';
 import { InjectionTokens } from '../../../../injectionTokens';
 import { Dropdown } from '../../../base';
 import CaseStyleControl from '../CaseStyleControl';

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

@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { h, ref } from '@vue/composition-api';
+import { h, ref } from 'vue';
 import { InjectionTokens } from '../../../../injectionTokens';
 import { ColorPicker } from '../../../base';
 import FontColorControl from '../FontColorControl';

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

@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { h, ref } from '@vue/composition-api';
+import { h, ref } from 'vue';
 import { InjectionTokens } from '../../../../injectionTokens';
 import { Dropdown } from '../../../base';
 import FontFamilyControl from '../FontFamilyControl';

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

@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { ref } from '@vue/composition-api';
+import { ref } from 'vue';
 import { InjectionTokens } from '../../../../injectionTokens';
 import { Dropdown } from '../../../base';
 import FontSizeControl from '../FontSizeControl';

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

@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { ref } from '@vue/composition-api';
+import { ref } from 'vue';
 import { InjectionTokens } from '../../../../injectionTokens';
 import { Dropdown } from '../../../base';
 import FontWeightControl from '../FontWeightControl';

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

@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { ref } from '@vue/composition-api';
+import { ref } from 'vue';
 import { InjectionTokens } from '../../../../injectionTokens';
 import { Button } from '../../../base';
 import ItalicControl from '../ItalicControl';

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

@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { h, nextTick, ref } from '@vue/composition-api';
+import { h, nextTick, ref } from 'vue';
 import { InjectionTokens } from '../../../../injectionTokens';
 import { Button, Modal, NumberField, Range } from '../../../base';
 import LineHeightControl from '../LineHeightControl';

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

@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { h, ref } from '@vue/composition-api';
+import { h, ref } from 'vue';
 import { InjectionTokens } from '../../../../injectionTokens';
 import { Dropdown, Icon } from '../../../base';
 import ListControl from '../ListControl';

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

@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { ref } from '@vue/composition-api';
+import { ref } from 'vue';
 import { InjectionTokens } from '../../../../injectionTokens';
 import { Button } from '../../../base';
 import StrikeThroughControl from '../StrikeThroughControl';

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

@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { ref } from '@vue/composition-api';
+import { ref } from 'vue';
 import { InjectionTokens } from '../../../../injectionTokens';
 import { Button, Dropdown } from '../../../base';
 import StylePresetControl from '../StylePresetControl';

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

@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { ref } from '@vue/composition-api';
+import { ref } from 'vue';
 import { InjectionTokens } from '../../../../injectionTokens';
 import { Button } from '../../../base';
 import UnderlineControl from '../UnderlineControl';

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

@@ -1,4 +1,4 @@
-import { computed, inject, ref } from '@vue/composition-api';
+import { computed, inject, ref } from 'vue';
 import { InjectionTokens } from '../../../../injectionTokens';
 
 const STORAGE_KEY = 'wswg.recently_used_fonts';

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

@@ -31,7 +31,7 @@
 </template>
 
 <script>
-import { computed, ref, inject } from '@vue/composition-api';
+import { computed, ref, inject } from 'vue';
 import { InjectionTokens } from '../../../../injectionTokens';
 import { tooltip } from '../../../../directives';
 import { useValidator } from '../../../base/composables';

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

@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import { computed, inject } from '@vue/composition-api';
+import { computed, inject } from 'vue';
 import { Icon, Button } from '../../../base';
 import { InjectionTokens } from '../../../../injectionTokens';
 

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

@@ -1,4 +1,4 @@
-import { ref, inject } from '@vue/composition-api';
+import { ref, inject } from 'vue';
 import { LinkTargets, LinkDestinations } from '../../../../../enums';
 import { InjectionTokens } from '../../../../../injectionTokens';
 

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

@@ -39,7 +39,7 @@
 </template>
 
 <script>
-import { computed, toRef } from '@vue/composition-api';
+import { computed, toRef } from 'vue';
 import { LinkDestinations, LinkTargets } from '../../../../../enums';
 import { Dropdown, DropdownOption, FieldLabel } from '../../../../base';
 import LinkControlPageBlock from './LinkControlPageBlock';

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

@@ -22,7 +22,7 @@
 </template>
 
 <script>
-import { inject } from '@vue/composition-api';
+import { inject } from 'vue';
 import { FieldLabel, DropdownOption, Dropdown } from '../../../../base';
 import { InjectionTokens } from '../../../../../injectionTokens';
 

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

@@ -1,4 +1,4 @@
-import { h, toRef } from '@vue/composition-api';
+import { h, toRef } from 'vue';
 import { EditorContent } from '@tiptap/vue-2';
 import { shallowMount } from '@vue/test-utils';
 import { useEditor } from '../useEditor';

package/lib/composables/useEditor.js

@@ -1,5 +1,5 @@
 import { Editor } from '@tiptap/vue-2';
-import { onUnmounted, watch, reactive } from '@vue/composition-api';
+import { onUnmounted, watch, reactive } from 'vue';
 import { ContentNormalizer } from '../services';
 
 export function useEditor({ content, onChange, extensions }) {

package/lib/extensions/Alignment.js

@@ -1,5 +1,5 @@
 import { Extension } from '@tiptap/vue-2';
-import { computed } from '@vue/composition-api';
+import { computed } from 'vue';
 import { createCommand, createKeyboardShortcut, renderInlineSetting } from '../utils';
 import { Alignments, NodeTypes, TextSettings } from '../enums';
 

package/lib/extensions/BackgroundColor.js

@@ -1,5 +1,5 @@
 import { Mark } from '@tiptap/vue-2';
-import { computed } from '@vue/composition-api';
+import { computed } from 'vue';
 import { convertColor, createCommand, renderMark } from '../utils';
 import { TextSettings } from '../enums';
 

package/lib/extensions/DeviceManager.js

@@ -1,16 +1,13 @@
+import { toRef } from 'vue';
 import { Extension } from '@tiptap/vue-2';
 import { createCommand } from '../utils';
 
 export const DeviceManager = Extension.create({
     name: 'device_manager',
 
-    addOptions: () => ({
-        deviceRef: null
-    }),
-
     addCommands() {
         return {
-            getDevice: createCommand(() => this.options.deviceRef)
+            getDevice: createCommand(() => toRef(this.options, 'device'))
         };
     }
 });

package/lib/extensions/FontColor.js

@@ -1,5 +1,5 @@
 import { Mark } from '@tiptap/vue-2';
-import { computed } from '@vue/composition-api';
+import { computed } from 'vue';
 import { convertColor, createCommand, renderMark } from '../utils';
 import { TextSettings } from '../enums';
 

package/lib/extensions/FontFamily.js

@@ -1,5 +1,5 @@
 import { Mark } from '@tiptap/vue-2';
-import { computed } from '@vue/composition-api';
+import { computed } from 'vue';
 import { createCommand, renderMark } from '../utils';
 import { TextSettings } from '../enums';
 

package/lib/extensions/FontSize.js

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

package/lib/extensions/FontStyle.js

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

package/lib/extensions/FontWeight.js

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

package/lib/extensions/LineHeight.js

@@ -1,5 +1,5 @@
 import { Extension } from '@tiptap/vue-2';
-import { computed } from '@vue/composition-api';
+import { computed } from 'vue';
 import { createCommand, renderInlineSetting } from '../utils';
 import { NodeTypes, TextSettings } from '../enums';
 import { ContextWindow } from '../services';

package/lib/extensions/StylePreset.js

@@ -1,5 +1,5 @@
 import { Extension } from '@tiptap/vue-2';
-import { computed, toRef } from '@vue/composition-api';
+import { computed, toRef } from 'vue';
 import { Heading } from '@tiptap/extension-heading';
 import { createCommand } from '../utils';
 import { Devices, NodeTypes, TextSettings } from '../enums';
@@ -21,13 +21,6 @@ export const StylePreset = Extension.create({
         })
     ],
 
-    addOptions: () => ({
-        presetsRef: null,
-        defaultId: null,
-        baseClass: null,
-        makeVariable: null
-    }),
-
     addStorage: () => ({
         presetStyleEl: null
     }),
@@ -42,7 +35,7 @@ export const StylePreset = Extension.create({
                         default: { id: this.options.defaultId },
 
                         parseHTML: (element) => {
-                            const presets = this.options.presetsRef.value;
+                            const presets = this.options.presets;
 
                             if (element.parentElement.tagName === 'LI') return null;
 
@@ -79,7 +72,7 @@ export const StylePreset = Extension.create({
 
         return {
             getPresetList: createCommand(() => computed(() => {
-                return this.options.presetsRef.value.filter((preset) => !preset.hidden);
+                return this.options.presets.filter((preset) => !preset.hidden);
             })),
 
             getPreset: createCommand(({ commands }) => {
@@ -175,7 +168,7 @@ export const StylePreset = Extension.create({
         this.storage.presetStyleEl = ContextWindow.document.createElement('style');
         this.storage.presetStyleEl.dataset.zwStyles = '';
 
-        for (const preset of this.options.presetsRef.value) {
+        for (const preset of this.options.presets) {
             const className = makePresetClass(this.options.baseClass, preset);
             const css = [` ${className} {`];
 

package/lib/extensions/TextDecoration.js

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

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

@@ -1,5 +1,5 @@
 import { Editor, Extension } from '@tiptap/vue-2';
-import { ref } from '@vue/composition-api';
+import { ref } from 'vue';
 import { NodeFactory } from '../../__tests__/utils';
 import { createCommand } from '../../utils';
 import { Alignment } from '../Alignment';
@@ -27,7 +27,7 @@ function createEditor({ content }) {
         content: ContentNormalizer.normalize(content),
         extensions: buildCoreExtensions().concat(
             MockStylePreset,
-            DeviceManager.configure({ deviceRef: ref('desktop') }),
+            DeviceManager.configure({ device: ref('desktop') }),
             Alignment
         )
     });

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

@@ -1,5 +1,5 @@
 import { Editor, Extension } from '@tiptap/vue-2';
-import { ref } from '@vue/composition-api';
+import { ref } from 'vue';
 import { NodeFactory } from '../../__tests__/utils';
 import { createCommand } from '../../utils';
 import { BackgroundColor } from '../BackgroundColor';

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

@@ -1,5 +1,5 @@
 import { Editor, Extension } from '@tiptap/vue-2';
-import { ref } from '@vue/composition-api';
+import { ref } from 'vue';
 import { NodeFactory } from '../../__tests__/utils';
 import { createCommand } from '../../utils';
 import { FontColor } from '../FontColor';

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

@@ -1,5 +1,5 @@
 import { Editor, Extension } from '@tiptap/vue-2';
-import { ref } from '@vue/composition-api';
+import { ref } from 'vue';
 import { NodeFactory } from '../../__tests__/utils';
 import { createCommand } from '../../utils';
 import { Font } from '../../models';

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

@@ -1,5 +1,5 @@
 import { Editor, Extension } from '@tiptap/vue-2';
-import { ref } from '@vue/composition-api';
+import { ref } from 'vue';
 import { NodeFactory } from '../../__tests__/utils';
 import { createCommand } from '../../utils';
 import { FontSize } from '../FontSize';
@@ -27,7 +27,7 @@ function createEditor({ content }) {
         extensions: buildCoreExtensions().concat(
             MockStylePreset,
             DeviceManager.configure({
-                deviceRef: ref('desktop')
+                device: ref('desktop')
             }),
             FontSize.configure({
                 minSize: 5,

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

@@ -1,5 +1,5 @@
 import { Editor, Extension } from '@tiptap/vue-2';
-import { ref } from '@vue/composition-api';
+import { ref } from 'vue';
 import { NodeFactory } from '../../__tests__/utils';
 import { createCommand } from '../../utils';
 import { FontStyle } from '../FontStyle';

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

@@ -1,5 +1,5 @@
 import { Editor, Extension } from '@tiptap/vue-2';
-import { ref } from '@vue/composition-api';
+import { ref } from 'vue';
 import { NodeFactory } from '../../__tests__/utils';
 import { createCommand } from '../../utils';
 import { Font } from '../../models';

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

@@ -1,5 +1,5 @@
 import { Editor, Extension } from '@tiptap/vue-2';
-import { ref } from '@vue/composition-api';
+import { ref } from 'vue';
 import { NodeFactory } from '../../__tests__/utils';
 import { createCommand } from '../../utils';
 import { DeviceManager } from '../DeviceManager';
@@ -26,7 +26,7 @@ function createEditor({ content }) {
         content: ContentNormalizer.normalize(content),
         extensions: buildCoreExtensions().concat(
             MockStylePreset,
-            DeviceManager.configure({ deviceRef: ref('desktop') }),
+            DeviceManager.configure({ device: ref('desktop') }),
             LineHeight
         )
     });

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

@@ -1,5 +1,4 @@
 import { Editor, Extension, Mark } from '@tiptap/vue-2';
-import { ref } from '@vue/composition-api';
 import { NodeFactory } from '../../__tests__/utils';
 import { StylePreset } from '../StylePreset';
 import { List } from '../list';
@@ -111,7 +110,7 @@ function createEditor({ content, presets, defaultId }) {
 
             extensions: buildCoreExtensions().concat(
                 StylePreset.configure({
-                    presetsRef: ref(presets),
+                    presets: presets,
                     baseClass: 'zw ts-',
                     defaultId,
 

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

@@ -1,5 +1,5 @@
 import { Editor, Extension } from '@tiptap/vue-2';
-import { ref } from '@vue/composition-api';
+import { ref } from 'vue';
 import { NodeFactory } from '../../__tests__/utils';
 import { createCommand } from '../../utils';
 import { TextDecoration } from '../TextDecoration';

package/lib/extensions/core/NodeProcessor.js

@@ -1,5 +1,5 @@
 import { Extension } from '@tiptap/vue-2';
-import { computed } from '@vue/composition-api';
+import { computed } from 'vue';
 import { createCommand } from '../../utils';
 import { NodeTypes } from '../../enums';
 

package/lib/extensions/index.js

@@ -21,7 +21,7 @@ export function buildExtensions(options) {
 
     return buildCoreExtensions(options).concat([
         StylePreset.configure({
-            presetsRef: options.presetsRef,
+            presets: options.presetsRef,
             defaultId: options.defaultPresetId,
             baseClass: options.basePresetClass,
             makeVariable: options.makePresetVariable
@@ -30,7 +30,7 @@ export function buildExtensions(options) {
             baseClass: options.baseListClass
         }),
         DeviceManager.configure({
-            deviceRef: options.deviceRef
+            device: options.deviceRef
         }),
         FontFamily.configure({
             fonts: options.fonts,

package/lib/extensions/list/List.js

@@ -1,5 +1,5 @@
 import { Node, wrappingInputRule } from '@tiptap/vue-2';
-import { computed } from '@vue/composition-api';
+import { computed } from 'vue';
 import { createCommand } from '../../utils';
 import { ListTypes, NodeTypes } from '../../enums';
 import { ListItem } from './ListItem';

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

@@ -1,5 +1,4 @@
 import { Editor } from '@tiptap/vue-2';
-import { ref } from '@vue/composition-api';
 import { NodeFactory } from '../../../__tests__/utils';
 import { ListTypes } from '../../../enums';
 import { StylePreset } from '../../StylePreset';
@@ -16,7 +15,7 @@ function createEditor({ content }) {
                 baseClass: 'zw-list--'
             }),
             StylePreset.configure({
-                presetsRef: ref([
+                presets: [
                     {
                         id: 'regular-1',
                         common: {},
@@ -24,7 +23,7 @@ function createEditor({ content }) {
                         tablet: {},
                         desktop: {}
                     }
-                ]),
+                ],
                 defaultId: 'regular-1',
                 baseClass: 'zw ts-'
             })

package/lib/index.js

@@ -1,2 +1 @@
 export { default as Wysiwyg } from './Wysiwyg';
-export { WysiwygPlugin } from './WysiwygPlugin';

package/lib/services/__tests__/FavoriteColors.test.js

@@ -1,4 +1,4 @@
-import { ref } from '@vue/composition-api';
+import { ref } from 'vue';
 import { FavoriteColors } from '../FavoriteColors';
 
 function createService({ colors, onUpdate }) {

package/lib/utils/importIcon.js

@@ -1,12 +1,13 @@
-// register all icons in webpack module loader
-const importFile = require.context('../assets/icons', true, /\.svg/);
+const modules = import.meta.glob('../assets/icons/*.svg', { as: 'raw', eager: true });
 
 export function importIcon(name) {
-    try {
-        return importFile(`./${name}.svg`);
-    } catch (error) {
+    const icon = modules[`../assets/icons/${name}.svg`];
+
+    if (!icon) {
         // eslint-disable-next-line no-console
-        console.warn('Cannot resolve wysiwyg icon', error);
+        console.warn(`[WSWG] Cannot resolve ${name} icon`);
         return '';
     }
+
+    return icon;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zipify/wysiwyg",
-  "version": "1.0.0-dev.38",
+  "version": "1.0.0-dev.40",
   "description": "Zipify modification of TipTap text editor",
   "main": "dist/wysiwyg.js",
   "repository": {
@@ -14,7 +14,7 @@
     "url": "https://github.com/ZipifyApps/ZipifyWysiwyg/issues"
   },
   "scripts": {
-    "lib:build": "webpack --config ./config/webpack/lib.config.js",
+    "lib:build": "vite build --config ./config/vite/lib.config.js",
     "example:start": "NODE_ENV=development webpack serve --config ./config/webpack/example.config.js",
     "example:build": "NODE_ENV=production webpack --config ./config/webpack/example.config.js",
     "test:unit": "jest .",
@@ -36,10 +36,10 @@
     "@tiptap/extension-superscript": "^2.0.0-beta.13",
     "@tiptap/extension-text": "^2.0.0-beta.17",
     "@tiptap/vue-2": "^2.0.0-beta.84",
-    "@vue/composition-api": "^1.7.0",
     "simplebar": "^5.3.8"
   },
   "peerDependencies": {
+    "vue": "2.7.*",
     "zipify-colorpicker": "*"
   },
   "devDependencies": {
@@ -68,9 +68,11 @@
     "style-loader": "^3.3.1",
     "stylelint": "^14.9.1",
     "svgo": "^2.8.0",
-    "vue": "^2.6.14",
-    "vue-loader": "^15.9.8",
-    "vue-template-compiler": "^2.6.14",
+    "vite": "^3.0.4",
+    "vite-plugin-vue2": "^2.0.2",
+    "vue": "^2.7.8",
+    "vue-loader": "^15.10.0",
+    "vue-template-compiler": "^2.7.8",
     "webpack": "^5.74.0",
     "webpack-bundle-analyzer": "^4.5.0",
     "webpack-cli": "^4.10.0",