@zipify/wysiwyg 4.1.0-0 → 4.1.0-2

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/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,27 +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 wrapperRef = computed(() => wysiwygRef.value || document.body);
+const isToolbarVisible = computed(() => props.active && !props.readonly);
 
-function onChange(content) {
-    emit('update:model-value', content);
-}
+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({

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,32 @@
+<template>
+    <div ref="floatingRef" :style="floatingStyles">
+        <slot />
+    </div>
+</template>
+
+<script setup>
+import { ref, toRef } from 'vue';
+import { useFloating, limitShift, offset, shift, autoUpdate } 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 })
+    ],
+
+    whileElementsMounted: autoUpdate
+});
+</script>

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

@@ -22,7 +22,7 @@ function createComponent({ toggler, maxHeight, maxWidth } = {}) {
     return shallowMount(Modal, {
         global: {
             stubs: {
-                transition: {
+                Transition: {
                     render() {
                         return this.$slots.default?.[0]?.();
                     }
@@ -32,6 +32,7 @@ function createComponent({ toggler, maxHeight, maxWidth } = {}) {
         },
         props: {
             toggler: toggler ?? createToggler(true),
+            referenceRef: document.createElement('div'),
             maxHeight: maxHeight ?? 1000,
             maxWidth: maxWidth ?? 1000
         }
@@ -63,21 +64,3 @@ describe('open/close', () => {
         expect(wrapper).toVueContainElement(SELECTORS.MODAL);
     });
 });
-
-describe('rendering', () => {
-    test('should render max width', () => {
-        const wrapper = createComponent({ maxWidth: 256 });
-        const modalWrapper = wrapper.find(SELECTORS.MODAL);
-        const maxWidth = modalWrapper.element.style.getPropertyValue('--zw-modal-max-width');
-
-        expect(maxWidth).toBe('256px');
-    });
-
-    test('should render max height', () => {
-        const wrapper = createComponent({ maxHeight: 256 });
-        const modalWrapper = wrapper.find(SELECTORS.MODAL);
-        const maxHeight = modalWrapper.element.style.getPropertyValue('--zw-modal-max-height');
-
-        expect(maxHeight).toBe('256px');
-    });
-});

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

@@ -1,35 +1,9 @@
-import { inject, nextTick, ref } from 'vue';
-import { autoUpdate, computePosition, limitShift, offset, shift } from '@floating-ui/dom';
+import { inject, reactive, ref } from 'vue';
 import { InjectionTokens } from '../../../injectionTokens';
-import { useElementRef } from './useElementRef';
 
-export function useModalToggler({ onBeforeOpened, onClosed, wrapperRef, modalRef } = {}) {
+export function useModalToggler({ onBeforeOpened, onClosed } = {}) {
     const editor = inject(InjectionTokens.EDITOR);
     const isOpened = ref(false);
-    let floatingInstance;
-
-    function initModal() {
-        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`
-            });
-        });
-    }
 
     async function open() {
         if (isOpened.value) return;
@@ -37,20 +11,15 @@ export function useModalToggler({ onBeforeOpened, onClosed, wrapperRef, modalRef
         onBeforeOpened?.();
         editor.commands.storeSelection();
         isOpened.value = true;
-
-        await nextTick();
-
-        initModal();
     }
 
     function close() {
         isOpened.value = false;
-        floatingInstance?.();
         editor.commands.restoreSelection();
         onClosed?.();
     }
 
     const toggle = (toOpen) => toOpen ? open() : close();
 
-    return { isOpened, open, close, toggle };
+    return reactive({ isOpened, open, close, toggle });
 }

package/lib/components/base/dropdown/Dropdown.vue

@@ -6,7 +6,12 @@
             </template>
         </DropdownActivator>
 
-        <Modal max-height="300" :max-width="maxWidth" :toggler="toggler" ref="modalRef">
+        <Modal
+            max-height="300"
+            :max-width="maxWidth"
+            :toggler="toggler"
+            :reference-ref="dropdownRef"
+        >
             <DropdownMenu :options="options">
                 <template #option="attrs">
                     <slot name="option" v-bind="attrs" />
@@ -58,7 +63,6 @@ const props = defineProps({
 const emit = defineEmits(['change']);
 
 const dropdownRef = ref(null);
-const modalRef = ref(null);
 
 const activeOptionManager = useActiveOptionManager({
     optionsRef: toRef(props, 'options'),
@@ -67,10 +71,7 @@ const activeOptionManager = useActiveOptionManager({
     onChange: (value) => emit('change', value.id)
 });
 
-const toggler = useModalToggler({
-    wrapperRef: dropdownRef,
-    modalRef
-});
+const toggler = useModalToggler();
 
 provide(InjectionTokens.ACTIVE_MANAGER, activeOptionManager);
 provide(InjectionTokens.TOGGLER, toggler);

package/lib/components/base/dropdown/DropdownActivator.vue

@@ -1,10 +1,10 @@
 <template>
-    <slot :open="dropdownToggler.open" :isOpened="isOpened">
+    <slot :open="dropdownToggler.open" :isOpened="dropdownToggler.isOpened">
         <Button
             skin="toolbar"
             class="zw-dropdown__activator"
             :class="dropdownClasses"
-            :active="isOpened"
+            :active="dropdownToggler.isOpened"
             @click="dropdownToggler.open"
         >
             <span class="zw-dropdown__activator-title zw-text--truncate">
@@ -29,7 +29,7 @@
 </template>
 
 <script setup>
-import { computed, inject, toRef, unref } from 'vue';
+import { computed, inject, toRef } from 'vue';
 import { tooltip as vTooltip } from '../../../directives';
 import Button from '../Button';
 import Icon from '../Icon';
@@ -52,13 +52,12 @@ const props = defineProps({
 
 const activeOptionManager = inject(InjectionTokens.ACTIVE_MANAGER);
 const dropdownToggler = inject(InjectionTokens.TOGGLER);
-const isOpened = computed(() => unref(dropdownToggler.isOpened));
 const color = toRef(props, 'color');
 
 const activeOptionTitle = useDropdownEntityTitle(activeOptionManager.activeOption);
 
 const dropdownClasses = computed(() => ({
-    'zw-dropdown__activator--active': dropdownToggler.isOpened.value,
+    'zw-dropdown__activator--active': dropdownToggler.isOpened,
     'zw-dropdown__activator--gray': color.value === 'gray'
 }));
 </script>

package/lib/components/base/dropdown/__tests__/DropdownActivator.test.js

@@ -9,7 +9,7 @@ const SELECTORS = {
 };
 
 const createToggler = ({ isOpened } = {}) => ({
-    isOpened: ref(isOpened ?? false),
+    isOpened: isOpened ?? false,
     open: jest.fn()
 });
 

package/lib/components/base/dropdown/__tests__/DropdownOption.test.js

@@ -11,7 +11,7 @@ const createActiveManager = ({ activeOption } = {}) => ({
 });
 
 const createToggler = () => ({
-    isOpened: ref(true),
+    isOpened: true,
     close: jest.fn()
 });
 

package/lib/components/toolbar/Toolbar.vue

@@ -1,17 +1,24 @@
 <template>
     <keep-alive>
         <transition name="zw-toolbar-" duration="150">
-            <div class="zw-toolbar" ref="toolbarRef" v-if="isVisible">
+            <ToolbarFloating
+                class="zw-toolbar"
+                :reference-ref="referenceRef"
+                :placement="placement"
+                :offsets="offsets"
+                v-if="visible && referenceRef"
+            >
                 <component :is="layoutComponent" :ai-component="aiComponent" />
-            </div>
+            </ToolbarFloating>
         </transition>
     </keep-alive>
 </template>
 
 <script setup>
-import { computed, ref, watch } from 'vue';
+import { computed } from 'vue';
 import { Devices } from '../../enums';
 import { ToolbarDesktop, ToolbarMobile, ToolbarPopup } from './layouts';
+import ToolbarFloating from './ToolbarFloating';
 
 const props = defineProps({
     device: {
@@ -19,8 +26,8 @@ const props = defineProps({
         required: true
     },
 
-    toolbar: {
-        type: Object,
+    visible: {
+        type: Boolean,
         required: true
     },
 
@@ -29,6 +36,22 @@ const props = defineProps({
         required: true
     },
 
+    referenceRef: {
+        type: Object,
+        required: false,
+        default: null
+    },
+
+    placement: {
+        type: String,
+        required: true
+    },
+
+    offsets: {
+        type: Array,
+        required: true
+    },
+
     aiComponent: {
         type: Object,
         required: false,
@@ -41,13 +64,6 @@ const layoutComponent = computed(() => {
 
     return props.device === Devices.MOBILE ? ToolbarMobile : ToolbarDesktop;
 });
-
-const isVisible = computed(() => props.toolbar.isActiveRef.value);
-const toolbarRef = ref(null);
-
-watch(toolbarRef, (toolbarEl) => {
-    toolbarEl && props.toolbar.mount(toolbarEl);
-});
 </script>
 
 <style scoped>
@@ -61,7 +77,7 @@ watch(toolbarRef, (toolbarEl) => {
     z-index: 999999;
     text-align: left;
     position: fixed;
-    --zw-toolbar-offset-y: calc(v-bind("toolbar.offsets[1]") * 1px)
+    --zw-toolbar-offset-y: calc(v-bind("offsets[1]") * 1px)
 }
 
 .zw-toolbar::before,

package/lib/components/toolbar/ToolbarFloating.vue

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

package/lib/components/toolbar/__tests__/Toolbar.test.js

@@ -1,5 +1,4 @@
 import { shallowMount } from '@vue/test-utils';
-import { ref } from 'vue';
 import { Devices } from '../../../enums';
 import Toolbar from '../Toolbar';
 import { ToolbarMobile, ToolbarDesktop, ToolbarPopup } from '../layouts';
@@ -7,12 +6,11 @@ import { ToolbarMobile, ToolbarDesktop, ToolbarPopup } from '../layouts';
 function createComponent({ device, popupMode }) {
     return shallowMount(Toolbar, {
         props: {
-            toolbar: {
-                mount: jest.fn(),
-                isActiveRef: ref({ value: true }),
-                offsets: [0, 8]
-            },
+            visible: true,
+            offsets: [0, 8],
+            referenceRef: document.createElement('div'),
             device: device ?? Devices.DESKTOP,
+            placement: 'bottom',
             popupMode: popupMode ?? false
         }
     });

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

@@ -4,7 +4,7 @@
             class="zw-position--relative"
             icon
             skin="toolbar"
-            :active="isOpened"
+            :active="toggler.isOpened"
             @click="toggler.open"
             v-tooltip="'Line Height'"
         >
@@ -18,7 +18,11 @@
             />
         </Button>
 
-        <Modal class="zw-line-height-control__modal" ref="modalRef" :toggler="toggler">
+        <Modal
+            class="zw-line-height-control__modal"
+            :toggler="toggler"
+            :reference-ref="wrapperRef"
+        >
             <FieldLabel class="zw-margin-bottom--xs" field-id="wswg-line-height">
                 Line Height
             </FieldLabel>
@@ -48,22 +52,20 @@
 </template>
 
 <script setup>
-import { computed, inject, ref, unref } from 'vue';
+import { inject, ref } from 'vue';
 import { Button, Icon, Modal, Range, NumberField, FieldLabel, useModalToggler } from '../../base';
 import { InjectionTokens } from '../../../injectionTokens';
 import { tooltip as vTooltip } from '../../../directives';
 import { TextSettings } from '../../../enums';
 
-const wrapperRef = ref(null);
-const modalRef = ref(null);
 const editor = inject(InjectionTokens.EDITOR);
-const toggler = useModalToggler({ wrapperRef, modalRef });
+const wrapperRef = ref(null);
+const toggler = useModalToggler();
 
 const currentValue = editor.commands.getLineHeight();
 const isCustomized = editor.commands.isSettingCustomized(TextSettings.LINE_HEIGHT);
 
 const apply = (value) => editor.commands.applyLineHeight(String(value));
-const isOpened = computed(() => unref(toggler.isOpened));
 </script>
 
 <style scoped>

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 SELECTORS = {
     INDICATOR: '[data-test-selector="customizedIndicator"]'
 };
@@ -112,7 +110,7 @@ describe('rendering', () => {
         const modalWrapper = wrapper.findComponent(Modal);
 
         expect(buttonWrapper.props('active')).toBe(false);
-        expect(modalWrapper.props('toggler').isOpened.value).toBe(false);
+        expect(modalWrapper.props('toggler').isOpened).toBe(false);
     });
 
     test('should open modal', async () => {
@@ -124,7 +122,7 @@ describe('rendering', () => {
         await nextTick();
 
         expect(buttonWrapper.props('active')).toBe(true);
-        expect(modalWrapper.props('toggler').isOpened.value).toBe(true);
+        expect(modalWrapper.props('toggler').isOpened).toBe(true);
     });
 
     test('should render indicator of customized styles', () => {