npm - @zipify/wysiwyg - Versions diffs - 2.0.0-1 → 2.0.0-10 - Mend

@zipify/wysiwyg 2.0.0-1 → 2.0.0-10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (97) hide show

package/config/build/cli.config.js +8 -2
package/dist/cli.js +3 -3
package/dist/wysiwyg.css +41 -31
package/dist/wysiwyg.mjs +2002 -1362
package/example/ExampleApp.vue +10 -1
package/lib/Wysiwyg.vue +3 -2
package/lib/__tests__/utils/buildTestExtensions.js +2 -1
package/lib/assets/icons/indicator.svg +4 -0
package/lib/cli/commands/Command.js +39 -0
package/lib/cli/commands/ToJsonCommand.js +46 -0
package/lib/cli/commands/VersionCommand.js +11 -0
package/lib/cli/commands/index.js +2 -0
package/lib/cli/index.js +1 -0
package/lib/components/base/Button.vue +6 -0
package/lib/components/base/dropdown/Dropdown.vue +7 -1
package/lib/components/base/dropdown/DropdownActivator.vue +25 -4
package/lib/components/base/dropdown/__tests__/DropdownActivator.test.js +23 -1
package/lib/components/toolbar/controls/AlignmentControl.vue +12 -1
package/lib/components/toolbar/controls/FontColorControl.vue +14 -0
package/lib/components/toolbar/controls/FontFamilyControl.vue +4 -0
package/lib/components/toolbar/controls/FontSizeControl.vue +6 -1
package/lib/components/toolbar/controls/FontWeightControl.vue +12 -0
package/lib/components/toolbar/controls/ItalicControl.vue +14 -0
package/lib/components/toolbar/controls/LineHeightControl.vue +15 -0
package/lib/components/toolbar/controls/UnderlineControl.vue +13 -0
package/lib/components/toolbar/controls/__tests__/AlignmentControl.test.js +72 -5
package/lib/components/toolbar/controls/__tests__/FontColorControl.test.js +22 -1
package/lib/components/toolbar/controls/__tests__/FontFamilyControl.test.js +1 -0
package/lib/components/toolbar/controls/__tests__/FontSizeControl.test.js +1 -0
package/lib/components/toolbar/controls/__tests__/FontWeightControl.test.js +1 -0
package/lib/components/toolbar/controls/__tests__/ItalicControl.test.js +23 -1
package/lib/components/toolbar/controls/__tests__/LineHeightControl.test.js +23 -1
package/lib/components/toolbar/controls/__tests__/StylePresetControl.test.js +4 -4
package/lib/components/toolbar/controls/__tests__/UnderlineControl.test.js +25 -1
package/lib/composables/__tests__/useEditor.test.js +1 -1
package/lib/composables/useEditor.js +9 -8
package/lib/directives/__tests__/tooltip.test.js +22 -4
package/lib/directives/tooltip.js +4 -1
package/lib/entry-cli.js +7 -20
package/lib/entry-lib.js +1 -1
package/lib/enums/MarkGroups.js +4 -0
package/lib/enums/TextSettings.js +1 -1
package/lib/enums/index.js +1 -0
package/lib/extensions/BackgroundColor.js +0 -1
package/lib/extensions/FontColor.js +2 -2
package/lib/extensions/FontFamily.js +3 -3
package/lib/extensions/FontSize.js +2 -2
package/lib/extensions/FontStyle.js +2 -2
package/lib/extensions/FontWeight.js +2 -2
package/lib/extensions/StylePreset.js +8 -2
package/lib/extensions/Superscript.js +5 -2
package/lib/extensions/TextDecoration.js +7 -0
package/lib/extensions/__tests__/Alignment.test.js +2 -2
package/lib/extensions/__tests__/BackgroundColor.test.js +4 -3
package/lib/extensions/__tests__/FontColor.test.js +4 -3
package/lib/extensions/__tests__/FontFamily.test.js +6 -6
package/lib/extensions/__tests__/FontSize.test.js +9 -8
package/lib/extensions/__tests__/FontStyle.test.js +6 -5
package/lib/extensions/__tests__/LineHeight.test.js +2 -1
package/lib/extensions/__tests__/StylePreset.test.js +51 -0
package/lib/extensions/__tests__/Superscript.test.js +102 -0
package/lib/extensions/__tests__/TextDecoration.test.js +20 -0
package/lib/extensions/__tests__/__snapshots__/BackgroundColor.test.js.snap +25 -25
package/lib/extensions/__tests__/__snapshots__/Superscript.test.js.snap +107 -0
package/lib/extensions/core/Document.js +2 -1
package/lib/extensions/core/Heading.js +2 -1
package/lib/extensions/core/NodeProcessor.js +42 -21
package/lib/extensions/core/Paragraph.js +2 -1
package/lib/extensions/core/__tests__/NodeProcessor.test.js +309 -11
package/lib/extensions/core/__tests__/TextProcessor.test.js +1 -1
package/lib/extensions/core/__tests__/__snapshots__/NodeProcessor.test.js.snap +249 -0
package/lib/extensions/core/steps/AddNodeMarkStep.js +6 -0
package/lib/extensions/core/steps/AttrStep.js +6 -0
package/lib/extensions/core/steps/RemoveNodeMarkStep.js +6 -0
package/lib/extensions/list/List.js +70 -9
package/lib/extensions/list/ListItem.js +2 -2
package/lib/extensions/list/__tests__/List.test.js +26 -17
package/lib/extensions/list/__tests__/__snapshots__/List.test.js.snap +36 -36
package/lib/services/NodeFactory.js +69 -3
package/lib/services/__tests__/NodeFactory.test.js +124 -0
package/lib/services/__tests__/__snapshots__/NodeFactory.test.js.snap +326 -0
package/lib/services/normalizer/HtmlNormalizer.js +54 -2
package/lib/services/normalizer/JsonNormalizer.js +6 -5
package/lib/services/normalizer/__tests__/HtmlNormalizer.test.js +14 -0
package/lib/services/normalizer/__tests__/JsonNormalizer.test.js +20 -3
package/lib/services/normalizer/__tests__/__snapshots__/JsonNormalizer.test.js.snap +37 -0
package/lib/utils/__tests__/findMarkByType.test.js +17 -0
package/lib/utils/__tests__/isMarkAppliedToParent.test.js +53 -0
package/lib/utils/__tests__/isNodeFullySelected.test.js +44 -0
package/lib/utils/__tests__/resolveTextPosition.test.js +39 -0
package/lib/utils/copyMark.js +5 -0
package/lib/utils/index.js +1 -1
package/lib/utils/isMarkAppliedToParent.js +1 -1
package/lib/utils/isNodeFullySelected.js +4 -7
package/lib/utils/resolveTextPosition.js +4 -6
package/package.json +29 -27
package/lib/utils/resolveNodePosition.js +0 -6

package/example/ExampleApp.vue CHANGED Viewed

@@ -12,6 +12,10 @@
             </option>
         </select>
+        <button type="button" class="zw-load-content" @click="saveContent">
+            Save Content
+        </button>
         <button type="button" class="zw-load-content" @click="loadContent">
             Load Content
         </button>
@@ -45,7 +49,7 @@
 </template>
 <script>
-import { computed, onMounted, ref } from 'vue';
+import { computed, onMounted, ref, unref } from 'vue';
 import { Wysiwyg } from '../lib/entry-lib';
 import { FONTS } from './fonts';
 import { PRESETS, renderPresetVariable } from './presets';
@@ -109,6 +113,10 @@ export default {
             window.location.reload();
         }
+        function saveContent() {
+            sessionStorage.setItem('wswg-data', JSON.stringify(unref(content)));
+        }
         document.addEventListener('click', (event) => {
             isActive.value = wswgRef.value.$el.contains(event.target);
         });
@@ -121,6 +129,7 @@ export default {
             favoriteColors,
             updateFavoriteColors,
             loadContent,
+            saveContent,
             device,
             updatedAt,
             presets,

package/lib/Wysiwyg.vue CHANGED Viewed

@@ -163,7 +163,7 @@ export default {
         const pageBlocks = toRef(props, 'pageBlocks');
-        const editor = useEditor({
+        const { editor, getContent } = useEditor({
             content: toRef(props, 'value'),
             onChange: (content) => onChange(content),
             isReadonlyRef: toRef(props, 'readonly'),
@@ -206,7 +206,8 @@ export default {
             toolbarRef,
             wysiwygRef,
             toolbar,
-            updateToolbar
+            updateToolbar,
+            getContent
         };
     }
 };

package/lib/__tests__/utils/buildTestExtensions.js CHANGED Viewed

@@ -1,11 +1,12 @@
 import { Mark } from '@tiptap/vue-2';
 import { buildCoreExtensions } from '../../extensions/core';
+import { MarkGroups } from '../../enums';
 // each node allows using 'settings' group of marks,
 // and it fails when there are no nodes with this group
 const SettingMark = Mark.create({
     name: 'placeholder_setting',
-    group: 'settings',
+    group: MarkGroups.SETTINGS,
     renderHTML: () => []
 });

package/lib/assets/icons/indicator.svg ADDED Viewed

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" 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>

package/lib/cli/commands/Command.js ADDED Viewed

@@ -0,0 +1,39 @@
+export class Command {
+    name;
+    description;
+    argument;
+    options = [];
+    doCommand() {
+        throw new Error('Command "doCommand" is required');
+    }
+    install(program) {
+        if (!this.name) {
+            throw new Error('Command "name" is required');
+        }
+        let building = program.command(this.name);
+        if (this.description) {
+            building = building.description(this.description);
+        }
+        if (this.argument) {
+            building = building.argument(this.argument);
+        }
+        if (this.options.length) {
+            for (const option of this.options) {
+                building = building.option(option.flags, option.description, option.default);
+            }
+        }
+        building.action(this.doCommand.bind(this));
+    }
+    output(data) {
+        // eslint-disable-next-line no-console
+        console.log(data);
+    }
+}

package/lib/cli/commands/ToJsonCommand.js ADDED Viewed

@@ -0,0 +1,46 @@
+import { resolve } from 'path';
+import { ContentSerializer } from '../ContentSerializer';
+import { Command } from './Command';
+export class ToJsonCommand extends Command {
+    name = 'to-json';
+    description = 'migrate html to json';
+    argument = '<html>';
+    options = [
+        {
+            flags: '--config <path>',
+            description: 'Generator config',
+            // Relative to dist folder
+            default: resolve(__dirname, '../bin/zp.config.json')
+        }
+    ];
+    doCommand(html, { config }) {
+        const configPath = resolve(process.cwd(), config);
+        const serializer = ContentSerializer.build(require(configPath).editor);
+        const json = serializer.toJSON(this.#formatInputHtml(html));
+        this.output(this.#formatOutputJson(json));
+    }
+    #formatInputHtml(html) {
+        return html
+            .replace(/\\(["'])/g, '$1')
+            .replace(/rgba\(\d{1,3}, ?\d{1,3}, ?\d{1,3}, (\d{1,2}%)\)/g, (substring, alpha) => {
+                return substring.replace(alpha, parseFloat(alpha) / 100);
+            });
+    }
+    #formatOutputJson(object) {
+        const skipNullValue = (_, value) => value === null ? undefined : value;
+        const json = JSON.stringify(object, skipNullValue, 2);
+        return json
+            .replace(/\\"/g, '"')
+            .replace(/font-family: ?'(.+)'/g, 'font-family: "$1"')
+            .replace(/'/g, '\\\'')
+            .replace(/^[\t ]*"[^:\n\r]+(?<!\\)":/gm, (match) => match.replace(/"/g, ''))
+            .replace(/: "(.+)"([,\n])/g, ': \'$1\'$2');
+    }
+}

package/lib/cli/commands/VersionCommand.js ADDED Viewed

@@ -0,0 +1,11 @@
+import { version } from '../../../package.json';
+import { Command } from './Command';
+export class VersionCommand extends Command {
+    name = 'version';
+    description = 'display cli version';
+    doCommand() {
+        this.output(version);
+    }
+}

package/lib/cli/commands/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { ToJsonCommand } from './ToJsonCommand';
2	+ export { VersionCommand } from './VersionCommand';

package/lib/cli/index.js CHANGED Viewed

	@@ -1 +1,2 @@
1 1	export { ContentSerializer } from './ContentSerializer';
2	+ export * from './commands';

package/lib/components/base/Button.vue CHANGED Viewed

@@ -135,4 +135,10 @@ export default {
     color: rgb(var(--zw-color-white));
     background-color: rgb(var(--zw-color-n5));
 }
+.zw-button__customized-indicator {
+    position: absolute;
+    top: 0;
+    right: 2px;
+}
 </style>

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

@@ -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 CHANGED Viewed

@@ -12,6 +12,15 @@
                     {{ activeOptionTitle }}
                 </span>
+                <Icon
+                    v-if="isCustomized"
+                    class="zw-dropdown__customized-indicator"
+                    name="indicator"
+                    size="9px"
+                    data-test-selector="customizedIndicator"
+                    v-tooltip.xs="'Default parameter setting is changed'"
+                />
                 <Icon
                     class="zw-dropdown__activator-arrow"
                     name="arrow"
@@ -27,6 +36,7 @@
 import { computed, inject, toRef } from 'vue';
 import Button from '../Button';
 import Icon from '../Icon';
+import { tooltip } from '../../../directives';
 import { InjectionTokens } from './injectionTokens';
 import { useDropdownEntityTitle } from './composables';
@@ -38,6 +48,10 @@ export default {
         Button
     },
+    directives: {
+        tooltip
+    },
     model: {
         event: 'change'
     },
@@ -47,6 +61,12 @@ export default {
             type: String,
             required: false,
             default: 'none'
+        },
+        isCustomized: {
+            type: Boolean,
+            required: false,
+            default: false
         }
     },
@@ -77,10 +97,6 @@ export default {
     width: 100%;
 }
-.zw-dropdown__activator-title {
-    margin-right: var(--zw-offset-xs);
-}
 .zw-dropdown__activator-arrow {
     margin-left: auto;
 }
@@ -94,4 +110,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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -2,12 +2,21 @@
     <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"
+                    v-tooltip.xs="'Default parameter setting is changed'"
+                />
                 <Icon :name="`alignment-${option.id}`" size="28px" auto-color />
             </Button>
         </template>
@@ -17,7 +26,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 +66,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 +75,7 @@ export default {
         return {
             currentValue,
+            isCustomized,
             apply
         };
     }

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

@@ -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,15 @@
                 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>
@@ -19,6 +29,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 +48,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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -1,5 +1,6 @@
 <template>
     <Button
+        class="zw-position--relative"
         skin="toolbar"
         icon
         :active="currentValue"
@@ -8,6 +9,15 @@
         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>
@@ -16,6 +26,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 +44,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 CHANGED Viewed

@@ -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,15 @@
             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">
@@ -44,6 +54,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 +77,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 CHANGED Viewed

@@ -1,5 +1,6 @@
 <template>
     <Button
+        class="zw-position--relative"
         skin="toolbar"
         icon
         :active="currentValue"
@@ -7,6 +8,15 @@
         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>
@@ -32,10 +42,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
         };
     }