@zipify/wysiwyg 4.11.0 → 4.11.2

package/example/fonts.js

@@ -1,35 +1,35 @@
 export const FONTS = [
     {
-        'name': 'Merriweather',
-        'styles': [
+        name: 'Merriweather',
+        styles: [
             '900i'
         ],
-        'category': 'Serif'
+        category: 'Serif'
     },
     {
-        'name': 'Arvo',
-        'styles': [
+        name: 'Arvo',
+        styles: [
             '400',
             '400i',
             '700',
             '700i'
         ],
-        'category': 'Serif'
+        category: 'Serif'
     },
     {
-        'name': 'BioRhyme',
-        'styles': [
+        name: 'BioRhyme',
+        styles: [
             '200',
             '300',
             '400',
             '700',
             '800'
         ],
-        'category': 'Serif'
+        category: 'Serif'
     },
     {
-        'name': 'Josefin Slab',
-        'styles': [
+        name: 'Josefin Slab',
+        styles: [
             '100',
             '100i',
             '300',
@@ -41,11 +41,11 @@ export const FONTS = [
             '700',
             '700i'
         ],
-        'category': 'Serif'
+        category: 'Serif'
     },
     {
-        'name': 'Rubik',
-        'styles': [
+        name: 'Rubik',
+        styles: [
             '300',
             '300i',
             '400',
@@ -57,11 +57,11 @@ export const FONTS = [
             '900',
             '900i'
         ],
-        'category': 'Serif'
+        category: 'Serif'
     },
     {
-        'name': 'Alegreya',
-        'styles': [
+        name: 'Alegreya',
+        styles: [
             '400',
             '400i',
             '500',
@@ -73,11 +73,11 @@ export const FONTS = [
             '900',
             '900i'
         ],
-        'category': 'Serif'
+        category: 'Serif'
     },
     {
-        'name': 'Crimson Text',
-        'styles': [
+        name: 'Crimson Text',
+        styles: [
             '400',
             '400i',
             '600',
@@ -85,58 +85,58 @@ export const FONTS = [
             '700',
             '700i'
         ],
-        'category': 'Serif'
+        category: 'Serif'
     },
     {
-        'name': 'PT Serif',
-        'styles': [
+        name: 'PT Serif',
+        styles: [
             '400',
             '400i',
             '700',
             '700i'
         ],
-        'category': 'Serif'
+        category: 'Serif'
     },
     {
-        'name': 'Anonymous Pro',
-        'styles': [
+        name: 'Anonymous Pro',
+        styles: [
             '400',
             '400i',
             '700',
             '700i'
         ],
-        'category': 'Serif'
+        category: 'Serif'
     },
     {
-        'name': 'Roboto Slab',
-        'styles': [
+        name: 'Roboto Slab',
+        styles: [
             '100',
             '300',
             '400',
             '700'
         ],
-        'category': 'Serif'
+        category: 'Serif'
     },
     {
-        'name': 'Scope One',
-        'styles': [
+        name: 'Scope One',
+        styles: [
             '400'
         ],
-        'category': 'Serif'
+        category: 'Serif'
     },
     {
-        'name': 'Droid Serif',
-        'styles': [
+        name: 'Droid Serif',
+        styles: [
             '400',
             '400i',
             '700',
             '700i'
         ],
-        'category': 'Serif'
+        category: 'Serif'
     },
     {
-        'name': 'Josefin Sans',
-        'styles': [
+        name: 'Josefin Sans',
+        styles: [
             '100',
             '100i',
             '300',
@@ -148,11 +148,11 @@ export const FONTS = [
             '700',
             '700i'
         ],
-        'category': 'Sans Serif'
+        category: 'Sans Serif'
     },
     {
-        'name': 'Work Sans',
-        'styles': [
+        name: 'Work Sans',
+        styles: [
             '100',
             '200',
             '300',
@@ -163,11 +163,11 @@ export const FONTS = [
             '800',
             '900'
         ],
-        'category': 'Sans Serif'
+        category: 'Sans Serif'
     },
     {
-        'name': 'Fira Sans',
-        'styles': [
+        name: 'Fira Sans',
+        styles: [
             '100',
             '100i',
             '200',
@@ -187,11 +187,11 @@ export const FONTS = [
             '900',
             '900i'
         ],
-        'category': 'Sans Serif'
+        category: 'Sans Serif'
     },
     {
-        'name': 'Alegreya Sans',
-        'styles': [
+        name: 'Alegreya Sans',
+        styles: [
             '100',
             '100i',
             '300',
@@ -207,11 +207,11 @@ export const FONTS = [
             '900',
             '900i'
         ],
-        'category': 'Sans Serif'
+        category: 'Sans Serif'
     },
     {
-        'name': 'Source Sans Pro',
-        'styles': [
+        name: 'Source Sans Pro',
+        styles: [
             '200',
             '200i',
             '300',
@@ -225,22 +225,22 @@ export const FONTS = [
             '900',
             '900i'
         ],
-        'category': 'Sans Serif'
+        category: 'Sans Serif'
     },
     {
-        'name': 'Rajdhani',
-        'styles': [
+        name: 'Rajdhani',
+        styles: [
             '300',
             '400',
             '500',
             '600',
             '700'
         ],
-        'category': 'Sans Serif'
+        category: 'Sans Serif'
     },
     {
-        'name': 'Ubuntu',
-        'styles': [
+        name: 'Ubuntu',
+        styles: [
             '300',
             '300i',
             '400',
@@ -250,11 +250,11 @@ export const FONTS = [
             '700',
             '700i'
         ],
-        'category': 'Sans Serif'
+        category: 'Sans Serif'
     },
     {
-        'name': 'Dosis',
-        'styles': [
+        name: 'Dosis',
+        styles: [
             '200',
             '300',
             '400',
@@ -263,19 +263,19 @@ export const FONTS = [
             '700',
             '800'
         ],
-        'category': 'Sans Serif'
+        category: 'Sans Serif'
     },
     {
-        'name': 'PT Sans Narrow',
-        'styles': [
+        name: 'PT Sans Narrow',
+        styles: [
             '400',
             '700'
         ],
-        'category': 'Sans Serif'
+        category: 'Sans Serif'
     },
     {
-        'name': 'Raleway',
-        'styles': [
+        name: 'Raleway',
+        styles: [
             '100',
             '100i',
             '200',
@@ -295,11 +295,11 @@ export const FONTS = [
             '900',
             '900i'
         ],
-        'category': 'Sans Serif'
+        category: 'Sans Serif'
     },
     {
-        'name': 'Lato',
-        'styles': [
+        name: 'Lato',
+        styles: [
             '100',
             '100i',
             '300',
@@ -311,11 +311,11 @@ export const FONTS = [
             '900',
             '900i'
         ],
-        'category': 'Sans Serif'
+        category: 'Sans Serif'
     },
     {
-        'name': 'Open Sans',
-        'styles': [
+        name: 'Open Sans',
+        styles: [
             '300',
             '300i',
             '400',
@@ -327,94 +327,94 @@ export const FONTS = [
             '800',
             '800i'
         ],
-        'category': 'Sans Serif'
+        category: 'Sans Serif'
     },
     {
-        'name': 'Bungee',
-        'styles': [
+        name: 'Bungee',
+        styles: [
             '400'
         ],
-        'category': 'Headings / Display'
+        category: 'Headings / Display'
     },
     {
-        'name': 'Abril Fatface',
-        'styles': [
+        name: 'Abril Fatface',
+        styles: [
             '400'
         ],
-        'category': 'Headings / Display'
+        category: 'Headings / Display'
     },
     {
-        'name': 'Ultra',
-        'styles': [
+        name: 'Ultra',
+        styles: [
             '400'
         ],
-        'category': 'Headings / Display'
+        category: 'Headings / Display'
     },
     {
-        'name': 'Lobster Two',
-        'styles': [
+        name: 'Lobster Two',
+        styles: [
             '400',
             '400i',
             '700',
             '700i'
         ],
-        'category': 'Headings / Display'
+        category: 'Headings / Display'
     },
     {
-        'name': 'Dancing Script',
-        'styles': [
+        name: 'Dancing Script',
+        styles: [
             '400',
             '700'
         ],
-        'category': 'Headings / Display'
+        category: 'Headings / Display'
     },
     {
-        'name': 'Caveat',
-        'styles': [
+        name: 'Caveat',
+        styles: [
             '400',
             '700'
         ],
-        'category': 'Headings / Display'
+        category: 'Headings / Display'
     },
     {
-        'name': 'Reenie Beanie',
-        'styles': [
+        name: 'Reenie Beanie',
+        styles: [
             '400'
         ],
-        'category': 'Headings / Display'
+        category: 'Headings / Display'
     },
     {
-        'name': 'Amatica SC',
-        'styles': [
+        name: 'Amatica SC',
+        styles: [
             '400',
             '700'
         ],
-        'category': 'Headings / Display'
+        category: 'Headings / Display'
     },
     {
-        'name': 'Kaushan Script',
-        'styles': [
+        name: 'Kaushan Script',
+        styles: [
             '400'
         ],
-        'category': 'Headings / Display'
+        category: 'Headings / Display'
     },
     {
-        'name': 'Just Another Hand',
-        'styles': [
+        name: 'Just Another Hand',
+        styles: [
             '400'
         ],
-        'category': 'Headings / Display'
+        category: 'Headings / Display'
     },
     {
-        'name': 'Poiret One',
-        'styles': [
+        name: 'Poiret One',
+        styles: [
             '400'
         ],
-        'category': 'Headings / Display'
+        category: 'Headings / Display'
     },
     {
-        'name': 'Montserrat',
-        'styles': [
+        name: 'Montserrat',
+        styles: [
             '100',
             '100i',
             '200',
@@ -434,11 +434,11 @@ export const FONTS = [
             '900',
             '900i'
         ],
-        'category': 'Regular'
+        category: 'Regular'
     },
     {
-        'name': 'Roboto',
-        'styles': [
+        name: 'Roboto',
+        styles: [
             '100',
             '100i',
             '300',
@@ -452,7 +452,7 @@ export const FONTS = [
             '900',
             '900i'
         ],
-        'category': 'Regular'
+        category: 'Regular'
     }
 ];
 

package/lib/Wysiwyg.vue

@@ -23,7 +23,7 @@ import { useEditor } from './composables';
 import { buildExtensions } from './extensions';
 import { InjectionTokens } from './injectionTokens';
 import { ContextWindow, FavoriteColors, Storage } from './services';
-import { Devices } from './enums';
+import { Device } from './enums';
 import { Font, type IFontJson } from './models';
 
 const props = defineProps({
@@ -63,9 +63,9 @@ const props = defineProps({
     },
 
     device: {
-        type: String,
+        type: String as PropType<Device>,
         required: false,
-        default: Devices.DESKTOP
+        default: Device.DESKTOP
     },
 
     favoriteColors: {

package/lib/__tests__/utils/buildTestExtensions.js

@@ -1,18 +1,18 @@
 import { Mark } from '@tiptap/vue-3';
-import { buildCoreExtensions } from '../../extensions/core';
-import { MarkGroups, TextSettings } from '../../enums';
+import { buildCoreExtensions } from '@/extensions/core';
+import { MarkGroup, TextSetting } from '@/enums';
 
 // each node allows using 'settings' group of marks,
 // and it fails when there are no nodes with this group
 const SettingMark = Mark.create({
     name: 'placeholder_setting',
-    group: MarkGroups.SETTINGS,
+    group: MarkGroup.SETTINGS,
     renderHTML: () => []
 });
 
 // NodeProcessor requires link mark
 const LinkMark = Mark.create({
-    name: TextSettings.LINK,
+    name: TextSetting.LINK,
     renderHTML: () => []
 });
 
@@ -22,13 +22,13 @@ export function buildTestExtensions({ include } = {}) {
     const extensions = buildCoreExtensions().concat(include || []);
 
     const isSettingPreset = extensions.some((extension) => {
-        return isMark(extension) && extension.config.group === MarkGroups.SETTINGS;
+        return isMark(extension) && extension.config.group === MarkGroup.SETTINGS;
     });
 
     if (!isSettingPreset) extensions.push(SettingMark);
 
     const isLinkPreset = extensions.some((extension) => {
-        return isMark(extension) && extension.name === TextSettings.LINK;
+        return isMark(extension) && extension.name === TextSetting.LINK;
     });
 
     if (!isLinkPreset) extensions.push(LinkMark);

package/lib/components/toolbar/Toolbar.vue

@@ -15,7 +15,7 @@
 
 <script setup>
 import { computed } from 'vue';
-import { Devices } from '../../enums';
+import { Device } from '@/enums';
 import { ToolbarDesktop, ToolbarMobile, ToolbarPopup } from './layouts';
 import ToolbarFloating from './ToolbarFloating';
 
@@ -56,7 +56,7 @@ const props = defineProps({
 const layoutComponent = computed(() => {
     if (props.popupMode) return ToolbarPopup;
 
-    return props.device === Devices.MOBILE ? ToolbarMobile : ToolbarDesktop;
+    return props.device === Device.MOBILE ? ToolbarMobile : ToolbarDesktop;
 });
 </script>
 

package/lib/components/toolbar/__tests__/Toolbar.test.js

@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { Devices } from '../../../enums';
+import { Device } from '@/enums';
 import Toolbar from '../Toolbar';
 import { ToolbarMobile, ToolbarDesktop, ToolbarPopup } from '../layouts';
 
@@ -9,7 +9,7 @@ function createComponent({ device, popupMode }) {
             visible: true,
             offsets: [0, 8],
             referenceRef: document.createElement('div'),
-            device: device ?? Devices.DESKTOP,
+            device: device ?? Device.DESKTOP,
             placement: 'bottom',
             popupMode: popupMode ?? false
         }
@@ -18,19 +18,19 @@ function createComponent({ device, popupMode }) {
 
 describe('rendering', () => {
     test('should render desktop toolbar', () => {
-        const wrapper = createComponent({ device: Devices.DESKTOP });
+        const wrapper = createComponent({ device: Device.DESKTOP });
 
         expect(wrapper).toVueContainComponent(ToolbarDesktop);
     });
 
     test('should render tablet toolbar', () => {
-        const wrapper = createComponent({ device: Devices.TABLET });
+        const wrapper = createComponent({ device: Device.TABLET });
 
         expect(wrapper).toVueContainComponent(ToolbarDesktop);
     });
 
     test('should render mobile toolbar', () => {
-        const wrapper = createComponent({ device: Devices.MOBILE });
+        const wrapper = createComponent({ device: Device.MOBILE });
 
         expect(wrapper).toVueContainComponent(ToolbarMobile);
     });

package/lib/components/toolbar/controls/AlignmentControl.vue

@@ -25,8 +25,8 @@
 
 <script setup>
 import { inject } from 'vue';
-import { InjectionTokens } from '../../../injectionTokens';
-import { Alignments, TextSettings } from '../../../enums';
+import { InjectionTokens } from '@/injectionTokens';
+import { Alignment, TextSetting } from '@/enums';
 import { ButtonToggle, Button, Icon } from '../../base';
 import { tooltip as vTooltip } from '../../../directives';
 
@@ -34,19 +34,19 @@ const emit = defineEmits(['applied']);
 
 const alignments = [
     {
-        id: Alignments.LEFT,
+        id: Alignment.LEFT,
         tooltip: { text: 'Align Left', hotkey: 'Mod Shift L' }
     },
     {
-        id: Alignments.CENTER,
+        id: Alignment.CENTER,
         tooltip: { text: 'Align Center', hotkey: 'Mod Shift E' }
     },
     {
-        id: Alignments.RIGHT,
+        id: Alignment.RIGHT,
         tooltip: { text: 'Align Right', hotkey: 'Mod Shift R' }
     },
     {
-        id: Alignments.JUSTIFY,
+        id: Alignment.JUSTIFY,
         tooltip: { text: 'Justify', hotkey: 'Mod Shift J' }
     }
 ];
@@ -54,7 +54,7 @@ const alignments = [
 const editor = inject(InjectionTokens.EDITOR);
 const currentValue = editor.commands.getAlignment();
 
-const isCustomized = editor.commands.isSettingCustomized(TextSettings.ALIGNMENT);
+const isCustomized = editor.commands.isSettingCustomized(TextSetting.ALIGNMENT);
 
 function toggle(value) {
     editor.chain().focus().applyAlignment(value).run();

package/lib/components/toolbar/controls/CaseStyleControl.vue

@@ -16,15 +16,15 @@
 
 <script setup>
 import { inject } from 'vue';
-import { CaseStyles } from '../../../enums';
+import { CaseStyle } from '@/enums';
+import { InjectionTokens } from '@/injectionTokens';
 import { Dropdown, Button, Icon } from '../../base';
-import { InjectionTokens } from '../../../injectionTokens';
 import { tooltip as vTooltip } from '../../../directives';
 
 const styles = [
-    { id: CaseStyles.UPPERCASE, title: 'UPPERCASE' },
-    { id: CaseStyles.LOWERCASE, title: 'lowercase' },
-    { id: CaseStyles.CAPITALIZE, title: 'Capitalize' }
+    { id: CaseStyle.UPPERCASE, title: 'UPPERCASE' },
+    { id: CaseStyle.LOWERCASE, title: 'lowercase' },
+    { id: CaseStyle.CAPITALIZE, title: 'Capitalize' }
 ];
 
 const editor = inject(InjectionTokens.EDITOR);

package/lib/components/toolbar/controls/FontColorControl.vue

@@ -27,12 +27,12 @@ import { inject } from 'vue';
 import { ColorPicker, Button, Icon } from '../../base';
 import { InjectionTokens } from '../../../injectionTokens';
 import { tooltip as vTooltip } from '../../../directives';
-import { TextSettings } from '../../../enums';
+import { TextSetting } from '../../../enums';
 
 const editor = inject(InjectionTokens.EDITOR);
 
 const currentValue = editor.commands.getFontColor();
-const isCustomized = editor.commands.isSettingCustomized(TextSettings.FONT_COLOR);
+const isCustomized = editor.commands.isSettingCustomized(TextSetting.FONT_COLOR);
 
 const apply = (color) => editor.chain().applyFontColor(color).run();
 </script>