@zipify/wysiwyg 2.0.0-1 → 2.0.0-11

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(),

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__/StylePresetControl.test.js

@@ -72,7 +72,7 @@ describe('rendering', () => {
     test('should enable reset if marks customized', () => {
         const editor = createEditor({
             customization: {
-                marks: ['font_size'],
+                marks: [TextSettings.FONT_SIZE],
                 attributes: []
             }
         });
@@ -86,7 +86,7 @@ describe('rendering', () => {
         const editor = createEditor({
             customization: {
                 marks: [],
-                attributes: ['alignment']
+                attributes: [TextSettings.ALIGNMENT]
             }
         });
         const wrapper = createComponent({ editor });
@@ -98,8 +98,8 @@ describe('rendering', () => {
     test('should enable reset if attributes and marks customized', () => {
         const editor = createEditor({
             customization: {
-                marks: ['font_size'],
-                attributes: ['alignment']
+                marks: [TextSettings.FONT_SIZE],
+                attributes: [TextSettings.ALIGNMENT]
             }
         });
         const wrapper = createComponent({ editor });

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/composables/__tests__/useEditor.test.js

@@ -17,7 +17,7 @@ const TestComponent = {
     props: ['value'],
 
     setup(props, { emit }) {
-        const editor = useEditor({
+        const { editor } = useEditor({
             isReadonlyRef: ref(false),
             content: toRef(props, 'value'),
             extensions: buildTestExtensions(),

package/lib/composables/useEditor.js

@@ -1,12 +1,16 @@
 import { Editor } from '@tiptap/vue-2';
 import { onUnmounted, watch, reactive, unref } from 'vue';
 import { ContentNormalizer } from '../services';
-import { markWysiwygContent, unmarkWysiwygContent } from '../utils';
+import { markWysiwygContent } from '../utils';
 
 export function useEditor({ content, onChange, extensions, isReadonlyRef }) {
-    const editor = reactive(new Editor({
+    let editor;
+
+    const getContent = () => markWysiwygContent(editor.getJSON());
+
+    editor = reactive(new Editor({
         content: ContentNormalizer.normalize(content.value),
-        onUpdate: () => onChange(markWysiwygContent(editor.getJSON())),
+        onUpdate: () => onChange(getContent()),
         extensions,
         injectCSS: false,
         editable: !unref(isReadonlyRef)
@@ -15,10 +19,7 @@ export function useEditor({ content, onChange, extensions, isReadonlyRef }) {
     onUnmounted(() => editor.destroy());
 
     watch(content, (value) => {
-        const content = unmarkWysiwygContent(value);
-        const isChanged = JSON.stringify(editor.getJSON()) !== JSON.stringify(content);
-
-        if (isChanged) {
+        if (JSON.stringify(getContent()) !== JSON.stringify(value)) {
             const content = ContentNormalizer.normalize(value);
 
             editor.commands.setContent(content, false);
@@ -27,5 +28,5 @@ export function useEditor({ content, onChange, extensions, isReadonlyRef }) {
 
     watch(isReadonlyRef, (isReadonly) => editor.setEditable(!isReadonly));
 
-    return editor;
+    return { editor, getContent };
 }

package/lib/directives/__tests__/tooltip.test.js

@@ -4,7 +4,7 @@ describe('rendering', () => {
     test('should render text only tooltip', () => {
         const el = document.createElement('div');
 
-        tooltip(el, { value: 'Test' });
+        tooltip(el, { value: 'Test', modifiers: {} });
 
         expect(el.dataset.tooltip).toBe('Test');
     });
@@ -13,7 +13,8 @@ describe('rendering', () => {
         const el = document.createElement('div');
 
         tooltip(el, {
-            value: { text: 'Test' }
+            value: { text: 'Test' },
+            modifiers: {}
         });
 
         expect(el.dataset.tooltip).toBe('Test');
@@ -23,7 +24,8 @@ describe('rendering', () => {
         const el = document.createElement('div');
 
         tooltip(el, {
-            value: { text: 'Test', hotkey: 'Mod B' }
+            value: { text: 'Test', hotkey: 'Mod B' },
+            modifiers: {}
         });
 
         expect(el.dataset.tooltipHotkey).toBe('Mod B');
@@ -32,8 +34,24 @@ describe('rendering', () => {
     test('should not render tooltip if no value passed', () => {
         const el = document.createElement('div');
 
-        tooltip(el, { value: '' });
+        tooltip(el, { value: '', modifiers: {} });
 
         expect(el.dataset).not.toHaveProperty('tooltip');
     });
+
+    test('should render xs size', () => {
+        const el = document.createElement('div');
+
+        tooltip(el, { value: '', modifiers: { xs: true } });
+
+        expect(el.dataset).toHaveProperty('tooltipSize', 'xs');
+    });
+
+    test('should render lg size', () => {
+        const el = document.createElement('div');
+
+        tooltip(el, { value: '', modifiers: { lg: true } });
+
+        expect(el.dataset).toHaveProperty('tooltipSize', 'lg');
+    });
 });

package/lib/directives/tooltip.js

@@ -1,7 +1,10 @@
-export function tooltip(el, { value }) {
+export function tooltip(el, { value, modifiers }) {
     const options = typeof value === 'string' ? { text: value } : value;
     const { text, hotkey } = options;
 
     if (text) el.dataset.tooltip = text;
     if (text && hotkey) el.dataset.tooltipHotkey = hotkey;
+
+    if (modifiers.xs) el.dataset.tooltipSize = 'xs';
+    if (modifiers.lg) el.dataset.tooltipSize = 'lg';
 }

package/lib/entry-cli.js

@@ -1,28 +1,15 @@
-import { resolve } from 'path';
 import { Command } from 'commander';
-import { ContentSerializer } from './cli';
+import { ToJsonCommand, VersionCommand } from './cli';
 
 const program = new Command();
 
-function rubifyJSON(object) {
-    const skipNullValue = (_, value) => value === null ? undefined : value;
-    const json = JSON.stringify(object, skipNullValue, 2);
+const commands = [
+    ToJsonCommand,
+    VersionCommand
+];
 
-    return json
-        .replace(/^[\t ]*"[^:\n\r]+(?<!\\)":/gm, (match) => match.replace(/"/g, ''))
-        .replace(/: "(.+)"([,\n])/g, ': \'$1\'$2');
+for (const CommandClass of commands) {
+    new CommandClass().install(program);
 }
 
-program.command('to-json')
-    .argument('<html>')
-    .option('--config <path>', 'generator config', resolve(__dirname, '../bin/zp.config.json'))
-    .action((html, { config }) => {
-        const configPath = resolve(process.cwd(), config);
-        const serializer = ContentSerializer.build(require(configPath).editor);
-        const json = rubifyJSON(serializer.toJSON(html));
-
-        // eslint-disable-next-line no-console
-        console.log(json);
-    });
-
 program.parse();

package/lib/entry-lib.js

@@ -1,4 +1,4 @@
 export { default as Wysiwyg } from './Wysiwyg';
 export { NodeFactory } from './services';
 export { NodeTypes, TextSettings, Alignments } from './enums';
-export { isWysiwygContent } from './utils';
+export { isWysiwygContent, unmarkWysiwygContent, markWysiwygContent } from './utils';

package/lib/enums/MarkGroups.js

@@ -0,0 +1,4 @@
+export const MarkGroups = Object.freeze({
+    SETTINGS: 'settings',
+    ALL: '_'
+});

package/lib/enums/TextSettings.js

@@ -18,7 +18,7 @@ export const TextSettings = Object.freeze({
     },
 
     get inlineMarks() {
-        return [this.TEXT_DECORATION, this.LINK];
+        return [this.TEXT_DECORATION, this.LINK, this.SUPERSCRIPT, this.BACKGROUND_COLOR];
     },
 
     get marks() {

package/lib/enums/index.js

@@ -4,5 +4,6 @@ export { Alignments } from './Alignments';
 export { NodeTypes } from './NodeTypes';
 export { ListTypes } from './ListTypes';
 export { TextSettings } from './TextSettings';
+export { MarkGroups } from './MarkGroups';
 export { LinkTargets } from './LinkTargets';
 export { LinkDestinations } from './LinkDestinations';

package/lib/extensions/BackgroundColor.js

@@ -4,7 +4,6 @@ import { TextSettings } from '../enums';
 
 export const BackgroundColor = Mark.create({
     name: TextSettings.BACKGROUND_COLOR,
-    group: 'settings',
 
     addAttributes: () => ({
         value: { required: true }

package/lib/extensions/FontColor.js

@@ -1,11 +1,11 @@
 import { Mark } from '@tiptap/vue-2';
 import { computed, unref } from 'vue';
 import { convertColor, createCommand, renderMark } from '../utils';
-import { TextSettings } from '../enums';
+import { MarkGroups, TextSettings } from '../enums';
 
 export const FontColor = Mark.create({
     name: TextSettings.FONT_COLOR,
-    group: 'settings',
+    group: MarkGroups.SETTINGS,
 
     addAttributes: () => ({
         value: { required: true }

package/lib/extensions/FontFamily.js

@@ -1,11 +1,11 @@
 import { Mark } from '@tiptap/vue-2';
 import { computed, unref } from 'vue';
 import { createCommand, renderMark } from '../utils';
-import { TextSettings } from '../enums';
+import { MarkGroups, TextSettings } from '../enums';
 
 export const FontFamily = Mark.create({
     name: TextSettings.FONT_FAMILY,
-    group: 'settings',
+    group: MarkGroups.SETTINGS,
 
     addOptions: () => ({
         fonts: []
@@ -61,7 +61,7 @@ export const FontFamily = Mark.create({
 
     parseHTML() {
         const getAttrs = (input) => {
-            const parsed = input.replace(/"/g, '');
+            const parsed = input.replace(/["']/g, '');
             const isExists = this.options.fonts.some((font) => font.name === parsed);
             const value = isExists ? parsed : unref(this.options.defaultPreset).common.font_family;
 

package/lib/extensions/FontSize.js

@@ -1,11 +1,11 @@
 import { Mark } from '@tiptap/vue-2';
 import { computed, unref } from 'vue';
 import { convertFontSize, createCommand, createKeyboardShortcut, renderMark } from '../utils';
-import { TextSettings } from '../enums';
+import { MarkGroups, TextSettings } from '../enums';
 
 export const FontSize = Mark.create({
     name: TextSettings.FONT_SIZE,
-    group: 'settings',
+    group: MarkGroups.SETTINGS,
 
     addOptions: () => ({
         minSize: 1,

package/lib/extensions/FontStyle.js

@@ -1,11 +1,11 @@
 import { Mark } from '@tiptap/vue-2';
 import { computed, unref } from 'vue';
 import { createCommand, createKeyboardShortcut, renderMark } from '../utils';
-import { TextSettings } from '../enums';
+import { MarkGroups, TextSettings } from '../enums';
 
 export const FontStyle = Mark.create({
     name: TextSettings.FONT_STYLE,
-    group: 'settings',
+    group: MarkGroups.SETTINGS,
 
     addAttributes: () => ({
         italic: { required: true }

package/lib/extensions/FontWeight.js

@@ -1,11 +1,11 @@
 import { Mark } from '@tiptap/vue-2';
 import { computed, unref } from 'vue';
 import { createCommand, createKeyboardShortcut, renderMark } from '../utils';
-import { TextSettings } from '../enums';
+import { MarkGroups, TextSettings } from '../enums';
 
 export const FontWeight = Mark.create({
     name: TextSettings.FONT_WEIGHT,
-    group: 'settings',
+    group: MarkGroups.SETTINGS,
 
     addAttributes: () => ({
         value: { required: true }

package/lib/extensions/StylePreset.js

@@ -11,7 +11,7 @@ function makePresetClass(base, preset) {
 }
 
 export const StylePreset = Extension.create({
-    name: 'style_preset',
+    name: TextSettings.STYLE_PRESET,
 
     addStorage: () => ({
         presetStyleEl: null
@@ -161,6 +161,13 @@ export const StylePreset = Extension.create({
                 });
             }),
 
+            isSettingCustomized: createCommand(({ commands }, name) => {
+                const customization = commands.getPresetCustomization();
+                const group = TextSettings.attributes.includes(name) ? 'attributes' : 'marks';
+
+                return computed(() => unref(customization)[group]?.includes(name) ?? false);
+            }),
+
             removePresetCustomization: createCommand(({ chain }) => {
                 chain()
                     .storeSelection()
@@ -176,7 +183,7 @@ export const StylePreset = Extension.create({
                 chain()
                     .storeSelection()
                     .expandSelectionToBlock()
-                    .unsetAllMarks()
+                    .removeAllMarks()
                     .applyDefaultPreset()
                     .restoreSelection()
                     .run();

package/lib/extensions/Superscript.js

@@ -12,13 +12,16 @@ export const Superscript = Base.extend({
     }),
 
     addCommands() {
+        const { setSuperscript, unsetSuperscript } = this.parent();
+
         return {
-            ...this.parent(),
+            applySuperscript: setSuperscript,
+            removeSuperscript: unsetSuperscript,
 
             toggleSuperscript: createCommand(({ commands }) => {
                 const isActive = unref(commands.isSuperscript());
 
-                isActive ? commands.unsetSuperscript() : commands.setSuperscript();
+                isActive ? commands.applySuperscript() : commands.removeSuperscript();
             }),
 
             isSuperscript: createCommand(({ commands }) => {