@zipify/wysiwyg 1.2.5 → 1.3.0-0

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

@@ -4,9 +4,14 @@ import { InjectionTokens } from '../../../../injectionTokens';
 import { Button } from '../../../base';
 import ItalicControl from '../ItalicControl';
 
-const createEditor = ({ isItalic, isItalicAvailable } = {}) => ({
+const SELECTORS = {
+    INDICATOR: '[data-test-selector="customizedIndicator"]'
+};
+
+const createEditor = ({ isItalic, isItalicAvailable, isSettingCustomized } = {}) => ({
     commands: {
         isItalic: () => ref(isItalic),
+        isSettingCustomized: () => ref(isSettingCustomized ?? false),
         isItalicAvailable: () => ref(isItalicAvailable ?? true),
         focus: jest.fn().mockReturnThis(),
         toggleItalic: jest.fn().mockReturnThis(),
@@ -40,6 +45,23 @@ 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,12 +4,17 @@ import { InjectionTokens } from '../../../../injectionTokens';
 import { Button, Modal, NumberField, Range } from '../../../base';
 import LineHeightControl from '../LineHeightControl';
 
-const createEditor = ({ height } = {}) => {
+const SELECTORS = {
+    INDICATOR: '[data-test-selector="customizedIndicator"]'
+};
+
+const createEditor = ({ height, isSettingCustomized } = {}) => {
     const heightRef = ref(height ?? '1.2');
 
     return {
         commands: {
             getLineHeight: () => heightRef,
+            isSettingCustomized: () => ref(isSettingCustomized ?? false),
             applyLineHeight: jest.fn(function (value) {
                 heightRef.value = value;
                 return this;
@@ -117,4 +122,21 @@ 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,9 +4,14 @@ import { InjectionTokens } from '../../../../injectionTokens';
 import { Button } from '../../../base';
 import UnderlineControl from '../UnderlineControl';
 
-const createEditor = ({ isUnderline } = {}) => ({
+const SELECTORS = {
+    INDICATOR: '[data-test-selector="customizedIndicator"]'
+};
+
+const createEditor = ({ isUnderline, isSettingCustomized } = {}) => ({
     commands: {
         isUnderline: () => ref(isUnderline),
+        isUnderlineCustomized: () => ref(isSettingCustomized ?? false),
         focus: jest.fn().mockReturnThis(),
         toggleUnderline: jest.fn().mockReturnThis(),
         run: jest.fn()
@@ -46,3 +51,22 @@ 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/lib/extensions/StylePreset.js

@@ -169,6 +169,12 @@ export const StylePreset = Extension.create({
                 });
             }),
 
+            isSettingCustomized: createCommand(({ commands }, group, name) => {
+                const customization = commands.getPresetCustomization();
+
+                return computed(() => unref(customization)[group]?.includes(name) ?? false);
+            }),
+
             removePresetCustomization: createCommand(({ chain }) => {
                 chain()
                     .storeSelection()

package/lib/extensions/TextDecoration.js

@@ -39,6 +39,13 @@ export const TextDecoration = Mark.create({
                 });
             }),
 
+            isUnderlineCustomized: createCommand(({ commands }) => {
+                const currentValue = commands.isUnderline();
+                const defaultValue = commands.getDefaultTextDecoration();
+
+                return computed(() => unref(currentValue) !== unref(defaultValue).underline);
+            }),
+
             getDefaultTextDecoration: createCommand(({ commands }) => {
                 const preset = commands.getPreset();
 

package/lib/extensions/__tests__/StylePreset.test.js

@@ -396,6 +396,21 @@ describe('get preset customization', () => {
         expect(customization.value).toMatchSnapshot();
     });
 
+    test('should not is setting customized', async () => {
+        const editor = await createEditor({
+            content: NodeFactory.doc([
+                NodeFactory.paragraph({ preset: { id: 'regular-1' } }, 'test')
+            ]),
+            presets: [createPreset({ id: 'regular-1' })]
+        });
+
+        const isFontSizeCustomized = editor.commands.isSettingCustomized('marks', TextSettings.FONT_SIZE);
+        const isAlignmentCustomized = editor.commands.isSettingCustomized('attributes', TextSettings.ALIGNMENT);
+
+        expect(isFontSizeCustomized.value).toBe(false);
+        expect(isAlignmentCustomized.value).toBe(false);
+    });
+
     test('should find marks', async () => {
         const editor = await createEditor({
             content: NodeFactory.doc([
@@ -416,6 +431,25 @@ describe('get preset customization', () => {
         expect(customization.value).toMatchSnapshot();
     });
 
+    test('should is marks setting customized', async () => {
+        const editor = await createEditor({
+            content: NodeFactory.doc([
+                NodeFactory.paragraph({ preset: { id: 'regular-1' } }, [
+                    NodeFactory.text('test', [
+                        NodeFactory.mark(TextSettings.FONT_SIZE, { value: '12' }),
+                        NodeFactory.mark(TextSettings.FONT_WEIGHT, { value: '400' })
+                    ])
+                ])
+            ]),
+            presets: [createPreset({ id: 'regular-1' })]
+        });
+
+        editor.commands.selectAll();
+        const isFontSizeCustomized = editor.commands.isSettingCustomized('marks', TextSettings.FONT_SIZE);
+
+        expect(isFontSizeCustomized.value).toBe(true);
+    });
+
     test('should find attributes', async () => {
         const editor = await createEditor({
             content: NodeFactory.doc([
@@ -433,6 +467,23 @@ describe('get preset customization', () => {
 
         expect(customization.value).toMatchSnapshot();
     });
+
+    test('should is attributes setting customized', async () => {
+        const editor = await createEditor({
+            content: NodeFactory.doc([
+                NodeFactory.paragraph({
+                    preset: { id: 'regular-1' },
+                    alignment: { value: 'center' }
+                }, 'test')
+            ]),
+            presets: [createPreset({ id: 'regular-1' })]
+        });
+
+        editor.commands.selectAll();
+        const isAlignmentCustomized = editor.commands.isSettingCustomized('attributes', TextSettings.ALIGNMENT);
+
+        expect(isAlignmentCustomized.value).toBe(true);
+    });
 });
 
 describe('remove preset customization', () => {

package/lib/extensions/__tests__/TextDecoration.test.js

@@ -70,6 +70,17 @@ describe('get decoration', () => {
             expect(editor.commands.isUnderline().value).toBe(true);
         });
 
+        test('should is customized settings', () => {
+            const editor = createEditor({
+                content: createContent(NodeFactory.text('hello world', [
+                    NodeFactory.mark(TextSettings.TEXT_DECORATION, { underline: true })
+                ]))
+            });
+
+            editor.commands.selectAll();
+            expect(editor.commands.isUnderlineCustomized().value).toBe(true);
+        });
+
         test('should get from preset', () => {
             const editor = createEditor({
                 content: createContent(NodeFactory.text('hello world'))
@@ -79,6 +90,15 @@ describe('get decoration', () => {
 
             expect(editor.commands.isUnderline().value).toBe(false);
         });
+
+        test('should not is customized settings', () => {
+            const editor = createEditor({
+                content: createContent(NodeFactory.text('hello world'))
+            });
+
+            editor.commands.selectAll();
+            expect(editor.commands.isUnderlineCustomized().value).toBe(false);
+        });
     });
 
     describe('strike through', () => {

package/package.json

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