@zipify/wysiwyg 2.5.4 → 2.5.6-0

package/lib/Wysiwyg.vue

@@ -3,6 +3,7 @@
         <Toolbar
             :toolbar="toolbar"
             :device="device"
+            :popup-mode="popupMode"
             ref="toolbarRef"
         />
 
@@ -201,7 +202,6 @@ export default {
         provide(InjectionTokens.LOCAL_STORAGE, new Storage(localStorage));
         provide(InjectionTokens.FAVORITE_COLORS, favoriteColors);
         provide(InjectionTokens.PAGE_BLOCKS, pageBlocks);
-        provide(InjectionTokens.POPUP_MODE, props.popupMode);
 
         return {
             editor,

package/lib/components/base/colorPicker/ColorPicker.vue

@@ -4,18 +4,18 @@
         placement="bottom-end"
         placement-strategy="fixed"
         :favorite-colors="favoriteColors"
-        :window="window"
+        :window="contextWindow"
         @changeFavoriteColors="updateFavoriteColors"
-        v-model="editingColor"
-        v-out-click="{ onOutClick: close, isDisabled: !isOpened }"
+        v-model="api.editingColor"
+        v-out-click="{ onOutClick: api.close, isDisabled: !api.isOpened }"
     >
         <template #activator>
             <slot
                 name="activator"
-                :isOpened="isOpened"
-                :open="open"
-                :close="close"
-                :toggle="toggle"
+                :isOpened="api.isOpened"
+                :open="api.open"
+                :close="api.close"
+                :toggle="api.toggle"
             />
         </template>
     </ZipifyColorPicker>
@@ -23,11 +23,10 @@
 
 <script>
 import { ZipifyColorPicker } from '@zipify/colorpicker';
-import { inject, ref, toRef, unref } from 'vue';
+import { inject, ref, toRef } from 'vue';
 import { outClick } from '../../../directives';
 import { InjectionTokens } from '../../../injectionTokens';
 import { ContextWindow } from '../../../services';
-import { useDeselectionLock } from '../composables';
 import { usePickerApi, usePickerHotkeys } from './composables';
 
 export default {
@@ -55,8 +54,6 @@ export default {
 
         const api = usePickerApi({
             onChange: (color) => {
-                if (!unref(api.isOpened)) return false;
-
                 emit('change', color);
                 editor.chain().focus().restoreSelection().run();
             },
@@ -65,32 +62,22 @@ export default {
             colorRef: toRef(props, 'value'),
             pickerRef
         });
+        const isOpenedRef = toRef(api, 'isOpened');
 
         usePickerHotkeys({
-            isOpenedRef: api.isOpened,
-            onCancel: () => api.cancel(),
-            onApply: () => api.close()
-        });
-
-        useDeselectionLock({
-            hostRef: pickerRef,
-            isActiveRef: api.isOpened
+            isOpenedRef,
+            onCancel: api.cancel,
+            onApply: api.close
         });
 
-        function updateFavoriteColors(colors) {
-            favoriteColors.triggerUpdate(colors);
-        }
+        const updateFavoriteColors = (colors) => favoriteColors.triggerUpdate(colors);
 
         return {
             pickerRef,
-            isOpened: api.isOpened,
-            editingColor: api.editingColor,
-            open: api.open,
-            close: api.close,
-            toggle: api.toggle,
+            api,
             favoriteColors: favoriteColors.listRef,
             updateFavoriteColors,
-            window: ContextWindow.window
+            contextWindow: ContextWindow.window
         };
     }
 };

package/lib/components/base/colorPicker/composables/__tests__/usePickerApi.test.js

@@ -23,7 +23,7 @@ describe('open/close picker', () => {
             colorRef: ref('red')
         });
 
-        expect(toggler.isOpened.value).toBe(true);
+        expect(toggler.isOpened).toBe(true);
     });
 
     test('should return non opened status if picker not rendered yet', () => {
@@ -34,7 +34,7 @@ describe('open/close picker', () => {
             colorRef: ref('red')
         });
 
-        expect(toggler.isOpened.value).toBe(false);
+        expect(toggler.isOpened).toBe(false);
     });
 
     test('should open picker', () => {

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

@@ -1,4 +1,4 @@
-import { computed } from 'vue';
+import { computed, reactive } from 'vue';
 
 export function usePickerApi({ pickerRef, colorRef, onChange, onClosed, onBeforeOpened }) {
     const isOpened = computed(() => pickerRef.value?.isVisible ?? false);
@@ -19,24 +19,28 @@ export function usePickerApi({ pickerRef, colorRef, onChange, onClosed, onBefore
         isOpened.value ? close() : open();
     }
 
+    function triggerChange(color) {
+        if (isOpened.value) onChange(color);
+    }
+
     function cancel() {
         const color = initialColor ?? colorRef.value;
 
-        onChange(color);
+        triggerChange(color);
         pickerRef.value?.close(color);
     }
 
     const editingColor = computed({
         get: () => colorRef.value,
-        set: (color) => colorRef.value !== color && onChange(color)
+        set: (color) => colorRef.value !== color && triggerChange(color)
     });
 
-    return {
+    return reactive({
         isOpened,
         editingColor,
         open,
         close,
         toggle,
         cancel
-    };
+    });
 }

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

@@ -4,6 +4,8 @@ import { useActivatedListener } from '../../composables';
 
 export function usePickerHotkeys({ isOpenedRef, onCancel, onApply }) {
     function useHotkey(event, handler) {
+        if (event.target.closest('input')) return;
+
         event.stopImmediatePropagation();
         event.preventDefault();
         handler();

package/lib/components/toolbar/Toolbar.vue

@@ -2,7 +2,7 @@
     <keep-alive>
         <transition name="zw-toolbar-" duration="150">
             <div class="zw-toolbar" :style="toolbarStyles" ref="toolbarRef" v-if="isVisible">
-                <component :is="toolbarComponent" />
+                <component :is="layoutComponent" />
             </div>
         </transition>
     </keep-alive>
@@ -11,8 +11,7 @@
 <script>
 import { computed, ref, watch } from 'vue';
 import { Devices } from '../../enums';
-import ToolbarFull from './ToolbarFull';
-import ToolbarDevice from './ToolbarDevice';
+import { ToolbarDesktop, ToolbarMobile, ToolbarPopup } from './layouts';
 
 export default {
     name: 'Toolbar',
@@ -26,13 +25,21 @@ export default {
         toolbar: {
             type: Object,
             required: true
+        },
+
+        popupMode: {
+            type: Boolean,
+            required: true
         }
     },
 
     setup(props) {
-        const toolbarComponent = computed(() => {
-            return props.device === Devices.DESKTOP ? ToolbarFull : ToolbarDevice;
+        const layoutComponent = computed(() => {
+            if (props.popupMode) return ToolbarPopup;
+
+            return props.device === Devices.MOBILE ? ToolbarMobile : ToolbarDesktop;
         });
+
         const isVisible = computed(() => props.toolbar.isActiveRef.value);
         const toolbarRef = ref(null);
 
@@ -45,7 +52,7 @@ export default {
         }));
 
         return {
-            toolbarComponent,
+            layoutComponent,
             isVisible,
             toolbarRef,
             toolbarStyles

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

@@ -2,10 +2,9 @@ import { shallowMount } from '@vue/test-utils';
 import { ref } from 'vue';
 import { Devices } from '../../../enums';
 import Toolbar from '../Toolbar';
-import ToolbarFull from '../ToolbarFull';
-import ToolbarDevice from '../ToolbarDevice';
+import { ToolbarMobile, ToolbarDesktop, ToolbarPopup } from '../layouts';
 
-function createComponent({ device }) {
+function createComponent({ device, popupMode }) {
     return shallowMount(Toolbar, {
         propsData: {
             toolbar: {
@@ -13,7 +12,8 @@ function createComponent({ device }) {
                 isActiveRef: ref({ value: true }),
                 offsets: [0, 8]
             },
-            device: device ?? Devices.DESKTOP
+            device: device ?? Devices.DESKTOP,
+            popupMode: popupMode ?? false
         }
     });
 }
@@ -22,18 +22,24 @@ describe('rendering', () => {
     test('should render desktop toolbar', () => {
         const wrapper = createComponent({ device: Devices.DESKTOP });
 
-        expect(wrapper).toVueContainComponent(ToolbarFull);
+        expect(wrapper).toVueContainComponent(ToolbarDesktop);
     });
 
     test('should render tablet toolbar', () => {
         const wrapper = createComponent({ device: Devices.TABLET });
 
-        expect(wrapper).toVueContainComponent(ToolbarDevice);
+        expect(wrapper).toVueContainComponent(ToolbarDesktop);
     });
 
     test('should render mobile toolbar', () => {
         const wrapper = createComponent({ device: Devices.MOBILE });
 
-        expect(wrapper).toVueContainComponent(ToolbarDevice);
+        expect(wrapper).toVueContainComponent(ToolbarMobile);
+    });
+
+    test('should render popup toolbar', () => {
+        const wrapper = createComponent({ popupMode: true });
+
+        expect(wrapper).toVueContainComponent(ToolbarPopup);
     });
 });

package/lib/components/toolbar/base/index.js

@@ -0,0 +1,3 @@
+export { default as ToolbarGroup } from './ToolbarGroup';
+export { default as ToolbarDivider } from './ToolbarDivider';
+export { default as ToolbarRow } from './ToolbarRow';

package/lib/components/toolbar/controls/index.js

@@ -10,7 +10,6 @@ export { default as StrikeThroughControl } from './StrikeThroughControl';
 export { default as SuperscriptControl } from './SuperscriptControl';
 export { default as CaseStyleControl } from './CaseStyleControl';
 export { default as AlignmentControl } from './AlignmentControl';
-export { default as AlignmentDeviceControl } from './AlignmentDeviceControl';
 export { default as LineHeightControl } from './LineHeightControl';
 export { default as ListControl } from './ListControl';
 export { default as RemoveFormatControl } from './RemoveFormatControl';

package/lib/components/toolbar/layouts/ToolbarDesktop.vue

@@ -0,0 +1,95 @@
+<template>
+    <div>
+        <ToolbarRow>
+            <StylePresetControl />
+            <ToolbarDivider vertical />
+            <FontFamilyControl />
+            <ToolbarDivider vertical />
+            <FontWeightControl />
+            <ToolbarDivider vertical />
+            <FontSizeControl />
+            <ToolbarDivider vertical />
+
+            <ToolbarGroup>
+                <FontColorControl />
+                <BackgroundColorControl />
+            </ToolbarGroup>
+        </ToolbarRow>
+
+        <ToolbarDivider horizontal />
+
+        <ToolbarRow>
+            <ToolbarGroup>
+                <ItalicControl />
+                <UnderlineControl />
+                <StrikeThroughControl />
+                <SuperscriptControl />
+                <CaseStyleControl />
+            </ToolbarGroup>
+
+            <ToolbarDivider vertical />
+
+            <AlignmentControl />
+            <ToolbarDivider vertical />
+
+            <LineHeightControl />
+            <ToolbarDivider vertical />
+
+            <ListControl />
+            <ToolbarDivider vertical />
+
+            <ToolbarGroup>
+                <LinkControl />
+                <RemoveFormatControl />
+            </ToolbarGroup>
+        </ToolbarRow>
+    </div>
+</template>
+
+<script>
+import { ToolbarDivider, ToolbarRow, ToolbarGroup } from '../base';
+import {
+    StylePresetControl,
+    AlignmentControl,
+    BackgroundColorControl,
+    CaseStyleControl,
+    FontColorControl,
+    FontFamilyControl,
+    FontSizeControl,
+    FontWeightControl,
+    ItalicControl,
+    LineHeightControl,
+    StrikeThroughControl,
+    SuperscriptControl,
+    UnderlineControl,
+    ListControl,
+    RemoveFormatControl,
+    LinkControl
+} from '../controls';
+
+export default {
+    name: 'ToolbarDesktop',
+
+    components: {
+        ToolbarRow,
+        ToolbarGroup,
+        ToolbarDivider,
+        StylePresetControl,
+        CaseStyleControl,
+        FontFamilyControl,
+        FontWeightControl,
+        FontSizeControl,
+        FontColorControl,
+        BackgroundColorControl,
+        ItalicControl,
+        UnderlineControl,
+        SuperscriptControl,
+        StrikeThroughControl,
+        AlignmentControl,
+        LineHeightControl,
+        ListControl,
+        RemoveFormatControl,
+        LinkControl
+    }
+};
+</script>

package/lib/components/toolbar/{ToolbarFull.vue → layouts/ToolbarMobile.vue}

@@ -6,8 +6,13 @@
             <FontFamilyControl />
             <ToolbarDivider vertical />
             <FontWeightControl />
-            <ToolbarDivider vertical />
+        </ToolbarRow>
+
+        <ToolbarDivider horizontal />
+
+        <ToolbarRow>
             <FontSizeControl />
+
             <ToolbarDivider vertical />
 
             <ToolbarGroup>
@@ -15,47 +20,27 @@
                 <BackgroundColorControl />
             </ToolbarGroup>
 
-            <template v-if="isPopupMode">
-                <ToolbarDivider vertical />
+            <ToolbarDivider vertical />
 
-                <ToolbarGroup>
-                    <ItalicControl />
-                    <UnderlineControl />
-                    <StrikeThroughControl />
-                    <SuperscriptControl />
-                    <CaseStyleControl />
-                </ToolbarGroup>
-            </template>
+            <ToolbarGroup>
+                <ItalicControl />
+                <UnderlineControl />
+                <StrikeThroughControl />
+                <SuperscriptControl />
+                <CaseStyleControl />
+            </ToolbarGroup>
         </ToolbarRow>
 
         <ToolbarDivider horizontal />
 
         <ToolbarRow>
-            <template v-if="!isPopupMode">
-                <ToolbarGroup>
-                    <ItalicControl />
-                    <UnderlineControl />
-                    <StrikeThroughControl />
-                    <SuperscriptControl />
-                    <CaseStyleControl />
-                </ToolbarGroup>
-
-                <ToolbarDivider vertical />
-            </template>
-
             <AlignmentControl />
             <ToolbarDivider vertical />
 
-            <ToolbarGroup>
-                <LineHeightControl />
-            </ToolbarGroup>
-
+            <LineHeightControl />
             <ToolbarDivider vertical />
 
-            <ToolbarGroup>
-                <ListControl />
-            </ToolbarGroup>
-
+            <ListControl />
             <ToolbarDivider vertical />
 
             <ToolbarGroup>
@@ -67,11 +52,7 @@
 </template>
 
 <script>
-import { inject } from 'vue';
-import { InjectionTokens } from '../../injectionTokens';
-import ToolbarDivider from './ToolbarDivider';
-import ToolbarRow from './ToolbarRow';
-import ToolbarGroup from './ToolbarGroup';
+import { ToolbarDivider, ToolbarRow, ToolbarGroup } from '../base';
 import {
     StylePresetControl,
     AlignmentControl,
@@ -89,10 +70,10 @@ import {
     ListControl,
     RemoveFormatControl,
     LinkControl
-} from './controls';
+} from '../controls';
 
 export default {
-    name: 'ToolbarFull',
+    name: 'ToolbarMobile',
 
     components: {
         ToolbarRow,
@@ -114,12 +95,6 @@ export default {
         ListControl,
         RemoveFormatControl,
         LinkControl
-    },
-
-    setup() {
-        const isPopupMode = inject(InjectionTokens.POPUP_MODE);
-
-        return { isPopupMode };
     }
 };
 </script>

package/lib/components/toolbar/layouts/ToolbarPopup.vue

@@ -0,0 +1,95 @@
+<template>
+    <div>
+        <ToolbarRow>
+            <StylePresetControl />
+            <ToolbarDivider vertical />
+            <FontFamilyControl />
+            <ToolbarDivider vertical />
+            <FontWeightControl />
+            <ToolbarDivider vertical />
+            <FontSizeControl />
+            <ToolbarDivider vertical />
+
+            <ToolbarGroup>
+                <FontColorControl />
+                <BackgroundColorControl />
+            </ToolbarGroup>
+
+            <ToolbarDivider vertical />
+
+            <ToolbarGroup>
+                <ItalicControl />
+                <UnderlineControl />
+                <StrikeThroughControl />
+                <SuperscriptControl />
+                <CaseStyleControl />
+            </ToolbarGroup>
+        </ToolbarRow>
+
+        <ToolbarDivider horizontal />
+
+        <ToolbarRow>
+            <AlignmentControl />
+            <ToolbarDivider vertical />
+
+            <LineHeightControl />
+            <ToolbarDivider vertical />
+
+            <ListControl />
+            <ToolbarDivider vertical />
+
+            <ToolbarGroup>
+                <LinkControl />
+                <RemoveFormatControl />
+            </ToolbarGroup>
+        </ToolbarRow>
+    </div>
+</template>
+
+<script>
+import { ToolbarDivider, ToolbarRow, ToolbarGroup } from '../base';
+import {
+    StylePresetControl,
+    AlignmentControl,
+    BackgroundColorControl,
+    CaseStyleControl,
+    FontColorControl,
+    FontFamilyControl,
+    FontSizeControl,
+    FontWeightControl,
+    ItalicControl,
+    LineHeightControl,
+    StrikeThroughControl,
+    SuperscriptControl,
+    UnderlineControl,
+    ListControl,
+    RemoveFormatControl,
+    LinkControl
+} from '../controls';
+
+export default {
+    name: 'ToolbarPopup',
+
+    components: {
+        ToolbarRow,
+        ToolbarGroup,
+        ToolbarDivider,
+        StylePresetControl,
+        CaseStyleControl,
+        FontFamilyControl,
+        FontWeightControl,
+        FontSizeControl,
+        FontColorControl,
+        BackgroundColorControl,
+        ItalicControl,
+        UnderlineControl,
+        SuperscriptControl,
+        StrikeThroughControl,
+        AlignmentControl,
+        LineHeightControl,
+        ListControl,
+        RemoveFormatControl,
+        LinkControl
+    }
+};
+</script>

package/lib/components/toolbar/layouts/index.js

@@ -0,0 +1,3 @@
+export { default as ToolbarDesktop } from './ToolbarDesktop';
+export { default as ToolbarMobile } from './ToolbarMobile';
+export { default as ToolbarPopup } from './ToolbarPopup';

package/lib/injectionTokens.js

@@ -4,6 +4,5 @@ export const InjectionTokens = Object.freeze({
     EDITOR: Symbol('editor'),
     LOCAL_STORAGE: Symbol('localStorage'),
     FAVORITE_COLORS: Symbol('favoriteColors'),
-    PAGE_BLOCKS: Symbol('pageBlocks'),
-    POPUP_MODE: Symbol('popupMode')
+    PAGE_BLOCKS: Symbol('pageBlocks')
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zipify/wysiwyg",
-  "version": "2.5.4",
+  "version": "2.5.6-0",
   "description": "Zipify modification of TipTap text editor",
   "main": "dist/wysiwyg.mjs",
   "bin": {
@@ -18,8 +18,7 @@
   },
   "scripts": {
     "lib:build": "vite build --config config/build/lib.config.js",
-    "lib:pre-release": "run-s lint:js lint:css test:unit",
-    "lib:release": "export $(cat ./.env | xargs) && run-s lib:pre-release lib:build cli:build && release-it",
+    "lib:release": "export $(cat ./.env | xargs) && release-it",
     "cli:build": "NODE_ENV=production rollup --config config/build/cli.config.js",
     "cli:dev": "NODE_ENV=development rollup --config config/build/cli.config.js --watch",
     "example:start": "NODE_ENV=development vite serve --config config/build/example.config.js",
@@ -83,7 +82,6 @@
     "jest": "^29.0.3",
     "jest-environment-jsdom": "^29.0.3",
     "lint-staged": "^13.0.3",
-    "npm-run-all": "^4.1.5",
     "postcss-html": "^1.5.0",
     "release-it": "^15.4.2",
     "rollup": "^2.79.0",

package/lib/components/toolbar/ToolbarDevice.vue

@@ -1,35 +0,0 @@
-<template>
-    <ToolbarRow>
-        <StylePresetControl />
-        <ToolbarDivider vertical />
-        <AlignmentDeviceControl />
-        <ToolbarDivider vertical />
-        <FontSizeControl />
-        <ToolbarDivider vertical />
-        <LineHeightControl />
-    </ToolbarRow>
-</template>
-
-<script>
-import ToolbarRow from './ToolbarRow';
-import ToolbarDivider from './ToolbarDivider';
-import {
-    StylePresetControl,
-    AlignmentDeviceControl,
-    FontSizeControl,
-    LineHeightControl
-} from './controls';
-
-export default {
-    name: 'ToolbarDevice',
-
-    components: {
-        ToolbarRow,
-        ToolbarDivider,
-        StylePresetControl,
-        AlignmentDeviceControl,
-        FontSizeControl,
-        LineHeightControl
-    }
-};
-</script>