@zipify/wysiwyg 1.3.0-0 → 2.0.0-0

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

@@ -1,13 +1,13 @@
+import { ref } from 'vue';
 import { shallowMount } from '@vue/test-utils';
 import { InjectionTokens } from '../../../../injectionTokens';
 import { Button } from '../../../base';
 import SuperscriptControl from '../SuperscriptControl';
 
 const createEditor = ({ isSuperscript } = {}) => ({
-    isActive: () => isSuperscript,
-
     commands: {
         focus: jest.fn().mockReturnThis(),
+        isSuperscript: () => ref(isSuperscript),
         toggleSuperscript: jest.fn().mockReturnThis(),
         run: jest.fn()
     },

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

@@ -1,9 +1,9 @@
 import { h, ref, toRef } from 'vue';
 import { EditorContent } from '@tiptap/vue-2';
 import { shallowMount } from '@vue/test-utils';
+import { buildTestExtensions } from '../../__tests__/utils';
 import { useEditor } from '../useEditor';
 import { NodeFactory } from '../../services';
-import { buildCoreExtensions } from '../../extensions/core';
 
 const TestComponent = {
     name: 'Test',
@@ -20,7 +20,7 @@ const TestComponent = {
         const editor = useEditor({
             isReadonlyRef: ref(false),
             content: toRef(props, 'value'),
-            extensions: buildCoreExtensions(),
+            extensions: buildTestExtensions(),
             onChange: (content) => emit('input', content),
             onFocus: () => emit('focus')
         });

package/lib/extensions/BackgroundColor.js

@@ -1,10 +1,10 @@
 import { Mark } from '@tiptap/vue-2';
-import { computed } from 'vue';
 import { convertColor, createCommand, renderMark } from '../utils';
 import { TextSettings } from '../enums';
 
 export const BackgroundColor = Mark.create({
     name: TextSettings.BACKGROUND_COLOR,
+    group: 'settings',
 
     addAttributes: () => ({
         value: { required: true }
@@ -12,12 +12,12 @@ export const BackgroundColor = Mark.create({
 
     addCommands() {
         return {
-            getBackgroundColor: createCommand(({ editor }) => {
-                return computed(() => editor.getAttributes(this.name)?.value ?? 'rgba(255, 255, 255, 0%)');
+            getBackgroundColor: createCommand(({ commands }) => {
+                return commands.getCommonSettingMark(this.name, 'rgba(255, 255, 255, 0%)');
             }),
 
             applyBackgroundColor: createCommand(({ commands }, value) => {
-                commands.setMark(this.name, { value });
+                commands.applyMark(this.name, { value });
             })
         };
     },

package/lib/extensions/FontColor.js

@@ -5,6 +5,7 @@ import { TextSettings } from '../enums';
 
 export const FontColor = Mark.create({
     name: TextSettings.FONT_COLOR,
+    group: 'settings',
 
     addAttributes: () => ({
         value: { required: true }
@@ -12,10 +13,8 @@ export const FontColor = Mark.create({
 
     addCommands() {
         return {
-            getFontColor: createCommand(({ commands, editor }) => {
-                const defaultValue = commands.getDefaultFontColor();
-
-                return computed(() => editor.getAttributes(this.name)?.value ?? unref(defaultValue));
+            getFontColor: createCommand(({ commands }) => {
+                return commands.getCommonSettingMark(this.name, commands.getDefaultFontColor());
             }),
 
             getDefaultFontColor: createCommand(({ commands }) => {
@@ -25,7 +24,7 @@ export const FontColor = Mark.create({
             }),
 
             applyFontColor: createCommand(({ commands }, value) => {
-                commands.setMark(this.name, { value });
+                commands.applyMark(this.name, { value });
             })
         };
     },

package/lib/extensions/FontFamily.js

@@ -5,6 +5,7 @@ import { TextSettings } from '../enums';
 
 export const FontFamily = Mark.create({
     name: TextSettings.FONT_FAMILY,
+    group: 'settings',
 
     addOptions: () => ({
         fonts: []
@@ -17,7 +18,7 @@ export const FontFamily = Mark.create({
     addCommands() {
         return {
             applyFontFamily: createCommand(({ commands }, value) => {
-                commands.setMark(this.name, { value });
+                commands.applyMark(this.name, { value });
 
                 const font = commands.findFontByName(value);
                 let fontWeight = unref(commands.getFontWeight());
@@ -46,10 +47,8 @@ export const FontFamily = Mark.create({
                 return this.options.fonts.find((font) => font.name === name);
             }),
 
-            getFontFamily: createCommand(({ editor, commands }) => {
-                const defaultValue = commands.getDefaultFontFamily();
-
-                return computed(() => editor.getAttributes(this.name)?.value ?? unref(defaultValue));
+            getFontFamily: createCommand(({ commands }) => {
+                return commands.getCommonSettingMark(this.name, commands.getDefaultFontFamily());
             }),
 
             getDefaultFontFamily: createCommand(({ commands }) => {

package/lib/extensions/FontSize.js

@@ -5,6 +5,7 @@ import { TextSettings } from '../enums';
 
 export const FontSize = Mark.create({
     name: TextSettings.FONT_SIZE,
+    group: 'settings',
 
     addOptions: () => ({
         minSize: 1,
@@ -21,11 +22,8 @@ export const FontSize = Mark.create({
 
     addCommands() {
         return {
-            getFontSize: createCommand(({ editor, commands }) => {
-                const device = commands.getDevice();
-                const defaultValue = commands.getDefaultFontSize();
-
-                return computed(() => editor.getAttributes(this.name)?.[unref(device)] ?? unref(defaultValue));
+            getFontSize: createCommand(({ commands }) => {
+                return commands.getDeviceSettingMark(this.name, commands.getDefaultFontSize());
             }),
 
             getDefaultFontSize: createCommand(({ commands }) => {
@@ -38,10 +36,10 @@ export const FontSize = Mark.create({
             applyFontSize: createCommand(({ commands }, value) => {
                 // const device = unref(commands.getDevice());
 
-                // commands.setMark(this.name, { [device]: value });
+                // commands.applyMark(this.name, { [device]: value });
 
                 // Temporary until release BUILDER_MODES
-                commands.setMark(this.name, { desktop: value, tablet: value, mobile: null });
+                commands.applyMark(this.name, { desktop: value, tablet: value, mobile: null });
             }),
 
             increaseFontSize: createCommand(({ commands }) => {

package/lib/extensions/FontStyle.js

@@ -5,6 +5,7 @@ import { TextSettings } from '../enums';
 
 export const FontStyle = Mark.create({
     name: TextSettings.FONT_STYLE,
+    group: 'settings',
 
     addAttributes: () => ({
         italic: { required: true }
@@ -12,10 +13,11 @@ export const FontStyle = Mark.create({
 
     addCommands() {
         return {
-            isItalic: createCommand(({ editor, commands }) => {
-                const defaultValue = commands.getDefaultFontStyle();
+            isItalic: createCommand(({ commands }) => {
+                const selectionRef = commands.getMark(this.name);
+                const defaultValueRef = commands.getDefaultFontStyle();
 
-                return computed(() => editor.getAttributes(this.name)?.italic ?? unref(defaultValue).italic);
+                return computed(() => unref(selectionRef)?.italic ?? unref(defaultValueRef).italic);
             }),
 
             isItalicAvailable: createCommand(({ commands }) => {
@@ -34,7 +36,7 @@ export const FontStyle = Mark.create({
             }),
 
             toggleItalic: createCommand(({ commands }) => {
-                const isItalicAvailable = unref(this.editor.commands.isItalicAvailable());
+                const isItalicAvailable = unref(commands.isItalicAvailable());
 
                 if (!isItalicAvailable) return;
 
@@ -42,11 +44,11 @@ export const FontStyle = Mark.create({
             }),
 
             applyItalic: createCommand(({ commands }) => {
-                commands.setMark(this.name, { italic: true });
+                commands.applyMark(this.name, { italic: true });
             }),
 
             removeItalic: createCommand(({ commands }) => {
-                commands.setMark(this.name, { italic: false });
+                commands.applyMark(this.name, { italic: false });
             })
         };
     },
@@ -57,9 +59,13 @@ export const FontStyle = Mark.create({
     }),
 
     parseHTML() {
-        const getAttrs = (value) => value.includes('italic') && { italic: true };
+        const getAttrs = (value) => ({ italic: value.includes('italic')  });
 
         return [
+            {
+                tag: 'i',
+                attrs: { italic: true }
+            },
             {
                 style: '--zw-font-style',
                 getAttrs
@@ -67,10 +73,6 @@ export const FontStyle = Mark.create({
             {
                 style: 'font-style',
                 getAttrs
-            },
-            {
-                tag: 'i',
-                attrs: { italic: true }
             }
         ];
     },

package/lib/extensions/FontWeight.js

@@ -5,6 +5,7 @@ import { TextSettings } from '../enums';
 
 export const FontWeight = Mark.create({
     name: TextSettings.FONT_WEIGHT,
+    group: 'settings',
 
     addAttributes: () => ({
         value: { required: true }
@@ -13,7 +14,7 @@ export const FontWeight = Mark.create({
     addCommands() {
         return {
             applyFontWeight: createCommand(({ commands }, value) => {
-                commands.setMark(this.name, { value });
+                commands.applyMark(this.name, { value });
                 const font = unref(commands.getFont());
 
                 if (!font.isItalicSupported(value)) {
@@ -31,19 +32,15 @@ export const FontWeight = Mark.create({
                 commands.applyFontWeight(nextWeight);
             }),
 
-            getFontWeight: createCommand(({ editor, commands }) => {
-                const defaultValue = commands.getDefaultFontWeight();
+            getFontWeight: createCommand(({ commands }) => {
+                const selectionRef = commands.getCommonSettingMark(this.name, commands.getDefaultFontWeight());
                 const fontRef = commands.getFont();
 
                 return computed(() => {
-                    const weight = editor.getAttributes(this.name)?.value ?? unref(defaultValue);
+                    const weight = unref(selectionRef);
                     const font = unref(fontRef);
 
-                    if (font.isWeightSupported(weight)) {
-                        return weight;
-                    }
-
-                    return font.findClosestWeight(weight);
+                    return font.isWeightSupported(weight) ? weight : font.findClosestWeight(weight);
                 });
             }),
 

package/lib/extensions/StylePreset.js

@@ -1,6 +1,5 @@
 import { Extension } from '@tiptap/vue-2';
 import { computed, toRef, unref } from 'vue';
-import { Heading } from '@tiptap/extension-heading';
 import { createCommand } from '../utils';
 import { Devices, NodeTypes, TextSettings } from '../enums';
 import { ContextWindow } from '../services';
@@ -14,13 +13,6 @@ function makePresetClass(base, preset) {
 export const StylePreset = Extension.create({
     name: 'style_preset',
 
-    addExtensions: () => [
-        Heading.configure({
-            levels: [1, 2, 3, 4],
-            HTMLAttributes: { class: 'zw-style' }
-        })
-    ],
-
     addStorage: () => ({
         presetStyleEl: null
     }),
@@ -169,12 +161,6 @@ 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/Superscript.js

@@ -1,9 +1,31 @@
 import Base from '@tiptap/extension-superscript';
+import { computed, unref } from 'vue';
+import { createCommand } from '../utils';
+import { TextSettings } from '../enums';
 
 export const Superscript = Base.extend({
+    name: TextSettings.SUPERSCRIPT,
     addKeyboardShortcuts: null,
 
     addOptions: () => ({
         HTMLAttributes: { class: 'zw-superscript' }
-    })
+    }),
+
+    addCommands() {
+        return {
+            ...this.parent(),
+
+            toggleSuperscript: createCommand(({ commands }) => {
+                const isActive = unref(commands.isSuperscript());
+
+                isActive ? commands.unsetSuperscript() : commands.setSuperscript();
+            }),
+
+            isSuperscript: createCommand(({ commands }) => {
+                const selectionRef = commands.getMark(this.name);
+
+                return computed(() => !!unref(selectionRef));
+            })
+        };
+    }
 });

package/lib/extensions/TextDecoration.js

@@ -6,6 +6,7 @@ import { TextSettings } from '../enums';
 export const TextDecoration = Mark.create({
     name: TextSettings.TEXT_DECORATION,
     priority: 1000,
+    group: 'settings',
 
     addAttributes: () => ({
         underline: { default: false },
@@ -26,26 +27,18 @@ export const TextDecoration = Mark.create({
                 return computed(() => unref(decoration).strike_through);
             }),
 
-            getTextDecoration: createCommand(({ editor, commands }) => {
-                const defaultValue = commands.getDefaultTextDecoration();
+            getTextDecoration: createCommand(({ commands }) => {
+                const selectionRef = commands.getMarks(this.name);
+                const defaultValueRef = commands.getDefaultTextDecoration();
 
                 return computed(() => {
-                    const attrs = editor.getAttributes(this.name) ?? {};
-
-                    return {
-                        underline: attrs.underline ?? unref(defaultValue).underline,
-                        strike_through: attrs.strike_through ?? unref(defaultValue).strike_through
-                    };
+                    return unref(selectionRef).reduceRight((collector, mark) => ({
+                        underline: collector.underline || mark.underline,
+                        strike_through: collector.strike_through || mark.strike_through
+                    }), unref(defaultValueRef));
                 });
             }),
 
-            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();
 
@@ -67,18 +60,38 @@ export const TextDecoration = Mark.create({
                 commands.toggleTextDecoration('strike_through');
             }),
 
-            toggleTextDecoration: createCommand(({ commands }, name) => {
-                const isEnabled = unref(commands.getTextDecoration())[name];
+            toggleTextDecoration: createCommand(({ commands }, name, toEnable = null) => {
+                const value = unref(commands.getTextDecoration());
+                const isEnabled = toEnable ?? !value[name];
 
-                isEnabled ? commands.removeTextDecoration(name) : commands.applyTextDecoration(name);
+                commands.applyMark(this.name, { [name]: isEnabled }, {
+                    compareParentMark: (parent, child) => {
+                        if (parent.type.name !== child.type.name) return false;
+
+                        return parent.attrs[name] || parent.eq(child);
+                    },
+
+                    onAppliedToParent: ({ tr, textPosition, initialMark, applyingMark }) => {
+                        if (!initialMark) return;
+
+                        if (initialMark.eq(applyingMark)) {
+                            tr.removeMark(textPosition.from, textPosition.to, applyingMark.type);
+                            return;
+                        }
+
+                        const mark = applyingMark.type.create({ ...initialMark.attrs, [name]: isEnabled });
+
+                        tr.addMark(textPosition.from, textPosition.to, mark);
+                    }
+                });
             }),
 
             applyTextDecoration: createCommand(({ commands }, name) => {
-                commands.setMark(this.name, { [name]: true });
+                commands.toggleTextDecoration(name, true);
             }),
 
             removeTextDecoration: createCommand(({ commands }, name) => {
-                commands.setMark(this.name, { ...unref(commands.getTextDecoration()), [name]: false });
+                commands.toggleTextDecoration(name, false);
             })
         };
     },

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

@@ -1,11 +1,11 @@
 import { Editor, Extension } from '@tiptap/vue-2';
 import { ref } from 'vue';
+import { buildTestExtensions } from '../../__tests__/utils';
 import { createCommand } from '../../utils';
 import { Alignment } from '../Alignment';
 import { DeviceManager } from '../DeviceManager';
 import { Alignments } from '../../enums';
 import { ContentNormalizer, NodeFactory } from '../../services';
-import { buildCoreExtensions } from '../core';
 
 const MockStylePreset = Extension.create({
     name: 'style_preset',
@@ -24,11 +24,13 @@ const MockStylePreset = Extension.create({
 function createEditor({ content }) {
     return new Editor({
         content: ContentNormalizer.normalize(content),
-        extensions: buildCoreExtensions().concat(
-            MockStylePreset,
-            DeviceManager.configure({ device: ref('desktop') }),
-            Alignment
-        )
+        extensions: buildTestExtensions({
+            include: [
+                MockStylePreset,
+                DeviceManager.configure({ device: ref('desktop') }),
+                Alignment
+            ]
+        })
     });
 }
 
@@ -74,7 +76,8 @@ describe('apply value', () => {
             content: createContent({ alignment: null })
         });
 
-        editor.chain().selectAll().applyAlignment(Alignments.RIGHT).run();
+        editor.commands.selectAll();
+        editor.commands.applyAlignment(Alignments.RIGHT);
 
         expect(editor.getJSON()).toMatchSnapshot();
     });

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

@@ -1,9 +1,9 @@
 import { Editor, Extension } from '@tiptap/vue-2';
 import { ref } from 'vue';
+import { buildTestExtensions } from '../../__tests__/utils';
 import { createCommand } from '../../utils';
 import { BackgroundColor } from '../BackgroundColor';
 import { ContentNormalizer, NodeFactory } from '../../services';
-import { buildCoreExtensions } from '../core';
 
 const MockStylePreset = Extension.create({
     name: 'style_preset',
@@ -20,7 +20,9 @@ const MockStylePreset = Extension.create({
 function createEditor({ content }) {
     return new Editor({
         content: ContentNormalizer.normalize(content),
-        extensions: buildCoreExtensions().concat(MockStylePreset, BackgroundColor)
+        extensions: buildTestExtensions({
+            include: [MockStylePreset, BackgroundColor]
+        })
     });
 }
 
@@ -56,7 +58,8 @@ describe('apply background color', () => {
             content: createContent(NodeFactory.text('hello world'))
         });
 
-        editor.chain().selectAll().applyBackgroundColor('green').run();
+        editor.commands.selectAll();
+        editor.commands.applyBackgroundColor('green');
 
         expect(editor.getJSON()).toMatchSnapshot();
     });