@zipify/wysiwyg 1.3.0-0 → 2.0.0-1

package/example/ExampleApp.vue

@@ -103,8 +103,10 @@ export default {
 
             if (content) {
                 sessionStorage.setItem('wswg-data', content);
-                window.location.reload();
+            } else {
+                sessionStorage.removeItem('wswg-data');
             }
+            window.location.reload();
         }
 
         document.addEventListener('click', (event) => {

package/lib/__tests__/utils/buildTestExtensions.js

@@ -0,0 +1,14 @@
+import { Mark } from '@tiptap/vue-2';
+import { buildCoreExtensions } from '../../extensions/core';
+
+// 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',
+    renderHTML: () => []
+});
+
+export function buildTestExtensions({ include } = {}) {
+    return buildCoreExtensions().concat(SettingMark, include || []);
+}

package/lib/__tests__/utils/index.js

@@ -1,3 +1,4 @@
 export { waitAsyncOperation } from './waitAsyncOperation';
 export { withComponentContext } from './withComponentContext';
 export { setReadonlyProperty } from './setReadonlyProperty';
+export { buildTestExtensions } from './buildTestExtensions';

package/lib/components/base/Button.vue

@@ -135,11 +135,4 @@ export default {
     color: rgb(var(--zw-color-white));
     background-color: rgb(var(--zw-color-n5));
 }
-
-.zw-button__customized-indicator {
-    display: inline-block !important;
-    position: absolute;
-    top: calc(0px - var(--zw-offset-xxs));
-    right: 2px;
-}
 </style>

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

@@ -1,6 +1,6 @@
 <template>
     <div class="zw-dropdown" ref="dropdownRef">
-        <DropdownActivator :color="color" :is-customized="isCustomized">
+        <DropdownActivator :color="color">
             <template #default="attrs">
                 <slot name="activator" v-bind="attrs" />
             </template>
@@ -60,12 +60,6 @@ export default {
             type: String,
             required: false,
             default: 'none'
-        },
-
-        isCustomized: {
-            type: Boolean,
-            required: false,
-            default: false
         }
     },
 

package/lib/components/base/dropdown/DropdownActivator.vue

@@ -12,14 +12,6 @@
                     {{ activeOptionTitle }}
                 </span>
 
-                <Icon
-                    v-if="isCustomized"
-                    class="zw-dropdown__customized-indicator"
-                    name="indicator"
-                    size="9px"
-                    data-test-selector="customizedIndicator"
-                />
-
                 <Icon
                     class="zw-dropdown__activator-arrow"
                     name="arrow"
@@ -55,12 +47,6 @@ export default {
             type: String,
             required: false,
             default: 'none'
-        },
-
-        isCustomized: {
-            type: Boolean,
-            required: false,
-            default: false
         }
     },
 
@@ -91,6 +77,10 @@ export default {
     width: 100%;
 }
 
+.zw-dropdown__activator-title {
+    margin-right: var(--zw-offset-xs);
+}
+
 .zw-dropdown__activator-arrow {
     margin-left: auto;
 }
@@ -104,9 +94,4 @@ 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

@@ -4,10 +4,6 @@ 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()
@@ -17,12 +13,8 @@ const createActiveOptionManager = ({ activeOption } = {}) => ({
     activeOption: ref(activeOption ?? { id: 'test' })
 });
 
-function createComponent({ toggler, isCustomized, activeOptionManager } = {}) {
+function createComponent({ toggler, activeOptionManager } = {}) {
     return shallowMount(DropdownActivator, {
-        propsData: {
-            isCustomized: ref(isCustomized ?? false)
-        },
-
         provide: {
             [InjectionTokens.TOGGLER]: toggler ?? createToggler(),
             [InjectionTokens.ACTIVE_MANAGER]: activeOptionManager ?? createActiveOptionManager()
@@ -48,20 +40,6 @@ 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

@@ -2,20 +2,12 @@
     <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"
-                />
                 <Icon :name="`alignment-${option.id}`" size="28px" auto-color />
             </Button>
         </template>
@@ -25,7 +17,7 @@
 <script>
 import { inject } 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';
 
@@ -65,7 +57,6 @@ 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();
@@ -74,7 +65,6 @@ export default {
 
         return {
             currentValue,
-            isCustomized,
             apply
         };
     }

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,14 +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"
-                />
             </Button>
         </template>
     </ColorPicker>
@@ -28,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',
@@ -47,13 +37,10 @@ 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

@@ -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('marks', 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,11 @@ 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
         };
     }
@@ -52,6 +47,6 @@ export default {
 
 <style scoped>
 .zw-font-size-control {
-    width: 72px;
+    width: 64px;
 }
 </style>

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

@@ -1,9 +1,7 @@
 <template>
     <Dropdown
-        class="zw-font-weight-control"
         :options="options"
         :value="currentValue"
-        :is-customized="isCustomized"
         @change="apply"
         v-tooltip="{ text: 'Font Weight', hotkey: 'Mod B' }"
     />
@@ -14,7 +12,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',
@@ -32,24 +29,15 @@ 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

@@ -1,6 +1,5 @@
 <template>
     <Button
-        class="zw-position--relative"
         skin="toolbar"
         icon
         :active="currentValue"
@@ -9,14 +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"
-        />
     </Button>
 </template>
 
@@ -25,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',
@@ -43,15 +33,12 @@ 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

@@ -1,7 +1,6 @@
 <template>
     <div class="zw-position--relative" ref="wrapperRef">
         <Button
-            class="zw-position--relative"
             icon
             skin="toolbar"
             :active="isOpened"
@@ -9,14 +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"
-            />
         </Button>
 
         <Modal class="zw-line-height-control__modal" ref="modalRef" :toggler="toggler">
@@ -53,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',
@@ -76,17 +66,13 @@ 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/StylePresetControl.vue

@@ -68,7 +68,7 @@ export default {
                 .applyPreset(value)
                 .storeSelection()
                 .expandSelectionToBlock()
-                .unsetMarks(CLEAR_MARKS)
+                .removeMarks(CLEAR_MARKS)
                 .restoreSelection()
                 .run();
         };

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

@@ -11,7 +11,7 @@
 </template>
 
 <script>
-import { computed, inject } from 'vue';
+import { inject } from 'vue';
 import { Button, Icon } from '../../base';
 import { InjectionTokens } from '../../../injectionTokens';
 import { tooltip } from '../../../directives';
@@ -31,7 +31,7 @@ export default {
     setup() {
         const editor = inject(InjectionTokens.EDITOR);
 
-        const currentValue = computed(() => editor.isActive('superscript'));
+        const currentValue = editor.commands.isSuperscript();
         const apply = () => editor.chain().focus().toggleSuperscript().run();
 
         return {

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

@@ -1,6 +1,5 @@
 <template>
     <Button
-        class="zw-position--relative"
         skin="toolbar"
         icon
         :active="currentValue"
@@ -8,14 +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"
-        />
     </Button>
 </template>
 
@@ -41,13 +32,10 @@ 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(),
         applyAlignment: jest.fn().mockReturnThis(),
         run: jest.fn()
@@ -23,18 +18,11 @@ const createEditor = ({ alignment, isSettingCustomized } = {}) => ({
     }
 });
 
-function createComponent({ editor, slotParams }) {
+function createComponent({ editor }) {
     return shallowMount(AlignmentControl, {
         stubs: {
             ButtonToggle: {
-                render() {
-                    const children = this.$scopedSlots.option({
-                        ...slotParams,
-                        activate: jest.fn()
-                    });
-
-                    return h('div', null, children);
-                },
+                render: () => h('div'),
                 props: ['value']
             }
         },
@@ -45,16 +33,7 @@ function createComponent({ editor, slotParams }) {
 describe('selection value', () => {
     test('should render value from selection', () => {
         const editor = createEditor({ alignment: Alignments.RIGHT });
-        const wrapper = createComponent({
-            editor,
-            slotParams: {
-                option: {
-                    id: Alignments.RIGHT,
-                    tooltip: { text: 'Align Right', hotkey: 'Mod Shift R' }
-                },
-                isActive: true
-            }
-        });
+        const wrapper = createComponent({ editor });
         const buttonWrapper = wrapper.findComponent(ButtonToggle);
 
         expect(buttonWrapper.props('value')).toBe(Alignments.RIGHT);
@@ -62,16 +41,7 @@ describe('selection value', () => {
 
     test('should apply new value', () => {
         const editor = createEditor({ alignment: Alignments.RIGHT });
-        const wrapper = createComponent({
-            editor,
-            slotParams: {
-                option: {
-                    id: Alignments.RIGHT,
-                    tooltip: { text: 'Align Right', hotkey: 'Mod Shift R' }
-                },
-                isActive: true
-            }
-        });
+        const wrapper = createComponent({ editor });
         const buttonWrapper = wrapper.findComponent(ButtonToggle);
 
         buttonWrapper.vm.$emit('change', Alignments.CENTER);
@@ -79,40 +49,3 @@ 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,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()