@zipify/wysiwyg 4.0.7 → 4.1.0-1

package/example/ai-component/AiComponent.vue

@@ -1,11 +1,16 @@
 <template>
     <div ref="wrapperRef">
-        <Button icon skin="toolbar" :active="isActive" @click="toggler.open">
+        <Button icon skin="toolbar" :active="toggler.isOpened" @click="toggler.open">
             <Icon name="sparkles" size="28px" />
             <span class="zw-ai-control__caption">AI</span>
         </Button>
 
-        <Modal ref="modalRef" class="zw-ai-component__modal" :toggler="toggler" focus-first-control>
+        <Modal
+            class="zw-ai-component__modal"
+            :toggler="toggler"
+            :reference-ref="wrapperRef"
+            focus-first-control
+        >
             <p>Modal content</p>
 
             <Button skin="primary" @click="onInsert">
@@ -15,57 +20,18 @@
     </div>
 </template>
 
-<script>
-import { inject, ref, unref, computed } from 'vue';
+<script setup>
+import { inject, ref } from 'vue';
 import { Button, Icon, useModalToggler, Modal } from '../../lib/components/base';
 import { InjectionTokens } from '../../lib/injectionTokens';
 
-export default {
-    name: 'AiComponent',
+const editor = inject(InjectionTokens.EDITOR);
+const wrapperRef = ref(null);
 
-    components: {
-        Modal,
-        Button,
-        Icon
-    },
+const toggler = useModalToggler();
 
-    setup() {
-        const editor = inject(InjectionTokens.EDITOR);
-        const wrapperRef = ref(null);
-        const modalRef = ref(null);
-
-        const onBeforeOpened = () => {};
-
-        const toggler = useModalToggler({
-            options: {
-                placement: 'bottom-start',
-                strategy: 'absolute',
-                offset: [-8, 5]
-            },
-            onBeforeOpened: () => onBeforeOpened(),
-            wrapperRef,
-            modalRef
-        });
-
-        const onInsert = () => {
-            editor.chain()
-                .focus()
-                .insertContent('Hello from AI component')
-                .setDocMeta('ai_generated', true)
-                .run();
-            toggler.close();
-        };
-
-        const isActive = computed(() => unref(toggler.isOpened));
-
-        return {
-            editor,
-            wrapperRef,
-            modalRef,
-            toggler,
-            onInsert,
-            isActive
-        };
-    }
-};
+function onInsert() {
+    editor.chain().focus().insertContent('Hello from AI component').run();
+    toggler.close();
+}
 </script>

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

@@ -1,11 +1,13 @@
 <template>
     <div class="zw-wysiwyg" ref="wysiwygRef">
         <Toolbar
-            :toolbar="toolbar"
             :device="device"
+            :visible="isToolbarVisible"
             :popup-mode="popupMode"
+            :reference-ref="wysiwygRef"
+            :placement="toolbarPlacement"
+            :offsets="toolbarOffsets"
             :ai-component="aiComponent"
-            ref="toolbarRef"
         />
 
         <EditorContent :editor="editor" />
@@ -16,7 +18,7 @@
 import { EditorContent } from '@tiptap/vue-3';
 import { provide, toRef, ref, computed } from 'vue';
 import { Toolbar } from './components';
-import { useToolbar, useEditor } from './composables';
+import { useEditor } from './composables';
 import { buildExtensions } from './extensions';
 import { InjectionTokens } from './injectionTokens';
 import { ContextWindow, FavoriteColors, Storage } from './services';
@@ -137,29 +139,17 @@ const MAX_FONT_SIZE = 112;
 ContextWindow.use(props.window);
 
 const fonts = props.fonts.map((font) => new Font(font));
-const toolbarRef = ref(null);
 const wysiwygRef = ref(null);
-const wrapperRef = computed(() => wysiwygRef.value?.$el || document.body);
-const isToolbarActiveRef = computed(() => props.active && !props.readonly);
-
-const toolbar = useToolbar({
-    wrapperRef: wysiwygRef,
-    placementRef: toRef(props, 'toolbarPlacement'),
-    isActiveRef: isToolbarActiveRef,
-    offsets: props.toolbarOffsets
-});
-const updateToolbar = () => toolbar.update();
+const wrapperRef = computed(() => wysiwygRef.value || document.body);
+const isToolbarVisible = computed(() => props.active && !props.readonly);
 
-function onChange(content) {
-    emit('update:model-value', content);
-    updateToolbar();
-}
+const onChange = (content) => emit('update:model-value', content);
 
 const pageBlocks = toRef(props, 'pageBlocks');
 
 const { editor, getContent } = useEditor({
     content: toRef(props, 'modelValue'),
-    onChange: (content) => onChange(content),
+    onChange,
     isReadonlyRef: toRef(props, 'readonly'),
 
     extensions: buildExtensions({
@@ -196,7 +186,7 @@ provide(InjectionTokens.LOCAL_STORAGE, new Storage(localStorage));
 provide(InjectionTokens.FAVORITE_COLORS, favoriteColors);
 provide(InjectionTokens.PAGE_BLOCKS, pageBlocks);
 
-defineExpose({ getContentCustomization, getContent, updateToolbar, editor });
+defineExpose({ getContentCustomization, getContent, editor });
 </script>
 
 <style src="./styles/main.css" />

package/lib/components/base/Modal.vue

@@ -1,25 +1,32 @@
 <template>
-    <transition name="zw-modal-" :duration="transition">
-        <div
+    <Transition name="zw-modal-" :duration="transitionDuration">
+        <ModalFloating
             class="zw-modal"
             ref="hostRef"
             tabindex="-1"
-            :style="modalStyles"
-            v-if="isOpened"
+            :reference-ref="referenceRef"
             v-out-click="toggler.close"
+            v-if="toggler.isOpened && referenceRef"
             data-test-selector="modal"
         >
             <slot />
-        </div>
-    </transition>
+        </ModalFloating>
+    </Transition>
 </template>
 
 <script setup>
-import { computed, nextTick, ref, unref, watch } from 'vue';
+import { nextTick, ref, toRef, watch } from 'vue';
 import { outClick as vOutClick } from '../../directives';
 import { useDeselectionLock, useElementRef, useModalToggler } from './composables';
+import ModalFloating from './ModalFloating';
 
 const props = defineProps({
+    referenceRef: {
+        type: Object,
+        required: false,
+        default: null
+    },
+
     toggler: {
         type: Object,
         required: false,
@@ -45,28 +52,22 @@ const props = defineProps({
     }
 });
 
-const transition = {
+const transitionDuration = {
     enter: 200,
     leave: 100
 };
 
 const toggler = props.toggler || useModalToggler();
-const isOpened = computed(() => unref(toggler.isOpened));
 const hostRef = ref(null);
 const hostEl = useElementRef(hostRef);
 
-const modalStyles = computed(() => ({
-    '--zw-modal-max-height': `${props.maxHeight}px`,
-    '--zw-modal-max-width': `${props.maxWidth}px`
-}));
-
 useDeselectionLock({
-    isActiveRef: toggler.isOpened,
+    isActiveRef: toRef(toggler,  'isOpened'),
     hostRef
 });
 
 if (props.focusFirstControl) {
-    watch(toggler.isOpened, async (_, wasOpened) => {
+    watch(toRef(toggler, 'isOpened'), async (_, wasOpened) => {
         if (wasOpened) return;
 
         await nextTick();
@@ -82,8 +83,8 @@ if (props.focusFirstControl) {
     border-radius: 2px;
     box-shadow: 0 0 4px rgba(var(--zw-color-black), 0.3);
     background-color: rgb(var(--zw-color-n15));
-    max-height: var(--zw-modal-max-height);
-    max-width: var(--zw-modal-max-width);
+    max-height: v-bind("maxHeight + 'px'");
+    max-width: v-bind("maxWidth + 'px'");
     z-index: 1000;
     position: fixed;
     will-change: transform;

package/lib/components/base/ModalFloating.vue

@@ -0,0 +1,30 @@
+<template>
+    <div ref="floatingRef" :style="floatingStyles">
+        <slot />
+    </div>
+</template>
+
+<script setup>
+import { ref, toRef } from 'vue';
+import { useFloating, limitShift, offset, shift } from '@floating-ui/vue';
+
+const props = defineProps({
+    referenceRef: {
+        type: Object,
+        required: true
+    }
+});
+
+const floatingRef = ref(null);
+const referenceRef = toRef(props, 'referenceRef');
+
+const { floatingStyles } = useFloating(referenceRef, floatingRef, {
+    placement: 'bottom',
+    strategy: 'fixed',
+
+    middleware: [
+        shift({ padding: 16, crossAxis: true, limiter: limitShift() }),
+        offset({ mainAxis: 4 })
+    ]
+});
+</script>