@zipify/wysiwyg 4.12.0-beta.2 → 4.12.0-beta.3

package/lib/extensions/FontSize.js

@@ -34,22 +34,28 @@ export const FontSize = Mark.create({
             }),
 
             applyFontSize: createCommand(({ commands }, value) => {
-                const device = unref(commands.getDevice());
+                const targetDevices = commands.getTargetDevices();
+                const attrs = Object.fromEntries(targetDevices.map((device) => [device, value]));
 
-                commands.applyMark(this.name, { [device]: value }, {
+                commands.applyMark(this.name, attrs, {
                     isAppliedToParent: (parentMark, mark) => {
                         if (parentMark.type.name !== mark.type.name) return false;
 
-                        return parentMark.attrs[device] === mark.attrs[device];
+                        return targetDevices.every((device) => parentMark.attrs[device] === mark.attrs[device]);
                     },
 
                     onAppliedToParent: ({ tr, node, position, mark }) => {
-                        const attrs = { ...mark.attrs, [device]: null };
-                        const canRemove = !Object.values(attrs).some((value) => !!value);
+                        const updatedAttrs = { ...mark.attrs };
+
+                        targetDevices.forEach((device) => {
+                            updatedAttrs[device] = null;
+                        });
+
+                        const canRemove = !Object.values(updatedAttrs).some((value) => !!value);
 
                         if (canRemove) return false;
 
-                        const updated = mark.type.create(attrs);
+                        const updated = mark.type.create(updatedAttrs);
 
                         if (node.isText) {
                             tr.addMark(position, position + node.nodeSize, updated);

package/lib/extensions/LineHeight.js

@@ -72,9 +72,10 @@ export const LineHeight = Extension.create({
             }),
 
             applyLineHeight: 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);
             })
         };
     }

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

@@ -21,13 +21,13 @@ const MockStylePreset = Extension.create({
     }
 });
 
-function createEditor({ content }) {
+function createEditor({ content, device = 'desktop' }) {
     return new Editor({
         content: ContentNormalizer.normalize(content),
         extensions: buildTestExtensions({
             include: [
                 MockStylePreset,
-                DeviceManager.configure({ device: ref('desktop') }),
+                DeviceManager.configure({ device: ref(device) }),
                 AlignmentExtension
             ]
         })
@@ -82,6 +82,18 @@ describe('change value', () => {
         expect(editor.getJSON()).toMatchSnapshot();
     });
 
+    test('should apply value to all devices', () => {
+        const editor = createEditor({
+            content: createContent({ alignment: null }),
+            device: 'all'
+        });
+
+        editor.commands.selectAll();
+        editor.commands.applyAlignment(Alignment.RIGHT);
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
     test('should remove value', () => {
         const editor = createEditor({
             content: createContent({

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

@@ -21,14 +21,14 @@ const MockStylePreset = Extension.create({
     }
 });
 
-function createEditor({ content }) {
+function createEditor({ content, device = 'desktop' }) {
     return new Editor({
         content: ContentNormalizer.normalize(content),
         extensions: buildTestExtensions({
             include: [
                 MockStylePreset,
                 DeviceManager.configure({
-                    device: ref('desktop')
+                    device: ref(device)
                 }),
                 FontSize.configure({
                     minSize: 5,
@@ -92,6 +92,18 @@ describe('apply font size', () => {
         expect(editor.getJSON()).toMatchSnapshot();
     });
 
+    test('should change font size on all devices', () => {
+        const editor = createEditor({
+            content: createContent(NodeFactory.text('hello world')),
+            device: 'all'
+        });
+
+        editor.commands.selectAll();
+        editor.commands.applyFontSize('16');
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
     test('should increase font size', () => {
         const editor = createEditor({
             content: createContent(NodeFactory.text('hello world', [

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

@@ -21,14 +21,14 @@ const MockStylePreset = Extension.create({
     }
 });
 
-function createEditor({ content, wrapperEl }) {
+function createEditor({ content, wrapperEl, device = 'desktop' }) {
     return new Editor({
         content: ContentNormalizer.normalize(content),
         extensions: buildTestExtensions({
             include: [
                 MockStylePreset,
                 DeviceManager.configure({
-                    device: ref('desktop')
+                    device: ref(device)
                 }),
                 LineHeight.configure({
                     wrapperRef: ref(wrapperEl ?? document.createElement('div'))
@@ -85,6 +85,18 @@ describe('apply value', () => {
 
         expect(editor.getJSON()).toMatchSnapshot();
     });
+
+    test('should change value on all devices', () => {
+        const editor = createEditor({
+            content: createContent({ line_height: null }),
+            device: 'all'
+        });
+
+        editor.commands.selectAll();
+        editor.commands.applyLineHeight('1.41');
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
 });
 
 describe('rendering', () => {

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

@@ -27,6 +27,33 @@ Object {
 }
 `;
 
+exports[`change value should apply value to all devices 1`] = `
+Object {
+  "attrs": Object {
+    "meta": Object {},
+  },
+  "content": Array [
+    Object {
+      "attrs": Object {
+        "alignment": Object {
+          "desktop": "right",
+          "mobile": "right",
+          "tablet": "right",
+        },
+      },
+      "content": Array [
+        Object {
+          "text": "hello world",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
 exports[`change value should remove value 1`] = `
 Object {
   "attrs": Object {

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

@@ -30,6 +30,36 @@ Object {
 }
 `;
 
+exports[`apply font size should change font size on all devices 1`] = `
+Object {
+  "attrs": Object {
+    "meta": Object {},
+  },
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "text": "hello world",
+          "type": "text",
+        },
+      ],
+      "marks": Array [
+        Object {
+          "attrs": Object {
+            "desktop": "16",
+            "mobile": "16",
+            "tablet": "16",
+          },
+          "type": "font_size",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
 exports[`apply font size should decrease font size 1`] = `
 Object {
   "attrs": Object {

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

@@ -27,6 +27,33 @@ Object {
 }
 `;
 
+exports[`apply value should change value on all devices 1`] = `
+Object {
+  "attrs": Object {
+    "meta": Object {},
+  },
+  "content": Array [
+    Object {
+      "attrs": Object {
+        "line_height": Object {
+          "desktop": "1.41",
+          "mobile": "1.41",
+          "tablet": "1.41",
+        },
+      },
+      "content": Array [
+        Object {
+          "text": "hello world",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
 exports[`parsing html should get value from rendered view 1`] = `
 Object {
   "attrs": Object {

package/lib/extensions/core/NodeProcessor.js

@@ -1,6 +1,7 @@
 import { Extension, getMarkType } from '@tiptap/vue-3';
 import { computed, toRef, unref } from 'vue';
 import {
+    clone,
     createCommand,
     findMarkByType,
     isMarkAppliedToParent,
@@ -21,6 +22,7 @@ export const NodeProcessor = Extension.create({
     addCommands() {
         return {
             setBlockAttributes: createCommand(({ commands, state }, name, attrs, defaults = {}) => {
+                const safeAttrs = clone(attrs);
                 const current = unref(commands.getBlockAttributes(name)) ?? {};
                 const { doc, tr } = state;
                 const { from, to } = tr.selection;
@@ -28,7 +30,7 @@ export const NodeProcessor = Extension.create({
                 doc.nodesBetween(from, to, (node, position) => {
                     if (!NodeBlockTypeList.includes(node.type.name)) return;
 
-                    tr.setNodeAttribute(position, name, { ...defaults, ...current, ...attrs });
+                    tr.setNodeAttribute(position, name, { ...defaults, ...current, ...safeAttrs });
                 });
             }),
 
@@ -139,7 +141,7 @@ export const NodeProcessor = Extension.create({
                     for (const attrs of unref(selectionRef)) {
                         const value = attrs[unref(deviceRef)];
 
-                        if (value || value === 0) return value;
+                        if (value) return value;
                     }
 
                     return unref(defaultRef);

package/lib/extensions/core/__tests__/NodeProcessor.test.js

@@ -62,7 +62,16 @@ const DeviceManager = Extension.create({
     }),
 
     addCommands() {
-        return { getDevice: createCommand(() => ref(this.options.device)) };
+        return {
+            getDevice: createCommand(() => ref(this.options.device)),
+            getTargetDevices: createCommand(() => {
+                const device = this.options.device;
+
+                return device === Device.ALL
+                    ? [Device.DESKTOP, Device.TABLET, Device.MOBILE]
+                    : [device];
+            })
+        };
     }
 });
 

package/lib/extensions/index.js

@@ -13,7 +13,6 @@ import { TextDecoration } from './TextDecoration';
 import { CaseStyle } from './CaseStyle';
 import { Alignment } from './Alignment';
 import { LineHeight } from './LineHeight';
-import { LetterSpacing } from './LetterSpacing';
 import { List } from './list';
 import { Link } from './Link';
 import { Superscript } from './Superscript';
@@ -67,7 +66,6 @@ export function buildExtensions(options) {
         LineHeight.configure({
             wrapperRef: options.wrapperRef
         }),
-        LetterSpacing,
         Link.configure({
             preset: toRef(presetsMap, 'link'),
             basePresetClass: options.basePresetClass,

package/lib/services/NodeFactory.ts

@@ -136,7 +136,7 @@ export class NodeFactory {
         return { type, attrs };
     }
 
-    static populateAllDevices<V>(value: V): Record<Exclude<Device, Device.COMMON>, V> {
+    static populateAllDevices<V>(value: V): Record<Exclude<Device, Device.COMMON | Device.ALL>, V> {
         return { mobile: value, tablet: value, desktop: value };
     }
 }

package/lib/styles/content.css

@@ -36,7 +36,6 @@ h4.zw-style.zw-style.zw-style {
         font-size: var(--zw-font-size-desktop, var(--zw-preset-font-size-desktop));
         text-align: var(--zw-alignment-desktop, var(--zw-preset-alignment-desktop));
         line-height: var(--zw-line-height-desktop, var(--zw-preset-line-height-desktop));
-        letter-spacing: var(--zw-letter-spacing-desktop, var(--zw-preset-letter-spacing-desktop));
     }
 }
 
@@ -46,7 +45,6 @@ h4.zw-style.zw-style.zw-style {
         font-size: var(--zw-font-size-tablet, var(--zw-preset-font-size-tablet));
         text-align: var(--zw-alignment-tablet, var(--zw-preset-alignment-tablet));
         line-height: var(--zw-line-height-tablet, var(--zw-preset-line-height-tablet));
-        letter-spacing: var(--zw-letter-spacing-tablet, var(--zw-preset-letter-spacing-tablet));
     }
 }
 
@@ -56,7 +54,6 @@ h4.zw-style.zw-style.zw-style {
         font-size: var(--zw-font-size-mobile, var(--zw-preset-font-size-mobile));
         text-align: var(--zw-alignment-mobile, var(--zw-preset-alignment-mobile));
         line-height: var(--zw-line-height-mobile, var(--zw-preset-line-height-mobile));
-        letter-spacing: var(--zw-letter-spacing-mobile, var(--zw-preset-letter-spacing-mobile));
     }
 }
 

package/lib/utils/clone.ts

@@ -0,0 +1,3 @@
+export function clone<T>(value: T): T {
+    return JSON.parse(JSON.stringify(value));
+}

package/lib/utils/convertFontSize.js

@@ -1,5 +1,10 @@
-import { convertEmToPx } from './convertEmToPx';
+import { ContextWindow } from '../services';
 
 export function convertFontSize(value, wrapperEl) {
-    return String(value).includes('em') ? Math.round(convertEmToPx(value, wrapperEl)) : parseInt(value);
+    if (!value.includes('em')) return parseInt(value);
+
+    const containerValue = ContextWindow.getComputedStyle(wrapperEl).fontSize;
+    const size = parseFloat(value) * parseFloat(containerValue);
+
+    return Math.round(size);
 }

package/lib/utils/index.ts

@@ -5,7 +5,6 @@ export { createKeyboardShortcut } from './createKeyboardShortcut';
 export { convertColor } from './convertColor';
 export { convertLineHeight } from './convertLineHeight';
 export { convertFontSize } from './convertFontSize';
-export { convertLetterSpacing } from './convertLetterSpacing';
 export { convertAlignment } from './convertAlignment';
 export { importIcon } from './importIcon';
 export { isWysiwygContent } from './isWysiwygContent';
@@ -15,3 +14,4 @@ export { isNodeFullySelected } from './isNodeFullySelected';
 export { isMarkAppliedToParent } from './isMarkAppliedToParent';
 export { findMarkByType } from './findMarkByType';
 export { copyMark } from './copyMark';
+export { clone } from './clone';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zipify/wysiwyg",
-  "version": "4.12.0-beta.2",
+  "version": "4.12.0-beta.3",
   "description": "Zipify modification of TipTap text editor",
   "main": "dist/wysiwyg.mjs",
   "types": "dist/wysiwyg.d.ts",
@@ -30,7 +30,8 @@
     "lint:js": "zipify-lint-js --oxlint-tsconfig ./tsconfig.lint.json ./lib",
     "lint:css": "stylelint ./lib/**/*.{css,vue}",
     "optimize-svg": "svgo --config ./config/svgo.js",
-    "prepare": "husky"
+    "prepare": "husky",
+    "check-types": "vue-tsc -P ./tsconfig.types.json --noEmit"
   },
   "dependencies": {
     "@floating-ui/vue": "^1.1.6",

package/dist/types/components/toolbar/controls/LetterSpacingControl.vue.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export default _default;

package/dist/types/extensions/LetterSpacing.d.ts

@@ -1,2 +0,0 @@
-export const LetterSpacing: Mark<any, any>;
-import { Mark } from '@tiptap/vue-3';

package/dist/types/utils/convertEmToPx.d.ts

@@ -1 +0,0 @@
-export declare function convertEmToPx(value: string, wrapperEl: HTMLElement): number;

package/dist/types/utils/convertLetterSpacing.d.ts

@@ -1 +0,0 @@
-export declare function convertLetterSpacing(value: string, wrapperEl: HTMLElement): number;

package/lib/assets/icons/letter-spacing.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 24 24">
-  <path fill="var(--zw-icon-foreground)" fill-rule="evenodd" d="M3 19V5h1.8v14zm16.2 0V5H21v14zM7.815 16.375l3.375-8.75h1.62l3.375 8.75h-1.552l-.81-2.231h-3.645l-.81 2.231zm2.835-3.5h2.7l-1.305-3.631h-.09z" clip-rule="evenodd"/>
-</svg>

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

@@ -1,96 +0,0 @@
-<template>
-    <div class="zw-position--relative" ref="wrapperRef">
-        <Button
-            class="zw-position--relative"
-            icon
-            skin="toolbar"
-            :active="toggler.isOpened"
-            @click="toggler.open"
-            v-tooltip="'Letter Spacing'"
-        >
-            <Icon name="letter-spacing" size="28px" auto-color />
-
-            <span
-                v-if="isCustomized"
-                class="zw-button__customized-indicator"
-                data-test-selector="customizedIndicator"
-                v-tooltip.lg="'Style differs from Page Styles'"
-            />
-        </Button>
-
-        <Modal
-            class="zw-letter-spacing-control__modal"
-            :toggler="toggler"
-            :reference-ref="wrapperRef"
-        >
-            <FieldLabel class="zw-margin-bottom--xs" field-id="wswg-letter-spacing">
-                Letter Spacing
-            </FieldLabel>
-
-            <div class="zw-letter-spacing-control__row">
-                <Range
-                    class="zw-letter-spacing-control__range"
-                    :step="STEP"
-                    :min="MIN_VALUE"
-                    :max="MAX_VALUE"
-                    :value="currentValue"
-                    @input="apply"
-                />
-
-                <NumberField
-                    :step="STEP"
-                    :min="MIN_VALUE"
-                    :max="MAX_VALUE"
-                    units="px"
-                    class="zw-letter-spacing-control__field"
-                    field-id="wswg-letter-spacing"
-                    :value="currentValue"
-                    @input="apply"
-                />
-            </div>
-        </Modal>
-    </div>
-</template>
-
-<script setup>
-import { inject, ref, computed } from 'vue';
-import { Button, Icon, Modal, Range, NumberField, FieldLabel, useModalToggler } from '../../base';
-import { InjectionTokens } from '../../../injectionTokens';
-import { tooltip as vTooltip } from '../../../directives';
-import { TextSetting } from '../../../enums';
-
-const MIN_VALUE = -1.6;
-const MAX_VALUE = 3.2;
-const STEP = 0.1;
-
-const editor = inject(InjectionTokens.EDITOR);
-const wrapperRef = ref(null);
-const toggler = useModalToggler();
-
-const valueRef = editor.commands.getLetterSpacing();
-
-const currentValue = computed(() => valueRef.value ?? 0);
-const isCustomized = editor.commands.isSettingCustomized(TextSetting.LETTER_SPACING);
-
-const apply = (value) => editor.commands.applyLetterSpacing(value);
-</script>
-
-<style scoped>
-.zw-letter-spacing-control__modal {
-    padding: var(--zw-offset-sm);
-}
-
-.zw-letter-spacing-control__row {
-    display: flex;
-    align-items: center;
-}
-
-.zw-letter-spacing-control__range {
-    width: 156px;
-}
-
-.zw-letter-spacing-control__field {
-    width: 64px;
-    margin-left: var(--zw-offset-sm);
-}
-</style>

package/lib/extensions/LetterSpacing.js

@@ -1,78 +0,0 @@
-import { Mark } from '@tiptap/vue-3';
-import { computed, unref } from 'vue';
-import { createCommand, renderMark, convertLetterSpacing } from '../utils';
-import { MarkGroup, TextSetting } from '../enums';
-
-export const LetterSpacing = Mark.create({
-    name: TextSetting.LETTER_SPACING,
-    group: MarkGroup.SETTINGS,
-
-    addAttributes: () => ({
-        mobile: { default: null },
-        tablet: { default: null },
-        desktop: { default: null }
-    }),
-
-    addCommands() {
-        return {
-            getLetterSpacing: createCommand(({ commands }) => {
-                return commands.getDeviceSettingMark(this.name, commands.getDefaultLetterSpacing());
-            }),
-
-            getDefaultLetterSpacing: createCommand(({ commands }) => {
-                const device = commands.getDevice();
-                const preset = commands.getPreset();
-
-                return computed(() => unref(preset)[unref(device)].letter_spacing ?? null);
-            }),
-
-            applyLetterSpacing: createCommand(({ commands }, value) => {
-                const device = unref(commands.getDevice());
-
-                commands.applyMark(this.name, { [device]: value });
-            })
-        };
-    },
-
-    parseHTML() {
-        const parse = (value) => {
-            if (!value) return null;
-
-            const wrapperEl = unref(this.options.wrapperRef);
-            const converted = convertLetterSpacing(value, wrapperEl);
-
-            return `${converted}px`;
-        };
-
-        return [
-            {
-                tag: '[style*="--zw-letter-spacing"]',
-
-                getAttrs: ({ style }) => ({
-                    mobile: parse(style.getPropertyValue('--zw-letter-spacing-mobile')),
-                    tablet: parse(style.getPropertyValue('--zw-letter-spacing-tablet')),
-                    desktop: parse(style.getPropertyValue('--zw-letter-spacing-desktop'))
-                })
-            },
-            {
-                style: 'letter-spacing',
-
-                getAttrs: (input) => {
-                    const value = parse(input);
-
-                    return { desktop: value, tablet: value, mobile: value };
-                }
-            }
-        ];
-    },
-
-    renderHTML({ HTMLAttributes: attrs }) {
-        const addUnits = (value) => value ? `${value}px` : null;
-
-        return renderMark({
-            letter_spacing_mobile: addUnits(attrs.mobile),
-            letter_spacing_tablet: addUnits(attrs.tablet),
-            letter_spacing_desktop: addUnits(attrs.desktop)
-        });
-    }
-});