@zipify/wysiwyg 1.0.0-dev.52 → 1.0.0-dev.55

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/__tests__/LinkControl.test.js

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

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

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

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/components/toolbar/controls/link/destination/__tests__/LinkControlPageBlock.test.js

@@ -1,4 +1,4 @@
-import { ref, h } from '@vue/composition-api';
+import { ref, h } from 'vue';
 import { shallowMount } from '@vue/test-utils';
 import LinkControlPageBlock from '../LinkControlPageBlock';
 import { InjectionTokens } from '../../../../../../injectionTokens';

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

@@ -1,4 +1,4 @@
-import { ref, h } from '@vue/composition-api';
+import { ref, h } from 'vue';
 import { shallowMount } from '@vue/test-utils';
 import { Checkbox, TextField } from '../../../../../base';
 import LinkControlUrl from '../LinkControlUrl';

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 { convertAlignment, 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,3 +1,4 @@
+import { toRef } from 'vue';
 import { Extension } from '@tiptap/vue-2';
 import { createCommand } from '../utils';
 
@@ -6,7 +7,7 @@ export const DeviceManager = Extension.create({
 
     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 { convertFontSize, 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, convertLineHeight } from '../utils';
 import { NodeTypes, TextSettings } from '../enums';
 

package/lib/extensions/Link.js

@@ -38,7 +38,8 @@ export const Link = Base.extend({
                     if (!href.startsWith('#')) return LinkDestinations.URL;
 
                     const id = href.replace('#', '');
-                    const block = this.options.pageBlocksRef.value.find((block) => block.id === parseInt(id));
+                    const blocks = this.options.pageBlocks.value || this.options.pageBlocks;
+                    const block = blocks.find((block) => block.id === parseInt(id));
 
                     return block ? LinkDestinations.BLOCK : LinkDestinations.URL;
                 }

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';
@@ -35,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.value || this.options.presets;
 
                             if (element.parentElement.tagName === 'LI') return null;
 
@@ -72,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 }) => {
@@ -173,7 +173,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';
@@ -27,7 +27,7 @@ function createEditor({ content, wrapperEl }) {
         extensions: buildCoreExtensions().concat(
             MockStylePreset,
             DeviceManager.configure({
-                deviceRef: ref('desktop')
+                device: ref('desktop')
             }),
             LineHeight.configure({
                 wrapperRef: ref(wrapperEl ?? document.createElement('div'))

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

@@ -1,4 +1,4 @@
-import { ref } from '@vue/composition-api';
+import { ref } from 'vue';
 import { Editor } from '@tiptap/vue-2';
 import { ContentNormalizer } from '../../services';
 import { Link } from '../Link';
@@ -12,7 +12,7 @@ function createEditor({ content }) {
             Link.configure({
                 preset: 'link',
                 baseClass: 'zw ts-',
-                pageBlocksRef: ref([{ id: 987654 }])
+                pageBlocks: ref([{ id: 987654 }])
             })
         )
     });

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

@@ -22,7 +22,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
@@ -31,7 +31,7 @@ export function buildExtensions(options) {
             baseClass: options.baseListClass
         }),
         DeviceManager.configure({
-            deviceRef: options.deviceRef
+            device: options.deviceRef
         }),
         FontFamily.configure({
             fonts: options.fonts,
@@ -56,7 +56,7 @@ export function buildExtensions(options) {
         Link.configure({
             preset: linkPreset,
             basePresetClass: options.basePresetClass,
-            pageBlocksRef: options.pageBlocksRef
+            pageBlocks: options.pageBlocksRef
         })
     ]);
 }

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zipify/wysiwyg",
-  "version": "1.0.0-dev.52",
+  "version": "1.0.0-dev.55",
   "description": "Zipify modification of TipTap text editor",
   "main": "dist/wysiwyg.mjs",
   "repository": {
@@ -39,8 +39,8 @@
     "simplebar": "^5.3.8"
   },
   "peerDependencies": {
-    "@vue/composition-api": "*",
-    "@zipify/colorpicker": "2.*"
+    "@zipify/colorpicker": "2.*",
+    "vue": "2.7.*"
   },
   "devDependencies": {
     "@babel/core": "^7.18.9",
@@ -48,10 +48,9 @@
     "@babel/plugin-transform-runtime": "^7.18.9",
     "@babel/preset-env": "^7.18.9",
     "@babel/runtime": "^7.18.9",
-    "@vue/composition-api": "^1.7.0",
     "@vue/test-utils": "^1.3.0",
     "@vue/vue2-jest": "^28.0.1",
-    "@zipify/colorpicker": "^2.0.1",
+    "@zipify/colorpicker": "^2.0.0",
     "babel-jest": "^28.1.3",
     "eslint": "^8.20.0",
     "eslint-plugin-import": "^2.26.0",
@@ -67,7 +66,7 @@
     "svgo": "^2.8.0",
     "vite": "^3.0.4",
     "vite-plugin-vue2": "^2.0.2",
-    "vue": "^2.6.14",
-    "vue-template-compiler": "^2.6.14"
+    "vue": "^2.7.8",
+    "vue-template-compiler": "^2.7.8"
   }
 }