@zipify/wysiwyg 1.0.0-dev.49 → 1.0.0-dev.51

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

@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { ref } from 'vue';
+import { ref } from '@vue/composition-api';
 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';
+import { ref } from '@vue/composition-api';
 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';
+import { ref } from '@vue/composition-api';
 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';
+import { h, nextTick, ref } from '@vue/composition-api';
 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';
+import { h, ref } from '@vue/composition-api';
 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';
+import { ref } from '@vue/composition-api';
 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';
+import { ref } from '@vue/composition-api';
 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';
+import { ref } from '@vue/composition-api';
 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';
+import { computed, inject, ref } from '@vue/composition-api';
 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';
+import { computed, ref, inject } from '@vue/composition-api';
 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';
+import { computed, inject } from '@vue/composition-api';
 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';
+import { ref, nextTick } from '@vue/composition-api';
 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';
+import { ref } from '@vue/composition-api';
 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';
+import { ref, inject } from '@vue/composition-api';
 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';
+import { computed, toRef } from '@vue/composition-api';
 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';
+import { inject } from '@vue/composition-api';
 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';
+import { ref, h } from '@vue/composition-api';
 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';
+import { ref, h } from '@vue/composition-api';
 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';
+import { h, toRef } from '@vue/composition-api';
 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';
+import { onUnmounted, watch, reactive } from '@vue/composition-api';
 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';
+import { computed } from '@vue/composition-api';
 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';
+import { computed } from '@vue/composition-api';
 import { convertColor, createCommand, renderMark } from '../utils';
 import { TextSettings } from '../enums';
 

package/lib/extensions/DeviceManager.js

@@ -1,4 +1,3 @@
-import { toRef } from 'vue';
 import { Extension } from '@tiptap/vue-2';
 import { createCommand } from '../utils';
 
@@ -7,7 +6,7 @@ export const DeviceManager = Extension.create({
 
     addCommands() {
         return {
-            getDevice: createCommand(() => toRef(this.options, 'device'))
+            getDevice: createCommand(() => this.options.deviceRef)
         };
     }
 });

package/lib/extensions/FontColor.js

@@ -1,5 +1,5 @@
 import { Mark } from '@tiptap/vue-2';
-import { computed } from 'vue';
+import { computed } from '@vue/composition-api';
 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';
+import { computed } from '@vue/composition-api';
 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';
+import { computed } from '@vue/composition-api';
 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';
+import { computed } from '@vue/composition-api';
 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';
+import { computed } from '@vue/composition-api';
 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';
+import { computed } from '@vue/composition-api';
 import { createCommand, renderInlineSetting, convertLineHeight } from '../utils';
 import { NodeTypes, TextSettings } from '../enums';
 

package/lib/extensions/StylePreset.js

@@ -1,5 +1,5 @@
 import { Extension } from '@tiptap/vue-2';
-import { computed, toRef } from 'vue';
+import { computed, toRef } from '@vue/composition-api';
 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.presets;
+                            const presets = this.options.presetsRef.value;
 
                             if (element.parentElement.tagName === 'LI') return null;
 
@@ -72,7 +72,7 @@ export const StylePreset = Extension.create({
 
         return {
             getPresetList: createCommand(() => computed(() => {
-                return this.options.presets.filter((preset) => !preset.hidden);
+                return this.options.presetsRef.value.filter((preset) => !preset.hidden);
             })),
 
             getPreset: createCommand(({ commands }) => {
@@ -150,9 +150,14 @@ export const StylePreset = Extension.create({
                     .run();
             }),
 
-            removeFormat: createCommand(({ commands }) => {
-                commands.removePresetCustomization();
-                commands.applyDefaultPreset();
+            removeFormat: createCommand(({ chain }) => {
+                chain()
+                    .storeSelection()
+                    .expandSelectionToBlock()
+                    .unsetAllMarks()
+                    .applyDefaultPreset()
+                    .restoreSelection()
+                    .run();
             })
         };
     },
@@ -168,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.presets) {
+        for (const preset of this.options.presetsRef.value) {
             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';
+import { computed } from '@vue/composition-api';
 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';
+import { ref } from '@vue/composition-api';
 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({ device: ref('desktop') }),
+            DeviceManager.configure({ deviceRef: 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';
+import { ref } from '@vue/composition-api';
 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';
+import { ref } from '@vue/composition-api';
 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';
+import { ref } from '@vue/composition-api';
 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';
+import { ref } from '@vue/composition-api';
 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({
-                device: ref('desktop')
+                deviceRef: 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';
+import { ref } from '@vue/composition-api';
 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';
+import { ref } from '@vue/composition-api';
 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';
+import { ref } from '@vue/composition-api';
 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({
-                device: ref('desktop')
+                deviceRef: 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';
+import { ref } from '@vue/composition-api';
 import { Editor } from '@tiptap/vue-2';
 import { ContentNormalizer } from '../../services';
 import { Link } from '../Link';

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

@@ -1,4 +1,5 @@
 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';
@@ -110,7 +111,7 @@ function createEditor({ content, presets, defaultId }) {
 
             extensions: buildCoreExtensions().concat(
                 StylePreset.configure({
-                    presets: presets,
+                    presetsRef: ref(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';
+import { ref } from '@vue/composition-api';
 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';
+import { computed } from '@vue/composition-api';
 import { createCommand } from '../../utils';
 import { NodeTypes } from '../../enums';
 

package/lib/extensions/list/List.js

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

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

@@ -1,4 +1,5 @@
 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';
@@ -15,7 +16,7 @@ function createEditor({ content }) {
                 baseClass: 'zw-list--'
             }),
             StylePreset.configure({
-                presets: [
+                presetsRef: ref([
                     {
                         id: 'regular-1',
                         common: {},
@@ -23,7 +24,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';
+import { ref } from '@vue/composition-api';
 import { FavoriteColors } from '../FavoriteColors';
 
 function createService({ colors, onUpdate }) {

package/lib/styles/content.css

@@ -10,7 +10,7 @@
     pointer-events: none;
 }
 
-.zw-style {
+.zw-style.zw-style.zw-style {
     font-weight: var(--zw-font-weight, var(--zw-preset-font-weight));
     font-family: var(--zw-font-family, var(--zw-preset-font-family));
     color: var(--zw-font-color, var(--zw-preset-color));
@@ -21,7 +21,7 @@
 
 @media (min-width: 1200px) {
 
-    .zw-style {
+    .zw-style.zw-style.zw-style {
         font-size: var(--zw-font-size-desktop, var(--zw-preset-desktop-font-size));
         text-align: var(--zw-text-align-desktop, var(--zw-preset-desktop-text-align));
         line-height: var(--zw-line-height-desktop, var(--zw-preset-desktop-line-height));
@@ -30,7 +30,7 @@
 
 @media (min-width: 769px) and (max-width: 1199.98px) {
 
-    .zw-style {
+    .zw-style.zw-style.zw-style {
         font-size: var(--zw-font-size-tablet, var(--zw-preset-tablet-font-size));
         text-align: var(--zw-text-align-tablet, var(--zw-preset-tablet-text-align));
         line-height: var(--zw-line-height-tablet, var(--zw-preset-tablet-line-height));
@@ -39,15 +39,17 @@
 
 @media (max-width: 768.98px) {
 
-    .zw-style {
+    .zw-style.zw-style.zw-style {
         font-size: var(--zw-font-size-mobile, var(--zw-preset-mobile-font-size));
         text-align: var(--zw-text-align-mobile, var(--zw-preset-mobile-text-align));
         line-height: var(--zw-line-height-mobile, var(--zw-preset-mobile-line-height));
     }
 }
 
+
 /* ProseMirror styles */
 
+
 .ProseMirror {
     position: relative;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zipify/wysiwyg",
-  "version": "1.0.0-dev.49",
+  "version": "1.0.0-dev.51",
   "description": "Zipify modification of TipTap text editor",
   "main": "dist/wysiwyg.mjs",
   "repository": {
@@ -39,8 +39,8 @@
     "simplebar": "^5.3.8"
   },
   "peerDependencies": {
-    "@zipify/colorpicker": "2.*",
-    "vue": "2.7.*"
+    "@vue/composition-api": "*",
+    "@zipify/colorpicker": "2.*"
   },
   "devDependencies": {
     "@babel/core": "^7.18.9",
@@ -48,9 +48,10 @@
     "@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.0",
+    "@zipify/colorpicker": "^2.0.1",
     "babel-jest": "^28.1.3",
     "eslint": "^8.20.0",
     "eslint-plugin-import": "^2.26.0",
@@ -66,7 +67,7 @@
     "svgo": "^2.8.0",
     "vite": "^3.0.4",
     "vite-plugin-vue2": "^2.0.2",
-    "vue": "^2.7.8",
-    "vue-template-compiler": "^2.7.8"
+    "vue": "^2.6.14",
+    "vue-template-compiler": "^2.6.14"
   }
 }