@zipify/wysiwyg 4.12.0-beta.3 → 4.13.0-beta.0

package/lib/extensions/LetterSpacing.js

@@ -0,0 +1,79 @@
+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 targetDevices = commands.getTargetDevices();
+                const attrs = Object.fromEntries(targetDevices.map((device) => [device, value]));
+
+                commands.applyMark(this.name, attrs);
+            })
+        };
+    },
+
+    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)
+        });
+    }
+});

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

@@ -0,0 +1,129 @@
+import { Editor, Extension } from '@tiptap/vue-3';
+import { ref } from 'vue';
+import { buildTestExtensions } from '../../__tests__/utils';
+import { createCommand } from '../../utils';
+import { DeviceManager } from '../DeviceManager';
+import { LetterSpacing } from '../LetterSpacing';
+import { ContentNormalizer, NodeFactory } from '../../services';
+import { Device, TextSetting } from '../../enums';
+
+const MockStylePreset = Extension.create({
+    name: TextSetting.STYLE_PRESET,
+
+    addCommands() {
+        return {
+            getPreset: createCommand(() => ref({
+                mobile: { letter_spacing: null },
+                tablet: { letter_spacing: null },
+                desktop: { letter_spacing: null }
+            }))
+        };
+    }
+});
+
+function createEditor({ content, wrapperEl, device = Device.DESKTOP } = {}) {
+    return new Editor({
+        content: ContentNormalizer.normalize(content),
+        extensions: buildTestExtensions({
+            include: [
+                MockStylePreset,
+                DeviceManager.configure({
+                    device: ref(device)
+                }),
+                LetterSpacing.configure({ wrapperRef: ref(wrapperEl ?? document.createElement('div')) })
+            ]
+        })
+    });
+}
+
+const createContent = (attrs) => NodeFactory.doc([
+    NodeFactory.paragraph(attrs, [
+        NodeFactory.text('hello world')
+    ])
+]);
+
+describe('LetterSpacing extension', () => {
+    describe('get value', () => {
+        test('should get from selection', () => {
+            const editor = createEditor({
+                content: NodeFactory.doc([
+                    NodeFactory.paragraph({}, [
+                        NodeFactory.text('hello world', [
+                            NodeFactory.mark(TextSetting.LETTER_SPACING, {
+                                mobile: '',
+                                tablet: '',
+                                desktop: '-0.7px'
+                            })
+                        ])
+                    ])
+                ])
+            });
+
+            editor.commands.selectAll();
+
+            expect(editor.commands.getLetterSpacing().value).toBe('-0.7px');
+        });
+
+        test('should get default value from preset when null', () => {
+            const editor = createEditor({
+                content: createContent({ letter_spacing: null })
+            });
+
+            expect(editor.commands.getDefaultLetterSpacing().value).toBe(null);
+        });
+    });
+
+    describe('apply value', () => {
+        test('should change value', () => {
+            const editor = createEditor({
+                content: createContent({ letter_spacing: null })
+            });
+
+            editor.commands.selectAll();
+            editor.commands.applyLetterSpacing('-1');
+
+            expect(editor.getJSON()).toMatchSnapshot();
+        });
+
+        test('should apply value 0', () => {
+            const editor = createEditor({
+                content: createContent({ letter_spacing: 2 })
+            });
+
+            editor.commands.selectAll();
+            editor.commands.applyLetterSpacing(0);
+
+            expect(editor.getJSON()).toMatchSnapshot();
+        });
+
+        test('should change value on all devices', () => {
+            const editor = createEditor({
+                content: createContent({ letter_spacing: null }),
+                device: Device.ALL
+            });
+
+            editor.commands.selectAll();
+            editor.commands.applyLetterSpacing('-1');
+
+            expect(editor.getJSON()).toMatchSnapshot();
+        });
+    });
+
+    describe('parsing html', () => {
+        test('should parse inline letter-spacing px to value with px preserved', () => {
+            const editor = createEditor({
+                content: '<p style="letter-spacing: -0.7px">test</p>'
+            });
+
+            expect(editor.getJSON()).toMatchSnapshot();
+        });
+
+        test('should parse custom var style', () => {
+            const editor = createEditor({
+                content: '<p style="--zw-letter-spacing-desktop: -0.7px;--zw-letter-spacing-tablet: 0px;--zw-letter-spacing-mobile: 3.6px">test</p>'
+            });
+
+            expect(editor.getJSON()).toMatchSnapshot();
+        });
+    });
+});

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

@@ -0,0 +1,151 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LetterSpacing extension apply value should apply value 0 1`] = `
+Object {
+  "attrs": Object {
+    "meta": Object {},
+  },
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "text": "hello world",
+          "type": "text",
+        },
+      ],
+      "marks": Array [
+        Object {
+          "attrs": Object {
+            "desktop": 0,
+            "mobile": null,
+            "tablet": null,
+          },
+          "type": "letter_spacing",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`LetterSpacing extension apply value should change value 1`] = `
+Object {
+  "attrs": Object {
+    "meta": Object {},
+  },
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "text": "hello world",
+          "type": "text",
+        },
+      ],
+      "marks": Array [
+        Object {
+          "attrs": Object {
+            "desktop": "-1",
+            "mobile": null,
+            "tablet": null,
+          },
+          "type": "letter_spacing",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`LetterSpacing extension apply value should change value 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": "-1",
+            "mobile": "-1",
+            "tablet": "-1",
+          },
+          "type": "letter_spacing",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`LetterSpacing extension parsing html should parse custom var style 1`] = `
+Object {
+  "attrs": Object {
+    "meta": Object {},
+  },
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "text": "test",
+          "type": "text",
+        },
+      ],
+      "marks": Array [
+        Object {
+          "attrs": Object {
+            "desktop": "-0.7px",
+            "mobile": "3.6px",
+            "tablet": "0px",
+          },
+          "type": "letter_spacing",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`LetterSpacing extension parsing html should parse inline letter-spacing px to value with px preserved 1`] = `
+Object {
+  "attrs": Object {
+    "meta": Object {},
+  },
+  "content": Array [
+    Object {
+      "content": Array [
+        Object {
+          "text": "test",
+          "type": "text",
+        },
+      ],
+      "marks": Array [
+        Object {
+          "attrs": Object {
+            "desktop": "-0.7px",
+            "mobile": "-0.7px",
+            "tablet": "-0.7px",
+          },
+          "type": "letter_spacing",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;

package/lib/extensions/core/NodeProcessor.js

@@ -141,7 +141,7 @@ export const NodeProcessor = Extension.create({
                     for (const attrs of unref(selectionRef)) {
                         const value = attrs[unref(deviceRef)];
 
-                        if (value) return value;
+                        if (value || value === 0) return value;
                     }
 
                     return unref(defaultRef);

package/lib/extensions/index.js

@@ -13,6 +13,7 @@ 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';
@@ -66,6 +67,7 @@ export function buildExtensions(options) {
         LineHeight.configure({
             wrapperRef: options.wrapperRef
         }),
+        LetterSpacing,
         Link.configure({
             preset: toRef(presetsMap, 'link'),
             basePresetClass: options.basePresetClass,

package/lib/styles/content.css

@@ -36,6 +36,7 @@ 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));
     }
 }
 
@@ -45,6 +46,7 @@ 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));
     }
 }
 
@@ -54,6 +56,7 @@ 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/convertEmToPx.ts

@@ -0,0 +1,8 @@
+import { ContextWindow } from '../services';
+
+export function convertEmToPx(value: string, wrapperEl: HTMLElement): number {
+    const containerValue = ContextWindow.getComputedStyle(wrapperEl).fontSize;
+    const size = parseFloat(value) * parseFloat(containerValue);
+
+    return Math.round(size * 10) / 10;
+}

package/lib/utils/convertFontSize.js

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

package/lib/utils/convertLetterSpacing.ts

@@ -0,0 +1,5 @@
+import { convertEmToPx } from './convertEmToPx';
+
+export function convertLetterSpacing(value: string, wrapperEl: HTMLElement): number {
+    return String(value).includes('em') ? convertEmToPx(value, wrapperEl) : parseFloat(value);
+}

package/lib/utils/index.ts

@@ -5,6 +5,7 @@ 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';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zipify/wysiwyg",
-  "version": "4.12.0-beta.3",
+  "version": "4.13.0-beta.0",
   "description": "Zipify modification of TipTap text editor",
   "main": "dist/wysiwyg.mjs",
   "types": "dist/wysiwyg.d.ts",