@zipify/wysiwyg 1.0.0-dev.8 → 1.0.0-dev.9

package/example/ExampleApp.vue

@@ -29,6 +29,7 @@
             :make-preset-variable="$options.makePresetVariable"
             :favorite-colors="favoriteColors"
             :device="device"
+            :active="isActive"
             @updateFavoriteColors="updateFavoriteColors"
         />
         <pre class="zw-content-structure" v-html="structurePreview" />
@@ -66,6 +67,7 @@ export default {
         const presets = ref(PRESETS);
         const device = ref('desktop');
         const updatedAt = new Date(ZW_UPDATED_AT).toLocaleString('ua-UA');
+        const isActive = ref(false);
 
         const structurePreview = computed(() => {
             const json = JSON.stringify(content.value, null, '  ');
@@ -94,6 +96,10 @@ export default {
             }
         }
 
+        document.body.addEventListener('click', (event) => {
+            isActive.value = wswgRef.value.$el.contains(event.target);
+        });
+
         return {
             wswgRef,
             content,
@@ -104,7 +110,8 @@ export default {
             loadContent,
             device,
             updatedAt,
-            presets
+            presets,
+            isActive
         };
     }
 };

package/lib/Wysiwyg.vue

@@ -1,11 +1,7 @@
 <template>
-    <div
-        class="zw-wysiwyg"
-        ref="wysiwygRef"
-        v-out-click="{ onOutClick: hideToolbar, isDisabled: !toolbar.isShow.value }"
-    >
+    <div class="zw-wysiwyg" ref="wysiwygRef">
         <Toolbar
-            v-show="toolbar.isShow.value"
+            v-show="active"
             :editor="editor"
             :device="device"
             ref="toolbarRef"
@@ -72,6 +68,11 @@ export default {
             required: true
         },
 
+        active: {
+            type: Boolean,
+            required: true
+        },
+
         device: {
             type: String,
             required: false,
@@ -106,7 +107,8 @@ export default {
         const toolbar = useToolbar({
             wrapperRef: wysiwygRef,
             popperRef: toolbarRef,
-            offsets: toRef(props, 'toolbarOffsets').value
+            isActiveRef: toRef(props, 'active'),
+            offsets: props.toolbarOffsets
         });
 
         function onChange(content) {
@@ -117,7 +119,6 @@ export default {
         const editor = useEditor({
             content: toRef(props, 'value'),
             onChange: (content) => onChange(content),
-            onFocus: () => toolbar.show(),
 
             extensions: getExtensions({
                 fonts,
@@ -132,12 +133,6 @@ export default {
             })
         });
 
-        function hideToolbar() {
-            if (editor.isFocused) return;
-
-            toolbar.hide();
-        }
-
         const fontSizes = new Array(MAX_FONT_SIZE - MIN_FONT_SIZE + 1)
             .fill(0)
             .map((_, index) => String(index + MIN_FONT_SIZE));
@@ -153,7 +148,7 @@ export default {
         provide(InjectionTokens.LOCAL_STORAGE, new Storage(localStorage));
         provide(InjectionTokens.FAVORITE_COLORS, favoriteColors);
 
-        return { editor, toolbarRef, wysiwygRef, toolbar, hideToolbar };
+        return { editor, toolbarRef, wysiwygRef, toolbar };
     }
 };
 </script>

package/lib/composables/useEditor.js

@@ -2,13 +2,12 @@ import { Editor } from '@tiptap/vue-2';
 import { onUnmounted, watch, reactive } from '@vue/composition-api';
 import { ContentNormalizer } from '../services';
 
-export function useEditor({ content, onChange, onFocus, extensions }) {
+export function useEditor({ content, onChange, extensions }) {
     const normalizer = new ContentNormalizer();
 
     const editor = reactive(new Editor({
         content: normalizer.normalize(content.value),
         onUpdate: () => onChange(editor.getJSON()),
-        onFocus: () => onFocus(),
         extensions
     }));
 

package/lib/composables/useToolbar.js

@@ -1,10 +1,9 @@
 import { createPopper } from '@popperjs/core';
-import { onUnmounted, onMounted, ref } from '@vue/composition-api';
+import { onUnmounted, onMounted, watch } from '@vue/composition-api';
 import { useElementRef } from '../components/base/composables';
 
-export function useToolbar({ wrapperRef, popperRef, offsets }) {
+export function useToolbar({ wrapperRef, popperRef, offsets, isActiveRef }) {
     let toolbar;
-    const isShow = ref(false);
 
     onMounted(() => {
         const wrapperEl = useElementRef(wrapperRef).value;
@@ -22,23 +21,13 @@ export function useToolbar({ wrapperRef, popperRef, offsets }) {
             ]
         });
     });
+    const update = () => toolbar.update();
 
-    onUnmounted(() => {
-        toolbar.destroy();
+    watch(isActiveRef, () => {
+        if (isActiveRef.value) update();
     });
 
-    function hide() {
-        isShow.value = false;
-    }
+    onUnmounted(() => toolbar.destroy());
 
-    function show() {
-        isShow.value = true;
-        this.update();
-    }
-
-    function update() {
-        toolbar.update();
-    }
-
-    return { toolbar, show, hide, update, isShow };
+    return { toolbar, update };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zipify/wysiwyg",
-  "version": "1.0.0-dev.8",
+  "version": "1.0.0-dev.9",
   "description": "Zipify modification of TipTap text editor",
   "main": "dist/wysiwyg.js",
   "repository": {
@@ -21,7 +21,7 @@
     "optimize-svg": "svgo --config ./config/svgo.js",
     "gzip": "gzipper compress",
     "prepare": "husky install",
-    "release": "export $(cat ./.env | xargs) && release-it"
+    "release": "export $(cat ./.env | xargs) && npm run lib:build && release-it"
   },
   "dependencies": {
     "@popperjs/core": "^2.11.5",

package/lib/composables/__tests__/useToolbar.test.js

@@ -1,56 +0,0 @@
-import { createPopper } from '@popperjs/core';
-import { ref, nextTick } from '@vue/composition-api';
-import { withComponentContext } from '../../__tests__/utils';
-import { useToolbar } from '../useToolbar';
-import { useElementRef } from '../../components/base/composables';
-
-jest.mock('@popperjs/core', () => ({
-    createPopper: jest.fn(() => ({
-        update: jest.fn()
-    }))
-}));
-
-function createWrapper() {
-    const el = document.createElement('div');
-    const elementRef = useElementRef(ref(el));
-
-    return withComponentContext(() => {
-        return useToolbar({
-            wrapperRef: elementRef,
-            popperRef: elementRef
-        });
-    });
-}
-
-describe('manage opened state', () => {
-    test('should show toolbar', () => {
-        const toolbarComponent = createWrapper();
-
-        toolbarComponent.show();
-
-        expect(toolbarComponent.isShow.value).toBe(true);
-    });
-
-    test('should hide toolbar', () => {
-        const toolbarComponent = createWrapper();
-
-        toolbarComponent.show();
-        toolbarComponent.hide();
-
-        expect(toolbarComponent.isShow.value).toBe(false);
-    });
-
-    test('should update toolbar on open', async () => {
-        const popper = { update: jest.fn() };
-
-        createPopper.mockReturnValueOnce(popper);
-
-        const toolbarComponent = createWrapper();
-
-        await nextTick();
-
-        toolbarComponent.show();
-
-        expect(popper.update).toHaveBeenCalled();
-    });
-});