@zipify/wysiwyg 1.2.5-1 → 1.3.0-0

package/lib/assets/icons/indicator.svg

@@ -0,0 +1,5 @@
+<svg width="9" height="9" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0 4.5C0 2.01472 2.01472 0 4.5 0C6.98528 0 9 2.01472 9 4.5C9 6.98528 6.98528 9 4.5 9C2.01472 9 0 6.98528 0 4.5Z" fill="#FFAB00"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M5.0625 2.25H3.9375V5.625H5.0625V2.25Z" fill="white"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M3.9375 6.75C3.9375 6.43894 4.18894 6.1875 4.5 6.1875C4.8105 6.1875 5.0625 6.43894 5.0625 6.75C5.0625 7.06106 4.8105 7.3125 4.5 7.3125C4.18894 7.3125 3.9375 7.06106 3.9375 6.75Z" fill="white"/>
+</svg>

package/lib/components/base/Button.vue

@@ -135,4 +135,11 @@ export default {
     color: rgb(var(--zw-color-white));
     background-color: rgb(var(--zw-color-n5));
 }
+
+.zw-button__customized-indicator {
+    display: inline-block !important;
+    position: absolute;
+    top: calc(0px - var(--zw-offset-xxs));
+    right: 2px;
+}
 </style>

package/lib/components/base/dropdown/Dropdown.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="zw-dropdown" ref="dropdownRef">
-        <DropdownActivator :color="color">
+        <DropdownActivator :color="color" :is-customized="isCustomized">
             <template #default="attrs">
                 <slot name="activator" v-bind="attrs" />
             </template>
@@ -60,6 +60,12 @@ export default {
             type: String,
             required: false,
             default: 'none'
+        },
+
+        isCustomized: {
+            type: Boolean,
+            required: false,
+            default: false
         }
     },
 

package/lib/components/base/dropdown/DropdownActivator.vue

@@ -12,6 +12,14 @@
                     {{ activeOptionTitle }}
                 </span>
 
+                <Icon
+                    v-if="isCustomized"
+                    class="zw-dropdown__customized-indicator"
+                    name="indicator"
+                    size="9px"
+                    data-test-selector="customizedIndicator"
+                />
+
                 <Icon
                     class="zw-dropdown__activator-arrow"
                     name="arrow"
@@ -47,6 +55,12 @@ export default {
             type: String,
             required: false,
             default: 'none'
+        },
+
+        isCustomized: {
+            type: Boolean,
+            required: false,
+            default: false
         }
     },
 
@@ -77,10 +91,6 @@ export default {
     width: 100%;
 }
 
-.zw-dropdown__activator-title {
-    margin-right: var(--zw-offset-xs);
-}
-
 .zw-dropdown__activator-arrow {
     margin-left: auto;
 }
@@ -94,4 +104,9 @@ export default {
     font-size: var(--zw-font-size-xxs);
     color: rgb(var(--zw-color-white));
 }
+
+.zw-dropdown__customized-indicator {
+    position: relative;
+    top: calc(0px - var(--zw-offset-xs));
+}
 </style>

package/lib/components/base/dropdown/__tests__/DropdownActivator.test.js

@@ -4,6 +4,10 @@ import DropdownActivator from '../DropdownActivator';
 import { InjectionTokens } from '../injectionTokens';
 import Button from '../../Button';
 
+const SELECTORS = {
+    INDICATOR: '[data-test-selector="customizedIndicator"]'
+};
+
 const createToggler = ({ isOpened } = {}) => ({
     isOpened: ref(isOpened ?? false),
     open: jest.fn()
@@ -13,8 +17,12 @@ const createActiveOptionManager = ({ activeOption } = {}) => ({
     activeOption: ref(activeOption ?? { id: 'test' })
 });
 
-function createComponent({ toggler, activeOptionManager } = {}) {
+function createComponent({ toggler, isCustomized, activeOptionManager } = {}) {
     return shallowMount(DropdownActivator, {
+        propsData: {
+            isCustomized: ref(isCustomized ?? false)
+        },
+
         provide: {
             [InjectionTokens.TOGGLER]: toggler ?? createToggler(),
             [InjectionTokens.ACTIVE_MANAGER]: activeOptionManager ?? createActiveOptionManager()
@@ -40,6 +48,20 @@ describe('rendering', () => {
         expect(buttonWrapper.props('active')).toBe(false);
         expect(buttonWrapper.classes('zw-dropdown__activator--active')).toBeFalsy();
     });
+
+    test('should render indicator of customized styles', () => {
+        const toggler = createToggler({ isOpened: false });
+        const wrapper = createComponent({ toggler, isCustomized: true });
+
+        expect(wrapper).toVueContainComponent(SELECTORS.INDICATOR);
+    });
+
+    test('should not render indicator of customized styles', () => {
+        const toggler = createToggler({ isOpened: false });
+        const wrapper = createComponent({ toggler });
+
+        expect(wrapper).not.toVueContainComponent(SELECTORS.INDICATOR);
+    });
 });
 
 describe('open dropdown', () => {

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

@@ -2,12 +2,20 @@
     <ButtonToggle :value="currentValue" :options="$options.alignments" @change="apply">
         <template #option="{ isActive, option, activate }">
             <Button
+                class="zw-position--relative"
                 icon
                 skin="toolbar"
                 :active="isActive"
                 @click="activate"
                 v-tooltip="option.tooltip"
             >
+                <Icon
+                    v-if="isCustomized && isActive"
+                    class="zw-button__customized-indicator"
+                    name="indicator"
+                    size="9px"
+                    data-test-selector="customizedIndicator"
+                />
                 <Icon :name="`alignment-${option.id}`" size="28px" auto-color />
             </Button>
         </template>
@@ -17,7 +25,7 @@
 <script>
 import { inject } from 'vue';
 import { InjectionTokens } from '../../../injectionTokens';
-import { Alignments } from '../../../enums';
+import { Alignments, TextSettings } from '../../../enums';
 import { ButtonToggle, Button, Icon } from '../../base';
 import { tooltip } from '../../../directives';
 
@@ -57,6 +65,7 @@ export default {
         const editor = inject(InjectionTokens.EDITOR);
 
         const currentValue = editor.commands.getAlignment();
+        const isCustomized = editor.commands.isSettingCustomized('attributes', TextSettings.ALIGNMENT);
 
         function apply(value) {
             editor.chain().focus().applyAlignment(value).run();
@@ -65,6 +74,7 @@ export default {
 
         return {
             currentValue,
+            isCustomized,
             apply
         };
     }

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

@@ -2,6 +2,7 @@
     <ColorPicker :value="currentValue" @change="apply">
         <template #activator="{ toggle, isOpened }">
             <Button
+                class="zw-position--relative"
                 icon
                 skin="toolbar"
                 :active="isOpened"
@@ -9,6 +10,14 @@
                 v-tooltip="'Font Color'"
             >
                 <Icon name="font-color" size="28px" auto-color />
+
+                <Icon
+                    v-if="isCustomized"
+                    class="zw-button__customized-indicator"
+                    name="indicator"
+                    size="9px"
+                    data-test-selector="customizedIndicator"
+                />
             </Button>
         </template>
     </ColorPicker>
@@ -19,6 +28,7 @@ import { inject } from 'vue';
 import { ColorPicker, Button, Icon } from '../../base';
 import { InjectionTokens } from '../../../injectionTokens';
 import { tooltip } from '../../../directives';
+import { TextSettings } from '../../../enums';
 
 export default {
     name: 'FontColorControl',
@@ -37,10 +47,13 @@ export default {
         const editor = inject(InjectionTokens.EDITOR);
 
         const currentValue = editor.commands.getFontColor();
+        const isCustomized = editor.commands.isSettingCustomized('marks', TextSettings.FONT_COLOR);
+
         const apply = (color) => editor.chain().applyFontColor(color).run();
 
         return {
             currentValue,
+            isCustomized,
             apply
         };
     }

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

@@ -3,6 +3,7 @@
         class="zw-font-family-control"
         :options="options"
         :value="currentValue"
+        :is-customized="isCustomized"
         @change="apply"
         v-tooltip="'Font Name'"
     >
@@ -22,6 +23,7 @@ import { computed, inject } from 'vue';
 import { InjectionTokens } from '../../../injectionTokens';
 import { tooltip } from '../../../directives';
 import { Dropdown, DropdownOption } from '../../base';
+import { TextSettings } from '../../../enums';
 import { useRecentFonts } from './composables';
 
 export default {
@@ -67,6 +69,7 @@ export default {
         }
 
         const currentValue = editor.commands.getFontFamily();
+        const isCustomized = editor.commands.isSettingCustomized('marks', TextSettings.FONT_FAMILY);
 
         const apply = (fontFamily) => {
             recentFontNames.add(fontFamily);
@@ -76,6 +79,7 @@ export default {
         return {
             options,
             currentValue,
+            isCustomized,
             renderOptionStyles,
             apply
         };

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

@@ -3,6 +3,7 @@
         class="zw-font-size-control"
         :options="options"
         :value="currentValue"
+        :is-customized="isCustomized"
         @change="apply"
         v-tooltip="{ text: 'Font Size', hotkey: 'Mod Shift +/-' }"
     />
@@ -13,6 +14,7 @@ import { computed, inject } from 'vue';
 import { Dropdown } from '../../base';
 import { InjectionTokens } from '../../../injectionTokens';
 import { tooltip } from '../../../directives';
+import { TextSettings } from '../../../enums';
 
 export default {
     name: 'FontSizeControl',
@@ -34,11 +36,14 @@ export default {
         });
 
         const currentValue = editor.commands.getFontSize();
+        const isCustomized = editor.commands.isSettingCustomized('marks', TextSettings.FONT_SIZE);
+
         const apply = (value) => editor.chain().focus().applyFontSize(value).run();
 
         return {
             options,
             currentValue,
+            isCustomized,
             apply
         };
     }
@@ -47,6 +52,6 @@ export default {
 
 <style scoped>
 .zw-font-size-control {
-    width: 64px;
+    width: 72px;
 }
 </style>

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

@@ -1,7 +1,9 @@
 <template>
     <Dropdown
+        class="zw-font-weight-control"
         :options="options"
         :value="currentValue"
+        :is-customized="isCustomized"
         @change="apply"
         v-tooltip="{ text: 'Font Weight', hotkey: 'Mod B' }"
     />
@@ -12,6 +14,7 @@ import { computed, inject, unref } from 'vue';
 import { InjectionTokens } from '../../../injectionTokens';
 import { Dropdown } from '../../base';
 import { tooltip } from '../../../directives';
+import { TextSettings } from '../../../enums';
 
 export default {
     name: 'FontWeightControl',
@@ -29,15 +32,24 @@ export default {
         const font = editor.commands.getFont();
 
         const options = computed(() => unref(font).weights.map((style) => ({ id: style })));
+
         const currentValue = editor.commands.getFontWeight();
+        const isCustomized = editor.commands.isSettingCustomized('marks', TextSettings.FONT_WEIGHT);
 
         const apply = (value) => editor.chain().focus().applyFontWeight(value).run();
 
         return {
             options,
             currentValue,
+            isCustomized,
             apply
         };
     }
 };
 </script>
+
+<style scoped>
+.zw-font-weight-control {
+    width: 60px;
+}
+</style>

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

@@ -1,5 +1,6 @@
 <template>
     <Button
+        class="zw-position--relative"
         skin="toolbar"
         icon
         :active="currentValue"
@@ -8,6 +9,14 @@
         v-tooltip="{ text: 'Italic', hotkey: 'Mod I' }"
     >
         <Icon name="italic" size="28px" auto-color />
+
+        <Icon
+            v-if="isCustomized"
+            class="zw-button__customized-indicator"
+            name="indicator"
+            size="9px"
+            data-test-selector="customizedIndicator"
+        />
     </Button>
 </template>
 
@@ -16,6 +25,7 @@ import { inject } from 'vue';
 import { Button, Icon } from '../../base';
 import { InjectionTokens } from '../../../injectionTokens';
 import { tooltip } from '../../../directives';
+import { TextSettings } from '../../../enums';
 
 export default {
     name: 'ItalicControl',
@@ -33,12 +43,15 @@ export default {
         const editor = inject(InjectionTokens.EDITOR);
 
         const currentValue = editor.commands.isItalic();
+        const isCustomized = editor.commands.isSettingCustomized('marks', TextSettings.FONT_STYLE);
+
         const isAvailable = editor.commands.isItalicAvailable();
         const apply = () => editor.chain().focus().toggleItalic().run();
 
         return {
             isAvailable,
             currentValue,
+            isCustomized,
             apply
         };
     }

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

@@ -1,6 +1,7 @@
 <template>
     <div class="zw-position--relative" ref="wrapperRef">
         <Button
+            class="zw-position--relative"
             icon
             skin="toolbar"
             :active="isOpened"
@@ -8,6 +9,14 @@
             v-tooltip="'Line Height'"
         >
             <Icon name="line-height" size="28px" auto-color />
+
+            <Icon
+                v-if="isCustomized"
+                class="zw-button__customized-indicator"
+                name="indicator"
+                size="9px"
+                data-test-selector="customizedIndicator"
+            />
         </Button>
 
         <Modal class="zw-line-height-control__modal" ref="modalRef" :toggler="toggler">
@@ -44,6 +53,7 @@ import { inject, ref } from 'vue';
 import { Button, Icon, Modal, Range, NumberField, FieldLabel, useModalToggler } from '../../base';
 import { InjectionTokens } from '../../../injectionTokens';
 import { tooltip } from '../../../directives';
+import { TextSettings } from '../../../enums';
 
 export default {
     name: 'LineHeightControl',
@@ -66,13 +76,17 @@ export default {
         const modalRef = ref(null);
         const editor = inject(InjectionTokens.EDITOR);
         const toggler = useModalToggler({ wrapperRef, modalRef });
+
         const currentValue = editor.commands.getLineHeight();
+        const isCustomized = editor.commands.isSettingCustomized('attributes', TextSettings.LINE_HEIGHT);
+
         const apply = (value) => editor.commands.applyLineHeight(String(value));
 
         return {
             wrapperRef,
             modalRef,
             isOpened: toggler.isOpened,
+            isCustomized,
             toggler,
             currentValue,
             apply

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

@@ -1,5 +1,6 @@
 <template>
     <Button
+        class="zw-position--relative"
         skin="toolbar"
         icon
         :active="currentValue"
@@ -7,6 +8,14 @@
         v-tooltip="{ text: 'Underline', hotkey: 'Mod U' }"
     >
         <Icon name="underline" size="28px" auto-color />
+
+        <Icon
+            v-if="isCustomized"
+            class="zw-button__customized-indicator"
+            name="indicator"
+            size="9px"
+            data-test-selector="customizedIndicator"
+        />
     </Button>
 </template>
 
@@ -32,10 +41,13 @@ export default {
         const editor = inject(InjectionTokens.EDITOR);
 
         const currentValue = editor.commands.isUnderline();
+        const isCustomized = editor.commands.isUnderlineCustomized();
+
         const apply = () => editor.chain().focus().toggleUnderline().run();
 
         return {
             currentValue,
+            isCustomized,
             apply
         };
     }

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

@@ -5,9 +5,14 @@ import { Alignments } from '../../../../enums';
 import { ButtonToggle } from '../../../base';
 import AlignmentControl from '../AlignmentControl';
 
-const createEditor = ({ alignment } = {}) => ({
+const SELECTORS = {
+    INDICATOR: '[data-test-selector="customizedIndicator"]'
+};
+
+const createEditor = ({ alignment, isSettingCustomized } = {}) => ({
     commands: {
         getAlignment: () => ref(alignment),
+        isSettingCustomized: () => ref(isSettingCustomized ?? false),
         focus: jest.fn().mockReturnThis(),
         applyAlignment: jest.fn().mockReturnThis(),
         run: jest.fn()
@@ -18,11 +23,18 @@ const createEditor = ({ alignment } = {}) => ({
     }
 });
 
-function createComponent({ editor }) {
+function createComponent({ editor, slotParams }) {
     return shallowMount(AlignmentControl, {
         stubs: {
             ButtonToggle: {
-                render: () => h('div'),
+                render() {
+                    const children = this.$scopedSlots.option({
+                        ...slotParams,
+                        activate: jest.fn()
+                    });
+
+                    return h('div', null, children);
+                },
                 props: ['value']
             }
         },
@@ -33,7 +45,16 @@ function createComponent({ editor }) {
 describe('selection value', () => {
     test('should render value from selection', () => {
         const editor = createEditor({ alignment: Alignments.RIGHT });
-        const wrapper = createComponent({ editor });
+        const wrapper = createComponent({
+            editor,
+            slotParams: {
+                option: {
+                    id: Alignments.RIGHT,
+                    tooltip: { text: 'Align Right', hotkey: 'Mod Shift R' }
+                },
+                isActive: true
+            }
+        });
         const buttonWrapper = wrapper.findComponent(ButtonToggle);
 
         expect(buttonWrapper.props('value')).toBe(Alignments.RIGHT);
@@ -41,7 +62,16 @@ describe('selection value', () => {
 
     test('should apply new value', () => {
         const editor = createEditor({ alignment: Alignments.RIGHT });
-        const wrapper = createComponent({ editor });
+        const wrapper = createComponent({
+            editor,
+            slotParams: {
+                option: {
+                    id: Alignments.RIGHT,
+                    tooltip: { text: 'Align Right', hotkey: 'Mod Shift R' }
+                },
+                isActive: true
+            }
+        });
         const buttonWrapper = wrapper.findComponent(ButtonToggle);
 
         buttonWrapper.vm.$emit('change', Alignments.CENTER);
@@ -49,3 +79,40 @@ describe('selection value', () => {
         expect(editor.commands.applyAlignment).toHaveBeenCalledWith(Alignments.CENTER);
     });
 });
+
+describe('render indicator of customized styles', () => {
+    test('should render indicator', () => {
+        const editor = createEditor({
+            alignment: Alignments.LEFT,
+            isSettingCustomized: true
+        });
+        const wrapper = createComponent({
+            editor,
+            slotParams: {
+                option: {
+                    id: Alignments.LEFT,
+                    tooltip: { text: 'Align Left', hotkey: 'Mod Shift L' }
+                },
+                isActive: true
+            }
+        });
+
+        expect(wrapper).toVueContainComponent(SELECTORS.INDICATOR);
+    });
+
+    test('should not render indicator', () => {
+        const editor = createEditor({ alignment: Alignments.LEFT });
+        const wrapper = createComponent({
+            editor,
+            slotParams: {
+                option: {
+                    id: Alignments.LEFT,
+                    tooltip: { text: 'Align Left', hotkey: 'Mod Shift L' }
+                },
+                isActive: true
+            }
+        });
+
+        expect(wrapper).not.toVueContainComponent(SELECTORS.INDICATOR);
+    });
+});

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

@@ -4,9 +4,14 @@ import { InjectionTokens } from '../../../../injectionTokens';
 import { ColorPicker } from '../../../base';
 import FontColorControl from '../FontColorControl';
 
-const createEditor = ({ fontColor } = {}) => ({
+const SELECTORS = {
+    INDICATOR: '[data-test-selector="customizedIndicator"]'
+};
+
+const createEditor = ({ fontColor, isSettingCustomized } = {}) => ({
     commands: {
         getFontColor: () => ref(fontColor),
+        isSettingCustomized: () => ref( isSettingCustomized ?? false),
         focus: jest.fn().mockReturnThis(),
         applyFontColor: jest.fn().mockReturnThis(),
         run: jest.fn()
@@ -57,3 +62,19 @@ describe('selection value', () => {
         expect(editor.commands.applyFontColor).toHaveBeenCalledWith('green');
     });
 });
+
+describe('render indicator of customized styles', () => {
+    test('should render indicator', () => {
+        const editor = createEditor({ fontColor: 'red', isSettingCustomized: true });
+        const wrapper = createComponent({ editor });
+
+        expect(wrapper).toVueContainComponent(SELECTORS.INDICATOR);
+    });
+
+    test('should not render indicator', () => {
+        const editor = createEditor({ fontColor: 'red' });
+        const wrapper = createComponent({ editor });
+
+        expect(wrapper).not.toVueContainComponent(SELECTORS.INDICATOR);
+    });
+});

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

@@ -7,6 +7,7 @@ import FontFamilyControl from '../FontFamilyControl';
 const createEditor = ({ fontFamily } = {}) => ({
     commands: {
         getFontFamily: () => ref(fontFamily),
+        isSettingCustomized: () => ref(false),
         focus: jest.fn().mockReturnThis(),
         applyFontFamily: jest.fn().mockReturnThis(),
         run: jest.fn()

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

@@ -7,6 +7,7 @@ import FontSizeControl from '../FontSizeControl';
 const createEditor = ({ fontSize } = {}) => ({
     commands: {
         getFontSize: () => ref(fontSize),
+        isSettingCustomized: () => ref(false),
         focus: jest.fn().mockReturnThis(),
         applyFontSize: jest.fn().mockReturnThis(),
         run: jest.fn()

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

@@ -7,6 +7,7 @@ import FontWeightControl from '../FontWeightControl';
 const createEditor = ({ fontWeight, fontWeightList } = {}) => ({
     commands: {
         getFontWeight: () => ref(fontWeight ?? '400'),
+        isSettingCustomized: () => ref(false),
         getFont: () => ref({ weights: fontWeightList ?? ['400', '700'] }),
         focus: jest.fn().mockReturnThis(),
         applyFontWeight: jest.fn().mockReturnThis(),