@zipify/wysiwyg 2.4.5 → 2.4.7-0

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

@@ -4,18 +4,18 @@
         placement="bottom-end"
         placement-strategy="fixed"
         :favorite-colors="favoriteColors"
-        :window="window"
+        :window="contextWindow"
         @changeFavoriteColors="updateFavoriteColors"
-        v-model="editingColor"
-        v-out-click="{ onOutClick: close, isDisabled: !isOpened }"
+        v-model="api.editingColor"
+        v-out-click="{ onOutClick: api.close, isDisabled: !api.isOpened }"
     >
         <template #activator>
             <slot
                 name="activator"
-                :isOpened="isOpened"
-                :open="open"
-                :close="close"
-                :toggle="toggle"
+                :isOpened="api.isOpened"
+                :open="api.open"
+                :close="api.close"
+                :toggle="api.toggle"
             />
         </template>
     </ZipifyColorPicker>
@@ -23,11 +23,10 @@
 
 <script>
 import { ZipifyColorPicker } from '@zipify/colorpicker';
-import { inject, ref, toRef, unref } from 'vue';
+import { inject, ref, toRef } from 'vue';
 import { outClick } from '../../../directives';
 import { InjectionTokens } from '../../../injectionTokens';
 import { ContextWindow } from '../../../services';
-import { useDeselectionLock } from '../composables';
 import { usePickerApi, usePickerHotkeys } from './composables';
 
 export default {
@@ -55,8 +54,6 @@ export default {
 
         const api = usePickerApi({
             onChange: (color) => {
-                if (!unref(api.isOpened)) return false;
-
                 emit('change', color);
                 editor.chain().focus().restoreSelection().run();
             },
@@ -65,32 +62,22 @@ export default {
             colorRef: toRef(props, 'value'),
             pickerRef
         });
+        const isOpenedRef = toRef(api, 'isOpened');
 
         usePickerHotkeys({
-            isOpenedRef: api.isOpened,
-            onCancel: () => api.cancel(),
-            onApply: () => api.close()
-        });
-
-        useDeselectionLock({
-            hostRef: pickerRef,
-            isActiveRef: api.isOpened
+            isOpenedRef,
+            onCancel: api.cancel,
+            onApply: api.close
         });
 
-        function updateFavoriteColors(colors) {
-            favoriteColors.triggerUpdate(colors);
-        }
+        const updateFavoriteColors = (colors) => favoriteColors.triggerUpdate(colors);
 
         return {
             pickerRef,
-            isOpened: api.isOpened,
-            editingColor: api.editingColor,
-            open: api.open,
-            close: api.close,
-            toggle: api.toggle,
+            api,
             favoriteColors: favoriteColors.listRef,
             updateFavoriteColors,
-            window: ContextWindow.window
+            contextWindow: ContextWindow.window
         };
     }
 };

package/lib/components/base/colorPicker/composables/__tests__/usePickerApi.test.js

@@ -23,7 +23,7 @@ describe('open/close picker', () => {
             colorRef: ref('red')
         });
 
-        expect(toggler.isOpened.value).toBe(true);
+        expect(toggler.isOpened).toBe(true);
     });
 
     test('should return non opened status if picker not rendered yet', () => {
@@ -34,7 +34,7 @@ describe('open/close picker', () => {
             colorRef: ref('red')
         });
 
-        expect(toggler.isOpened.value).toBe(false);
+        expect(toggler.isOpened).toBe(false);
     });
 
     test('should open picker', () => {

package/lib/components/base/colorPicker/composables/usePickerApi.js

@@ -1,4 +1,4 @@
-import { computed } from 'vue';
+import { computed, reactive } from 'vue';
 
 export function usePickerApi({ pickerRef, colorRef, onChange, onClosed, onBeforeOpened }) {
     const isOpened = computed(() => pickerRef.value?.isVisible ?? false);
@@ -19,24 +19,28 @@ export function usePickerApi({ pickerRef, colorRef, onChange, onClosed, onBefore
         isOpened.value ? close() : open();
     }
 
+    function triggerChange(color) {
+        if (isOpened.value) onChange(color);
+    }
+
     function cancel() {
         const color = initialColor ?? colorRef.value;
 
-        onChange(color);
+        triggerChange(color);
         pickerRef.value?.close(color);
     }
 
     const editingColor = computed({
         get: () => colorRef.value,
-        set: (color) => colorRef.value !== color && onChange(color)
+        set: (color) => colorRef.value !== color && triggerChange(color)
     });
 
-    return {
+    return reactive({
         isOpened,
         editingColor,
         open,
         close,
         toggle,
         cancel
-    };
+    });
 }

package/lib/components/base/colorPicker/composables/usePickerHotkeys.js

@@ -4,6 +4,8 @@ import { useActivatedListener } from '../../composables';
 
 export function usePickerHotkeys({ isOpenedRef, onCancel, onApply }) {
     function useHotkey(event, handler) {
+        if (event.target.closest('input')) return;
+
         event.stopImmediatePropagation();
         event.preventDefault();
         handler();

package/lib/extensions/Alignment.js

@@ -59,9 +59,12 @@ export const Alignment = Extension.create({
             }),
 
             applyAlignment: createCommand(({ commands }, value) => {
-                const device = unref(commands.getDevice());
+                // const device = unref(commands.getDevice());
+                //
+                // commands.setBlockAttributes(this.name, { [device]: value }, DEFAULTS);
 
-                commands.setBlockAttributes(this.name, { [device]: value }, DEFAULTS);
+                // Temporary until release BUILDER_MODES
+                commands.setBlockAttributes(this.name, { desktop: value, tablet: value, mobile: value });
             }),
 
             removeAlignment: createCommand(({ commands }) => commands.removeBlockAttributes(this.name)),

package/lib/extensions/FontSize.js

@@ -2,7 +2,6 @@ import { Mark } from '@tiptap/vue-2';
 import { computed, unref } from 'vue';
 import { convertFontSize, createCommand, createKeyboardShortcut, renderMark } from '../utils';
 import { MarkGroups, TextSettings } from '../enums';
-import { AddNodeMarkStep } from './core';
 
 export const FontSize = Mark.create({
     name: TextSettings.FONT_SIZE,
@@ -35,31 +34,12 @@ export const FontSize = Mark.create({
             }),
 
             applyFontSize: createCommand(({ commands }, value) => {
-                const device = unref(commands.getDevice());
+                // const device = unref(commands.getDevice());
 
-                commands.applyMark(this.name, { [device]: value }, {
-                    isAppliedToParent: (parentMark, mark) => {
-                        if (parentMark.type.name !== mark.type.name) return false;
+                // commands.applyMark(this.name, { [device]: value });
 
-                        return parentMark.attrs[device] === mark.attrs[device];
-                    },
-
-                    onAppliedToParent: ({ tr, node, position, mark }) => {
-                        const attrs = { ...mark.attrs, [device]: null };
-                        const canRemove = !Object.values(attrs).some((value) => !!value);
-
-                        if (canRemove) return false;
-
-                        const updated = mark.type.create(attrs);
-
-                        if (node.isText) {
-                            tr.addMark(position, position + node.nodeSize, updated);
-                            return;
-                        }
-
-                        tr.step(new AddNodeMarkStep(position, updated));
-                    }
-                });
+                // Temporary until release BUILDER_MODES
+                commands.applyMark(this.name, { desktop: value, tablet: value, mobile: null });
             }),
 
             increaseFontSize: createCommand(({ commands }) => {

package/lib/extensions/LineHeight.js

@@ -36,7 +36,10 @@ export const LineHeight = Extension.create({
                             const wrapperEl = unref(this.options.wrapperRef);
                             const converted = convertLineHeight(value, element, wrapperEl);
 
-                            return converted ? { desktop: converted, tablet: converted, mobile: null } : null;
+                            // return { desktop: converted, tablet: converted, mobile: converted };
+
+                            // Temporary until release BUILDER_MODES
+                            return { desktop: converted, tablet: converted, mobile: null };
                         },
 
                         renderHTML(attrs) {
@@ -72,9 +75,12 @@ export const LineHeight = Extension.create({
             }),
 
             applyLineHeight: createCommand(({ commands }, value) => {
-                const device = unref(commands.getDevice());
+                // const device = unref(commands.getDevice());
+                //
+                // commands.setBlockAttributes(this.name, { [device]: value }, DEFAULTS);
 
-                commands.setBlockAttributes(this.name, { [device]: value }, DEFAULTS);
+                // Temporary until release BUILDER_MODES
+                commands.setBlockAttributes(this.name, { desktop: value, tablet: value, mobile: null }, DEFAULTS);
             })
         };
     }

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

@@ -7,8 +7,8 @@ Object {
       "attrs": Object {
         "alignment": Object {
           "desktop": "right",
-          "mobile": null,
-          "tablet": null,
+          "mobile": "right",
+          "tablet": "right",
         },
       },
       "content": Array [
@@ -51,8 +51,8 @@ Object {
       "attrs": Object {
         "alignment": Object {
           "desktop": "right",
-          "mobile": null,
-          "tablet": null,
+          "mobile": "right",
+          "tablet": "right",
         },
       },
       "content": Array [

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

@@ -15,7 +15,7 @@ Object {
           "attrs": Object {
             "desktop": "16",
             "mobile": null,
-            "tablet": null,
+            "tablet": "16",
           },
           "type": "font_size",
         },
@@ -42,7 +42,7 @@ Object {
           "attrs": Object {
             "desktop": "13",
             "mobile": null,
-            "tablet": null,
+            "tablet": "13",
           },
           "type": "font_size",
         },
@@ -69,7 +69,7 @@ Object {
           "attrs": Object {
             "desktop": "15",
             "mobile": null,
-            "tablet": null,
+            "tablet": "15",
           },
           "type": "font_size",
         },
@@ -96,7 +96,7 @@ Object {
           "attrs": Object {
             "desktop": "5",
             "mobile": null,
-            "tablet": null,
+            "tablet": "5",
           },
           "type": "font_size",
         },
@@ -123,7 +123,7 @@ Object {
           "attrs": Object {
             "desktop": "20",
             "mobile": null,
-            "tablet": null,
+            "tablet": "20",
           },
           "type": "font_size",
         },

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

@@ -8,7 +8,7 @@ Object {
         "line_height": Object {
           "desktop": "1.41",
           "mobile": null,
-          "tablet": null,
+          "tablet": "1.41",
         },
       },
       "content": Array [

package/lib/services/NodeFactory.js

@@ -136,6 +136,9 @@ export class NodeFactory {
      * @returns {{tablet, desktop, mobile}}
      */
     static populateAllDevices(value) {
-        return { mobile: value, tablet: value, desktop: value };
+        // return { mobile: value, tablet: value, desktop: value };
+
+        // Temporary until release BUILDER_MODES
+        return { mobile: null, tablet: value, desktop: value };
     }
 }

package/lib/services/__tests__/__snapshots__/NodeFactory.test.js.snap

@@ -320,7 +320,7 @@ Object {
 exports[`build node should populate value to all devices 1`] = `
 Object {
   "desktop": "18",
-  "mobile": "18",
+  "mobile": null,
   "tablet": "18",
 }
 `;

package/package.json

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