@zipify/wysiwyg 2.5.5 → 2.5.6

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/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.5",
+  "version": "2.5.6",
   "description": "Zipify modification of TipTap text editor",
   "main": "dist/wysiwyg.mjs",
   "bin": {

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>

package/lib/components/toolbar/controls/AlignmentDeviceControl.vue

@@ -1,78 +0,0 @@
-<template>
-    <div class="zw-position--relative" ref="wrapperRef">
-        <Button
-            icon
-            skin="toolbar"
-            :active="isOpened"
-            @click="toggler.open"
-            v-tooltip="'Alignment'"
-        >
-            <Icon :name="icon" size="28px" auto-color />
-        </Button>
-
-        <Modal class="zw-alignment-control__modal" ref="modalRef" :toggler="toggler">
-            <AlignmentControl class="zw-alignment-control__toggle" @applied="toggler.close" />
-        </Modal>
-    </div>
-</template>
-
-<script>
-import { computed, inject, ref, unref } from 'vue';
-import { InjectionTokens } from '../../../injectionTokens';
-import { tooltip } from '../../../directives';
-import { Alignments } from '../../../enums';
-import { Button, Icon, Modal, useModalToggler } from '../../base';
-import AlignmentControl from './AlignmentControl';
-
-export default {
-    name: 'AlignmentDeviceControl',
-
-    components: {
-        Button,
-        Icon,
-        Modal,
-        AlignmentControl
-    },
-
-    directives: {
-        tooltip
-    },
-
-    setup() {
-        const editor = inject(InjectionTokens.EDITOR);
-        const currentValue = editor.commands.getAlignment();
-        const wrapperRef = ref(null);
-        const modalRef = ref(null);
-
-        const toggler = useModalToggler({
-            wrapperRef,
-            modalRef
-        });
-
-        const icon = computed(() => {
-            const name = unref(currentValue) || Alignments.LEFT;
-
-            return `alignment-${name}`;
-        });
-
-        return {
-            wrapperRef,
-            modalRef,
-            currentValue,
-            icon,
-            toggler,
-            isOpened: toggler.isOpened
-        };
-    }
-};
-</script>
-
-<style scoped>
-.zw-alignment-control__modal {
-    padding: var(--zw-offset-xxs);
-}
-
-.zw-alignment-control__toggle {
-    flex-direction: column;
-}
-</style>

package/lib/components/toolbar/controls/__tests__/AlignmentDeviceControl.test.js

@@ -1,77 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import { ref, h, nextTick } from 'vue';
-import { InjectionTokens } from '../../../../injectionTokens';
-import { Alignments } from '../../../../enums';
-import { Button, Icon, Modal } from '../../../base';
-import AlignmentDeviceControl from '../AlignmentDeviceControl';
-import AlignmentControl from '../AlignmentControl';
-
-const createEditor = ({ alignment } = {}) => ({
-    commands: {
-        getAlignment: () => ref(alignment),
-        storeSelection: jest.fn(),
-        restoreSelection: jest.fn()
-    }
-});
-
-function createComponent({ editor } = {}) {
-    return shallowMount(AlignmentDeviceControl, {
-        stubs: {
-            Modal: {
-                render() {
-                    return h('div', null, this.$slots.default);
-                },
-                props: ['toggler']
-            }
-        },
-        provide: {
-            [InjectionTokens.EDITOR]: editor ?? createEditor()
-        }
-    });
-}
-
-describe('rendering', () => {
-    test('should render alignment icon', () => {
-        const editor = createEditor({ alignment: Alignments.RIGHT });
-        const wrapper = createComponent({ editor });
-        const iconWrapper = wrapper.findComponent(Icon);
-
-        expect(iconWrapper.props('name')).toBe('alignment-right');
-    });
-
-    test('should render closed state', async () => {
-        const wrapper = createComponent();
-        const buttonWrapper = wrapper.findComponent(Button);
-        const modalWrapper = wrapper.findComponent(Modal);
-
-        expect(buttonWrapper.props('active')).toBe(false);
-        expect(modalWrapper.props('toggler').isOpened.value).toBe(false);
-    });
-
-    test('should open modal', async () => {
-        const wrapper = createComponent();
-        const buttonWrapper = wrapper.findComponent(Button);
-        const modalWrapper = wrapper.findComponent(Modal);
-
-        buttonWrapper.vm.$emit('click');
-        await nextTick();
-
-        expect(buttonWrapper.props('active')).toBe(true);
-        expect(modalWrapper.props('toggler').isOpened.value).toBe(true);
-    });
-
-    test('should close on apply value', async () => {
-        const wrapper = createComponent();
-        const buttonWrapper = wrapper.findComponent(Button);
-        const modalWrapper = wrapper.findComponent(Modal);
-
-        buttonWrapper.vm.$emit('click');
-        await nextTick();
-
-        wrapper.findComponent(AlignmentControl).vm.$emit('applied');
-        await nextTick();
-
-        expect(buttonWrapper.props('active')).toBe(false);
-        expect(modalWrapper.props('toggler').isOpened.value).toBe(false);
-    });
-});