@zipify/wysiwyg 1.0.0-dev.16 → 1.0.0-dev.17

package/lib/Wysiwyg.vue

@@ -1,11 +1,11 @@
 <template>
     <div class="zw-wysiwyg" ref="wysiwygRef">
         <Toolbar
-            v-show="active"
-            :editor="editor"
+            :toolbar="toolbar"
             :device="device"
             ref="toolbarRef"
         />
+
         <EditorContent :editor="editor" />
     </div>
 </template>
@@ -115,7 +115,6 @@ export default {
 
         const toolbar = useToolbar({
             wrapperRef: wysiwygRef,
-            popperRef: toolbarRef,
             isActiveRef: toRef(props, 'active'),
             offsets: props.toolbarOffsets
         });

package/lib/components/base/index.js

@@ -6,6 +6,6 @@ export { default as FieldLabel } from './FieldLabel';
 export { default as Range } from './Range';
 export { default as NumberField } from './NumberField';
 export { default as Modal } from './Modal';
-export { useModalToggler } from './composables';
+export { useModalToggler, useElementRef } from './composables';
 export * from './dropdown';
 export * from './colorPicker';

package/lib/components/toolbar/Toolbar.vue

@@ -1,13 +1,15 @@
 <template>
-    <Transition name="zw-toolbar-" :duration="800">
-        <div class="zw-toolbar">
-            <component :is="toolbarComponent" />
-        </div>
-    </Transition>
+    <transition name="zw-toolbar-" :duration="150">
+        <keep-alive>
+            <div class="zw-toolbar" :style="toolbarStyles" ref="toolbarRef" v-if="isVisible">
+                <component :is="toolbarComponent" />
+            </div>
+        </keep-alive>
+    </transition>
 </template>
 
 <script>
-import { computed } from '@vue/composition-api';
+import { computed, ref, watch } from '@vue/composition-api';
 import { Devices } from '../../enums';
 import ToolbarFull from './ToolbarFull';
 import ToolbarDevice from './ToolbarDevice';
@@ -19,6 +21,11 @@ export default {
         device: {
             type: String,
             required: true
+        },
+
+        toolbar: {
+            type: Object,
+            required: true
         }
     },
 
@@ -26,8 +33,23 @@ export default {
         const toolbarComponent = computed(() => {
             return props.device === Devices.DESKTOP ? ToolbarFull : ToolbarDevice;
         });
+        const isVisible = computed(() => props.toolbar.isActiveRef.value);
+        const toolbarRef = ref(null);
+
+        watch(toolbarRef, (toolbarEl) => {
+            toolbarEl && props.toolbar.mount(toolbarEl);
+        });
+
+        const toolbarStyles = computed(() => ({
+            '--zw-toolbar-offset-y': `${props.toolbar.offsets[1]}px`
+        }));
 
-        return { toolbarComponent };
+        return {
+            toolbarComponent,
+            isVisible,
+            toolbarRef,
+            toolbarStyles
+        };
     }
 };
 </script>
@@ -40,6 +62,24 @@ export default {
     z-index: 999999;
 }
 
+.zw-toolbar::before,
+.zw-toolbar::after {
+    content: "";
+    display: block;
+    width: 100%;
+    height: calc(var(--zw-toolbar-offset-y) + 4px);
+    position: absolute;
+    --zw-toolbar-safe-zone: calc(-1 * var(--zw-toolbar-offset-y));
+}
+
+.zw-toolbar::before {
+    top: var(--zw-toolbar-safe-zone);
+}
+
+.zw-toolbar::after {
+    bottom: var(--zw-toolbar-safe-zone);
+}
+
 .zw-toolbar--enter-active,
 .zw-toolbar--leave-active {
     transition: opacity 0.15s ease-out;

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

@@ -1,4 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
+import { ref } from '@vue/composition-api';
 import { Devices } from '../../../enums';
 import Toolbar from '../Toolbar';
 import ToolbarFull from '../ToolbarFull';
@@ -7,6 +8,11 @@ import ToolbarDevice from '../ToolbarDevice';
 function createComponent({ device }) {
     return shallowMount(Toolbar, {
         propsData: {
+            toolbar: {
+                mount: jest.fn(),
+                isActiveRef: ref(true),
+                offsets: [0, 8]
+            },
             device: device ?? Devices.DESKTOP
         }
     });

package/lib/composables/useToolbar.js

@@ -1,33 +1,29 @@
 import { createPopper } from '@popperjs/core';
-import { onUnmounted, onMounted, watch } from '@vue/composition-api';
-import { useElementRef } from '../components/base/composables';
+import { useElementRef } from '../components/base';
 
-export function useToolbar({ wrapperRef, popperRef, offsets, isActiveRef }) {
+export function useToolbar({ wrapperRef, offsets, isActiveRef }) {
+    const wrapperEl = useElementRef(wrapperRef);
     let toolbar;
 
-    onMounted(() => {
-        const wrapperEl = useElementRef(wrapperRef).value;
-        const toolbarEl = useElementRef(popperRef).value;
-
-        toolbar = createPopper(wrapperEl, toolbarEl, {
+    function mount(element) {
+        toolbar = createPopper(wrapperEl.value, element, {
             placement: 'top-start',
             modifiers: [
                 {
                     name: 'offset',
-                    options: {
-                        offset: offsets
-                    }
+                    options: { offset: offsets }
                 }
             ]
         });
-    });
-    const update = () => toolbar.update();
-
-    watch(isActiveRef, () => {
-        if (isActiveRef.value) update();
-    });
+    }
 
-    onUnmounted(() => toolbar.destroy());
+    const update = () => toolbar?.update();
 
-    return { toolbar, update };
+    return {
+        toolbar,
+        update,
+        mount,
+        isActiveRef,
+        offsets
+    };
 }

package/package.json

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