@zipify/wysiwyg 3.1.0-2 → 3.1.0

package/example/tooltip/Tooltip.js

@@ -1,6 +1,10 @@
 import './tooltip.css';
 
-import { arrow, autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom';
+import { popperGenerator, defaultModifiers } from '@popperjs/core/lib/popper-lite';
+import arrow from '@popperjs/core/lib/modifiers/arrow';
+import flip from '@popperjs/core/lib/modifiers/flip';
+import offset from '@popperjs/core/lib/modifiers/offset';
+import preventOverflow from '@popperjs/core/lib/modifiers/preventOverflow';
 import { TooltipCloseOnScrollModifier } from './modifiers';
 
 export class Tooltip {
@@ -14,11 +18,11 @@ export class Tooltip {
     static get animationOptions() {
         return {
             enterDuration: 150,
-            leaveDuration: 100
+            leaveDuration: 200
         };
     }
 
-    static get tooltipStyles() {
+    static get popperStyles() {
         return {
             willChange: 'transform',
             zIndex: 999999
@@ -31,17 +35,17 @@ export class Tooltip {
     /** @type {string} tooltip's content */
     message = '';
 
-    /** @type {object} options for FloatingUI instance */
-    tooltipOptions = {};
+    /** @type {object} options for Popper.js instance */
+    popperOptions = {};
 
     /** @type {object} styles for tooltip's wrapper element */
-    tooltipStyles = {};
+    popperStyles = {};
 
     /** @type {{ enterDuration: number, leaveDuration: number }} tooltip's fade in / fade out durations */
     animationOptions = {};
 
-    /** @type {function | null} created FloatingUI instance */
-    floatingInstance = null;
+    /** @type {object | null} created Popper.js instance */
+    popperInstance = null;
 
     /** @type {{ tooltip: HTMLElement, container: HTMLElement, contentEl: HTMLElement, arrow: HTMLElement }} elements of tooltip */
     elements = {};
@@ -51,25 +55,25 @@ export class Tooltip {
      * @param params {object}
      * @param params.triggerEl {HTMLElement}
      * @param params.message {string}
-     * @param [params.tooltipOptions] {{ placement: string, size: string }}
-     * @param [params.tooltipStyles] {object}
+     * @param [params.popperOptions] {{ placement: string, size: string }}
+     * @param [params.popperStyles] {object}
      * @param [params.animationOptions] {{ enterDuration: number, leaveDuration: number }}
      */
-    constructor({ triggerEl, message, tooltipOptions, tooltipStyles, animationOptions }) {
+    constructor({ triggerEl, message, popperOptions, popperStyles, animationOptions }) {
         this.triggerEl = triggerEl;
         this.message = message;
 
-        this.tooltipOptions = Object.assign({}, Tooltip.defaultOptions, tooltipOptions);
-        this.tooltipStyles = Object.assign({}, Tooltip.tooltipStyles, tooltipStyles);
+        this.popperOptions = Object.assign({}, Tooltip.defaultOptions, popperOptions);
+        this.popperStyles = Object.assign({}, Tooltip.popperStyles, popperStyles);
         this.animationOptions = Object.assign({}, Tooltip.animationOptions, animationOptions);
 
         this._isMacOS = window.navigator.userAgent.toLowerCase().includes('mac os');
 
-        this.#initialize();
+        this._initialize();
     }
 
-    #initialize() {
-        let tooltip = this.#createTooltip();
+    _initialize() {
+        let tooltip = this._createTooltip();
 
         this.elements = {
             tooltip,
@@ -79,15 +83,13 @@ export class Tooltip {
         };
     }
 
-    #createTooltip() {
+    _createTooltip() {
         let element = document.createElement('div');
 
-        Object.keys(this.tooltipStyles).forEach((style) => (element.style[style] = this.tooltipStyles[style]));
-
-        element.classList.add('zpa-tooltip__wrapper');
+        Object.keys(this.popperStyles).forEach((style) => (element.style[style] = this.popperStyles[style]));
 
         element.innerHTML = `
-            <div class="zpa-tooltip zpa-tooltip--${this.tooltipOptions.size}" data-container>
+            <div class="zpa-tooltip zpa-tooltip--${this.popperOptions.size}" data-container>
                 <div class="zpa-tooltip__content" data-content></div>
                 <div class="zpa-tooltip__arrow" data-arrow></div>
             </div>`;
@@ -95,20 +97,20 @@ export class Tooltip {
         return element;
     }
 
-    #renderContent(message) {
+    _renderContent(message) {
         // Do not use .innerHTML, it will break tooltips in Scripts section!
         this.elements.contentEl.textContent = message;
 
         this.elements.hotkey?.remove();
-        this.#renderHotkeyTip();
+        this._renderHotkeyTip();
     }
 
-    #renderHotkeyTip() {
+    _renderHotkeyTip() {
         const raw = this.triggerEl.dataset.tooltipHotkey;
 
         if (!raw) return;
 
-        const parts = raw.split(' ').map(this.#formatHotkeyPart.bind(this));
+        const parts = raw.split(' ').map(this._formatHotkeyPart.bind(this));
         const tipEl = document.createElement('span');
 
         tipEl.classList.add('zpa-tooltip__hotkey');
@@ -117,7 +119,7 @@ export class Tooltip {
         this.elements.contentEl.append(tipEl);
     }
 
-    #formatHotkeyPart(part) {
+    _formatHotkeyPart(part) {
         switch (part.toLowerCase()) {
             case 'mod':
                 return this._isMacOS ? '⌘' : 'Ctrl';
@@ -129,90 +131,111 @@ export class Tooltip {
         }
     }
 
-    #getModifiers() {
+    _getModifiers() {
         return [
-            flip(),
-            offset({ mainAxis: 8 }),
-            shift({ padding: 4 }),
-            arrow({ element: this.elements.arrow }),
+            {
+                name: 'arrow',
+                options: {
+                    element: '[data-arrow]'
+                }
+            },
+            {
+                name: 'offset',
+                options: {
+                    offset: [0, 8]
+                }
+            },
+            {
+                name: 'preventOverflow',
+                options: {
+                    padding: {
+                        top: 4,
+                        bottom: 4,
+                        left: 8,
+                        right: 8
+                    }
+                }
+            },
+            {
+                name: 'customAttributes',
+                enabled: true,
+                phase: 'beforeWrite',
+                requires: ['computeStyles'],
+                fn: ({ state }) => {
+                    this.elements.arrow.classList.add(`zpa-tooltip__arrow--${state.placement}`);
+                    state.attributes.popper = {};
+                }
+            },
             TooltipCloseOnScrollModifier.init({ tooltip: this })
         ];
     }
 
-    #setTooltipDuration(duration = 0) {
+    _setTooltipDuration(duration = 0) {
         this.elements.container.style.transitionDuration = `${duration}ms`;
     }
 
-    #renderPopper() {
-        const modifiers = this.#getModifiers();
-
-        this.floatingInstance = autoUpdate(this.triggerEl, this.elements.tooltip, async () => {
-            const positioning = await computePosition(this.triggerEl, this.elements.tooltip, {
-                placement: this.tooltipOptions.placement,
-                middleware: [...modifiers]
-            });
-
-            const { x, y, middlewareData, placement } = positioning;
-
-            if (middlewareData.arrow) this.#renderArrow(placement, middlewareData.arrow);
+    _renderPopper() {
+        const modifiers = this._getModifiers();
 
-            Object.assign(this.elements.tooltip.style, {
-                left: `${x}px`,
-                top: `${y}px`
-            });
+        const createPopper = popperGenerator({
+            defaultModifiers: [...defaultModifiers, arrow, flip, offset, preventOverflow]
         });
 
-        return this.floatingInstance;
-    }
-
-    #renderArrow(placement, { x, y }) {
-        this.elements.tooltip.classList.add(`zpa-tooltip--${placement}`);
-
-        Object.assign(this.elements.arrow.style, {
-            left: x != null ? `${x}px` : '',
-            top: y != null ? `${y}px` : ''
+        this.popperInstance = createPopper(this.triggerEl, this.elements.tooltip, {
+            placement: this.popperOptions.placement,
+            modifiers
         });
+
+        return this.popperInstance;
     }
 
-    #toggle(makeVisible) {
+    _toggle(makeVisible) {
         const { enterDuration, leaveDuration } = this.animationOptions;
 
-        this.#setTooltipDuration(makeVisible ? enterDuration : leaveDuration);
+        this._setTooltipDuration(makeVisible ? enterDuration : leaveDuration);
         this.elements.container.classList.toggle('zpa-tooltip--open', makeVisible);
     }
 
     open() {
-        if (this.floatingInstance) return;
+        if (this.popperInstance) {
+            return;
+        }
 
         document.body.appendChild(this.elements.tooltip);
-        this.popperInstance = this.#renderPopper();
+        this.popperInstance = this._renderPopper();
 
-        this.#renderContent(this.message);
-        this.#toggle(true);
+        this._renderContent(this.message);
+        this._toggle(true);
     }
 
     close() {
-        if (!this.floatingInstance) return;
+        if (!this.popperInstance) {
+            return;
+        }
 
-        this.#toggle(false);
+        this._toggle(false);
 
         return setTimeout(() => {
             this.destroy();
         }, this.animationOptions.leaveDuration);
     }
 
+    update() {
+        this.popperInstance?.update();
+    }
+
     updateContent(content) {
         this.message = content;
-        this.#renderContent(this.message);
+        this._renderContent(this.message);
+        this.update();
     }
 
     destroy() {
         this.elements.tooltip.remove();
 
         if (this.popperInstance) {
-            // destroy instance
-            this.floatingInstance();
-            this.floatingInstance = null;
+            this.popperInstance.destroy();
+            this.popperInstance = null;
         }
     }
 }

package/example/tooltip/modifiers/TooltipCloseOnScrollModifier.js

@@ -21,7 +21,7 @@ export class TooltipCloseOnScrollModifier {
     /**
      * @param {Tooltip} tooltip - tooltip element
      *
-     * @return {Partial<Modifier<any, any>>} - Floating modifier
+     * @return {Partial<Modifier<any, any>>} - Popper modifier
      * */
     static init({ tooltip }) {
         const modifier = new TooltipCloseOnScrollModifier(tooltip);
@@ -30,10 +30,7 @@ export class TooltipCloseOnScrollModifier {
             name: 'closeOnScroll',
             enabled: true,
             phase: 'main',
-            fn: ({ x, y }) => {
-                modifier.closeOnScroll();
-                return { x, y };
-            }
+            fn: () => modifier.closeOnScroll()
         };
     }
 

package/example/tooltip/tooltip.css

@@ -1,9 +1,3 @@
-.zpa-tooltip__wrapper {
-    position: absolute;
-    top: 0;
-    left: 0;
-}
-
 .zpa-tooltip {
     position: relative;
     background-color: #36404C;
@@ -37,7 +31,6 @@
 }
 
 .zpa-tooltip__arrow {
-    position: absolute;
     width: 16px;
     height: 16px;
     color: #36404C;
@@ -50,15 +43,11 @@
     border-style: solid;
 }
 
-.zpa-tooltip--top {
-    transform-origin: center bottom;
-}
-
-.zpa-tooltip--top .zpa-tooltip__arrow {
+.zpa-tooltip__arrow--top {
     bottom: 0;
 }
 
-.zpa-tooltip--top .zpa-tooltip__arrow::before {
+.zpa-tooltip__arrow--top::before {
     bottom: -7px;
     left: 0;
     border-width: 8px 8px 0;
@@ -66,15 +55,11 @@
     transform-origin: center top;
 }
 
-.zpa-tooltip--bottom {
-    transform-origin: center top;
-}
-
-.zpa-tooltip--bottom .zpa-tooltip__arrow {
+.zpa-tooltip__arrow--bottom {
     top: 0;
 }
 
-.zpa-tooltip--bottom .zpa-tooltip__arrow::before {
+.zpa-tooltip__arrow--bottom::before {
     top: -7px;
     left: 0;
     border-width: 0 8px 8px;
@@ -82,30 +67,22 @@
     transform-origin: center bottom;
 }
 
-.zpa-tooltip--left {
-    transform-origin: center right;
-}
-
-.zpa-tooltip--left .zpa-tooltip__arrow {
+.zpa-tooltip__arrow--left {
     right: 0;
 }
 
-.zpa-tooltip--left .zpa-tooltip__arrow::before {
+.zpa-tooltip__arrow--left::before {
     border-width: 8px 0 8px 8px;
     border-left-color: initial;
     right: -7px;
     transform-origin: center left;
 }
 
-.zpa-tooltip--right {
-    transform-origin: center left;
-}
-
-.zpa-tooltip--right .zpa-tooltip__arrow {
+.zpa-tooltip__arrow--right {
     left: 0;
 }
 
-.zpa-tooltip--right .zpa-tooltip__arrow::before {
+.zpa-tooltip__arrow--right::before {
     left: -7px;
     border-width: 8px 8px 8px 0;
     border-right-color: initial;

package/lib/Wysiwyg.vue

@@ -155,9 +155,11 @@ export default {
             isActiveRef: isToolbarActiveRef,
             offsets: props.toolbarOffsets
         });
+        const updateToolbar = () => toolbar.update();
 
         function onChange(content) {
             emit('input', content);
+            updateToolbar();
         }
 
         const pageBlocks = toRef(props, 'pageBlocks');
@@ -206,6 +208,7 @@ export default {
             toolbarRef,
             wysiwygRef,
             toolbar,
+            updateToolbar,
             getContent,
             getContentCustomization
         };

package/lib/cli/commands/ToJsonCommand.js

@@ -32,14 +32,14 @@ export class ToJsonCommand extends Command {
             nodeDomParser: new NodeDomParser()
         });
 
-        const jsonList = htmlList.map((html) => serializer.toJSON(this.#formatInputHtml(html)));
+        const jsonList = htmlList.map((html) => serializer.toJSON(this._formatInputHtml(html)));
         const content = jsonList.length === 1 ? jsonList[0] : jsonList;
-        const json = this.#stringifyContent(content);
+        const json = this._stringifyContent(content);
 
-        this.output(format === 'rb' ? this.#formatOutputRb(json) : json);
+        this.output(format === 'rb' ? this._formatOutputRb(json) : json);
     }
 
-    #formatInputHtml(html) {
+    _formatInputHtml(html) {
         return html
             .replace(/\\(["'])/g, '$1')
             .replace(/rgba\(\d{1,3}, ?\d{1,3}, ?\d{1,3}, (\d{1,2}%)\)/g, (substring, alpha) => {
@@ -47,13 +47,13 @@ export class ToJsonCommand extends Command {
             });
     }
 
-    #stringifyContent(content) {
+    _stringifyContent(content) {
         const skipNullValue = (_, value) => value === null ? undefined : value;
 
         return JSON.stringify(content, skipNullValue, 2);
     }
 
-    #formatOutputRb(json) {
+    _formatOutputRb(json) {
         return json
             .replace(/\\"/g, '"')
             .replace(/font-family: ?'(.+)'/g, 'font-family: "$1"')

package/lib/components/base/__tests__/Button.test.js

@@ -42,7 +42,7 @@ describe('rendering', () => {
         expect(wrapper.classes('zw-button--icon')).toBeTruthy();
     });
 
-    test('should render icon style', () => {
+    test('should render iconless style', () => {
         const wrapper = createComponent({ icon: false });
 
         expect(wrapper.classes('zw-button--icon')).toBeFalsy();

package/lib/components/base/composables/__tests__/useDeselectionLock.test.js

@@ -33,8 +33,8 @@ describe('prevent deselection', () => {
     function click(el, { target } = {}) {
         const event = new MouseEvent('mousedown');
 
-        event.preventDefault = jest.fn();
-        event.stopPropagation = jest.fn();
+        jest.spyOn(event, 'preventDefault').mockImplementation();
+        jest.spyOn(event, 'stopPropagation').mockImplementation();
         setReadonlyProperty(event, 'target', target || { tagName: 'DIV' });
 
         el.dispatchEvent(event);

package/lib/components/base/composables/__tests__/useElementRef.test.js

@@ -10,7 +10,7 @@ describe('resolve element from ref', () => {
     test('should return null if no element', () => {
         const elementRef = useElementRef(ref(null));
 
-        expect(elementRef.value).toBe(null);
+        expect(elementRef.value).toBeNull();
     });
 
     test('should return element if dom ref', () => {

package/lib/components/base/composables/__tests__/useModalToggler.test.js

@@ -4,8 +4,6 @@ import { InjectionTokens } from '../../../../injectionTokens';
 import { useModalToggler } from '../useModalToggler';
 import { useElementRef } from '../useElementRef';
 
-jest.mock('@floating-ui/dom');
-
 const createEditor = () => ({
     commands: {
         storeSelection: jest.fn(),

package/lib/components/base/composables/__tests__/useValidator.test.js

@@ -24,7 +24,7 @@ describe('validation', () => {
 
         validator.validate();
 
-        expect(validator.error.value).toBe(null);
+        expect(validator.error.value).toBeNull();
     });
 
     test('should reset error', () => {
@@ -39,6 +39,6 @@ describe('validation', () => {
         expect(validator.error.value).toBe('Can\'t be empty');
 
         validator.reset();
-        expect(validator.error.value).toBe(null);
+        expect(validator.error.value).toBeNull();
     });
 });

package/lib/components/base/composables/useModalToggler.js

@@ -1,55 +1,61 @@
-import { inject, nextTick, ref } from 'vue';
-import { autoUpdate, computePosition, limitShift, offset, shift } from '@floating-ui/dom';
+import { createPopper } from '@popperjs/core';
+import { inject, nextTick, ref, onUnmounted } from 'vue';
 import { InjectionTokens } from '../../../injectionTokens';
 import { useElementRef } from './useElementRef';
 
 export function useModalToggler({ onBeforeOpened, onClosed, wrapperRef, modalRef } = {}) {
     const editor = inject(InjectionTokens.EDITOR);
     const isOpened = ref(false);
-    let floatingInstance;
+    let popper;
 
-    function initModal() {
+    function initPopper() {
         const wrapperEl = useElementRef(wrapperRef);
         const modalEl = useElementRef(modalRef);
 
-        floatingInstance = autoUpdate(wrapperEl.value, modalEl.value, async () => {
-            const positioning = await computePosition(wrapperEl.value, modalEl.value, {
-                placement: 'bottom',
-                strategy: 'fixed',
-                middleware: [
-                    shift({ padding: 16, crossAxis: true, limiter: limitShift() }),
-                    offset({ mainAxis: 4 })
-                ]
-            });
-
-            const { x, y } = positioning;
-
-            Object.assign(modalEl.value, {
-                left: `${x}px`,
-                top: `${y}px`
-            });
+        popper = createPopper(wrapperEl.value, modalEl.value, {
+            placement: 'bottom',
+            strategy: 'fixed',
+            modifiers: [
+                {
+                    name: 'offset',
+                    options: {
+                        offset: [0, 4]
+                    }
+                },
+                {
+                    name: 'preventOverflow',
+                    options: {
+                        padding: 16
+                    }
+                },
+                {
+                    name: 'flip',
+                    enabled: false
+                }
+            ]
         });
     }
 
     async function open() {
-        if (isOpened.value) return;
-
         onBeforeOpened?.();
         editor.commands.storeSelection();
         isOpened.value = true;
 
         await nextTick();
 
-        initModal();
+        initPopper();
     }
 
     function close() {
         isOpened.value = false;
-        floatingInstance?.();
         editor.commands.restoreSelection();
         onClosed?.();
     }
 
+    onUnmounted(() => {
+        popper?.destroy();
+    });
+
     const toggle = (toOpen) => toOpen ? open() : close();
 
     return { isOpened, open, close, toggle };

package/lib/components/toolbar/Toolbar.vue

@@ -68,7 +68,7 @@ export default {
     color: rgb(var(--zw-color-n70));
     z-index: 999999;
     text-align: left;
-    position: fixed;
+    position: absolute;
 }
 
 .zw-toolbar::before,

package/lib/components/toolbar/base/__tests__/ToolbarDivider.test.js

@@ -18,7 +18,7 @@ describe('rendering', () => {
     });
 
 
-    test('should render vertical divider', () => {
+    test('should render horizontal divider', () => {
         const wrapper = createComponent({ isHorizontal: true });
 
         expect(wrapper.classes('zw-toolbar__divider--horizontal')).toBeTruthy();

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

@@ -73,7 +73,7 @@ export default {
                 .run();
         };
 
-        const tooltip = computed(() => isCustomized.value ? 'Reset Styles to the Page Styles' : '');
+        const tooltip = computed(() => isCustomized.value ? 'Reset Styles to Page Styles' : '');
 
         const removeCustomization = () => editor.chain().focus().removePresetCustomization().run();
 

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

@@ -4,8 +4,6 @@ import { InjectionTokens } from '../../../../injectionTokens';
 import { Button, Modal, NumberField, Range } from '../../../base';
 import LineHeightControl from '../LineHeightControl';
 
-jest.mock('@floating-ui/dom');
-
 const createEditor = ({ height } = {}) => {
     const heightRef = ref(height ?? '1.2');
 

package/lib/components/toolbar/controls/composables/__tests__/useRecentFonts.test.js

@@ -57,7 +57,7 @@ describe('list of fonts', () => {
         expect(recentFonts.fonts.value).toEqual(['Lato', 'Roboto', 'Source Sans']);
     });
 
-    test('should move up font in list', () => {
+    test('should move up font in list new font', () => {
         const recentFonts = createWrapper({
             initial: ['Roboto', 'Source Sans', 'Times New Roman']
         });

package/lib/components/toolbar/controls/link/composables/__tests__/useLink.test.js

@@ -97,7 +97,7 @@ describe('actions with link', () => {
         });
     });
 
-    test('should apply link target', () => {
+    test('should apply link target to new window', () => {
         const link = useComposable();
 
         link.updateTarget(false);
@@ -105,7 +105,7 @@ describe('actions with link', () => {
         expect(link.linkData.value.target).toBe(LinkTargets.SELF);
     });
 
-    test('should apply link target', () => {
+    test('should apply link target to current window', () => {
         const link = useComposable();
 
         link.updateTarget(true);