@zipify/wysiwyg 1.0.0-dev.81 → 1.0.0-dev.84

package/dist/wysiwyg.css

@@ -631,16 +631,16 @@
     width: 234px;
 }
 
-.zw-toolbar[data-v-7afee166] {
+.zw-toolbar[data-v-a84e0da4] {
     border-radius: 2px;
     background-color: rgb(var(--zw-color-n15));
     color: rgb(var(--zw-color-n70));
     z-index: 999999;
     text-align: left;
-    position: fixed;
+    position: absolute;
 }
-.zw-toolbar[data-v-7afee166]::before,
-.zw-toolbar[data-v-7afee166]::after {
+.zw-toolbar[data-v-a84e0da4]::before,
+.zw-toolbar[data-v-a84e0da4]::after {
     content: "";
     display: block;
     width: 100%;
@@ -648,21 +648,21 @@
     position: absolute;
     --zw-toolbar-safe-zone: calc(-1 * var(--zw-toolbar-offset-y));
 }
-.zw-toolbar[data-v-7afee166]::before {
+.zw-toolbar[data-v-a84e0da4]::before {
     top: var(--zw-toolbar-safe-zone);
 }
-.zw-toolbar[data-v-7afee166]::after {
+.zw-toolbar[data-v-a84e0da4]::after {
     bottom: var(--zw-toolbar-safe-zone);
 }
-.zw-toolbar--enter-active[data-v-7afee166],
-.zw-toolbar--leave-active[data-v-7afee166] {
+.zw-toolbar--enter-active[data-v-a84e0da4],
+.zw-toolbar--leave-active[data-v-a84e0da4] {
     transition: opacity 150ms ease-out;
 }
-.zw-toolbar--leave-active[data-v-7afee166] {
+.zw-toolbar--leave-active[data-v-a84e0da4] {
     transition: opacity 0s ease-in;
 }
-.zw-toolbar--enter[data-v-7afee166],
-.zw-toolbar--leave-to[data-v-7afee166] {
+.zw-toolbar--enter[data-v-a84e0da4],
+.zw-toolbar--leave-to[data-v-a84e0da4] {
     opacity: 0;
 }
 .zw-wysiwyg {

package/dist/wysiwyg.mjs

@@ -22793,7 +22793,7 @@ var __component__$1 = /* @__PURE__ */ normalizeComponent(
   staticRenderFns$1,
   false,
   __vue2_injectStyles$1,
-  "7afee166",
+  "a84e0da4",
   null,
   null
 );
@@ -22824,13 +22824,12 @@ function useEditor({ content, onChange, extensions: extensions2, isReadonlyRef }
   watch(isReadonlyRef, (isReadonly) => editor.setEditable(!isReadonly), { immediate: true });
   return editor;
 }
-function useToolbar({ wrapperRef, offsets, isActiveRef }) {
+function useToolbar({ wrapperRef, scrollerRootRef, offsets, isActiveRef }) {
   const wrapperEl = useElementRef(wrapperRef);
   let popper2;
   function mount(element) {
     popper2 = createPopper(wrapperEl.value, element, {
       placement: "top-start",
-      strategy: "fixed",
       modifiers: [
         {
           name: "offset",
@@ -22840,12 +22839,13 @@ function useToolbar({ wrapperRef, offsets, isActiveRef }) {
           name: "preventOverflow",
           options: {
             altAxis: true,
-            padding: 2
+            padding: 2,
+            boundary: ContextWindow.window
           }
         },
         {
           name: "flip",
-          options: { rootBoundary: "document" }
+          options: { boundary: scrollerRootRef.value }
         }
       ]
     });
@@ -25906,6 +25906,10 @@ const __vue2_script = {
     window: {
       required: false,
       default: () => window
+    },
+    scrollerRoot: {
+      required: false,
+      default: () => document.body
     }
   },
   emits: [
@@ -25924,6 +25928,7 @@ const __vue2_script = {
     const isToolbarActiveRef = computed(() => props.active && !props.readonly);
     const toolbar = useToolbar({
       wrapperRef: wysiwygRef,
+      scrollerRootRef: toRef(props, "scrollerRoot"),
       isActiveRef: isToolbarActiveRef,
       offsets: props.toolbarOffsets
     });

package/lib/Wysiwyg.vue

@@ -125,6 +125,13 @@ export default {
         window: {
             required: false,
             default: () => window
+        },
+
+        // Requires HTMLElement type but it different in iframe and outside
+        // eslint-disable-next-line vue/require-prop-types
+        scrollerRoot: {
+            required: false,
+            default: () => document.body
         }
     },
 
@@ -144,6 +151,7 @@ export default {
 
         const toolbar = useToolbar({
             wrapperRef: wysiwygRef,
+            scrollerRootRef: toRef(props, 'scrollerRoot'),
             isActiveRef: isToolbarActiveRef,
             offsets: props.toolbarOffsets
         });

package/lib/components/toolbar/Toolbar.vue

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

package/lib/composables/useToolbar.js

@@ -1,14 +1,14 @@
 import { createPopper } from '@popperjs/core';
 import { useElementRef } from '../components/base';
+import { ContextWindow } from '../services';
 
-export function useToolbar({ wrapperRef, offsets, isActiveRef }) {
+export function useToolbar({ wrapperRef, scrollerRootRef, offsets, isActiveRef }) {
     const wrapperEl = useElementRef(wrapperRef);
     let popper;
 
     function mount(element) {
         popper = createPopper(wrapperEl.value, element, {
             placement: 'top-start',
-            strategy: 'fixed',
             modifiers: [
                 {
                     name: 'offset',
@@ -18,12 +18,13 @@ export function useToolbar({ wrapperRef, offsets, isActiveRef }) {
                     name: 'preventOverflow',
                     options: {
                         altAxis: true,
-                        padding: 2
+                        padding: 2,
+                        boundary: ContextWindow.window
                     }
                 },
                 {
                     name: 'flip',
-                    options: { rootBoundary: 'document' }
+                    options: { boundary: scrollerRootRef.value }
                 }
             ]
         });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zipify/wysiwyg",
-  "version": "1.0.0-dev.81",
+  "version": "1.0.0-dev.84",
   "description": "Zipify modification of TipTap text editor",
   "main": "dist/wysiwyg.mjs",
   "repository": {