@zipify/wysiwyg 1.0.0-dev.66 → 1.0.0-dev.69

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

@@ -3,6 +3,7 @@
         ref="pickerRef"
         placement="bottom-end"
         :favorite-colors="favoriteColors"
+        :window="window"
         @changeFavoriteColors="updateFavoriteColors"
         v-model="editingColor"
         v-out-click="{ onOutClick: close, isDisabled: !isOpened }"
@@ -24,6 +25,7 @@ import { ZipifyColorPicker } from '@zipify/colorpicker';
 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';
 
@@ -51,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({
@@ -86,7 +86,8 @@ export default {
             close: api.close,
             toggle: api.toggle,
             favoriteColors: favoriteColors.listRef,
-            updateFavoriteColors
+            updateFavoriteColors,
+            window: ContextWindow.window
         };
     }
 };

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/Toolbar.vue

@@ -60,6 +60,7 @@ export default {
     background-color: rgb(var(--zw-color-n15));
     color: rgb(var(--zw-color-n70));
     z-index: 999999;
+    text-align: left;
 }
 
 .zw-toolbar::before,

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/lib/index.js

@@ -1,3 +1,3 @@
 export { default as Wysiwyg } from './Wysiwyg';
 export { NodeFactory } from './services';
-export { NodeTypes } from './enums';
+export { NodeTypes, TextSettings, Alignments } from './enums';

package/lib/services/NodeFactory.js

@@ -65,16 +65,7 @@ export class NodeFactory {
         return { type, attrs };
     }
 
-    static link(attrs) {
-        return {
-            type: 'text',
-            marks: [
-                {
-                    type: 'link',
-                    attrs: { ...attrs }
-                }
-            ],
-            text: attrs.text
-        };
+    static populateAllDevices(value) {
+        return { mobile: value, tablet: value, desktop: value };
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zipify/wysiwyg",
-  "version": "1.0.0-dev.66",
+  "version": "1.0.0-dev.69",
   "description": "Zipify modification of TipTap text editor",
   "main": "dist/wysiwyg.mjs",
   "repository": {
@@ -14,9 +14,9 @@
     "url": "https://github.com/ZipifyApps/ZipifyWysiwyg/issues"
   },
   "scripts": {
-    "lib:pre-build": "npm run lint:js && npm run lint:css && npm run test:unit",
-    "lib:build": "npm run lib:pre-build && vite build --config ./config/vite/lib.config.js",
-    "lib:release": "export $(cat ./.env | xargs) && npm run lib:build && release-it",
+    "lib:build": "vite build --config ./config/vite/lib.config.js",
+    "lib:pre-release": "npm run lint:js && npm run lint:css && npm run test:unit",
+    "lib:release": "export $(cat ./.env | xargs) && npm run lib:pre-release && npm run lib:build && release-it",
     "example:start": "NODE_ENV=development vite serve --config ./config/vite/example.config.js",
     "example:build": "NODE_ENV=production vite build --config ./config/vite/example.config.js",
     "test:unit": "jest .",
@@ -42,8 +42,8 @@
     "simplebar": "^5.3.8"
   },
   "peerDependencies": {
-    "@zipify/colorpicker": "2.*",
-    "vue": "2.7.*"
+    "@zipify/colorpicker": "^2.1",
+    "vue": "^2.7"
   },
   "devDependencies": {
     "@babel/core": "^7.18.9",