@zipify/wysiwyg 1.0.0-dev.68 → 1.0.0-dev.70

package/dist/wysiwyg.css

@@ -405,27 +405,27 @@
     color: rgb(var(--zw-color-red));
 }
 
-.zw-checkbox[data-v-2de7f5c1] {
+.zw-checkbox[data-v-15e487f5] {
     display: inline-flex;
     align-items: center;
     position: relative;
     cursor: pointer;
     padding: var(--zw-offset-xxs) var(--zw-offset-xxs) var(--zw-offset-xxs) 0;
 }
-.zw-checkbox__field + .zw-checkbox__indicator[data-v-2de7f5c1] {
+.zw-checkbox__field + .zw-checkbox__indicator[data-v-15e487f5] {
     color: var(--zw-color-n200);
     box-shadow: inset 0 0 0 2px currentColor;
 }
-.zw-checkbox:hover .zw-checkbox__indicator[data-v-2de7f5c1] {
+.zw-checkbox:hover .zw-checkbox__indicator[data-v-15e487f5] {
     box-shadow: inset 0 0 0 2px rgb(var(--zw-color-green));
 }
-.zw-checkbox__field:checked + .zw-checkbox__indicator[data-v-2de7f5c1] {
+.zw-checkbox__field:checked + .zw-checkbox__indicator[data-v-15e487f5] {
     color: rgb(var(--zw-color-green))
 }
-.zw-checkbox .zw-checkbox__field:checked + .zw-checkbox__indicator[data-v-2de7f5c1] {
+.zw-checkbox .zw-checkbox__field:checked + .zw-checkbox__indicator[data-v-15e487f5] {
     background-color: rgb(var(--zw-color-green));
 }
-.zw-checkbox .zw-checkbox__indicator[data-v-2de7f5c1]::after {
+.zw-checkbox .zw-checkbox__indicator[data-v-15e487f5]::after {
     content: "";
     display: block;
     height: 16px;
@@ -437,16 +437,16 @@
     background-size: 16px;
     background-position: center center;
 }
-.zw-checkbox__field:not(:checked) + .zw-checkbox__indicator[data-v-2de7f5c1]::after {
+.zw-checkbox__field:not(:checked) + .zw-checkbox__indicator[data-v-15e487f5]::after {
     transform: scale(0);
 }
-.zw-checkbox__field[data-v-2de7f5c1] {
+.zw-checkbox__field[data-v-15e487f5] {
     position: absolute;
     opacity: 0;
     height: 0;
     width: 0;
 }
-.zw-checkbox__label[data-v-2de7f5c1] {
+.zw-checkbox__label[data-v-15e487f5] {
     font-size: var(--zw-font-size-xs);
 }
 
@@ -620,13 +620,13 @@
     justify-content: flex-end;
 }
 
-.zw-link-modal[data-v-0ca87de5] {
+.zw-link-modal[data-v-28e9497e] {
     width: 266px;
 }
-.zw-link-modal__body[data-v-0ca87de5] {
+.zw-link-modal__body[data-v-28e9497e] {
     padding: var(--zw-offset-sm);
 }
-[data-v-0ca87de5] .zw-link-modal-dropdown__option {
+[data-v-28e9497e] .zw-link-modal-dropdown__option {
     width: 234px;
 }
 

package/dist/wysiwyg.mjs

@@ -19895,7 +19895,7 @@ var render$x = function __render__13() {
       "checked": _vm.value
     },
     on: {
-      "change": _vm.onCheckedChanged
+      "click": _vm.onCheckedChanged
     }
   }), _c("span", {
     staticClass: "zw-checkbox__indicator zw-margin-right--xs"
@@ -19918,10 +19918,8 @@ const __vue2_script$x = {
       default: null
     }
   },
-  setup(_, { emit }) {
-    const onCheckedChanged = (event) => {
-      emit("input", event.target.checked);
-    };
+  setup(props, { emit }) {
+    const onCheckedChanged = () => emit("input", !props.value);
     return { onCheckedChanged };
   }
 };
@@ -19932,7 +19930,7 @@ var __component__$x = /* @__PURE__ */ normalizeComponent(
   staticRenderFns$x,
   false,
   __vue2_injectStyles$x,
-  "2de7f5c1",
+  "15e487f5",
   null,
   null
 );
@@ -20409,30 +20407,35 @@ function __vue2_injectStyles$r(context) {
 const Dropdown = /* @__PURE__ */ function() {
   return __component__$r.exports;
 }();
-function usePickerApi({ pickerRef, initialColorRef, onClosed, onBeforeOpened }) {
-  const editingColor = ref(initialColorRef.value);
+function usePickerApi({ pickerRef, colorRef, onChange, onClosed, onBeforeOpened }) {
   const isOpened = computed(() => {
     var _a, _b;
     return (_b = (_a = pickerRef.value) == null ? void 0 : _a.isVisible) != null ? _b : false;
   });
+  let initialColor;
   function open() {
     onBeforeOpened();
-    editingColor.value = initialColorRef.value;
+    initialColor = colorRef.value;
     pickerRef.value.open(pickerRef.value.$el);
   }
   function close2() {
     var _a;
-    (_a = pickerRef.value) == null ? void 0 : _a.close(editingColor.value);
-    onClosed(editingColor.value);
+    (_a = pickerRef.value) == null ? void 0 : _a.close(colorRef.value);
+    onClosed();
   }
   function toggle() {
     isOpened.value ? close2() : open();
   }
   function cancel() {
     var _a;
-    editingColor.value = initialColorRef.value;
-    (_a = pickerRef.value) == null ? void 0 : _a.close(editingColor.value);
+    const color = initialColor != null ? initialColor : colorRef.value;
+    onChange(color);
+    (_a = pickerRef.value) == null ? void 0 : _a.close(color);
   }
+  const editingColor = computed({
+    get: () => colorRef.value,
+    set: (color) => colorRef.value !== color && onChange(color)
+  });
   return {
     isOpened,
     editingColor,
@@ -20528,17 +20531,14 @@ const __vue2_script$q = {
     const editor = inject(InjectionTokens$1.EDITOR);
     const pickerRef = ref(null);
     const api = usePickerApi({
-      onClosed: (color) => {
-        editor.commands.restoreSelection();
-        if (color !== props.value)
-          emit("change", color);
-      },
-      onBeforeOpened: () => {
-        editor.commands.storeSelection();
-        emit("before-opened");
+      onChange: (color) => {
+        emit("change", color);
+        editor.chain().focus().restoreSelection().run();
       },
-      pickerRef,
-      initialColorRef: toRef(props, "value")
+      onClosed: () => editor.commands.restoreSelection(),
+      onBeforeOpened: () => editor.commands.storeSelection(),
+      colorRef: toRef(props, "value"),
+      pickerRef
     });
     usePickerHotkeys({
       isOpenedRef: api.isOpened,
@@ -22086,12 +22086,27 @@ function useLink() {
   function prepareInitialFields() {
     linkData.value.text = editor.commands.getSelectedText();
     currentDestination.value.id = editor.getAttributes("link").destination || LinkDestinations.URL;
-    destinationHrefs.value[currentDestination.value.id] = editor.getAttributes("link").href || "";
     linkData.value.target = editor.getAttributes("link").target || LinkTargets.SELF;
+    if (editor.getAttributes("link").href) {
+      destinationHrefs.value[currentDestination.value.id] = editor.getAttributes("link").href;
+    }
+  }
+  function resetDestinations() {
+    destinationHrefs.value.block = pageBlocks.value[0].id;
+    destinationHrefs.value.url = "";
+  }
+  function getFormattedHref() {
+    if (currentDestination.value.id === LinkDestinations.URL) {
+      const url = destinationHrefs.value.url;
+      const isRelative = !!url.startsWith("/");
+      const hasProtocol2 = /^https?:\/\/.+$/i.test(url);
+      return isRelative || hasProtocol2 ? url : `https://${url}`;
+    }
+    return destinationHrefs.value[currentDestination.value.id];
   }
   function apply2() {
     editor.chain().focus().applyLink({
-      href: destinationHrefs.value[currentDestination.value.id],
+      href: getFormattedHref(),
       text: linkData.value.text,
       target: linkData.value.target,
       destination: currentDestination.value.id
@@ -22111,6 +22126,7 @@ function useLink() {
     linkData,
     destinationHrefs,
     currentDestination,
+    resetDestinations,
     prepareInitialFields,
     updateTarget,
     updateLink,
@@ -22333,7 +22349,7 @@ const __vue2_script$5 = {
   },
   setup(props, { emit }) {
     const link = toRef(props, "link");
-    const isURLDestination = computed(() => link.value.currentDestination.value.id === "url");
+    const isURLDestination = computed(() => link.value.currentDestination.value.id === LinkDestinations.URL);
     const isTargetBlank = computed(() => link.value.linkData.value.target === LinkTargets.BLANK);
     const changeDestination = (value) => {
       emit("reset-errors");
@@ -22461,14 +22477,16 @@ const __vue2_script$4 = {
     const modalRef = ref(null);
     const editor = inject(InjectionTokens$1.EDITOR);
     const link = useLink();
-    const urlRegExp = /(^(https?:\/\/|\/)(?:www\.|(?!www))?[^\s])/;
+    const urlRegExp = /^(https:\/\/www\.|https:\/\/)?[a-z0-9]+([-.]{1}[a-z0-9]+)*\.[a-z]{2,100}(:[0-9]{1,5})?(\/.*)?$/i;
     const isEmpty = () => {
       return link.linkData.value.text ? false : "Can't be empty";
     };
     const isUrl = () => {
-      if (link.currentDestination.value.id !== "url")
+      if (link.currentDestination.value.id !== LinkDestinations.URL)
         return false;
-      return urlRegExp.test(link.destinationHrefs.value.url) ? false : "Please enter a valid URL";
+      const href = link.destinationHrefs.value.url;
+      const isValidUrl = href.startsWith("/") || urlRegExp.test(href);
+      return isValidUrl ? false : "Please enter a valid URL";
     };
     const nameValidator = useValidator({
       validations: [isEmpty]
@@ -22502,6 +22520,7 @@ const __vue2_script$4 = {
         return;
       link.apply();
       toggler.close();
+      link.resetDestinations();
     };
     const removeLink = () => {
       link.removeLink();
@@ -22529,7 +22548,7 @@ var __component__$4 = /* @__PURE__ */ normalizeComponent(
   staticRenderFns$4,
   false,
   __vue2_injectStyles$4,
-  "0ca87de5",
+  "28e9497e",
   null,
   null
 );

package/lib/components/base/Checkbox.vue

@@ -1,6 +1,6 @@
 <template>
     <label class="zw-checkbox">
-        <input class="zw-checkbox__field" type="checkbox" :checked="value" @change="onCheckedChanged">
+        <input class="zw-checkbox__field" type="checkbox" :checked="value" @click="onCheckedChanged">
         <span class="zw-checkbox__indicator zw-margin-right--xs" />
         <span class="zw-checkbox__label">{{ label }}</span>
     </label>
@@ -23,10 +23,8 @@ export default {
         }
     },
 
-    setup(_, { emit }) {
-        const onCheckedChanged = (event) => {
-            emit('input', event.target.checked);
-        };
+    setup(props, { emit }) {
+        const onCheckedChanged = () => emit('input', !props.value);
 
         return { onCheckedChanged };
     }

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

@@ -53,16 +53,14 @@ export default {
         const pickerRef = ref(null);
 
         const api = usePickerApi({
-            onClosed: (color) => {
-                editor.commands.restoreSelection();
-                if (color !== props.value) emit('change', color);
+            onChange: (color) => {
+                emit('change', color);
+                editor.chain().focus().restoreSelection().run();
             },
-            onBeforeOpened: () => {
-                editor.commands.storeSelection();
-                emit('before-opened');
-            },
-            pickerRef,
-            initialColorRef: toRef(props, 'value')
+            onClosed: () => editor.commands.restoreSelection(),
+            onBeforeOpened: () => editor.commands.storeSelection(),
+            colorRef: toRef(props, 'value'),
+            pickerRef
         });
 
         usePickerHotkeys({

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

@@ -20,7 +20,7 @@ describe('open/close picker', () => {
             onClosed: jest.fn(),
             onBeforeOpened: jest.fn(),
             pickerRef: createPickerRef({ isOpened: true }),
-            initialColorRef: ref('red')
+            colorRef: ref('red')
         });
 
         expect(toggler.isOpened.value).toBe(true);
@@ -31,7 +31,7 @@ describe('open/close picker', () => {
             onClosed: jest.fn(),
             onBeforeOpened: jest.fn(),
             pickerRef: ref(null),
-            initialColorRef: ref('red')
+            colorRef: ref('red')
         });
 
         expect(toggler.isOpened.value).toBe(false);
@@ -43,7 +43,7 @@ describe('open/close picker', () => {
             onClosed: jest.fn(),
             onBeforeOpened: jest.fn(),
             pickerRef,
-            initialColorRef: ref('red')
+            colorRef: ref('red')
         });
 
         toggler.open();
@@ -57,7 +57,7 @@ describe('open/close picker', () => {
             onClosed: jest.fn(),
             onBeforeOpened: jest.fn(),
             pickerRef,
-            initialColorRef: ref('red')
+            colorRef: ref('red')
         });
 
         toggler.toggle();
@@ -71,7 +71,7 @@ describe('open/close picker', () => {
             onClosed: jest.fn(),
             onBeforeOpened: jest.fn(),
             pickerRef,
-            initialColorRef: ref('red')
+            colorRef: ref('red')
         });
 
         toggler.close();

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

@@ -1,18 +1,18 @@
-import { computed, ref } from 'vue';
+import { computed } from 'vue';
 
-export function usePickerApi({ pickerRef, initialColorRef, onClosed, onBeforeOpened }) {
-    const editingColor = ref(initialColorRef.value);
+export function usePickerApi({ pickerRef, colorRef, onChange, onClosed, onBeforeOpened }) {
     const isOpened = computed(() => pickerRef.value?.isVisible ?? false);
+    let initialColor;
 
     function open() {
         onBeforeOpened();
-        editingColor.value = initialColorRef.value;
+        initialColor = colorRef.value;
         pickerRef.value.open(pickerRef.value.$el);
     }
 
     function close() {
-        pickerRef.value?.close(editingColor.value);
-        onClosed(editingColor.value);
+        pickerRef.value?.close(colorRef.value);
+        onClosed();
     }
 
     function toggle() {
@@ -20,10 +20,17 @@ export function usePickerApi({ pickerRef, initialColorRef, onClosed, onBeforeOpe
     }
 
     function cancel() {
-        editingColor.value = initialColorRef.value;
-        pickerRef.value?.close(editingColor.value);
+        const color = initialColor ?? colorRef.value;
+
+        onChange(color);
+        pickerRef.value?.close(color);
     }
 
+    const editingColor = computed({
+        get: () => colorRef.value,
+        set: (color) => colorRef.value !== color && onChange(color)
+    });
+
     return {
         isOpened,
         editingColor,

package/lib/components/toolbar/controls/link/LinkControl.vue

@@ -32,6 +32,7 @@
 
 <script>
 import { computed, ref, inject } from 'vue';
+import { LinkDestinations } from '../../../../enums';
 import { InjectionTokens } from '../../../../injectionTokens';
 import { tooltip } from '../../../../directives';
 import { useValidator } from '../../../base/composables';
@@ -65,15 +66,18 @@ export default {
         const editor = inject(InjectionTokens.EDITOR);
 
         const link = useLink();
-        const urlRegExp = /(^(https?:\/\/|\/)(?:www\.|(?!www))?[^\s])/;
+        const urlRegExp = /^(https:\/\/www\.|https:\/\/)?[a-z0-9]+([-.]{1}[a-z0-9]+)*\.[a-z]{2,100}(:[0-9]{1,5})?(\/.*)?$/i;
 
         const isEmpty = () => {
             return link.linkData.value.text ? false : 'Can\'t be empty';
         };
         const isUrl = () => {
-            if (link.currentDestination.value.id !== 'url') return false;
+            if (link.currentDestination.value.id !== LinkDestinations.URL) return false;
 
-            return urlRegExp.test(link.destinationHrefs.value.url) ? false : 'Please enter a valid URL';
+            const href = link.destinationHrefs.value.url;
+            const isValidUrl = href.startsWith('/') || urlRegExp.test(href);
+
+            return isValidUrl ? false : 'Please enter a valid URL';
         };
 
         const nameValidator = useValidator({
@@ -116,6 +120,7 @@ export default {
 
             link.apply();
             toggler.close();
+            link.resetDestinations();
         };
 
         const removeLink = () => {

package/lib/components/toolbar/controls/link/composables/__tests__/__snapshots__/useLink.test.js.snap

@@ -1,5 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`actions with link should reset destination 1`] = `
+Object {
+  "block": 1,
+  "url": "",
+}
+`;
+
 exports[`init link should prepare initial fields 1`] = `
 Object {
   "block": 1,

package/lib/components/toolbar/controls/link/composables/__tests__/useLink.test.js

@@ -89,7 +89,7 @@ describe('actions with link', () => {
         link.apply();
 
         expect(link.editor.commands.applyLink).toHaveBeenCalledWith({
-            destination: 'url',
+            destination: LinkDestinations.URL,
             href: '/world',
             target: LinkTargets.SELF,
             text: 'hello'
@@ -111,4 +111,62 @@ describe('actions with link', () => {
 
         expect(link.linkData.value.target).toBe(LinkTargets.BLANK);
     });
+
+    test('should reset destination', () => {
+        const link = useComposable();
+
+        link.resetDestinations();
+
+        expect(link.destinationHrefs.value).toMatchSnapshot();
+    });
+});
+
+describe('format link', () => {
+    test('should format absolute link without href', () => {
+        const link = useComposable();
+
+        link.updateText('hello');
+        link.updateLink('world.com');
+
+        link.apply();
+
+        expect(link.editor.commands.applyLink).toHaveBeenCalledWith({
+            destination: LinkDestinations.URL,
+            href: 'https://world.com',
+            target: LinkTargets.SELF,
+            text: 'hello'
+        });
+    });
+
+    test('should format absolute link with href', () => {
+        const link = useComposable();
+
+        link.updateText('hello');
+        link.updateLink('https://world.com');
+
+        link.apply();
+
+        expect(link.editor.commands.applyLink).toHaveBeenCalledWith({
+            destination: LinkDestinations.URL,
+            href: 'https://world.com',
+            target: LinkTargets.SELF,
+            text: 'hello'
+        });
+    });
+
+    test('should format relative link', () => {
+        const link = useComposable();
+
+        link.updateText('hello');
+        link.updateLink('/world/new');
+
+        link.apply();
+
+        expect(link.editor.commands.applyLink).toHaveBeenCalledWith({
+            destination: LinkDestinations.URL,
+            href: '/world/new',
+            target: LinkTargets.SELF,
+            text: 'hello'
+        });
+    });
 });

package/lib/components/toolbar/controls/link/composables/useLink.js

@@ -17,8 +17,28 @@ export function useLink() {
     function prepareInitialFields() {
         linkData.value.text = editor.commands.getSelectedText();
         currentDestination.value.id = editor.getAttributes('link').destination || LinkDestinations.URL;
-        destinationHrefs.value[currentDestination.value.id] = editor.getAttributes('link').href || '';
         linkData.value.target = editor.getAttributes('link').target || LinkTargets.SELF;
+
+        if (editor.getAttributes('link').href) {
+            destinationHrefs.value[currentDestination.value.id] = editor.getAttributes('link').href;
+        }
+    }
+
+    function resetDestinations() {
+        destinationHrefs.value.block = pageBlocks.value[0].id;
+        destinationHrefs.value.url = '';
+    }
+
+    function getFormattedHref() {
+        if (currentDestination.value.id === LinkDestinations.URL) {
+            const url = destinationHrefs.value.url;
+            const isRelative = !!url.startsWith('/');
+            const hasProtocol = /^https?:\/\/.+$/i.test(url);
+
+            return  isRelative || hasProtocol ? url : `https://${url}`;
+        }
+
+        return destinationHrefs.value[currentDestination.value.id];
     }
 
     function apply() {
@@ -26,7 +46,7 @@ export function useLink() {
             .chain()
             .focus()
             .applyLink({
-                href: destinationHrefs.value[currentDestination.value.id],
+                href: getFormattedHref(),
                 text: linkData.value.text,
                 target: linkData.value.target,
                 destination: currentDestination.value.id
@@ -51,6 +71,7 @@ export function useLink() {
         linkData,
         destinationHrefs,
         currentDestination,
+        resetDestinations,
         prepareInitialFields,
         updateTarget,
         updateLink,

package/lib/components/toolbar/controls/link/destination/LinkControlDestination.vue

@@ -75,7 +75,7 @@ export default {
 
     setup(props, { emit }) {
         const link = toRef(props, 'link');
-        const isURLDestination = computed(() => link.value.currentDestination.value.id === 'url');
+        const isURLDestination = computed(() => link.value.currentDestination.value.id === LinkDestinations.URL);
         const isTargetBlank = computed(() => link.value.linkData.value.target === LinkTargets.BLANK);
 
         const changeDestination = (value) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zipify/wysiwyg",
-  "version": "1.0.0-dev.68",
+  "version": "1.0.0-dev.70",
   "description": "Zipify modification of TipTap text editor",
   "main": "dist/wysiwyg.mjs",
   "repository": {