@zipify/wysiwyg 2.4.1 → 2.4.3

package/dist/wysiwyg.css

@@ -632,17 +632,17 @@
     color: rgb(var(--zw-color-white));
 }
 
-.zw-link-modal[data-v-3db89308] {
+.zw-link-modal[data-v-eea2f92a] {
     width: 266px;
 }
-.zw-link-modal__body[data-v-3db89308] {
+.zw-link-modal__body[data-v-eea2f92a] {
     padding: var(--zw-offset-sm);
 }
-.zw-link-modal__actions[data-v-3db89308] {
+.zw-link-modal__actions[data-v-eea2f92a] {
     display: flex;
     justify-content: flex-end;
 }
-[data-v-3db89308] .zw-link-modal-dropdown__option {
+[data-v-eea2f92a] .zw-link-modal-dropdown__option {
     width: 234px;
 }
 

package/dist/wysiwyg.mjs

@@ -26,7 +26,7 @@ var __privateMethod = (obj, member, method) => {
   __accessCheck(obj, member, "access private method");
   return method;
 };
-var _domParser, _parser, _NodeFilter, NodeFilter_get, _Node, Node_get, _removeComments, removeComments_fn, _normalizeRootTags, normalizeRootTags_fn, _createNodeIterator, createNodeIterator_fn, _iterateNodes, iterateNodes_fn, _runIterator, runIterator_fn, _removeEmptyNodes, removeEmptyNodes_fn, _normalizeListItems, normalizeListItems_fn, _isBlockNode, isBlockNode_fn, _isRootNode, isRootNode_fn, _assignElementProperties, assignElementProperties_fn, _removeStyleProperties, removeStyleProperties_fn, _normalizeBreakLines, normalizeBreakLines_fn, _normalizeBlockTextDecoration, normalizeBlockTextDecoration_fn, _moveTextDecorationToChildren, moveTextDecorationToChildren_fn, _parseTextDecoration, parseTextDecoration_fn, _normalizeBlockBackgroundColor, normalizeBlockBackgroundColor_fn, _moveBackgroundColorToChildren, moveBackgroundColorToChildren_fn, _wrapTextNode, wrapTextNode_fn, _iterateNodes2, iterateNodes_fn2, _iterateChildNodes, iterateChildNodes_fn, _bubbleMarks, bubbleMarks_fn, _canBubbleMark, canBubbleMark_fn, _includesMark, includesMark_fn, _includesMarkType, includesMarkType_fn, _removeMark, removeMark_fn, _addMark, addMark_fn, _findMarkIndexByType, findMarkIndexByType_fn, _buildHtml, buildHtml_fn, _buildJson, buildJson_fn, _textBlock, textBlock_fn, _normalizeTextBlockArgs, normalizeTextBlockArgs_fn, _buildDecorations, buildDecorations_fn;
+var _domParser, _parser, _NodeFilter, NodeFilter_get, _Node, Node_get, _removeComments, removeComments_fn, _normalizeRootTags, normalizeRootTags_fn, _createNodeIterator, createNodeIterator_fn, _iterateNodes, iterateNodes_fn, _runIterator, runIterator_fn, _removeEmptyNodes, removeEmptyNodes_fn, _normalizeListItems, normalizeListItems_fn, _isBlockNode, isBlockNode_fn, _isRootNode, isRootNode_fn, _assignElementProperties, assignElementProperties_fn, _removeStyleProperties, removeStyleProperties_fn, _normalizeBreakLines, normalizeBreakLines_fn, _normalizeBlockTextDecoration, normalizeBlockTextDecoration_fn, _moveTextDecorationToChildren, moveTextDecorationToChildren_fn, _parseTextDecoration, parseTextDecoration_fn, _normalizeBlockBackgroundColor, normalizeBlockBackgroundColor_fn, _moveBackgroundColorToChildren, moveBackgroundColorToChildren_fn, _wrapTextNode, wrapTextNode_fn, _iterateNodes2, iterateNodes_fn2, _iterateChildNodes, iterateChildNodes_fn, _bubbleMarks, bubbleMarks_fn, _canBubbleMark, canBubbleMark_fn, _includesMark, includesMark_fn, _includesMarkType, includesMarkType_fn, _removeMark, removeMark_fn, _addMark, addMark_fn, _findMarkIndexByType, findMarkIndexByType_fn, _buildHtml, buildHtml_fn, _buildJson, buildJson_fn, _textBlock, textBlock_fn, _normalizeTextBlockArgs, normalizeTextBlockArgs_fn, _buildDecorations, buildDecorations_fn, _getWeights, getWeights_fn;
 import { computed, ref, watch, inject, onUnmounted, nextTick, provide, onMounted, toRef, unref, reactive } from "vue";
 import { ColorModel, ZipifyColorPicker } from "@zipify/colorpicker";
 function OrderedMap(content) {
@@ -23703,6 +23703,12 @@ function __vue2_injectStyles$9(context) {
 const RemoveFormatControl = /* @__PURE__ */ function() {
   return __component__$9.exports;
 }();
+const RegExps = {
+  URL: /^(https:\/\/www\.|https:\/\/)?[a-z0-9]+([-.]{1}[a-z0-9]+)*\.[a-z]{2,100}(:[0-9]{1,5})?(\/.*)?$/i,
+  HTTPS_PROTOCOL: /^https?:\/\/.+$/i,
+  MAILTO_PROTOCOL: /^mailto:.+$/,
+  TEL_PROTOCOL: /^tel:.+$/
+};
 var render$8 = function __render__37() {
   var _vm = this;
   var _h = _vm.$createElement;
@@ -23785,9 +23791,13 @@ function useLink() {
   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}`;
+      const isTelOrMail = RegExps.TEL_PROTOCOL.test(url) || RegExps.MAILTO_PROTOCOL.test(url);
+      if (isTelOrMail)
+        return url;
+      if (url.startsWith("/"))
+        return url;
+      const hasProtocol2 = RegExps.HTTPS_PROTOCOL.test(url);
+      return hasProtocol2 ? url : `https://${url}`;
     }
     return destinationHrefs.value[currentDestination.value.id];
   }
@@ -24185,22 +24195,26 @@ const __vue2_script$4 = {
     const modalRef = ref(null);
     const editor = inject(InjectionTokens$1.EDITOR);
     const link = useLink();
-    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 = () => {
+    const isValidUrl = () => {
       if (link.currentDestination.value.id !== LinkDestinations.URL)
         return false;
       const href = link.destinationHrefs.value.url;
-      const isValidUrl = href.startsWith("/") || urlRegExp.test(href);
-      return isValidUrl ? false : "Please enter a valid URL";
+      const isTelOrMail = RegExps.TEL_PROTOCOL.test(href) || RegExps.MAILTO_PROTOCOL.test(href);
+      if (isTelOrMail)
+        return false;
+      if (href.startsWith("/"))
+        return false;
+      const isUrl = RegExps.URL.test(href);
+      return isUrl ? false : "Please enter a valid URL";
     };
     const nameValidator = useValidator({
       validations: [isEmpty]
     });
     const urlValidator = useValidator({
-      validations: [isUrl]
+      validations: [isValidUrl]
     });
     const resetErrors = () => {
       nameValidator.reset();
@@ -24257,7 +24271,7 @@ var __component__$4 = /* @__PURE__ */ normalizeComponent(
   staticRenderFns$4,
   false,
   __vue2_injectStyles$4,
-  "3db89308",
+  "eea2f92a",
   null,
   null
 );
@@ -25022,9 +25036,13 @@ const FontStyle = Mark.create({
         });
       }),
       isItalicAvailable: createCommand(({ commands: commands2 }) => {
-        const font = commands2.getFont();
-        const fontWeight = commands2.getFontWeight();
-        return computed(() => unref(font).isItalicSupported(unref(fontWeight)));
+        const fontRef = commands2.getFont();
+        const fontWeightRef = commands2.getFontWeight();
+        return computed(() => {
+          const font = unref(fontRef);
+          const weight = unref(fontWeightRef);
+          return font.isItalicSupported(weight) && !font.isWeightItalicOnly(weight);
+        });
       }),
       getDefaultFontStyle: createCommand(({ commands: commands2 }) => {
         const preset = commands2.getPreset();
@@ -27808,19 +27826,21 @@ function buildExtensions(options) {
 }
 class Font {
   constructor({ name, category, styles }) {
+    __privateAdd(this, _getWeights);
     this.name = name;
     this.category = category;
     this.styles = styles;
-  }
-  get weights() {
-    return this.styles.filter((style2) => !style2.endsWith("i"));
+    this.weights = __privateMethod(this, _getWeights, getWeights_fn).call(this);
   }
   isWeightSupported(weight) {
-    return this.styles.includes(weight);
+    return this.weights.includes(weight);
   }
   isItalicSupported(weight) {
     return this.styles.includes(`${weight}i`);
   }
+  isWeightItalicOnly(weight) {
+    return this.isItalicSupported(weight) && !this.styles.includes(weight);
+  }
   findClosestWeight(searchedWeight) {
     const weights = this.weights.map((weight) => parseInt(weight));
     let closestWeight;
@@ -27835,6 +27855,11 @@ class Font {
     return String(closestWeight);
   }
 }
+_getWeights = new WeakSet();
+getWeights_fn = function() {
+  const weights = this.styles.map((style2) => style2.replace("i", ""));
+  return Array.from(new Set(weights));
+};
 var render = function __render__45() {
   var _vm = this;
   var _h = _vm.$createElement;

package/example/fonts.js

@@ -2,13 +2,6 @@ export const FONTS = [
     {
         'name': 'Merriweather',
         'styles': [
-            '300',
-            '300i',
-            '400',
-            '400i',
-            '700',
-            '700i',
-            '900',
             '900i'
         ],
         'category': 'Serif'

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

@@ -42,6 +42,7 @@
 import { computed, ref, inject, unref } from 'vue';
 import { LinkDestinations, TextSettings } from '../../../../enums';
 import { InjectionTokens } from '../../../../injectionTokens';
+import { RegExps } from '../../../../regExps';
 import { tooltip } from '../../../../directives';
 import { useValidator } from '../../../base/composables';
 import { Button, Icon, Modal, TextField, useModalToggler } from '../../../base';
@@ -72,18 +73,23 @@ export default {
         const editor = inject(InjectionTokens.EDITOR);
 
         const link = useLink();
-        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 = () => {
+
+        const isValidUrl = () => {
             if (link.currentDestination.value.id !== LinkDestinations.URL) return false;
 
             const href = link.destinationHrefs.value.url;
-            const isValidUrl = href.startsWith('/') || urlRegExp.test(href);
+            const isTelOrMail = RegExps.TEL_PROTOCOL.test(href) || RegExps.MAILTO_PROTOCOL.test(href);
+
+            if (isTelOrMail) return false;
+            if (href.startsWith('/')) return false;
+
+            const isUrl = RegExps.URL.test(href);
 
-            return isValidUrl ? false : 'Please enter a valid URL';
+            return isUrl ? false : 'Please enter a valid URL';
         };
 
         const nameValidator = useValidator({
@@ -91,7 +97,7 @@ export default {
         });
 
         const urlValidator = useValidator({
-            validations: [isUrl]
+            validations: [isValidUrl]
         });
 
         const resetErrors = () => {

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

@@ -169,4 +169,36 @@ describe('format link', () => {
             text: 'hello'
         });
     });
+
+    test('should format telephone link', () => {
+        const link = useComposable();
+
+        link.updateText('hello');
+        link.updateLink('tel:0123456789');
+
+        link.apply();
+
+        expect(link.editor.commands.applyLink).toHaveBeenCalledWith({
+            destination: LinkDestinations.URL,
+            href: 'tel:0123456789',
+            target: LinkTargets.SELF,
+            text: 'hello'
+        });
+    });
+
+    test('should format mail link', () => {
+        const link = useComposable();
+
+        link.updateText('hello');
+        link.updateLink('mailto:example@gmail.com');
+
+        link.apply();
+
+        expect(link.editor.commands.applyLink).toHaveBeenCalledWith({
+            destination: LinkDestinations.URL,
+            href: 'mailto:example@gmail.com',
+            target: LinkTargets.SELF,
+            text: 'hello'
+        });
+    });
 });

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

@@ -1,6 +1,7 @@
 import { ref, inject } from 'vue';
 import { LinkTargets, LinkDestinations, TextSettings } from '../../../../../enums';
 import { InjectionTokens } from '../../../../../injectionTokens';
+import { RegExps } from '../../../../../regExps';
 
 export function useLink() {
     const editor = inject(InjectionTokens.EDITOR);
@@ -34,10 +35,14 @@ export function useLink() {
     function getFormattedHref() {
         if (currentDestination.value.id === LinkDestinations.URL) {
             const url = destinationHrefs.value.url;
-            const isRelative = !!url.startsWith('/');
-            const hasProtocol = /^https?:\/\/.+$/i.test(url);
+            const isTelOrMail = RegExps.TEL_PROTOCOL.test(url) || RegExps.MAILTO_PROTOCOL.test(url);
 
-            return isRelative || hasProtocol ? url : `https://${url}`;
+            if (isTelOrMail) return url;
+            if (url.startsWith('/')) return url;
+
+            const hasProtocol = RegExps.HTTPS_PROTOCOL.test(url);
+
+            return hasProtocol ? url : `https://${url}`;
         }
 
         return destinationHrefs.value[currentDestination.value.id];

package/lib/extensions/FontStyle.js

@@ -21,10 +21,15 @@ export const FontStyle = Mark.create({
             }),
 
             isItalicAvailable: createCommand(({ commands }) => {
-                const font = commands.getFont();
-                const fontWeight = commands.getFontWeight();
+                const fontRef = commands.getFont();
+                const fontWeightRef = commands.getFontWeight();
 
-                return computed(() => unref(font).isItalicSupported(unref(fontWeight)));
+                return computed(() => {
+                    const font = unref(fontRef);
+                    const weight = unref(fontWeightRef);
+
+                    return font.isItalicSupported(weight) && !font.isWeightItalicOnly(weight);
+                });
             }),
 
             getDefaultFontStyle: createCommand(({ commands }) => {

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

@@ -88,7 +88,9 @@ describe('get font family', () => {
             content: createContent(NodeFactory.text('hello world'))
         });
 
-        expect(editor.commands.findFontByName('Bungee')).toEqual({ name: 'Bungee', styles: ['400'] });
+        expect(editor.commands.findFontByName('Bungee')).toEqual(
+            expect.objectContaining({ name: 'Bungee' })
+        );
     });
 
     test('should get font model from selection', () => {

package/lib/models/Font.js

@@ -3,20 +3,27 @@ export class Font {
         this.name = name;
         this.category = category;
         this.styles = styles;
+        this.weights = this.#getWeights();
     }
 
-    get weights() {
-        return this.styles.filter((style) => !style.endsWith('i'));
+    #getWeights() {
+        const weights = this.styles.map((style) => style.replace('i', ''));
+
+        return Array.from(new Set(weights));
     }
 
     isWeightSupported(weight) {
-        return this.styles.includes(weight);
+        return this.weights.includes(weight);
     }
 
     isItalicSupported(weight) {
         return this.styles.includes(`${weight}i`);
     }
 
+    isWeightItalicOnly(weight) {
+        return this.isItalicSupported(weight) && !this.styles.includes(weight);
+    }
+
     findClosestWeight(searchedWeight) {
         const weights = this.weights.map((weight) => parseInt(weight));
 

package/lib/models/__tests__/Font.test.js

@@ -9,6 +9,12 @@ describe('weights', () => {
         expect(font.weights).toEqual(['400', '700']);
     });
 
+    test('should display italic only style', () => {
+        const font = new Font({ styles: ['700i'] });
+
+        expect(font.weights).toEqual(['700']);
+    });
+
     test('should find closest font weight', () => {
         const font = new Font({ styles: ['400', '700'] });
         const weight = font.findClosestWeight('500');
@@ -41,7 +47,7 @@ describe('style checks', () => {
     test('should detect if weight not supported', () => {
         const font = new Font({ styles: ['400', '700i'] });
 
-        expect(font.isWeightSupported('700')).toBe(false);
+        expect(font.isWeightSupported('800')).toBe(false);
     });
 
     test('should detect if italic supported', () => {
@@ -55,4 +61,16 @@ describe('style checks', () => {
 
         expect(font.isItalicSupported('700')).toBe(false);
     });
+
+    test('should detect italic only weight', () => {
+        const font = new Font({ styles: ['400i'] });
+
+        expect(font.isItalicSupported('400')).toBe(true);
+    });
+
+    test('should detect non italic only weight', () => {
+        const font = new Font({ styles: ['400i', '400'] });
+
+        expect(font.isItalicSupported('400')).toBe(true);
+    });
 });

package/lib/regExps.js

@@ -0,0 +1,6 @@
+export const RegExps = {
+    URL: /^(https:\/\/www\.|https:\/\/)?[a-z0-9]+([-.]{1}[a-z0-9]+)*\.[a-z]{2,100}(:[0-9]{1,5})?(\/.*)?$/i,
+    HTTPS_PROTOCOL: /^https?:\/\/.+$/i,
+    MAILTO_PROTOCOL: /^mailto:.+$/,
+    TEL_PROTOCOL: /^tel:.+$/
+};

package/package.json

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