@zipify/wysiwyg 3.0.2 → 3.1.0-2

package/example/tooltip/Tooltip.js

@@ -1,10 +1,6 @@
 import './tooltip.css';
 
-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 { arrow, autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom';
 import { TooltipCloseOnScrollModifier } from './modifiers';
 
 export class Tooltip {
@@ -18,11 +14,11 @@ export class Tooltip {
     static get animationOptions() {
         return {
             enterDuration: 150,
-            leaveDuration: 200
+            leaveDuration: 100
         };
     }
 
-    static get popperStyles() {
+    static get tooltipStyles() {
         return {
             willChange: 'transform',
             zIndex: 999999
@@ -35,17 +31,17 @@ export class Tooltip {
     /** @type {string} tooltip's content */
     message = '';
 
-    /** @type {object} options for Popper.js instance */
-    popperOptions = {};
+    /** @type {object} options for FloatingUI instance */
+    tooltipOptions = {};
 
     /** @type {object} styles for tooltip's wrapper element */
-    popperStyles = {};
+    tooltipStyles = {};
 
     /** @type {{ enterDuration: number, leaveDuration: number }} tooltip's fade in / fade out durations */
     animationOptions = {};
 
-    /** @type {object | null} created Popper.js instance */
-    popperInstance = null;
+    /** @type {function | null} created FloatingUI instance */
+    floatingInstance = null;
 
     /** @type {{ tooltip: HTMLElement, container: HTMLElement, contentEl: HTMLElement, arrow: HTMLElement }} elements of tooltip */
     elements = {};
@@ -55,25 +51,25 @@ export class Tooltip {
      * @param params {object}
      * @param params.triggerEl {HTMLElement}
      * @param params.message {string}
-     * @param [params.popperOptions] {{ placement: string, size: string }}
-     * @param [params.popperStyles] {object}
+     * @param [params.tooltipOptions] {{ placement: string, size: string }}
+     * @param [params.tooltipStyles] {object}
      * @param [params.animationOptions] {{ enterDuration: number, leaveDuration: number }}
      */
-    constructor({ triggerEl, message, popperOptions, popperStyles, animationOptions }) {
+    constructor({ triggerEl, message, tooltipOptions, tooltipStyles, animationOptions }) {
         this.triggerEl = triggerEl;
         this.message = message;
 
-        this.popperOptions = Object.assign({}, Tooltip.defaultOptions, popperOptions);
-        this.popperStyles = Object.assign({}, Tooltip.popperStyles, popperStyles);
+        this.tooltipOptions = Object.assign({}, Tooltip.defaultOptions, tooltipOptions);
+        this.tooltipStyles = Object.assign({}, Tooltip.tooltipStyles, tooltipStyles);
         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,
@@ -83,13 +79,15 @@ export class Tooltip {
         };
     }
 
-    _createTooltip() {
+    #createTooltip() {
         let element = document.createElement('div');
 
-        Object.keys(this.popperStyles).forEach((style) => (element.style[style] = this.popperStyles[style]));
+        Object.keys(this.tooltipStyles).forEach((style) => (element.style[style] = this.tooltipStyles[style]));
+
+        element.classList.add('zpa-tooltip__wrapper');
 
         element.innerHTML = `
-            <div class="zpa-tooltip zpa-tooltip--${this.popperOptions.size}" data-container>
+            <div class="zpa-tooltip zpa-tooltip--${this.tooltipOptions.size}" data-container>
                 <div class="zpa-tooltip__content" data-content></div>
                 <div class="zpa-tooltip__arrow" data-arrow></div>
             </div>`;
@@ -97,20 +95,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');
@@ -119,7 +117,7 @@ export class Tooltip {
         this.elements.contentEl.append(tipEl);
     }
 
-    _formatHotkeyPart(part) {
+    #formatHotkeyPart(part) {
         switch (part.toLowerCase()) {
             case 'mod':
                 return this._isMacOS ? '⌘' : 'Ctrl';
@@ -131,111 +129,90 @@ export class Tooltip {
         }
     }
 
-    _getModifiers() {
+    #getModifiers() {
         return [
-            {
-                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 = {};
-                }
-            },
+            flip(),
+            offset({ mainAxis: 8 }),
+            shift({ padding: 4 }),
+            arrow({ element: this.elements.arrow }),
             TooltipCloseOnScrollModifier.init({ tooltip: this })
         ];
     }
 
-    _setTooltipDuration(duration = 0) {
+    #setTooltipDuration(duration = 0) {
         this.elements.container.style.transitionDuration = `${duration}ms`;
     }
 
-    _renderPopper() {
-        const modifiers = this._getModifiers();
+    #renderPopper() {
+        const modifiers = this.#getModifiers();
 
-        const createPopper = popperGenerator({
-            defaultModifiers: [...defaultModifiers, arrow, flip, offset, preventOverflow]
-        });
+        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);
 
-        this.popperInstance = createPopper(this.triggerEl, this.elements.tooltip, {
-            placement: this.popperOptions.placement,
-            modifiers
+            Object.assign(this.elements.tooltip.style, {
+                left: `${x}px`,
+                top: `${y}px`
+            });
         });
 
-        return this.popperInstance;
+        return this.floatingInstance;
     }
 
-    _toggle(makeVisible) {
+    #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` : ''
+        });
+    }
+
+    #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.popperInstance) {
-            return;
-        }
+        if (this.floatingInstance) 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.popperInstance) {
-            return;
-        }
+        if (!this.floatingInstance) 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.update();
+        this.#renderContent(this.message);
     }
 
     destroy() {
         this.elements.tooltip.remove();
 
         if (this.popperInstance) {
-            this.popperInstance.destroy();
-            this.popperInstance = null;
+            // destroy instance
+            this.floatingInstance();
+            this.floatingInstance = null;
         }
     }
 }

package/example/tooltip/modifiers/TooltipCloseOnScrollModifier.js

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

package/example/tooltip/tooltip.css

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

package/lib/Wysiwyg.vue

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

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

@@ -4,6 +4,8 @@ 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/useModalToggler.js

@@ -1,61 +1,55 @@
-import { createPopper } from '@popperjs/core';
-import { inject, nextTick, ref, onUnmounted } from 'vue';
+import { inject, nextTick, ref } from 'vue';
+import { autoUpdate, computePosition, limitShift, offset, shift } from '@floating-ui/dom';
 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 popper;
+    let floatingInstance;
 
-    function initPopper() {
+    function initModal() {
         const wrapperEl = useElementRef(wrapperRef);
         const modalEl = useElementRef(modalRef);
 
-        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
-                }
-            ]
+        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`
+            });
         });
     }
 
     async function open() {
+        if (isOpened.value) return;
+
         onBeforeOpened?.();
         editor.commands.storeSelection();
         isOpened.value = true;
 
         await nextTick();
 
-        initPopper();
+        initModal();
     }
 
     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: absolute;
+    position: fixed;
 }
 
 .zw-toolbar::before,

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

@@ -4,6 +4,8 @@ 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/composables/useToolbar.js

@@ -1,38 +1,33 @@
-import { createPopper } from '@popperjs/core';
+import { onUnmounted } from 'vue';
+import { autoUpdate, computePosition, limitShift, offset, shift } from '@floating-ui/dom';
 import { useElementRef } from '../components/base';
 
 export function useToolbar({ wrapperRef, offsets, isActiveRef, placementRef }) {
     const wrapperEl = useElementRef(wrapperRef);
-    let popper;
+    let floatingInstance;
 
     function mount(element) {
-        popper = createPopper(wrapperEl.value, element, {
-            placement: placementRef.value,
-            strategy: 'fixed',
-            modifiers: [
-                {
-                    name: 'offset',
-                    options: { offset: offsets }
-                },
-                {
-                    name: 'preventOverflow',
-                    options: {
-                        altAxis: true,
-                        padding: 2
-                    }
-                },
-                {
-                    name: 'flip',
-                    enabled: false
-                }
-            ]
+        floatingInstance = autoUpdate(wrapperEl.value, element, async () => {
+            const positioning = await computePosition(wrapperEl.value, element, {
+                placement: placementRef.value,
+                strategy: 'fixed',
+                middleware: [
+                    shift({ padding: 16, crossAxis: true, limiter: limitShift() }),
+                    offset({ crossAxis: offsets[0], mainAxis: offsets[1] })]
+            });
+
+            const { x, y } = positioning;
+
+            Object.assign(element.style, {
+                left: `${x}px`,
+                top: `${y}px`
+            });
         });
     }
 
-    const update = () => popper?.update();
+    onUnmounted(() => floatingInstance?.());
 
     return {
-        update,
         mount,
         isActiveRef,
         offsets

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zipify/wysiwyg",
-  "version": "3.0.2",
+  "version": "3.1.0-2",
   "description": "Zipify modification of TipTap text editor",
   "main": "dist/wysiwyg.mjs",
   "bin": {
@@ -31,7 +31,7 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "@popperjs/core": "^2.11.6",
+    "@floating-ui/dom": "^1.0.7",
     "@tiptap/core": "2.0.0-beta.195",
     "@tiptap/extension-document": "2.0.0-beta.195",
     "@tiptap/extension-heading": "2.0.0-beta.195",
@@ -47,7 +47,7 @@
     "simplebar": "^5.3.8"
   },
   "peerDependencies": {
-    "@zipify/colorpicker": "^2.2",
+    "@zipify/colorpicker": "^2.3",
     "vue": "^2.7"
   },
   "peerDependenciesMeta": {
@@ -72,7 +72,7 @@
     "@rollup/plugin-replace": "^4.0.0",
     "@vue/test-utils": "^1.3.0",
     "@vue/vue2-jest": "^29.1.0",
-    "@zipify/colorpicker": "^2.2.1",
+    "@zipify/colorpicker": "^2.3.0-0",
     "babel-jest": "^29.0.3",
     "eslint": "8.23.1",
     "eslint-plugin-import": "^2.26.0",