@docs.plus/extension-hyperlink 1.3.7 → 1.3.11

package/README.md

@@ -5,7 +5,7 @@
 [![License](https://img.shields.io/npm/l/@docs.plus/extension-hyperlink.svg)](https://www.npmjs.com/package/@docs.plus/extension-hyperlink)
 
 
-The Link extension adds support for `<a>` tags to the editor. The extension is headless too, there is no actual UI to add, modify or delete links. The usage example below uses the native JavaScript prompt to show you how that could work.
+The Link extension adds support for `<a>` tags to the editor. The extension is headless too, there is no actual <u>**UI**</u> to add, modify or delete links. The usage example below uses the native JavaScript prompt to show you how that could work.
 
 In a real world application, you would probably add a more sophisticated user interface.
 
@@ -92,17 +92,17 @@ Hyperlink.configure({
 })
 ````
 
-### Modals
+### DialogBoxs
 
-The modals configuration option lets you incorporate an interactive user interface similar to Google Docs for setting and previewing hyperlinks. This provides users with a more intuitive and interactive experience;
+The DialogBox configuration option lets you incorporate an interactive user interface similar to Google Docs for **setting** and **previewing** hyperlinks. This provides users with a more intuitive and interactive experience;
 - [Dive into the code](https://github.com/HMarzban/extension-hyperlink/blob/4f37ffa18237f10d76c316844b1c2ab20b751fe9/packages/nextjs/src/components/Tiptap.tsx#L21-L28)
 - [Demo](https://github.com/HMarzban/extension-hyperlink#test-drive-with-our-demo-)
 
 <details>
-<summary>The `previewHyperlinkModal` function</summary>
+<summary>The `previewHyperlinkDialogBox` function</summary>
 
 ```ts
-type HyperlinkModalOptions = {
+type HyperlinkDialogBoxOptions = {
   editor: Editor;
   validate?: (url: string) => boolean;
   view: EditorView;
@@ -112,9 +112,9 @@ type HyperlinkModalOptions = {
   tippy: Tooltip;
 };
 
-const previewHyperlink(options: HyperlinkModalOptions): HTMLElement {
+const previewHyperlink(options: HyperlinkDialogBoxOptions): HTMLElement {
   const href = options.link.href;
-  const hyperlinkLinkModal = document.createElement("div");
+  const hyperlinkLinkDialogBox = document.createElement("div");
 
   const hrefTitle = document.createElement("a");
   hrefTitle.setAttribute("target", "_blank");
@@ -122,9 +122,9 @@ const previewHyperlink(options: HyperlinkModalOptions): HTMLElement {
   hrefTitle.setAttribute("href", href);
   hrefTitle.innerText = href;
 
-  hyperlinkLinkModal.append(hrefTitle);
+  hyperlinkLinkDialogBox.append(hrefTitle);
 
-  return hyperlinkLinkModal;
+  return hyperlinkLinkDialogBox;
 }
 ```
 
@@ -134,7 +134,7 @@ const previewHyperlink(options: HyperlinkModalOptions): HTMLElement {
 <summary>The `setHyperlinks` function</summary>
 
 ```ts
-type setHyperlinkModalOptions = {
+type setHyperlinkDialogOptions = {
   editor: Editor;
   validate?: (url: string) => boolean;
   extentionName: string;
@@ -144,18 +144,18 @@ type setHyperlinkModalOptions = {
 let tooltip: Tooltip = undefined;
 
 
-const setHyperlink(options: setHyperlinkModalOptions): void {
+const setHyperlink(options: setHyperlinkDialogOptions): void {
   // Create the tooltip instance
   if (!tooltip) tooltip = new Tooltip({ ...options, view: options.editor.view });
 
   // Initialize the tooltip
   let { tippyModal } = tooltip.init();
 
-  const hyperlinkLinkModal = document.createElement("div");
+  const hyperlinkLinkDialog = document.createElement("div");
   const buttonsWrapper = document.createElement("div");
   const inputsWrapper = document.createElement("div");
 
-  hyperlinkLinkModal.classList.add("hyperlinkLinkModal");
+  hyperlinkLinkDialog.classList.add("hyperlinkLinkDialog");
 
   buttonsWrapper.classList.add("buttonsWrapper");
   inputsWrapper.classList.add("inputsWrapper");
@@ -174,10 +174,10 @@ const setHyperlink(options: setHyperlinkModalOptions): void {
   buttonsWrapper.append(button);
   form.append(inputsWrapper, buttonsWrapper);
 
-  hyperlinkLinkModal.append(form);
+  hyperlinkLinkDialog.append(form);
 
   tippyModal.innerHTML = "";
-  tippyModal.append(hyperlinkLinkModal);
+  tippyModal.append(hyperlinkLinkDialog);
 
     // event listenr for submit button
   form.addEventListener("submit", (event) => {
@@ -197,17 +197,25 @@ const setHyperlink(options: setHyperlinkModalOptions): void {
 </details>
 
 ````ts
+import {
+  Hyperlink,
+  previewHyperlink,
+  setHyperlink
+} from "@docs.plus/extension-hyperlink";
+
 Hyperlink.configure({
-  modals: {
+  dialogBoxs: {
     previewHyperlink: (data) => {
-      return previewHyperlinkModal(data);
+      return previewHyperlink(data);
     },
     setHyperlink: (data) => {
-      return setHyperlinks(data);
+      return setHyperlink(data);
     },
   },
 })
 ````
+> Note: The `previewHyperlink` and `setHyperlink` dialogs are prebuilt dialog boxes. You can use them or create your own dialog boxes. To learn how to create your own dialog boxes, please check the [source code](https://github.com/HMarzban/extension-hyperlink/tree/main/packages/extension-hyperlink/src/dialogBoxs)
+
 
 ### Removing and overriding existing html attributes
 
@@ -227,8 +235,6 @@ Hyperlink.configure({
 })
 ````
 
-
-
 ### validate
 
 A function that validates every autolinked link. If it exists, it will be called with the link href as argument. If it returns `false`, the link will be removed.
@@ -249,11 +255,12 @@ Hyperlink.configure({
 These commands allow you to edit the text and href value of a hyperlink.
 
 ```js
-this.editor.commands.editHyperLinkText('New Text')
-this.editor.commands.editHyperLinkHref('https://new-url.com')
+this.editor.commands.editHyperLinkText('New Text');
+this.editor.commands.editHyperLinkHref('https://new-url.com');
 this.editor.commands.editHyperlink({
-  newText: 'New Text', newURL: 'https://new-url.com'
-})
+  newText: 'New Text',
+  newURL: 'https://new-url.com'
+});
 ```
 
 ### setHyperlink()
@@ -261,9 +268,16 @@ this.editor.commands.editHyperlink({
 Links the selected text.
 
 ````js
-this.editor.commands.setHyperlink({ href: '<https://example.com>' })
-this.editor.commands.setHyperlink({ href: '<https://example.com>', target: '_blank' })
-this.editor.commands.unsetHyperlink()
+this.editor.commands.setHyperlink({
+  href: '<https://example.com>'
+});
+
+this.editor.commands.setHyperlink({
+  href: '<https://example.com>',
+  target: '_blank'
+});
+
+this.editor.commands.unsetHyperlink();
 ````
 
 ### unsetHyperlink()
@@ -271,7 +285,7 @@ this.editor.commands.unsetHyperlink()
 Removes a Hyperlink.
 
 ````js
-this.editor.commands.unsetHyperlink()
+this.editor.commands.unsetHyperlink();
 ````
 
 ## Keyboard shortcuts

package/dist/dialogBoxs/editeHyperlink.d.ts

@@ -0,0 +1,13 @@
+import { Editor } from "@tiptap/core";
+import { EditorView } from "@tiptap/pm/view";
+import Tooltip from "../helpers/tippyHelper";
+type EditHyperlinkModalOptions = {
+    editor: Editor;
+    validate?: (url: string) => boolean;
+    view: EditorView;
+    link: HTMLAnchorElement;
+    hyperlinkLinkModal: HTMLElement;
+    tippy: Tooltip;
+};
+export declare const editeHyperlinkHandler: (options: EditHyperlinkModalOptions) => void;
+export {};

package/dist/dialogBoxs/icons.d.ts

@@ -0,0 +1,9 @@
+interface IconProps {
+    size?: number;
+    fill?: string;
+}
+export declare const Copy: ({ size, fill }?: IconProps) => string;
+export declare const LinkSlash: ({ size, fill, }?: IconProps) => string;
+export declare const Pencil: ({ size, fill, }?: IconProps) => string;
+export declare const AngleUp: ({ size, fill, }?: IconProps) => string;
+export {};

package/dist/dialogBoxs/previewHyperlink.d.ts

@@ -0,0 +1,14 @@
+import { Editor } from "@tiptap/core";
+import { EditorView } from "@tiptap/pm/view";
+import Tooltip from "../helpers/tippyHelper";
+type HyperlinkModalOptions = {
+    editor: Editor;
+    validate?: (url: string) => boolean;
+    view: EditorView;
+    link: HTMLAnchorElement;
+    node?: any;
+    nodePos: number;
+    tippy: Tooltip;
+};
+export declare function previewHyperlink(options: HyperlinkModalOptions): HTMLElement;
+export {};

package/dist/dialogBoxs/setHyperlink.d.ts

@@ -0,0 +1,9 @@
+import { Editor } from "@tiptap/core";
+type setHyperlinkModalOptions = {
+    editor: Editor;
+    validate?: (url: string) => boolean;
+    extentionName: string;
+    attributes: Record<string, any>;
+};
+export declare function setHyperlink(options: setHyperlinkModalOptions): void;
+export {};

package/dist/helpers/clickHandler.d.ts

@@ -7,10 +7,7 @@ type ClickHandlerOptions = {
     editor: Editor;
     validate?: (url: string) => boolean;
     view: EditorView;
-    modals: {
-        previewHyperlink?: ((options: any) => HTMLElement) | null;
-        setHyperlink?: ((options: any) => HTMLElement) | null;
-    };
+    dialogBox?: ((options: any) => void | HTMLElement) | null;
 };
 export default function clickHandler(options: ClickHandlerOptions): Plugin;
 export {};

package/dist/hyperlink.d.ts

@@ -25,13 +25,13 @@ export interface HyperlinkOptions {
      */
     HTMLAttributes: Record<string, any>;
     /**
-     * A list of modals to be rendered.
+     * A list of dialogBoxs to be rendered.
      * @default null
      * @example
      */
-    modals: {
-        previewHyperlink?: ((options: any) => HTMLElement) | null;
-        setHyperlink?: ((options: any) => HTMLElement) | null;
+    dialogBoxs: {
+        previewHyperlink?: ((options: any) => void | HTMLElement) | null;
+        setHyperlink?: ((options: any) => void | HTMLElement) | null;
     };
     /**
      * A validation function that modifies link verification for the auto linker.

package/dist/index.cjs

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var core = require('@tiptap/core');
 var linkifyjs = require('linkifyjs');
 var state = require('@tiptap/pm/state');
@@ -229,8 +227,8 @@ function clickHandler(options) {
                 // Extract href and target attributes from the link element or the state
                 const href = (_a = link === null || link === void 0 ? void 0 : link.href) !== null && _a !== void 0 ? _a : attrs.href;
                 const target = (_b = link === null || link === void 0 ? void 0 : link.target) !== null && _b !== void 0 ? _b : attrs.target;
-                // If there is no previewHyperlink modal provided, then open the link in new window
-                if (!options.modals.previewHyperlink) {
+                // If there is no previewHyperlink dialogBox provided, then open the link in new window
+                if (!options.dialogBox) {
                     if (link && href) {
                         window.open(href, target);
                     }
@@ -240,21 +238,21 @@ function clickHandler(options) {
                 if (!(link === null || link === void 0 ? void 0 : link.href))
                     return tooltip.hide();
                 // Create a preview of the hyperlink
-                const hyperlinkPreview = options.modals.previewHyperlink({
+                const hyperlinkPreview = options.dialogBox({
                     link,
                     nodePos,
                     tippy: tooltip,
                     ...options,
                 });
-                // If there is no hyperlink preview, hide the modal
+                // If there is no hyperlink preview, hide the dialogBox
                 if (!hyperlinkPreview)
                     return tooltip.hide();
-                // Empty the modal and append the hyperlink preview box
+                // Empty the dialogBox and append the hyperlink preview box
                 while (tippyModal.firstChild) {
                     tippyModal.removeChild(tippyModal.firstChild);
                 }
                 tippyModal.append(hyperlinkPreview);
-                // Update the modal position
+                // Update the dialogBox position
                 tooltip.update(options.view);
                 return false;
             },
@@ -362,7 +360,7 @@ const Hyperlink = core.Mark.create({
                 rel: "noopener noreferrer nofollow",
                 class: null,
             },
-            modals: {
+            dialogBoxs: {
                 previewHyperlink: null,
                 setHyperlink: null,
             },
@@ -391,14 +389,14 @@ const Hyperlink = core.Mark.create({
     addCommands() {
         return {
             setHyperlink: (attributes) => ({ editor, chain }) => {
-                if (!this.options.modals.setHyperlink) {
+                if (!this.options.dialogBoxs.setHyperlink) {
                     return chain()
                         .setMark(this.name, attributes)
                         .setMeta("preventAutohyperlink", true)
                         .run();
                 }
                 else {
-                    this.options.modals.setHyperlink({
+                    this.options.dialogBoxs.setHyperlink({
                         editor,
                         validate: this.options.validate,
                         extentionName: this.name,
@@ -476,7 +474,7 @@ const Hyperlink = core.Mark.create({
                 editor: this.editor,
                 validate: this.options.validate,
                 view: this.editor.view,
-                modals: this.options.modals,
+                dialogBox: this.options.dialogBoxs.previewHyperlink,
             }));
         }
         if (this.options.hyperlinkOnPaste) {
@@ -489,7 +487,225 @@ const Hyperlink = core.Mark.create({
     },
 });
 
+const editeHyperlinkHandler = (options) => {
+    var _a;
+    // Create the form
+    const form = document.createElement("form");
+    const buttonsWrapper = document.createElement("div");
+    const inputsWrapper = document.createElement("div");
+    const linkTextInput = document.createElement("input");
+    const hrefInput = document.createElement("input");
+    const applyButton = document.createElement("button");
+    buttonsWrapper.classList.add("buttonsWrapper");
+    inputsWrapper.classList.add("inputsWrapper");
+    linkTextInput.type = "text";
+    linkTextInput.value = ((_a = options.link) === null || _a === void 0 ? void 0 : _a.innerText) || "";
+    linkTextInput.placeholder = "Enter link text";
+    hrefInput.type = "text";
+    hrefInput.value = options.link.href;
+    hrefInput.placeholder = "Enter href";
+    applyButton.type = "submit";
+    applyButton.classList.add("btn_applyModal");
+    applyButton.innerText = "Apply";
+    buttonsWrapper.append(applyButton);
+    inputsWrapper.append(linkTextInput, hrefInput);
+    // Append to form
+    form.append(inputsWrapper, buttonsWrapper);
+    options.hyperlinkLinkModal.innerHTML = "";
+    options.hyperlinkLinkModal.appendChild(form);
+    hrefInput.addEventListener("keydown", () => {
+        hrefInput.style.outlineColor = " #dadce0";
+    });
+    hrefInput.addEventListener("keydown", () => {
+        linkTextInput.style.outlineColor = " #dadce0";
+    });
+    // Handle form submission
+    form.addEventListener("submit", (e) => {
+        e.preventDefault();
+        const newLinkText = linkTextInput.value;
+        const newHref = hrefInput.value;
+        if (!newHref || !newLinkText) {
+            if (!newHref)
+                hrefInput.style.outlineColor = "red";
+            if (!newLinkText)
+                linkTextInput.style.outlineColor = "red";
+            return;
+        }
+        const sanitizeURL = linkifyjs.find(newHref)
+            .filter((link) => link.isLink)
+            .filter((link) => {
+            if (options.validate) {
+                return options.validate(link.value);
+            }
+            return true;
+        })
+            .at(0);
+        if (!(sanitizeURL === null || sanitizeURL === void 0 ? void 0 : sanitizeURL.href)) {
+            hrefInput.style.outlineColor = "red";
+            return;
+        }
+        options.editor.chain().focus().extendMarkRange("hyperlink").editHyperlink({
+            newURL: newHref,
+            newText: newLinkText,
+        });
+        options.tippy.hide();
+    });
+    // Show tooltip
+    options.tippy.update(options.view, {
+        arrow: tippy.roundArrow,
+    });
+    setTimeout(() => linkTextInput.focus());
+};
+
+// prettier-ignore
+const Copy = ({ size = 24, fill = 'rgb(104, 81, 255)' } = {}) => {
+    return `
+        <svg fill=${fill} viewBox="0 0 24 24" width=${size} xmlns="http://www.w3.org/2000/svg">
+            <path d="m13 20a5.006 5.006 0 0 0 5-5v-8.757a3.972 3.972 0 0 0 -1.172-2.829l-2.242-2.242a3.972 3.972 0 0 0 -2.829-1.172h-4.757a5.006 5.006 0 0 0 -5 5v10a5.006 5.006 0 0 0 5 5zm-9-5v-10a3 3 0 0 1 3-3s4.919.014 5 .024v1.976a2 2 0 0 0 2 2h1.976c.01.081.024 9 .024 9a3 3 0 0 1 -3 3h-6a3 3 0 0 1 -3-3zm18-7v11a5.006 5.006 0 0 1 -5 5h-9a1 1 0 0 1 0-2h9a3 3 0 0 0 3-3v-11a1 1 0 0 1 2 0z"/>
+        </svg>
+    `;
+};
+const LinkSlash = ({ size = 24, fill = "rgb(104, 81, 255)", } = {}) => {
+    return `
+        <svg fill=${fill} viewBox="0 0 24 24" width=${size} xmlns="http://www.w3.org/2000/svg">
+            <path d="M11.953,17.993c-1.557-.074-3.021-.722-4.121-1.823-.23-.23-.446-.482-.641-.748-.325-.446-.227-1.072,.22-1.397,.446-.325,1.071-.227,1.397,.219,.129,.178,.274,.349,.437,.511,.749,.75,1.744,1.19,2.802,1.24,.552,.026,.979,.495,.952,1.046-.025,.536-.468,.953-.998,.953h-.048ZM1.831,13.331C.65,14.511,0,16.081,0,17.75c0,1.669,.65,3.239,1.831,4.419,1.18,1.181,2.749,1.831,4.419,1.831s3.239-.65,4.419-1.831l1.058-1.058c.391-.391,.391-1.023,0-1.414s-1.023-.391-1.414,0l-1.058,1.058c-.803,.803-1.87,1.245-3.005,1.245s-2.202-.442-3.005-1.245-1.245-1.87-1.245-3.005,.442-2.203,1.245-3.005l3.037-3.038c.391-.391,.391-1.024,0-1.414-.391-.391-1.023-.391-1.414,0l-3.037,3.038ZM.293,1.707L22.293,23.707c.195,.195,.451,.293,.707,.293s.512-.098,.707-.293c.391-.391,.391-1.023,0-1.414l-6.581-6.581,5.043-5.043c1.181-1.18,1.831-2.75,1.831-4.419,0-1.669-.65-3.239-1.831-4.419C20.989,.65,19.42,0,17.75,0s-3.239,.65-4.419,1.831l-1.058,1.058c-.391,.391-.391,1.023,0,1.414s1.023,.391,1.414,0l1.058-1.058c.803-.803,1.87-1.245,3.005-1.245s2.202,.442,3.005,1.245,1.245,1.87,1.245,3.005-.442,2.203-1.245,3.005l-5.043,5.043-5.852-5.852c1.612-.808,3.575-.52,4.894,.798,.162,.162,.308,.333,.437,.511,.196,.269,.501,.411,.81,.411,.204,0,.41-.063,.588-.192,.446-.325,.545-.951,.22-1.397-.194-.266-.41-.518-.641-.748-2.095-2.095-5.297-2.408-7.76-.835L1.707,.293c-.391-.391-1.023-.391-1.414,0s-.391,1.023,0,1.414Z"/>
+        </svg>
+    `;
+};
+const Pencil = ({ size = 24, fill = "rgb(104, 81, 255)", } = {}) => {
+    return `
+        <svg fill=${fill} viewBox="0 0 24 24" width=${size} xmlns="http://www.w3.org/2000/svg">
+            <path d="M22.853,1.148a3.626,3.626,0,0,0-5.124,0L1.465,17.412A4.968,4.968,0,0,0,0,20.947V23a1,1,0,0,0,1,1H3.053a4.966,4.966,0,0,0,3.535-1.464L22.853,6.271A3.626,3.626,0,0,0,22.853,1.148ZM5.174,21.122A3.022,3.022,0,0,1,3.053,22H2V20.947a2.98,2.98,0,0,1,.879-2.121L15.222,6.483l2.3,2.3ZM21.438,4.857,18.932,7.364l-2.3-2.295,2.507-2.507a1.623,1.623,0,1,1,2.295,2.3Z"/>
+        </svg>
+    `;
+};
+
+function previewHyperlink(options) {
+    const href = options.link.href;
+    const hyperlinkLinkModal = document.createElement("div");
+    const removeButton = document.createElement("button");
+    const copyButton = document.createElement("button");
+    const editButton = document.createElement("button");
+    const newBubble = document.createElement("div");
+    newBubble.classList.add("metadata");
+    const hrefTitle = document.createElement("a");
+    hrefTitle.setAttribute("target", "_blank");
+    hrefTitle.setAttribute("rel", "noreferrer");
+    hrefTitle.setAttribute("href", href);
+    hrefTitle.innerText = href;
+    newBubble.append(hrefTitle);
+    fetch("/api/metadata", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ url: href }),
+    })
+        .then((response) => response.json())
+        .then((data) => {
+        // Create a new bubble with the title
+        hrefTitle.setAttribute("href", href);
+        hrefTitle.innerText = data.title || data["og:title"] || href;
+        newBubble.replaceChildren(hrefTitle);
+        // Create an image element if image exists in metadata
+        if (data.icon || data.image || data["og:image"]) {
+            const img = document.createElement("img");
+            img.src = data.icon || data.image || data["og:image"];
+            img.alt = data.title || data["og:title"] || "hyperlink image";
+            newBubble.appendChild(img);
+        }
+    })
+        .catch((error) => {
+        console.error("Error fetching metadata:", error);
+    });
+    hyperlinkLinkModal.classList.add("hyperlinkLinkModal");
+    removeButton.classList.add("remove");
+    removeButton.innerHTML = LinkSlash();
+    editButton.classList.add("edit");
+    editButton.innerHTML = Pencil();
+    copyButton.classList.add("copy");
+    copyButton.innerHTML = Copy();
+    removeButton.addEventListener("click", () => {
+        options.tippy.hide();
+        return options.editor.chain().focus().unsetHyperlink().run();
+    });
+    editButton.addEventListener("click", () => editeHyperlinkHandler({ ...options, hyperlinkLinkModal }));
+    copyButton.addEventListener("click", () => {
+        options.tippy.hide();
+        navigator.clipboard.writeText(href);
+    });
+    hyperlinkLinkModal.append(newBubble, copyButton, editButton, removeButton);
+    return hyperlinkLinkModal;
+}
+
+let tooltip = undefined;
+function setHyperlink(options) {
+    // Create the tooltip instance
+    if (!tooltip)
+        tooltip = new Tooltip({ ...options, view: options.editor.view });
+    // Initialize the tooltip
+    let { tippyModal } = tooltip.init();
+    const hyperlinkLinkModal = document.createElement("div");
+    const buttonsWrapper = document.createElement("div");
+    const inputsWrapper = document.createElement("div");
+    hyperlinkLinkModal.classList.add("hyperlinkLinkModal");
+    buttonsWrapper.classList.add("buttonsWrapper");
+    inputsWrapper.classList.add("inputsWrapper");
+    // create a form that contain url input and a button for submit
+    const form = document.createElement("form");
+    const input = document.createElement("input");
+    const button = document.createElement("button");
+    input.setAttribute("type", "text");
+    input.setAttribute("placeholder", "https://example.com");
+    button.setAttribute("type", "submit");
+    button.innerText = "Submit";
+    inputsWrapper.append(input);
+    buttonsWrapper.append(button);
+    form.append(inputsWrapper, buttonsWrapper);
+    hyperlinkLinkModal.append(form);
+    tippyModal.innerHTML = "";
+    tippyModal.append(hyperlinkLinkModal);
+    tooltip.update(options.editor.view, {
+        arrow: tippy.roundArrow,
+    });
+    // make sure
+    setTimeout(() => {
+        input.focus();
+        input.style.outlineColor = " #dadce0";
+    }, 100);
+    input.addEventListener("keydown", () => {
+        input.style.outlineColor = " #dadce0";
+    });
+    // event listenr for submit button
+    form.addEventListener("submit", (event) => {
+        event.preventDefault();
+        const url = input.value;
+        if (!url) {
+            input.style.outlineColor = "red";
+            return;
+        }
+        const sanitizeURL = linkifyjs.find(url)
+            .filter((link) => link.isLink)
+            .filter((link) => {
+            if (options.validate) {
+                return options.validate(link.value);
+            }
+            return true;
+        })
+            .at(0);
+        if (!(sanitizeURL === null || sanitizeURL === void 0 ? void 0 : sanitizeURL.href)) {
+            input.style.outlineColor = "red";
+            return;
+        }
+        tooltip === null || tooltip === void 0 ? void 0 : tooltip.hide();
+        return options.editor
+            .chain()
+            .setMark(options.extentionName, { href: sanitizeURL.href })
+            .setMeta("preventautohyperlink", true)
+            .run();
+    });
+}
+
 exports.Hyperlink = Hyperlink;
 exports.Tooltip = Tooltip;
-exports.default = Hyperlink;
+exports.previewHyperlink = previewHyperlink;
+exports.setHyperlink = setHyperlink;
 //# sourceMappingURL=index.cjs.map