@zipify/wysiwyg 2.1.0-builder-modes.1 → 2.1.0-builder-modes.2

package/dist/wysiwyg.mjs

@@ -22161,6 +22161,8 @@ const __vue2_script$p = {
     const pickerRef = ref(null);
     const api = usePickerApi({
       onChange: (color) => {
+        if (!unref(api.isOpened))
+          return false;
         emit("change", color);
         editor.chain().focus().restoreSelection().run();
       },
@@ -23161,7 +23163,7 @@ var render$d = function __render__32() {
       "options": _vm.$options.alignments
     },
     on: {
-      "change": _vm.apply
+      "change": _vm.toggle
     },
     scopedSlots: _vm._u([{
       key: "option",
@@ -23241,16 +23243,20 @@ const __vue2_script$d = {
   },
   setup(_, { emit }) {
     const editor = inject(InjectionTokens$1.EDITOR);
-    const currentValue = editor.commands.getAlignment();
+    const alignment = editor.commands.getAlignment();
+    const currentValue = computed(() => {
+      var _a;
+      return (_a = unref(alignment)) != null ? _a : "none";
+    });
     const isCustomized = editor.commands.isSettingCustomized(TextSettings.ALIGNMENT);
-    function apply2(value) {
-      editor.chain().focus().applyAlignment(value).run();
+    function toggle(value) {
+      editor.chain().focus().toggleAlignment(value).run();
       emit("applied");
     }
     return {
       currentValue,
       isCustomized,
-      apply: apply2
+      toggle
     };
   }
 };
@@ -25548,6 +25554,11 @@ const NodeProcessor = Extension.create({
         }
         return Object.keys(attrs).length ? attrs : null;
       })),
+      removeBlockAttributes: createCommand(({ commands: commands2 }, names) => {
+        for (const type of NodeTypes.blocks) {
+          commands2.resetAttributes(type, names);
+        }
+      }),
       applyMark: createCommand(({ state, commands: commands2 }, name, value, customizer = {}) => {
         const { tr, doc: doc2, schema } = state;
         const { $from, $to } = tr.selection;
@@ -26367,10 +26378,16 @@ const Alignment = Extension.create({
   ],
   addCommands() {
     return {
+      toggleAlignment: createCommand(({ commands: commands2 }, value) => {
+        const currentValue = commands2.getAlignment();
+        const isCurrentValue = unref(currentValue) === value;
+        !isCurrentValue ? commands2.applyAlignment(value) : commands2.removeAlignment();
+      }),
       applyAlignment: createCommand(({ commands: commands2 }, value) => {
         const device = unref(commands2.getDevice());
         commands2.setBlockAttributes(this.name, { [device]: value }, DEFAULTS$1);
       }),
+      removeAlignment: createCommand(({ commands: commands2 }) => commands2.removeBlockAttributes(this.name)),
       getAlignment: createCommand(({ commands: commands2 }) => {
         const attribute = commands2.getBlockAttributes(this.name, DEFAULTS$1);
         const device = commands2.getDevice();

package/example/presets.js

@@ -7,7 +7,7 @@ export const PRESETS = [
             'level': 1
         },
         'desktop': {
-            'alignment': 'left',
+            'alignment': null,
             'line_height': '1.2',
             'font_size': '40px'
         },
@@ -19,12 +19,12 @@ export const PRESETS = [
             'text_decoration': 'none'
         },
         'tablet': {
-            'alignment': 'left',
+            'alignment': null,
             'line_height': '1.2',
             'font_size': '40px'
         },
         'mobile': {
-            'alignment': 'left',
+            'alignment': null,
             'line_height': '1.2',
             'font_size': '28px'
         }
@@ -37,7 +37,7 @@ export const PRESETS = [
             'level': 2
         },
         'desktop': {
-            'alignment': 'left',
+            'alignment': null,
             'line_height': '1.2',
             'font_size': '32px'
         },
@@ -49,12 +49,12 @@ export const PRESETS = [
             'text_decoration': 'none'
         },
         'tablet': {
-            'alignment': 'left',
+            'alignment': null,
             'line_height': '1.2',
             'font_size': '32px'
         },
         'mobile': {
-            'alignment': 'left',
+            'alignment': null,
             'line_height': '1.2',
             'font_size': '24px'
         }
@@ -67,7 +67,7 @@ export const PRESETS = [
             'level': 3
         },
         'desktop': {
-            'alignment': 'left',
+            'alignment': null,
             'line_height': '1.2',
             'font_size': '28px'
         },
@@ -79,12 +79,12 @@ export const PRESETS = [
             'text_decoration': 'none'
         },
         'tablet': {
-            'alignment': 'left',
+            'alignment': null,
             'line_height': '1.2',
             'font_size': '28px'
         },
         'mobile': {
-            'alignment': 'left',
+            'alignment': null,
             'line_height': '1.2',
             'font_size': '20px'
         }
@@ -97,7 +97,7 @@ export const PRESETS = [
             'level': 4
         },
         'desktop': {
-            'alignment': 'left',
+            'alignment': null,
             'line_height': '1.2',
             'font_size': '24px'
         },
@@ -109,12 +109,12 @@ export const PRESETS = [
             'text_decoration': 'none'
         },
         'tablet': {
-            'alignment': 'left',
+            'alignment': null,
             'line_height': '1.2',
             'font_size': '24px'
         },
         'mobile': {
-            'alignment': 'left',
+            'alignment': null,
             'line_height': '1.2',
             'font_size': '18px'
         }
@@ -124,7 +124,7 @@ export const PRESETS = [
         'name': 'Link',
         'hidden': true,
         'desktop': {
-            'alignment': 'left',
+            'alignment': null,
             'line_height': 'inherit',
             'font_size': 'inherit'
         },
@@ -136,12 +136,12 @@ export const PRESETS = [
             'text_decoration': 'underline'
         },
         'tablet': {
-            'alignment': 'left',
+            'alignment': null,
             'line_height': 'inherit',
             'font_size': 'inherit'
         },
         'mobile': {
-            'alignment': 'left',
+            'alignment': null,
             'line_height': 'inherit',
             'font_size': 'inherit'
         }
@@ -150,7 +150,7 @@ export const PRESETS = [
         'id': 'regular-1',
         'name': 'Regular',
         'desktop': {
-            'alignment': 'left',
+            'alignment': null,
             'line_height': '1.43',
             'font_size': '18px'
         },
@@ -162,12 +162,12 @@ export const PRESETS = [
             'text_decoration': 'none'
         },
         'tablet': {
-            'alignment': 'left',
+            'alignment': null,
             'line_height': '1.43',
             'font_size': '18px'
         },
         'mobile': {
-            'alignment': 'left',
+            'alignment': null,
             'line_height': '1.43',
             'font_size': '18px'
         }
@@ -177,7 +177,7 @@ export const PRESETS = [
         'name': 'Regular 2',
         'fallbackClass': 'zpa-regular2',
         'desktop': {
-            'alignment': 'left',
+            'alignment': null,
             'line_height': '1.43',
             'font_size': '16px'
         },
@@ -189,12 +189,12 @@ export const PRESETS = [
             'text_decoration': 'none'
         },
         'tablet': {
-            'alignment': 'left',
+            'alignment': null,
             'line_height': '1.43',
             'font_size': '16px'
         },
         'mobile': {
-            'alignment': 'left',
+            'alignment': null,
             'line_height': '1.43',
             'font_size': '16px'
         }
@@ -204,7 +204,7 @@ export const PRESETS = [
         'name': 'Regular 3',
         'fallbackClass': 'zpa-regular3',
         'desktop': {
-            'alignment': 'left',
+            'alignment': null,
             'line_height': '1.43',
             'font_size': '12px'
         },
@@ -216,12 +216,12 @@ export const PRESETS = [
             'text_decoration': 'none'
         },
         'tablet': {
-            'alignment': 'left',
+            'alignment': null,
             'line_height': '1.43',
             'font_size': '12px'
         },
         'mobile': {
-            'alignment': 'left',
+            'alignment': null,
             'line_height': '1.43',
             'font_size': '12px'
         }

package/lib/components/base/colorPicker/ColorPicker.vue

@@ -23,7 +23,7 @@
 
 <script>
 import { ZipifyColorPicker } from '@zipify/colorpicker';
-import { inject, ref, toRef } from 'vue';
+import { inject, ref, toRef, unref } from 'vue';
 import { outClick } from '../../../directives';
 import { InjectionTokens } from '../../../injectionTokens';
 import { ContextWindow } from '../../../services';
@@ -55,6 +55,8 @@ export default {
 
         const api = usePickerApi({
             onChange: (color) => {
+                if (!unref(api.isOpened)) return false;
+
                 emit('change', color);
                 editor.chain().focus().restoreSelection().run();
             },

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

@@ -1,5 +1,5 @@
 <template>
-    <ButtonToggle :value="currentValue" :options="$options.alignments" @change="apply">
+    <ButtonToggle :value="currentValue" :options="$options.alignments" @change="toggle">
         <template #option="{ isActive, option, activate }">
             <Button
                 class="zw-position--relative"
@@ -24,7 +24,7 @@
 </template>
 
 <script>
-import { inject } from 'vue';
+import { inject, computed, unref } from 'vue';
 import { InjectionTokens } from '../../../injectionTokens';
 import { Alignments, TextSettings } from '../../../enums';
 import { ButtonToggle, Button, Icon } from '../../base';
@@ -64,19 +64,19 @@ export default {
 
     setup(_, { emit }) {
         const editor = inject(InjectionTokens.EDITOR);
-
-        const currentValue = editor.commands.getAlignment();
+        const alignment = editor.commands.getAlignment();
+        const currentValue = computed(() => unref(alignment) ?? 'none');
         const isCustomized = editor.commands.isSettingCustomized(TextSettings.ALIGNMENT);
 
-        function apply(value) {
-            editor.chain().focus().applyAlignment(value).run();
+        function toggle(value) {
+            editor.chain().focus().toggleAlignment(value).run();
             emit('applied');
         }
 
         return {
             currentValue,
             isCustomized,
-            apply
+            toggle
         };
     }
 };

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

@@ -14,7 +14,7 @@ const createEditor = ({ alignment, isSettingCustomized } = {}) => ({
         getAlignment: () => ref(alignment),
         isSettingCustomized: () => ref(isSettingCustomized ?? false),
         focus: jest.fn().mockReturnThis(),
-        applyAlignment: jest.fn().mockReturnThis(),
+        toggleAlignment: jest.fn().mockReturnThis(),
         run: jest.fn()
     },
 
@@ -60,7 +60,7 @@ describe('selection value', () => {
         expect(buttonWrapper.props('value')).toBe(Alignments.RIGHT);
     });
 
-    test('should apply new value', () => {
+    test('should toggle new value', () => {
         const editor = createEditor({ alignment: Alignments.RIGHT });
         const wrapper = createComponent({
             editor,
@@ -76,7 +76,7 @@ describe('selection value', () => {
 
         buttonWrapper.vm.$emit('change', Alignments.CENTER);
 
-        expect(editor.commands.applyAlignment).toHaveBeenCalledWith(Alignments.CENTER);
+        expect(editor.commands.toggleAlignment).toHaveBeenCalledWith(Alignments.CENTER);
     });
 });
 

package/lib/extensions/Alignment.js

@@ -51,12 +51,21 @@ export const Alignment = Extension.create({
 
     addCommands() {
         return {
+            toggleAlignment: createCommand(({ commands }, value) => {
+                const currentValue = commands.getAlignment();
+                const isCurrentValue = unref(currentValue) === value;
+
+                !isCurrentValue ? commands.applyAlignment(value) : commands.removeAlignment();
+            }),
+
             applyAlignment: createCommand(({ commands }, value) => {
                 const device = unref(commands.getDevice());
 
                 commands.setBlockAttributes(this.name, { [device]: value }, DEFAULTS);
             }),
 
+            removeAlignment: createCommand(({ commands }) => commands.removeBlockAttributes(this.name)),
+
             getAlignment: createCommand(({ commands }) => {
                 const attribute = commands.getBlockAttributes(this.name, DEFAULTS);
                 const device = commands.getDevice();

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

@@ -70,8 +70,19 @@ describe('get value', () => {
     });
 });
 
-describe('apply value', () => {
-    test('should change value', () => {
+describe('change value', () => {
+    test('should toggle value', () => {
+        const editor = createEditor({
+            content: createContent({ alignment: null })
+        });
+
+        editor.commands.selectAll();
+        editor.commands.toggleAlignment(Alignments.RIGHT);
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should apply value', () => {
         const editor = createEditor({
             content: createContent({ alignment: null })
         });
@@ -81,6 +92,19 @@ describe('apply value', () => {
 
         expect(editor.getJSON()).toMatchSnapshot();
     });
+
+    test('should remove value', () => {
+        const editor = createEditor({
+            content: createContent({
+                alignment: { desktop: Alignments.CENTER }
+            })
+        });
+
+        editor.commands.selectAll();
+        editor.commands.removeAlignment(TextSettings.ALIGNMENT);
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
 });
 
 describe('rendering', () => {

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

@@ -1,6 +1,50 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`apply value should change value 1`] = `
+exports[`change value should apply value 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "attrs": Object {
+        "alignment": Object {
+          "desktop": "right",
+          "mobile": null,
+          "tablet": null,
+        },
+      },
+      "content": Array [
+        Object {
+          "text": "hello world",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`change value should remove value 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "attrs": Object {
+        "alignment": null,
+      },
+      "content": Array [
+        Object {
+          "text": "hello world",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`change value should toggle value 1`] = `
 Object {
   "content": Array [
     Object {

package/lib/extensions/core/NodeProcessor.js

@@ -37,6 +37,12 @@ export const NodeProcessor = Extension.create({
                 return Object.keys(attrs).length ? attrs : null;
             })),
 
+            removeBlockAttributes: createCommand(({ commands }, names) => {
+                for (const type of NodeTypes.blocks) {
+                    commands.resetAttributes(type, names);
+                }
+            }),
+
             applyMark: createCommand(({ state, commands }, name, value, customizer = {}) => {
                 const { tr, doc, schema } = state;
                 const { $from, $to } = tr.selection;

package/lib/extensions/core/__tests__/NodeProcessor.test.js

@@ -16,6 +16,9 @@ const MockLineHeight = Extension.create({
                 line_height: {
                     isRequired: false,
                     renderHTML: (attrs) => ({ style: `line-height: ${attrs.line_height}` })
+                },
+                alignment: {
+                    isRequired: false
                 }
             }
         }
@@ -138,6 +141,37 @@ describe('block attributes', () => {
         expect(editor.getJSON()).toMatchSnapshot();
     });
 
+    test('should remove some attribute', () => {
+        const editor = createEditor({
+            content: createContent({
+                line_height: { mobile: '1.2' }
+            })
+        });
+
+        editor.commands.selectAll();
+        editor.commands.removeBlockAttributes(TextSettings.LINE_HEIGHT);
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
+    test('should remove a few some attributes', () => {
+        const editor = createEditor({
+            content: createContent({
+                line_height: { mobile: '1.2' },
+                alignment: {
+                    mobile: 'center',
+                    tablet: 'center',
+                    desktop: 'center'
+                }
+            })
+        });
+
+        editor.commands.selectAll();
+        editor.commands.removeBlockAttributes([TextSettings.LINE_HEIGHT, TextSettings.ALIGNMENT]);
+
+        expect(editor.getJSON()).toMatchSnapshot();
+    });
+
     test('should set attributes with defaults', () => {
         const editor = createEditor({
             content: createContent({ line_height: null })