@zipify/wysiwyg 4.12.0-beta.2 → 4.12.0

package/example/ExampleApp.vue

@@ -1,6 +1,9 @@
 <template>
     <div>
         <select class="zw-device-switcher" v-model="device">
+            <option value="all">
+                All devices
+            </option>
             <option value="desktop">
                 Desktop
             </option>
@@ -51,7 +54,7 @@
 
 <script>
 import { computed, onMounted, ref, unref } from 'vue';
-import { Wysiwyg } from '@/entryLib';
+import { Device, Wysiwyg } from '@/entryLib';
 import { FONTS } from './fonts';
 import { PRESETS, renderPresetVariable } from './presets';
 import { PAGE_BLOCKS } from './pageBlocks';
@@ -82,8 +85,8 @@ export default {
         const content = ref(getInitialContent());
         const presets = ref(PRESETS);
         const pageBlocks = ref(PAGE_BLOCKS);
-        const device = ref('desktop');
-        const updatedAt = new Date(ZW_UPDATED_AT).toLocaleString('ua-UA');
+        const device = ref(Device.ALL);
+        const updatedAt = new Date(window.ZW_UPDATED_AT).toLocaleString('ua-UA');
         const isActive = ref(false);
         const isReadonly = ref(false);
 

package/example/presets.js

@@ -1,253 +1,229 @@
 export const PRESETS = [
     {
-        id: 'h1',
-        name: 'Heading 1',
-        node: {
-            type: 'heading',
-            level: 1
-        },
-        desktop: {
-            alignment: null,
-            line_height: '1.2',
-            letter_spacing: null,
-            font_size: '40px'
-        },
-        common: {
-            font_family: 'Lato',
-            font_weight: '700',
-            color: '',
-            font_style: 'normal',
-            text_decoration: 'none'
-        },
-        tablet: {
-            alignment: null,
-            line_height: '1.2',
-            letter_spacing: null,
-            font_size: '40px'
-        },
-        mobile: {
-            alignment: null,
-            line_height: '1.2',
-            letter_spacing: null,
-            font_size: '28px'
+        'id': 'h1',
+        'name': 'Heading 1',
+        'node': {
+            'type': 'heading',
+            'level': 1
+        },
+        'desktop': {
+            'alignment': null,
+            'line_height': '1.2',
+            'font_size': '40px'
+        },
+        'common': {
+            'font_family': 'Lato',
+            'font_weight': '700',
+            'color': '',
+            'font_style': 'normal',
+            'text_decoration': 'none'
+        },
+        'tablet': {
+            'alignment': null,
+            'line_height': '1.2',
+            'font_size': '40px'
+        },
+        'mobile': {
+            'alignment': null,
+            'line_height': '1.2',
+            'font_size': '28px'
         }
     },
     {
-        id: 'h2',
-        name: 'Heading 2',
-        node: {
-            type: 'heading',
-            level: 2
-        },
-        desktop: {
-            alignment: null,
-            line_height: '1.2',
-            font_size: '32px',
-            letter_spacing: null
-        },
-        common: {
-            font_family: 'Lato',
-            font_weight: '700',
-            color: '#262626',
-            font_style: 'normal',
-            text_decoration: 'none'
-        },
-        tablet: {
-            alignment: null,
-            line_height: '1.2',
-            font_size: '32px',
-            letter_spacing: null
-        },
-        mobile: {
-            alignment: null,
-            line_height: '1.2',
-            font_size: '24px',
-            letter_spacing: null
+        'id': 'h2',
+        'name': 'Heading 2',
+        'node': {
+            'type': 'heading',
+            'level': 2
+        },
+        'desktop': {
+            'alignment': null,
+            'line_height': '1.2',
+            'font_size': '32px'
+        },
+        'common': {
+            'font_family': 'Lato',
+            'font_weight': '700',
+            'color': '#262626',
+            'font_style': 'normal',
+            'text_decoration': 'none'
+        },
+        'tablet': {
+            'alignment': null,
+            'line_height': '1.2',
+            'font_size': '32px'
+        },
+        'mobile': {
+            'alignment': null,
+            'line_height': '1.2',
+            'font_size': '24px'
         }
     },
     {
-        id: 'h3',
-        name: 'Sub-heading 1',
-        node: {
-            type: 'heading',
-            level: 3
-        },
-        desktop: {
-            alignment: null,
-            line_height: '1.2',
-            font_size: '28px',
-            letter_spacing: null
-        },
-        common: {
-            font_family: 'Lato',
-            font_weight: '700',
-            color: '#262626',
-            font_style: 'normal',
-            text_decoration: 'none'
-        },
-        tablet: {
-            alignment: null,
-            line_height: '1.2',
-            font_size: '28px',
-            letter_spacing: null
-        },
-        mobile: {
-            alignment: null,
-            line_height: '1.2',
-            font_size: '20px',
-            letter_spacing: null
+        'id': 'h3',
+        'name': 'Sub-heading 1',
+        'node': {
+            'type': 'heading',
+            'level': 3
+        },
+        'desktop': {
+            'alignment': null,
+            'line_height': '1.2',
+            'font_size': '28px'
+        },
+        'common': {
+            'font_family': 'Lato',
+            'font_weight': '700',
+            'color': '#262626',
+            'font_style': 'normal',
+            'text_decoration': 'none'
+        },
+        'tablet': {
+            'alignment': null,
+            'line_height': '1.2',
+            'font_size': '28px'
+        },
+        'mobile': {
+            'alignment': null,
+            'line_height': '1.2',
+            'font_size': '20px'
         }
     },
     {
-        id: 'h4',
-        name: 'Sub-heading 2',
-        node: {
-            type: 'heading',
-            level: 4
-        },
-        desktop: {
-            alignment: null,
-            line_height: '1.2',
-            font_size: '24px',
-            letter_spacing: null
-        },
-        common: {
-            font_family: 'Lato',
-            font_weight: '700',
-            color: '#262626',
-            font_style: 'normal',
-            text_decoration: 'none'
-        },
-        tablet: {
-            alignment: null,
-            line_height: '1.2',
-            font_size: '24px',
-            letter_spacing: null
-        },
-        mobile: {
-            alignment: null,
-            line_height: '1.2',
-            font_size: '18px',
-            letter_spacing: null
+        'id': 'h4',
+        'name': 'Sub-heading 2',
+        'node': {
+            'type': 'heading',
+            'level': 4
+        },
+        'desktop': {
+            'alignment': null,
+            'line_height': '1.2',
+            'font_size': '24px'
+        },
+        'common': {
+            'font_family': 'Lato',
+            'font_weight': '700',
+            'color': '#262626',
+            'font_style': 'normal',
+            'text_decoration': 'none'
+        },
+        'tablet': {
+            'alignment': null,
+            'line_height': '1.2',
+            'font_size': '24px'
+        },
+        'mobile': {
+            'alignment': null,
+            'line_height': '1.2',
+            'font_size': '18px'
         }
     },
     {
-        id: 'link',
-        name: 'Link',
-        hidden: true,
-        desktop: {
-            alignment: null,
-            line_height: 'inherit',
-            font_size: 'inherit',
-            letter_spacing: null
-        },
-        common: {
-            font_family: 'inherit',
-            font_weight: 'inherit',
-            color: 'rgb(0, 0, 238)',
-            font_style: 'normal',
-            text_decoration: 'underline'
-        },
-        tablet: {
-            alignment: null,
-            line_height: 'inherit',
-            font_size: 'inherit',
-            letter_spacing: null
-        },
-        mobile: {
-            alignment: null,
-            line_height: 'inherit',
-            font_size: 'inherit',
-            letter_spacing: null
+        'id': 'link',
+        'name': 'Link',
+        'hidden': true,
+        'desktop': {
+            'alignment': null,
+            'line_height': 'inherit',
+            'font_size': 'inherit'
+        },
+        'common': {
+            'font_family': 'inherit',
+            'font_weight': 'inherit',
+            'color': 'rgb(0, 0, 238)',
+            'font_style': 'normal',
+            'text_decoration': 'underline'
+        },
+        'tablet': {
+            'alignment': null,
+            'line_height': 'inherit',
+            'font_size': 'inherit'
+        },
+        'mobile': {
+            'alignment': null,
+            'line_height': 'inherit',
+            'font_size': 'inherit'
         }
     },
     {
-        id: 'regular-1',
-        name: 'Body Copy 1',
-        desktop: {
-            alignment: null,
-            line_height: '1.43',
-            font_size: '18px',
-            letter_spacing: 1
-        },
-        common: {
-            font_family: 'Lato',
-            font_weight: '400',
-            color: '#262626',
-            font_style: 'normal',
-            text_decoration: 'none'
-        },
-        tablet: {
-            alignment: null,
-            line_height: '1.43',
-            font_size: '18px',
-            letter_spacing: 1
-        },
-        mobile: {
-            alignment: null,
-            line_height: '1.43',
-            font_size: '18px',
-            letter_spacing: 1
+        'id': 'regular-1',
+        'name': 'Body Copy 1',
+        'desktop': {
+            'alignment': null,
+            'line_height': '1.43',
+            'font_size': '18px'
+        },
+        'common': {
+            'font_family': 'Lato',
+            'font_weight': '400',
+            'color': '#262626',
+            'font_style': 'normal',
+            'text_decoration': 'none'
+        },
+        'tablet': {
+            'alignment': null,
+            'line_height': '1.43',
+            'font_size': '18px'
+        },
+        'mobile': {
+            'alignment': null,
+            'line_height': '1.43',
+            'font_size': '18px'
         }
     },
     {
-        id: 'regular-2',
-        name: 'Body Copy 2',
-        fallbackClass: 'zpa-regular2',
-        desktop: {
-            alignment: null,
-            line_height: '1.43',
-            font_size: '16px',
-            letter_spacing: null
-        },
-        common: {
-            font_family: 'Lato',
-            font_weight: '400',
-            color: '#262626',
-            font_style: 'normal',
-            text_decoration: 'none'
-        },
-        tablet: {
-            alignment: null,
-            line_height: '1.43',
-            font_size: '16px',
-            letter_spacing: null
-        },
-        mobile: {
-            alignment: null,
-            line_height: '1.43',
-            font_size: '16px',
-            letter_spacing: null
+        'id': 'regular-2',
+        'name': 'Body Copy 2',
+        'fallbackClass': 'zpa-regular2',
+        'desktop': {
+            'alignment': null,
+            'line_height': '1.43',
+            'font_size': '16px'
+        },
+        'common': {
+            'font_family': 'Lato',
+            'font_weight': '400',
+            'color': '#262626',
+            'font_style': 'normal',
+            'text_decoration': 'none'
+        },
+        'tablet': {
+            'alignment': null,
+            'line_height': '1.43',
+            'font_size': '16px'
+        },
+        'mobile': {
+            'alignment': null,
+            'line_height': '1.43',
+            'font_size': '16px'
         }
     },
     {
-        id: 'regular-3',
-        name: 'Body Copy 3',
-        fallbackClass: 'zpa-regular3',
-        desktop: {
-            alignment: null,
-            line_height: '1.43',
-            font_size: '12px',
-            letter_spacing: null
-        },
-        common: {
-            font_family: 'Lato',
-            font_weight: '400',
-            color: '#262626',
-            font_style: 'normal',
-            text_decoration: 'none'
-        },
-        tablet: {
-            alignment: null,
-            line_height: '1.43',
-            font_size: '12px',
-            letter_spacing: null
-        },
-        mobile: {
-            alignment: null,
-            line_height: '1.43',
-            font_size: '12px',
-            letter_spacing: null
+        'id': 'regular-3',
+        'name': 'Body Copy 3',
+        'fallbackClass': 'zpa-regular3',
+        'desktop': {
+            'alignment': null,
+            'line_height': '1.43',
+            'font_size': '12px'
+        },
+        'common': {
+            'font_family': 'Lato',
+            'font_weight': '400',
+            'color': '#262626',
+            'font_style': 'normal',
+            'text_decoration': 'none'
+        },
+        'tablet': {
+            'alignment': null,
+            'line_height': '1.43',
+            'font_size': '12px'
+        },
+        'mobile': {
+            'alignment': null,
+            'line_height': '1.43',
+            'font_size': '12px'
         }
     }
 ];

package/lib/components/base/NumberField.vue

@@ -214,14 +214,14 @@ const elementClasses = computed(() => ({
 .zw-number-field__units {
     color: rgb(var(--zw-color-n70));
     font-size: var(--zw-font-size-xs);
+    line-height: var(--zw-line-height-md);
     text-align: center;
     display: inline-block;
     width: 100%;
-    vertical-align: middle;
 }
 
 .zw-number-field:hover .zw-number-field__units,
-.zw-number-field:has(:focus, :active) .zw-number-field__units {
+.zw-number-field:focus .zw-number-field__units {
     display: none;
 }
 </style>

package/lib/components/toolbar/controls/index.js

@@ -10,7 +10,6 @@ export { default as SuperscriptControl } from './SuperscriptControl';
 export { default as CaseStyleControl } from './CaseStyleControl';
 export { default as AlignmentControl } from './AlignmentControl';
 export { default as LineHeightControl } from './LineHeightControl';
-export { default as LetterSpacingControl } from './LetterSpacingControl';
 export { default as ListControl } from './ListControl';
 export { default as RemoveFormatControl } from './RemoveFormatControl';
 export { LinkControl } from './link';

package/lib/components/toolbar/layouts/ToolbarDesktop.vue

@@ -36,7 +36,6 @@
         <ToolbarDivider vertical />
 
         <LineHeightControl />
-        <LetterSpacingControl />
         <ToolbarDivider vertical />
 
         <ListControl />
@@ -62,7 +61,6 @@ import {
     FontWeightControl,
     ItalicControl,
     LineHeightControl,
-    LetterSpacingControl,
     StrikeThroughControl,
     SuperscriptControl,
     UnderlineControl,

package/lib/components/toolbar/layouts/ToolbarMobile.vue

@@ -37,7 +37,6 @@
         <ToolbarDivider vertical />
 
         <LineHeightControl />
-        <LetterSpacingControl />
         <ToolbarDivider vertical />
 
         <ListControl />
@@ -63,7 +62,6 @@ import {
     FontWeightControl,
     ItalicControl,
     LineHeightControl,
-    LetterSpacingControl,
     StrikeThroughControl,
     SuperscriptControl,
     UnderlineControl,

package/lib/enums/Device.ts

@@ -2,7 +2,8 @@ export enum Device {
     COMMON = 'common',
     DESKTOP = 'desktop',
     TABLET = 'tablet',
-    MOBILE = 'mobile'
+    MOBILE = 'mobile',
+    ALL = 'all'
 }
 
 export const DeviceList = [

package/lib/enums/TextSetting.ts

@@ -7,7 +7,6 @@ export enum TextSetting {
     FONT_STYLE = 'font_style',
     FONT_WEIGHT = 'font_weight',
     LINE_HEIGHT = 'line_height',
-    LETTER_SPACING = 'letter_spacing',
     TEXT_DECORATION = 'text_decoration',
     SUPERSCRIPT = 'superscript',
     MARGIN = 'margin',
@@ -39,7 +38,6 @@ export const TextBlockMarkList = [
     TextSetting.FONT_SIZE,
     TextSetting.FONT_STYLE,
     TextSetting.FONT_WEIGHT,
-    TextSetting.LETTER_SPACING,
     TextSetting.TEXT_DECORATION,
     TextSetting.SUPERSCRIPT
 ];

package/lib/extensions/Alignment.js

@@ -52,9 +52,10 @@ export const AlignmentExtension = Extension.create({
     addCommands() {
         return {
             applyAlignment: createCommand(({ commands }, value) => {
-                const device = unref(commands.getDevice());
+                const targetDevices = commands.getTargetDevices();
+                const attrs = Object.fromEntries(targetDevices.map((device) => [device, value]));
 
-                commands.setBlockAttributes(this.name, { [device]: value }, DEFAULTS);
+                commands.setBlockAttributes(this.name, attrs, DEFAULTS);
             }),
 
             removeAlignment: createCommand(({ commands }) => commands.removeBlockAttributes(this.name)),

package/lib/extensions/DeviceManager.js

@@ -1,13 +1,30 @@
-import { toRef } from 'vue';
+import { computed, toRef, unref } from 'vue';
 import { Extension } from '@tiptap/vue-3';
-import { createCommand } from '../utils';
+import { createCommand } from '../utils/createCommand';
+import { Device } from '../enums/Device';
 
 export const DeviceManager = Extension.create({
     name: 'device_manager',
 
     addCommands() {
         return {
-            getDevice: createCommand(() => toRef(this.options, 'device'))
+            getDevice: createCommand(() => {
+                const deviceRef = toRef(this.options, 'device');
+
+                return computed(() => {
+                    const device = unref(deviceRef);
+
+                    return device === Device.ALL ? Device.DESKTOP : device;
+                });
+            }),
+
+            getTargetDevices: createCommand(() => {
+                const device = unref(this.options.device);
+
+                return device === Device.ALL
+                    ? [Device.DESKTOP, Device.TABLET, Device.MOBILE]
+                    : [device];
+            })
         };
     }
 });