@mekari/pixel3-rich-text-editor 0.1.1 → 0.1.2-dev.0

package/dist/{chunk-TNDDXUVW.mjs → chunk-7BEXEMOE.mjs}

@@ -31,6 +31,12 @@ var richTextEditorProps = {
   suggestions: {
     type: Array,
     default: () => []
+  },
+  validateLink: {
+    type: Function
+  },
+  transformLink: {
+    type: Function
   }
 };
 var RTEStyleProviderProps = {

package/dist/{chunk-7RMCTPMN.mjs → chunk-MKTM47RO.mjs}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-ZRAXSVO5.mjs";
 import {
   RTEStyleProviderProps
-} from "./chunk-TNDDXUVW.mjs";
+} from "./chunk-7BEXEMOE.mjs";
 
 // src/rte-style-provider.tsx
 import { createVNode as _createVNode } from "vue";

package/dist/{chunk-NKNFA3DF.mjs → chunk-XNM3YX37.mjs}

@@ -1,16 +1,16 @@
 import {
   EditorToolbar
-} from "./chunk-3CWKDY4T.mjs";
+} from "./chunk-YE6FEVD4.mjs";
 import {
   MpRTEStyleProvider
-} from "./chunk-7RMCTPMN.mjs";
+} from "./chunk-MKTM47RO.mjs";
 import {
   useRichTextEditor
 } from "./chunk-ZRAXSVO5.mjs";
 import {
   richTextEditorEmits,
   richTextEditorProps
-} from "./chunk-TNDDXUVW.mjs";
+} from "./chunk-7BEXEMOE.mjs";
 import {
   createMentionSuggestion
 } from "./chunk-4KJOYLJI.mjs";
@@ -57,25 +57,40 @@ var MpRichTextEditor = defineComponent({
           return false;
         }
       },
-      extensions: [StarterKit.configure({
-        heading: {
-          levels: [1, 2, 3]
-        }
-      }), Underline, TextAlign.configure({
-        types: ["heading", "paragraph"]
-      }), TextStyle, Color.configure({
-        types: ["textStyle"]
-      }), Highlight.configure({
-        multicolor: true
-      }), Link.configure({
-        openOnClick: false
-      }), Placeholder.configure({
-        placeholder: api.value.placeholder || ""
-      }), CharacterCount.configure({
-        limit: api.value.maxlength
-      }), ...props.suggestions && props.suggestions.length > 0 ? [Mention.configure({
-        suggestion: createMentionSuggestion(() => props.suggestions || [])
-      })] : []],
+      extensions: [
+        StarterKit.configure({
+          heading: {
+            levels: [1, 2, 3]
+          }
+        }),
+        Underline,
+        TextAlign.configure({
+          types: ["heading", "paragraph"]
+        }),
+        TextStyle,
+        Color.configure({
+          types: ["textStyle"]
+        }),
+        Highlight.configure({
+          multicolor: true
+        }),
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        Link.configure({
+          openOnClick: false,
+          ...props.validateLink && {
+            isAllowedUri: props.validateLink
+          }
+        }),
+        Placeholder.configure({
+          placeholder: api.value.placeholder || ""
+        }),
+        CharacterCount.configure({
+          limit: api.value.maxlength
+        }),
+        ...props.suggestions && props.suggestions.length > 0 ? [Mention.configure({
+          suggestion: createMentionSuggestion(() => props.suggestions || [])
+        })] : []
+      ],
       onFocus({
         editor: editor2,
         event
@@ -116,7 +131,9 @@ var MpRichTextEditor = defineComponent({
         }
       }), [_createVNode(EditorToolbar, _mergeProps({
         "editor": editor,
-        "options": api.value.options
+        "options": api.value.options,
+        "validateLink": props.validateLink,
+        "transformLink": props.transformLink
       }, api.value.toolbarProps, toolbarActionHandlers), null), _createVNode(MpRTEStyleProvider, {
         "id": `${api.value.id}-style-provider`
       }, {

package/dist/{chunk-3CWKDY4T.mjs → chunk-YE6FEVD4.mjs}

@@ -1,6 +1,6 @@
 import {
   LinkExtension
-} from "./chunk-H4GW25PU.mjs";
+} from "./chunk-ZO6THAT6.mjs";
 import {
   SingleExtention
 } from "./chunk-25RKPG44.mjs";
@@ -32,11 +32,19 @@ var EditorToolbar = defineComponent({
     },
     options: {
       type: Array
+    },
+    validateLink: {
+      type: Function
+    },
+    transformLink: {
+      type: Function
     }
   },
   setup({
     editor,
-    options
+    options,
+    validateLink,
+    transformLink
   }, {
     emit
   }) {
@@ -174,7 +182,9 @@ var EditorToolbar = defineComponent({
         case "textLink":
           return _createVNode(LinkExtension, {
             "tooltipLabel": tooltipLabel,
-            "editor": editor
+            "editor": editor,
+            "validateLink": validateLink,
+            "transformLink": transformLink
           }, null);
         default:
           return _createVNode(SingleExtention, {

package/dist/{chunk-H4GW25PU.mjs → chunk-ZO6THAT6.mjs}

@@ -7,7 +7,7 @@ import {
 
 // src/extensions/link-extension.tsx
 import { withDirectives as _withDirectives, resolveDirective as _resolveDirective, createVNode as _createVNode, Fragment as _Fragment } from "vue";
-import { defineComponent, ref, onMounted, onBeforeUnmount, nextTick, Teleport } from "vue";
+import { defineComponent, ref, onMounted, onBeforeUnmount, nextTick, Teleport, computed } from "vue";
 import { createPopper } from "@popperjs/core";
 import { css } from "@mekari/pixel3-styled-system/css";
 import { MpInput } from "@mekari/pixel3-input";
@@ -21,11 +21,19 @@ var LinkExtension = defineComponent({
     },
     editor: {
       type: Object
+    },
+    validateLink: {
+      type: Function
+    },
+    transformLink: {
+      type: Function
     }
   },
   setup({
     tooltipLabel,
-    editor
+    editor,
+    validateLink,
+    transformLink
   }) {
     const {
       isNextTheme
@@ -38,6 +46,26 @@ var LinkExtension = defineComponent({
     let popperInstance = null;
     let linkElement = null;
     let lastClickedElement = null;
+    const defaultValidate = /* @__PURE__ */ __name((urlString) => {
+      if (!urlString)
+        return false;
+      return /^(https?:\/\/|mailto:|tel:|\/)/i.test(urlString) || /^[^\s]+\.[^\s]+/.test(urlString);
+    }, "defaultValidate");
+    const isUrlInvalid = computed(() => {
+      if (!url.value || isEditLink.value)
+        return false;
+      let urlToValidate = url.value;
+      if (transformLink) {
+        urlToValidate = transformLink(url.value);
+      }
+      if (validateLink) {
+        return !validateLink(urlToValidate, {
+          defaultValidate,
+          protocols: ["http", "https", "mailto", "tel"]
+        });
+      }
+      return !defaultValidate(urlToValidate);
+    });
     const onClickOutside = /* @__PURE__ */ __name((event) => {
       if (popoverRef.value && !popoverRef.value.contains(event.target) && event.target !== lastClickedElement) {
         onClosePopover();
@@ -107,9 +135,13 @@ var LinkExtension = defineComponent({
     }, "onUnlink");
     const onSetLink = /* @__PURE__ */ __name(() => {
       if (url.value && editor) {
+        let finalUrl = url.value;
+        if (transformLink) {
+          finalUrl = transformLink(url.value);
+        }
         ;
         editor.chain().focus().extendMarkRange("link").setLink({
-          href: url.value
+          href: finalUrl
         }).run();
       }
       onClosePopover();
@@ -140,7 +172,7 @@ var LinkExtension = defineComponent({
         if (link) {
           event.preventDefault();
           linkElement = link;
-          url.value = linkElement.href;
+          url.value = linkElement.getAttribute("href") || "";
           onOpenPopover(linkElement);
         }
       });
@@ -189,6 +221,7 @@ var LinkExtension = defineComponent({
         "onUpdate:modelValue": ($event) => url.value = $event,
         "placeholder": "Insert URL here",
         "isDisabled": isEditLink.value,
+        "isInvalid": isUrlInvalid.value,
         "onKeyup": (event) => {
           if (event.key === "Enter")
             onSetLink();
@@ -199,6 +232,7 @@ var LinkExtension = defineComponent({
         "onClick": onEditLink
       }, null) : _createVNode(MpButton, {
         "leftIcon": "check",
+        "isDisabled": isUrlInvalid.value,
         "onClick": onSetLink
       }, null), isEditLink.value && _createVNode(MpButton, {
         "leftIcon": "newtab",

package/dist/editor-toolbar.d.mts

@@ -12,6 +12,15 @@ declare const EditorToolbar: vue.DefineComponent<{
     options: {
         type: PropType<ToolbarOption[][]>;
     };
+    validateLink: {
+        type: PropType<(url: string, ctx: {
+            defaultValidate: (url: string) => boolean;
+            protocols: string[];
+        }) => boolean>;
+    };
+    transformLink: {
+        type: PropType<(url: string) => string>;
+    };
 }, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("clickImage" | "clickFile" | "clickAudio" | "clickMention" | "clickLocation")[], "clickImage" | "clickFile" | "clickAudio" | "clickMention" | "clickLocation", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
     editor: {
         type: PropType<Editor>;
@@ -19,6 +28,15 @@ declare const EditorToolbar: vue.DefineComponent<{
     options: {
         type: PropType<ToolbarOption[][]>;
     };
+    validateLink: {
+        type: PropType<(url: string, ctx: {
+            defaultValidate: (url: string) => boolean;
+            protocols: string[];
+        }) => boolean>;
+    };
+    transformLink: {
+        type: PropType<(url: string) => string>;
+    };
 }>> & {
     onClickImage?: ((...args: any[]) => any) | undefined;
     onClickFile?: ((...args: any[]) => any) | undefined;

package/dist/editor-toolbar.d.ts

@@ -12,6 +12,15 @@ declare const EditorToolbar: vue.DefineComponent<{
     options: {
         type: PropType<ToolbarOption[][]>;
     };
+    validateLink: {
+        type: PropType<(url: string, ctx: {
+            defaultValidate: (url: string) => boolean;
+            protocols: string[];
+        }) => boolean>;
+    };
+    transformLink: {
+        type: PropType<(url: string) => string>;
+    };
 }, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("clickImage" | "clickFile" | "clickAudio" | "clickMention" | "clickLocation")[], "clickImage" | "clickFile" | "clickAudio" | "clickMention" | "clickLocation", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
     editor: {
         type: PropType<Editor>;
@@ -19,6 +28,15 @@ declare const EditorToolbar: vue.DefineComponent<{
     options: {
         type: PropType<ToolbarOption[][]>;
     };
+    validateLink: {
+        type: PropType<(url: string, ctx: {
+            defaultValidate: (url: string) => boolean;
+            protocols: string[];
+        }) => boolean>;
+    };
+    transformLink: {
+        type: PropType<(url: string) => string>;
+    };
 }>> & {
     onClickImage?: ((...args: any[]) => any) | undefined;
     onClickFile?: ((...args: any[]) => any) | undefined;

package/dist/editor-toolbar.js

@@ -805,11 +805,19 @@ var LinkExtension = (0, import_vue12.defineComponent)({
     },
     editor: {
       type: Object
+    },
+    validateLink: {
+      type: Function
+    },
+    transformLink: {
+      type: Function
     }
   },
   setup({
     tooltipLabel,
-    editor
+    editor,
+    validateLink,
+    transformLink
   }) {
     const {
       isNextTheme
@@ -822,6 +830,26 @@ var LinkExtension = (0, import_vue12.defineComponent)({
     let popperInstance = null;
     let linkElement = null;
     let lastClickedElement = null;
+    const defaultValidate = /* @__PURE__ */ __name((urlString) => {
+      if (!urlString)
+        return false;
+      return /^(https?:\/\/|mailto:|tel:|\/)/i.test(urlString) || /^[^\s]+\.[^\s]+/.test(urlString);
+    }, "defaultValidate");
+    const isUrlInvalid = (0, import_vue12.computed)(() => {
+      if (!url.value || isEditLink.value)
+        return false;
+      let urlToValidate = url.value;
+      if (transformLink) {
+        urlToValidate = transformLink(url.value);
+      }
+      if (validateLink) {
+        return !validateLink(urlToValidate, {
+          defaultValidate,
+          protocols: ["http", "https", "mailto", "tel"]
+        });
+      }
+      return !defaultValidate(urlToValidate);
+    });
     const onClickOutside = /* @__PURE__ */ __name((event) => {
       if (popoverRef.value && !popoverRef.value.contains(event.target) && event.target !== lastClickedElement) {
         onClosePopover();
@@ -891,9 +919,13 @@ var LinkExtension = (0, import_vue12.defineComponent)({
     }, "onUnlink");
     const onSetLink = /* @__PURE__ */ __name(() => {
       if (url.value && editor) {
+        let finalUrl = url.value;
+        if (transformLink) {
+          finalUrl = transformLink(url.value);
+        }
         ;
         editor.chain().focus().extendMarkRange("link").setLink({
-          href: url.value
+          href: finalUrl
         }).run();
       }
       onClosePopover();
@@ -924,7 +956,7 @@ var LinkExtension = (0, import_vue12.defineComponent)({
         if (link) {
           event.preventDefault();
           linkElement = link;
-          url.value = linkElement.href;
+          url.value = linkElement.getAttribute("href") || "";
           onOpenPopover(linkElement);
         }
       });
@@ -973,6 +1005,7 @@ var LinkExtension = (0, import_vue12.defineComponent)({
         "onUpdate:modelValue": ($event) => url.value = $event,
         "placeholder": "Insert URL here",
         "isDisabled": isEditLink.value,
+        "isInvalid": isUrlInvalid.value,
         "onKeyup": (event) => {
           if (event.key === "Enter")
             onSetLink();
@@ -983,6 +1016,7 @@ var LinkExtension = (0, import_vue12.defineComponent)({
         "onClick": onEditLink
       }, null) : (0, import_vue11.createVNode)(import_pixel3_button.MpButton, {
         "leftIcon": "check",
+        "isDisabled": isUrlInvalid.value,
         "onClick": onSetLink
       }, null), isEditLink.value && (0, import_vue11.createVNode)(import_pixel3_button.MpButton, {
         "leftIcon": "newtab",
@@ -1012,11 +1046,19 @@ var EditorToolbar = (0, import_vue14.defineComponent)({
     },
     options: {
       type: Array
+    },
+    validateLink: {
+      type: Function
+    },
+    transformLink: {
+      type: Function
     }
   },
   setup({
     editor,
-    options
+    options,
+    validateLink,
+    transformLink
   }, {
     emit
   }) {
@@ -1154,7 +1196,9 @@ var EditorToolbar = (0, import_vue14.defineComponent)({
         case "textLink":
           return (0, import_vue13.createVNode)(LinkExtension, {
             "tooltipLabel": tooltipLabel,
-            "editor": editor
+            "editor": editor,
+            "validateLink": validateLink,
+            "transformLink": transformLink
           }, null);
         default:
           return (0, import_vue13.createVNode)(SingleExtention, {

package/dist/editor-toolbar.mjs

@@ -1,8 +1,8 @@
 import {
   EditorToolbar
-} from "./chunk-3CWKDY4T.mjs";
+} from "./chunk-YE6FEVD4.mjs";
 import "./chunk-VYCDVS5I.mjs";
-import "./chunk-H4GW25PU.mjs";
+import "./chunk-ZO6THAT6.mjs";
 import "./chunk-25RKPG44.mjs";
 import "./chunk-UBJOZ2IA.mjs";
 import "./chunk-5S2LSGJV.mjs";

package/dist/extensions/index.js

@@ -804,11 +804,19 @@ var LinkExtension = (0, import_vue12.defineComponent)({
     },
     editor: {
       type: Object
+    },
+    validateLink: {
+      type: Function
+    },
+    transformLink: {
+      type: Function
     }
   },
   setup({
     tooltipLabel,
-    editor
+    editor,
+    validateLink,
+    transformLink
   }) {
     const {
       isNextTheme
@@ -821,6 +829,26 @@ var LinkExtension = (0, import_vue12.defineComponent)({
     let popperInstance = null;
     let linkElement = null;
     let lastClickedElement = null;
+    const defaultValidate = /* @__PURE__ */ __name((urlString) => {
+      if (!urlString)
+        return false;
+      return /^(https?:\/\/|mailto:|tel:|\/)/i.test(urlString) || /^[^\s]+\.[^\s]+/.test(urlString);
+    }, "defaultValidate");
+    const isUrlInvalid = (0, import_vue12.computed)(() => {
+      if (!url.value || isEditLink.value)
+        return false;
+      let urlToValidate = url.value;
+      if (transformLink) {
+        urlToValidate = transformLink(url.value);
+      }
+      if (validateLink) {
+        return !validateLink(urlToValidate, {
+          defaultValidate,
+          protocols: ["http", "https", "mailto", "tel"]
+        });
+      }
+      return !defaultValidate(urlToValidate);
+    });
     const onClickOutside = /* @__PURE__ */ __name((event) => {
       if (popoverRef.value && !popoverRef.value.contains(event.target) && event.target !== lastClickedElement) {
         onClosePopover();
@@ -890,9 +918,13 @@ var LinkExtension = (0, import_vue12.defineComponent)({
     }, "onUnlink");
     const onSetLink = /* @__PURE__ */ __name(() => {
       if (url.value && editor) {
+        let finalUrl = url.value;
+        if (transformLink) {
+          finalUrl = transformLink(url.value);
+        }
         ;
         editor.chain().focus().extendMarkRange("link").setLink({
-          href: url.value
+          href: finalUrl
         }).run();
       }
       onClosePopover();
@@ -923,7 +955,7 @@ var LinkExtension = (0, import_vue12.defineComponent)({
         if (link) {
           event.preventDefault();
           linkElement = link;
-          url.value = linkElement.href;
+          url.value = linkElement.getAttribute("href") || "";
           onOpenPopover(linkElement);
         }
       });
@@ -972,6 +1004,7 @@ var LinkExtension = (0, import_vue12.defineComponent)({
         "onUpdate:modelValue": ($event) => url.value = $event,
         "placeholder": "Insert URL here",
         "isDisabled": isEditLink.value,
+        "isInvalid": isUrlInvalid.value,
         "onKeyup": (event) => {
           if (event.key === "Enter")
             onSetLink();
@@ -982,6 +1015,7 @@ var LinkExtension = (0, import_vue12.defineComponent)({
         "onClick": onEditLink
       }, null) : (0, import_vue11.createVNode)(import_pixel3_button.MpButton, {
         "leftIcon": "check",
+        "isDisabled": isUrlInvalid.value,
         "onClick": onSetLink
       }, null), isEditLink.value && (0, import_vue11.createVNode)(import_pixel3_button.MpButton, {
         "leftIcon": "newtab",

package/dist/extensions/index.mjs

@@ -1,7 +1,7 @@
 import "../chunk-VYCDVS5I.mjs";
 import {
   LinkExtension
-} from "../chunk-H4GW25PU.mjs";
+} from "../chunk-ZO6THAT6.mjs";
 import {
   SingleExtention
 } from "../chunk-25RKPG44.mjs";

package/dist/extensions/link-extension.d.mts

@@ -10,6 +10,15 @@ declare const LinkExtension: vue.DefineComponent<{
     editor: {
         type: PropType<Editor>;
     };
+    validateLink: {
+        type: PropType<(url: string, ctx: {
+            defaultValidate: (url: string) => boolean;
+            protocols: string[];
+        }) => boolean>;
+    };
+    transformLink: {
+        type: PropType<(url: string) => string>;
+    };
 }, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
     tooltipLabel: {
         type: StringConstructor;
@@ -17,6 +26,15 @@ declare const LinkExtension: vue.DefineComponent<{
     editor: {
         type: PropType<Editor>;
     };
+    validateLink: {
+        type: PropType<(url: string, ctx: {
+            defaultValidate: (url: string) => boolean;
+            protocols: string[];
+        }) => boolean>;
+    };
+    transformLink: {
+        type: PropType<(url: string) => string>;
+    };
 }>>, {}, {}>;
 
 export { LinkExtension };

package/dist/extensions/link-extension.d.ts

@@ -10,6 +10,15 @@ declare const LinkExtension: vue.DefineComponent<{
     editor: {
         type: PropType<Editor>;
     };
+    validateLink: {
+        type: PropType<(url: string, ctx: {
+            defaultValidate: (url: string) => boolean;
+            protocols: string[];
+        }) => boolean>;
+    };
+    transformLink: {
+        type: PropType<(url: string) => string>;
+    };
 }, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
     tooltipLabel: {
         type: StringConstructor;
@@ -17,6 +26,15 @@ declare const LinkExtension: vue.DefineComponent<{
     editor: {
         type: PropType<Editor>;
     };
+    validateLink: {
+        type: PropType<(url: string, ctx: {
+            defaultValidate: (url: string) => boolean;
+            protocols: string[];
+        }) => boolean>;
+    };
+    transformLink: {
+        type: PropType<(url: string) => string>;
+    };
 }>>, {}, {}>;
 
 export { LinkExtension };