@zipify/wysiwyg 1.0.0-dev.12 → 1.0.0-dev.13

package/lib/Wysiwyg.vue

@@ -17,7 +17,7 @@ import { Toolbar } from './components';
 import { useToolbar, useEditor } from './composables';
 import { getExtensions } from './extensions';
 import { InjectionTokens } from './injectionTokens';
-import { FavoriteColors, Storage } from './services';
+import { ContextWindow, FavoriteColors, Storage } from './services';
 import { Devices } from './enums';
 import { outClick } from './directives';
 import { Font } from './models';
@@ -95,10 +95,18 @@ export default {
             type: String,
             required: false,
             default: 'zw-list--'
+        },
+
+        window: {
+            type: Window,
+            required: false,
+            default: () => window
         }
     },
 
     setup(props, { emit }) {
+        ContextWindow.use(props.window);
+
         const fonts = props.fonts.map((font) => new Font(font));
 
         const toolbarRef = ref(null);

package/lib/components/base/colorPicker/composables/usePickerHotkeys.js

@@ -1,4 +1,5 @@
 import { ref } from '@vue/composition-api';
+import { ContextWindow } from '../../../../services';
 import { useActivatedListener } from '../../composables';
 
 export function usePickerHotkeys({ isOpenedRef, onCancel, onApply }) {
@@ -16,7 +17,7 @@ export function usePickerHotkeys({ isOpenedRef, onCancel, onApply }) {
     }
 
     useActivatedListener({
-        targetRef: ref(document),
+        targetRef: ref(ContextWindow.document),
         isActiveRef: isOpenedRef,
         event: 'keydown',
         onEvent: handle,

package/lib/directives/outClick.js

@@ -1,5 +1,21 @@
+import { ContextWindow } from '../services';
+
 const dataStorage = new WeakMap();
 
+function attachListener(onClick) {
+    if (ContextWindow.window !== window) {
+        window.document.addEventListener('click', onClick);
+    }
+    ContextWindow.document.addEventListener('click', onClick);
+}
+
+function removeListener(onClick) {
+    if (ContextWindow.window !== window) {
+        window.document.removeEventListener('click', onClick);
+    }
+    ContextWindow.document.removeEventListener('click', onClick);
+}
+
 export const outClick = {
     bind(el, { value }) {
         const onOutClick = value.onOutClick || value;
@@ -14,7 +30,7 @@ export const outClick = {
         dataStorage.set(el, { callback: onClick, isEnabled });
 
         if (isEnabled) {
-            setTimeout(() => document.addEventListener('click', onClick));
+            setTimeout(() => attachListener(onClick));
         }
     },
 
@@ -25,13 +41,13 @@ export const outClick = {
         if (isEnabled === data.isEnabled) return;
 
         isEnabled
-            ? document.addEventListener('click', data.callback)
-            : document.removeEventListener('click', data.callback);
+            ? attachListener(data.callback)
+            : removeListener(data.callback);
 
         dataStorage.set(el, { callback: data.callback, isEnabled });
     },
 
     unbind(el) {
-        document.removeEventListener('click', dataStorage.get(el).callback);
+        removeListener(dataStorage.get(el).callback);
     }
 };

package/lib/extensions/LineHeight.js

@@ -2,6 +2,7 @@ import { Extension } from '@tiptap/vue-2';
 import { computed } from '@vue/composition-api';
 import { createCommand, renderInlineSetting } from '../utils';
 import { NodeTypes, TextSettings } from '../enums';
+import { ContextWindow } from '../services';
 
 const DEFAULTS = {
     mobile: null,
@@ -30,7 +31,7 @@ export const LineHeight = Extension.create({
 
                         // element is not connected to window so getComputedStyle is not working on element
                         const childFontSize = element.firstElementChild.style.fontSize;
-                        const fontSize = childFontSize || window.getComputedStyle(document.body).fontSize;
+                        const fontSize = childFontSize || ContextWindow.getComputedStyle(ContextWindow.body).fontSize;
                         const relative = (parseFloat(value) / parseFloat(fontSize)).toFixed(2);
 
                         return { desktop: relative, tablet: relative, mobile: relative };

package/lib/extensions/StylePreset.js

@@ -3,6 +3,7 @@ import { computed, toRef } from '@vue/composition-api';
 import { Heading } from '@tiptap/extension-heading';
 import { createCommand } from '../utils';
 import { Devices, NodeTypes, TextSettings } from '../enums';
+import { ContextWindow } from '../services';
 
 function makePresetClass(base, preset) {
     const baseClass = base.split(' ').map((part) => `.${part}`).join('');
@@ -162,14 +163,14 @@ export const StylePreset = Extension.create({
     },
 
     onCreate() {
-        const existingStyleEl = document.querySelector('[data-zw-styles]');
+        const existingStyleEl = ContextWindow.document.querySelector('[data-zw-styles]');
 
         if (existingStyleEl) {
             this.storage.presetStyleEl = existingStyleEl;
             return;
         }
 
-        this.storage.presetStyleEl = document.createElement('style');
+        this.storage.presetStyleEl = ContextWindow.document.createElement('style');
         this.storage.presetStyleEl.dataset.zwStyles = '';
 
         for (const preset of this.options.presetsRef.value) {
@@ -190,6 +191,6 @@ export const StylePreset = Extension.create({
             this.storage.presetStyleEl.innerHTML += css.join(' ');
         }
 
-        document.head.append(this.storage.presetStyleEl);
+        ContextWindow.head.append(this.storage.presetStyleEl);
     }
 });

package/lib/services/ContentNormalizer.js

@@ -1,3 +1,5 @@
+import { ContextWindow } from './ContextWidnow';
+
 export class ContentNormalizer {
     static NORMALIZING_STYLE_BLACKLIST = ['text-align', 'line-height'];
 
@@ -83,7 +85,7 @@ export class ContentNormalizer {
     _wrapTextNode(parent, node) {
         if (node.nodeType !== Node.TEXT_NODE) return node;
 
-        const span = document.createElement('span');
+        const span = ContextWindow.document.createElement('span');
 
         span.append(node.cloneNode());
         parent.replaceChild(span, node);

package/lib/services/ContextWidnow.js

@@ -0,0 +1,23 @@
+export class ContextWindow {
+    static window = window;
+
+    static use(window) {
+        this.window = window;
+    }
+
+    static get document() {
+        return this.window.document;
+    }
+
+    static get body() {
+        return this.document.body;
+    }
+
+    static get head() {
+        return this.document.head;
+    }
+
+    static getComputedStyle(element) {
+        return this.window.getComputedStyle(element);
+    }
+}

package/lib/services/index.js

@@ -2,3 +2,4 @@ export { JsonSerializer } from './JsonSerializer';
 export { Storage } from './Storage';
 export { FavoriteColors } from './FavoriteColors';
 export { ContentNormalizer } from './ContentNormalizer';
+export { ContextWindow } from './ContextWidnow';

package/package.json

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