@zipify/wysiwyg 2.5.6 → 2.6.0-0

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

@@ -9,14 +9,6 @@
                 @click="activate"
                 v-tooltip="option.tooltip"
             >
-                <Icon
-                    v-if="isCustomized && isActive"
-                    class="zw-button__customized-indicator"
-                    name="indicator"
-                    size="9px"
-                    data-test-selector="customizedIndicator"
-                    v-tooltip.xs="'Default parameter setting is changed'"
-                />
                 <Icon :name="`alignment-${option.id}`" size="28px" auto-color />
             </Button>
         </template>
@@ -26,7 +18,7 @@
 <script>
 import { inject, computed, unref } from 'vue';
 import { InjectionTokens } from '../../../injectionTokens';
-import { Alignments, TextSettings } from '../../../enums';
+import { Alignments } from '../../../enums';
 import { ButtonToggle, Button, Icon } from '../../base';
 import { tooltip } from '../../../directives';
 
@@ -66,7 +58,6 @@ export default {
         const editor = inject(InjectionTokens.EDITOR);
         const alignment = editor.commands.getAlignment();
         const currentValue = computed(() => unref(alignment) ?? 'none');
-        const isCustomized = editor.commands.isSettingCustomized(TextSettings.ALIGNMENT);
 
         function toggle(value) {
             editor.chain().focus().toggleAlignment(value).run();
@@ -75,7 +66,6 @@ export default {
 
         return {
             currentValue,
-            isCustomized,
             toggle
         };
     }

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

@@ -2,7 +2,6 @@
     <ColorPicker :value="currentValue" @change="apply">
         <template #activator="{ toggle, isOpened }">
             <Button
-                class="zw-position--relative"
                 icon
                 skin="toolbar"
                 :active="isOpened"
@@ -10,15 +9,6 @@
                 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"
-                    v-tooltip.xs="'Default parameter setting is changed'"
-                />
             </Button>
         </template>
     </ColorPicker>
@@ -29,7 +19,6 @@ 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',
@@ -48,13 +37,11 @@ export default {
         const editor = inject(InjectionTokens.EDITOR);
 
         const currentValue = editor.commands.getFontColor();
-        const isCustomized = editor.commands.isSettingCustomized(TextSettings.FONT_COLOR);
 
         const apply = (color) => editor.chain().applyFontColor(color).run();
 
         return {
             currentValue,
-            isCustomized,
             apply
         };
     }

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

@@ -3,7 +3,6 @@
         class="zw-font-family-control"
         :options="options"
         :value="currentValue"
-        :is-customized="isCustomized"
         @change="apply"
         v-tooltip="'Font Name'"
     >
@@ -23,7 +22,6 @@ 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 {
@@ -69,7 +67,6 @@ export default {
         }
 
         const currentValue = editor.commands.getFontFamily();
-        const isCustomized = editor.commands.isSettingCustomized(TextSettings.FONT_FAMILY);
 
         const apply = (fontFamily) => {
             recentFontNames.add(fontFamily);
@@ -79,7 +76,6 @@ export default {
         return {
             options,
             currentValue,
-            isCustomized,
             renderOptionStyles,
             apply
         };

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

@@ -3,7 +3,6 @@
         class="zw-font-size-control"
         :options="options"
         :value="currentValue"
-        :is-customized="isCustomized"
         @change="apply"
         v-tooltip="{ text: 'Font Size', hotkey: 'Mod Shift +/-' }"
     />
@@ -14,7 +13,6 @@ 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',
@@ -36,14 +34,12 @@ export default {
         });
 
         const currentValue = editor.commands.getFontSize();
-        const isCustomized = editor.commands.isSettingCustomized(TextSettings.FONT_SIZE);
 
         const apply = (value) => editor.chain().focus().applyFontSize(value).run();
 
         return {
             options,
             currentValue,
-            isCustomized,
             apply
         };
     }

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

@@ -3,7 +3,6 @@
         class="zw-font-weight-control"
         :options="options"
         :value="currentValue"
-        :is-customized="isCustomized"
         @change="apply"
         v-tooltip="{ text: 'Font Weight', hotkey: 'Mod B' }"
     />
@@ -14,7 +13,6 @@ 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',
@@ -34,14 +32,12 @@ export default {
         const options = computed(() => unref(font).weights.map((style) => ({ id: style })));
 
         const currentValue = editor.commands.getFontWeight();
-        const isCustomized = editor.commands.isSettingCustomized(TextSettings.FONT_WEIGHT);
 
         const apply = (value) => editor.chain().focus().applyFontWeight(value).run();
 
         return {
             options,
             currentValue,
-            isCustomized,
             apply
         };
     }

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

@@ -1,6 +1,5 @@
 <template>
     <Button
-        class="zw-position--relative"
         skin="toolbar"
         icon
         :active="currentValue"
@@ -9,15 +8,6 @@
         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"
-            v-tooltip.xs="'Default parameter setting is changed'"
-        />
     </Button>
 </template>
 
@@ -26,7 +16,6 @@ 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',
@@ -44,7 +33,6 @@ export default {
         const editor = inject(InjectionTokens.EDITOR);
 
         const currentValue = editor.commands.isItalic();
-        const isCustomized = editor.commands.isSettingCustomized(TextSettings.FONT_STYLE);
 
         const isAvailable = editor.commands.isItalicAvailable();
         const apply = () => editor.chain().focus().toggleItalic().run();
@@ -52,7 +40,6 @@ export default {
         return {
             isAvailable,
             currentValue,
-            isCustomized,
             apply
         };
     }

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

@@ -1,7 +1,6 @@
 <template>
     <div class="zw-position--relative" ref="wrapperRef">
         <Button
-            class="zw-position--relative"
             icon
             skin="toolbar"
             :active="isOpened"
@@ -9,15 +8,6 @@
             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"
-                v-tooltip.xs="'Default parameter setting is changed'"
-            />
         </Button>
 
         <Modal class="zw-line-height-control__modal" ref="modalRef" :toggler="toggler">
@@ -54,7 +44,6 @@ 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',
@@ -79,7 +68,6 @@ export default {
         const toggler = useModalToggler({ wrapperRef, modalRef });
 
         const currentValue = editor.commands.getLineHeight();
-        const isCustomized = editor.commands.isSettingCustomized(TextSettings.LINE_HEIGHT);
 
         const apply = (value) => editor.commands.applyLineHeight(String(value));
 
@@ -87,7 +75,6 @@ export default {
             wrapperRef,
             modalRef,
             isOpened: toggler.isOpened,
-            isCustomized,
             toggler,
             currentValue,
             apply

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

@@ -13,7 +13,7 @@
             :disabled="!isCustomized"
             icon
             @click="removeCustomization"
-            v-tooltip="'Reset Styles'"
+            v-tooltip="'Reset styles to page style defaults'"
         >
             <Icon name="reset-styles" size="28px" auto-color />
         </Button>
@@ -98,11 +98,17 @@ export default {
 
 .zw-style-preset-control__reset {
     color: rgb(var(--zw-color-n70));
+    background-color: rgb(var(--zw-color-n20));
+}
+
+.zw-style-preset-control__reset:disabled {
+    background-color: transparent;
 }
 
 .zw-style-preset-control__reset:not(:disabled):hover,
 .zw-style-preset-control__reset:not(:disabled):focus,
 .zw-style-preset-control__reset:not(:disabled):focus-within {
     color: rgb(var(--zw-color-white));
+    background-color: rgb(var(--zw-color-n30));
 }
 </style>

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

@@ -1,6 +1,5 @@
 <template>
     <Button
-        class="zw-position--relative"
         skin="toolbar"
         icon
         :active="currentValue"
@@ -8,15 +7,6 @@
         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"
-            v-tooltip.xs="'Default parameter setting is changed'"
-        />
     </Button>
 </template>
 
@@ -42,13 +32,11 @@ 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,14 +5,9 @@ import { Alignments } from '../../../../enums';
 import { ButtonToggle } from '../../../base';
 import AlignmentControl from '../AlignmentControl';
 
-const SELECTORS = {
-    INDICATOR: '[data-test-selector="customizedIndicator"]'
-};
-
-const createEditor = ({ alignment, isSettingCustomized } = {}) => ({
+const createEditor = ({ alignment } = {}) => ({
     commands: {
         getAlignment: () => ref(alignment),
-        isSettingCustomized: () => ref(isSettingCustomized ?? false),
         focus: jest.fn().mockReturnThis(),
         toggleAlignment: jest.fn().mockReturnThis(),
         run: jest.fn()
@@ -79,40 +74,3 @@ describe('selection value', () => {
         expect(editor.commands.toggleAlignment).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,14 +4,9 @@ import { InjectionTokens } from '../../../../injectionTokens';
 import { ColorPicker } from '../../../base';
 import FontColorControl from '../FontColorControl';
 
-const SELECTORS = {
-    INDICATOR: '[data-test-selector="customizedIndicator"]'
-};
-
-const createEditor = ({ fontColor, isSettingCustomized } = {}) => ({
+const createEditor = ({ fontColor } = {}) => ({
     commands: {
         getFontColor: () => ref(fontColor),
-        isSettingCustomized: () => ref( isSettingCustomized ?? false),
         focus: jest.fn().mockReturnThis(),
         applyFontColor: jest.fn().mockReturnThis(),
         run: jest.fn()
@@ -62,19 +57,3 @@ 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,7 +7,6 @@ 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,7 +7,6 @@ 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,7 +7,6 @@ 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(),

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

@@ -4,14 +4,9 @@ import { InjectionTokens } from '../../../../injectionTokens';
 import { Button } from '../../../base';
 import ItalicControl from '../ItalicControl';
 
-const SELECTORS = {
-    INDICATOR: '[data-test-selector="customizedIndicator"]'
-};
-
-const createEditor = ({ isItalic, isItalicAvailable, isSettingCustomized } = {}) => ({
+const createEditor = ({ isItalic, isItalicAvailable } = {}) => ({
     commands: {
         isItalic: () => ref(isItalic),
-        isSettingCustomized: () => ref(isSettingCustomized ?? false),
         isItalicAvailable: () => ref(isItalicAvailable ?? true),
         focus: jest.fn().mockReturnThis(),
         toggleItalic: jest.fn().mockReturnThis(),
@@ -45,23 +40,6 @@ describe('rendering', () => {
 
         expect(buttonWrapper.props('disabled')).toBe(true);
     });
-
-    test('should render indicator of customized styles', () => {
-        const editor = createEditor({
-            isItalic: true,
-            isSettingCustomized: true
-        });
-        const wrapper = createComponent({ editor });
-
-        expect(wrapper).toVueContainComponent(SELECTORS.INDICATOR);
-    });
-
-    test('should not render indicator of customized styles', () => {
-        const editor = createEditor({ isItalic: false });
-        const wrapper = createComponent({ editor });
-
-        expect(wrapper).not.toVueContainComponent(SELECTORS.INDICATOR);
-    });
 });
 
 describe('selection value', () => {

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

@@ -4,17 +4,12 @@ import { InjectionTokens } from '../../../../injectionTokens';
 import { Button, Modal, NumberField, Range } from '../../../base';
 import LineHeightControl from '../LineHeightControl';
 
-const SELECTORS = {
-    INDICATOR: '[data-test-selector="customizedIndicator"]'
-};
-
-const createEditor = ({ height, isSettingCustomized } = {}) => {
+const createEditor = ({ height } = {}) => {
     const heightRef = ref(height ?? '1.2');
 
     return {
         commands: {
             getLineHeight: () => heightRef,
-            isSettingCustomized: () => ref(isSettingCustomized ?? false),
             applyLineHeight: jest.fn(function (value) {
                 heightRef.value = value;
                 return this;
@@ -122,21 +117,4 @@ describe('rendering', () => {
         expect(buttonWrapper.props('active')).toBe(true);
         expect(modalWrapper.props('toggler').isOpened.value).toBe(true);
     });
-
-    test('should render indicator of customized styles', () => {
-        const editor = createEditor({
-            height: '1.8',
-            isSettingCustomized: true
-        });
-        const wrapper = createComponent({ editor });
-
-        expect(wrapper).toVueContainComponent(SELECTORS.INDICATOR);
-    });
-
-    test('should not render indicator of customized styles', () => {
-        const editor = createEditor({ height: '1.2' });
-        const wrapper = createComponent({ editor });
-
-        expect(wrapper).not.toVueContainComponent(SELECTORS.INDICATOR);
-    });
 });

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

@@ -4,14 +4,9 @@ import { InjectionTokens } from '../../../../injectionTokens';
 import { Button } from '../../../base';
 import UnderlineControl from '../UnderlineControl';
 
-const SELECTORS = {
-    INDICATOR: '[data-test-selector="customizedIndicator"]'
-};
-
-const createEditor = ({ isUnderline, isSettingCustomized } = {}) => ({
+const createEditor = ({ isUnderline } = {}) => ({
     commands: {
         isUnderline: () => ref(isUnderline),
-        isUnderlineCustomized: () => ref(isSettingCustomized ?? false),
         focus: jest.fn().mockReturnThis(),
         toggleUnderline: jest.fn().mockReturnThis(),
         run: jest.fn()
@@ -51,22 +46,3 @@ describe('selection value', () => {
         expect(editor.commands.toggleUnderline).toHaveBeenCalled();
     });
 });
-
-describe('render indicator of customized styles', () => {
-    test('should render indicator', () => {
-        const editor = createEditor({
-            isUnderline: true,
-            isSettingCustomized: true
-        });
-        const wrapper = createComponent({ editor });
-
-        expect(wrapper).toVueContainComponent(SELECTORS.INDICATOR);
-    });
-
-    test('should not render indicator', () => {
-        const editor = createEditor({ isUnderline: false });
-        const wrapper = createComponent({ editor });
-
-        expect(wrapper).not.toVueContainComponent(SELECTORS.INDICATOR);
-    });
-});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zipify/wysiwyg",
-  "version": "2.5.6",
+  "version": "2.6.0-0",
   "description": "Zipify modification of TipTap text editor",
   "main": "dist/wysiwyg.mjs",
   "bin": {

package/lib/assets/icons/indicator.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 9 9">
-    <path fill="#FFAB00" d="M0 4.5a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0Z"/>
-    <path fill="#fff" fill-rule="evenodd" d="M5.063 2.25H3.938v3.375h1.124V2.25Zm-1.125 4.5a.562.562 0 1 1 1.123-.001.562.562 0 0 1-1.123.001Z" clip-rule="evenodd"/>
-</svg>