@docs.plus/extension-hyperlink 1.4.0 → 1.5.0

package/README.md

@@ -90,29 +90,25 @@ Hyperlink.configure({
 })
 ````
 
-### DialogBoxs
+### Modals
 
-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;
+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;
 - [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 `previewHyperlinkDialogBox` function</summary>
+<summary>The `previewHyperlinkModal` function</summary>
 
 ```ts
-type HyperlinkDialogBoxOptions = {
-  editor: Editor;
-  validate?: (url: string) => boolean;
-  view: EditorView;
-  link: HTMLAnchorElement;
-  node?: any;
-  nodePos: number;
-  tippy: Tooltip;
-};
-
-const previewHyperlink(options: HyperlinkDialogBoxOptions): HTMLElement {
+function previewHyperlinkModal(options) {
   const href = options.link.href;
-  const hyperlinkLinkDialogBox = document.createElement("div");
+
+  const hyperlinkModal = document.createElement("div");
+  const removeButton = document.createElement("button");
+  const copyButton = document.createElement("button");
+
+  const newBubble = document.createElement("div");
+  newBubble.classList.add("hyperlink-preview-modal__metadata");
 
   const hrefTitle = document.createElement("a");
   hrefTitle.setAttribute("target", "_blank");
@@ -120,43 +116,60 @@ const previewHyperlink(options: HyperlinkDialogBoxOptions): HTMLElement {
   hrefTitle.setAttribute("href", href);
   hrefTitle.innerText = href;
 
-  hyperlinkLinkDialogBox.append(hrefTitle);
+  newBubble.append(hrefTitle);
+
+  hyperlinkModal.classList.add("hyperlink-preview-modal");
+
+  removeButton.classList.add("hyperlink-preview-modal__remove-button");
+  removeButton.innerHTML = "remove";
+
+  copyButton.classList.add("hyperlink-preview-modal__copy-button");
+  copyButton.innerHTML = "copy";
+
+  removeButton.addEventListener("click", () => {
+    options.tippy.hide();
+    return options.editor.chain().focus().unsetHyperlink().run();
+  });
+
+  copyButton.addEventListener("click", () => {
+    options.tippy.hide();
+    navigator.clipboard.writeText(href);
+  });
+
+  hyperlinkModal.append(newBubble, copyButton, removeButton);
 
-  return hyperlinkLinkDialogBox;
+  return hyperlinkModal;
 }
+
 ```
 
 </details>
 
 <details>
-<summary>The `setHyperlinks` function</summary>
+<summary>The `setHyperlinkModal` function</summary>
 
 ```ts
-type setHyperlinkDialogOptions = {
-  editor: Editor;
-  validate?: (url: string) => boolean;
-  extentionName: string;
-  attributes: Record<string, any>;
-};
-
-let tooltip: Tooltip = undefined;
+import { Editor } from "@tiptap/core";
+import Tooltip, { TippyInitOptions } from "../helpers/tippyHelper";
+import { find } from "linkifyjs";
 
 
-const setHyperlink(options: setHyperlinkDialogOptions): void {
+let tooltip: Tooltip | undefined = undefined;
+function setHyperlinkModal(options) {
   // Create the tooltip instance
-  if (!tooltip) tooltip = new Tooltip({ ...options, view: options.editor.view });
+  if (!tooltip) tooltip = new options.Tooltip(options);
 
   // Initialize the tooltip
   let { tippyModal } = tooltip.init();
 
-  const hyperlinkLinkDialog = document.createElement("div");
+  const hyperlinkModal = document.createElement("div");
   const buttonsWrapper = document.createElement("div");
   const inputsWrapper = document.createElement("div");
 
-  hyperlinkLinkDialog.classList.add("hyperlinkLinkDialog");
+  hyperlinkModal.classList.add("hyperlink-set-modal");
 
-  buttonsWrapper.classList.add("buttonsWrapper");
-  inputsWrapper.classList.add("inputsWrapper");
+  buttonsWrapper.classList.add("hyperlink-set-modal__buttons-wrapper");
+  inputsWrapper.classList.add("hyperlink-set-modal__inputs-wrapper");
 
   // create a form that contain url input and a button for submit
   const form = document.createElement("form");
@@ -172,20 +185,41 @@ const setHyperlink(options: setHyperlinkDialogOptions): void {
   buttonsWrapper.append(button);
   form.append(inputsWrapper, buttonsWrapper);
 
-  hyperlinkLinkDialog.append(form);
+  hyperlinkModal.append(form);
 
   tippyModal.innerHTML = "";
-  tippyModal.append(hyperlinkLinkDialog);
+  tippyModal.append(hyperlinkModal);
+  tooltip.update(options.editor.view, {
+    arrow: options.roundArrow,
+  });
+
+  // make sure
+  setTimeout(() => input.focus();, 100);
 
-    // event listenr for submit button
+  // event listenr for submit button
   form.addEventListener("submit", (event) => {
     event.preventDefault();
     const url = input.value;
-    if (!url)return;
+
+    if (!url) return;
+
+    const sanitizeURL = find(url)
+      .filter((link) => link.isLink)
+      .filter((link) => {
+        if (options.validate) {
+          return options.validate(link.value);
+        }
+        return true;
+      })
+      .at(0);
+
+    if (!sanitizeURL?.href) return;
+
+    tooltip?.hide();
 
     return options.editor
       .chain()
-      .setMark(options.extentionName, { href: url})
+      .setMark(options.extentionName, { href: sanitizeURL.href })
       .setMeta("preventautohyperlink", true)
       .run();
   });
@@ -197,22 +231,22 @@ const setHyperlink(options: setHyperlinkDialogOptions): void {
 ````ts
 import {
   Hyperlink,
-  previewHyperlink,
-  setHyperlink
+  previewHyperlinkModal,
+  setHyperlinkModal
 } from "@docs.plus/extension-hyperlink";
 
 Hyperlink.configure({
-  dialogBoxs: {
+  modals: {
     previewHyperlink: (data) => {
-      return previewHyperlink(data);
+      return previewHyperlinkModal(data);
     },
     setHyperlink: (data) => {
-      return setHyperlink(data);
+      return setHyperlinkModal(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)
+> Note: The `previewHyperlinkModal` and `setHyperlinkModal` modals are prebuilt modal boxes. You can use them or create your own modal boxes. To learn how to create your own modal boxes, please check the [source code](https://github.com/HMarzban/extension-hyperlink/tree/main/packages/extension-hyperlink/src/modals)
 
 
 ### Removing and overriding existing html attributes

package/dist/helpers/clickHandler.d.ts

@@ -1,13 +1,11 @@
 import { MarkType } from "@tiptap/pm/model";
 import { Plugin } from "@tiptap/pm/state";
 import { Editor } from "@tiptap/core";
-import { EditorView } from "@tiptap/pm/view";
 type ClickHandlerOptions = {
     type: MarkType;
     editor: Editor;
     validate?: (url: string) => boolean;
-    view: EditorView;
-    dialogBox?: ((options: any) => void | HTMLElement) | null;
+    modal?: ((options: any) => void | HTMLElement) | null;
 };
 export default function clickHandler(options: ClickHandlerOptions): Plugin;
 export {};

package/dist/helpers/tippyHelper.d.ts

@@ -1,10 +1,9 @@
 import { Instance, Props } from "tippy.js";
 import { Editor } from "@tiptap/core";
 import { EditorView } from "@tiptap/pm/view";
-interface TippyInitOptions {
+export interface TippyInitOptions {
     editor: Editor;
     validate?: (url: string) => boolean;
-    view: EditorView;
 }
 declare class Tooltip {
     private tippyInstance?;

package/dist/hyperlink.d.ts

@@ -1,4 +1,6 @@
 import { Mark } from "@tiptap/core";
+import { TSetHyperlinkModalOptions } from "./modals/setHyperlink";
+import { THyperlinkPreviewModalOptions } from "./modals/previewHyperlink";
 export interface LinkProtocolOptions {
     scheme: string;
     optionalSlashes?: boolean;
@@ -25,13 +27,13 @@ export interface HyperlinkOptions {
      */
     HTMLAttributes: Record<string, any>;
     /**
-     * A list of dialogBoxs to be rendered.
+     * A list of modals to be rendered.
      * @default null
      * @example
      */
-    dialogBoxs: {
-        previewHyperlink?: ((options: any) => void | HTMLElement) | null;
-        setHyperlink?: ((options: any) => void | HTMLElement) | null;
+    modals: {
+        previewHyperlink?: ((options: THyperlinkPreviewModalOptions) => void | HTMLElement) | null;
+        setHyperlink?: ((options: TSetHyperlinkModalOptions) => void | HTMLElement) | null;
     };
     /**
      * A validation function that modifies link verification for the auto linker.

package/dist/index.cjs

@@ -128,7 +128,7 @@ class Tooltip {
             this.blurHandler({ event });
         };
         this.editor = options.editor;
-        this.view = options.view;
+        this.view = this.editor.view;
         this.tippyWrapper = document.createElement("div");
         this.tippyWrapper.addEventListener("mousedown", this.mousedownHandler, {
             capture: true,
@@ -227,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 dialogBox provided, then open the link in new window
-                if (!options.dialogBox) {
+                // If there is no previewHyperlink modal provided, then open the link in new window
+                if (!options.modal) {
                     if (link && href) {
                         window.open(href, target);
                     }
@@ -238,22 +238,22 @@ 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.dialogBox({
+                const hyperlinkPreview = options.modal({
                     link,
                     nodePos,
                     tippy: tooltip,
                     ...options,
                 });
-                // If there is no hyperlink preview, hide the dialogBox
+                // If there is no hyperlink preview, hide the modal
                 if (!hyperlinkPreview)
                     return tooltip.hide();
-                // Empty the dialogBox and append the hyperlink preview box
+                // Empty the modal and append the hyperlink preview box
                 while (tippyModal.firstChild) {
                     tippyModal.removeChild(tippyModal.firstChild);
                 }
                 tippyModal.append(hyperlinkPreview);
-                // Update the dialogBox position
-                tooltip.update(options.view);
+                // Update the modal position
+                tooltip.update(options.editor.view);
                 return false;
             },
         },
@@ -360,7 +360,7 @@ const Hyperlink = core.Mark.create({
                 rel: "noopener noreferrer nofollow",
                 class: null,
             },
-            dialogBoxs: {
+            modals: {
                 previewHyperlink: null,
                 setHyperlink: null,
             },
@@ -389,18 +389,20 @@ const Hyperlink = core.Mark.create({
     addCommands() {
         return {
             setHyperlink: (attributes) => ({ editor, chain }) => {
-                if (!this.options.dialogBoxs.setHyperlink) {
+                if (!this.options.modals.setHyperlink) {
                     return chain()
                         .setMark(this.name, attributes)
                         .setMeta("preventAutohyperlink", true)
                         .run();
                 }
                 else {
-                    this.options.dialogBoxs.setHyperlink({
+                    this.options.modals.setHyperlink({
                         editor,
                         validate: this.options.validate,
                         extentionName: this.name,
                         attributes,
+                        Tooltip,
+                        roundArrow: tippy.roundArrow,
                     });
                     return true;
                 }
@@ -473,8 +475,7 @@ const Hyperlink = core.Mark.create({
                 type: this.type,
                 editor: this.editor,
                 validate: this.options.validate,
-                view: this.editor.view,
-                dialogBox: this.options.dialogBoxs.previewHyperlink,
+                modal: this.options.modals.previewHyperlink,
             }));
         }
         if (this.options.hyperlinkOnPaste) {
@@ -487,7 +488,7 @@ const Hyperlink = core.Mark.create({
     },
 });
 
-const editeHyperlinkHandler = (options) => {
+const editHyperlinkHandler = (options) => {
     var _a;
     // Create the form
     const form = document.createElement("form");
@@ -496,8 +497,8 @@ const editeHyperlinkHandler = (options) => {
     const linkTextInput = document.createElement("input");
     const hrefInput = document.createElement("input");
     const applyButton = document.createElement("button");
-    buttonsWrapper.classList.add("buttonsWrapper");
-    inputsWrapper.classList.add("inputsWrapper");
+    buttonsWrapper.classList.add("hyperlink-edit-modal__buttons-wrapper");
+    inputsWrapper.classList.add("hyperlink-edit-modal__inputs-wrapper");
     linkTextInput.type = "text";
     linkTextInput.value = ((_a = options.link) === null || _a === void 0 ? void 0 : _a.innerText) || "";
     linkTextInput.placeholder = "Enter link text";
@@ -505,14 +506,14 @@ const editeHyperlinkHandler = (options) => {
     hrefInput.value = options.link.href;
     hrefInput.placeholder = "Enter href";
     applyButton.type = "submit";
-    applyButton.classList.add("btn_applyModal");
+    applyButton.classList.add("hyperlink-edit-modal__apply-button");
     applyButton.innerText = "Apply";
     buttonsWrapper.append(applyButton);
     inputsWrapper.append(linkTextInput, hrefInput);
     // Append to form
     form.append(inputsWrapper, buttonsWrapper);
-    options.hyperlinkLinkModal.innerHTML = "";
-    options.hyperlinkLinkModal.appendChild(form);
+    options.hyperlinkModal.innerHTML = "";
+    options.hyperlinkModal.appendChild(form);
     hrefInput.addEventListener("keydown", () => {
         hrefInput.style.outlineColor = " #dadce0";
     });
@@ -551,7 +552,7 @@ const editeHyperlinkHandler = (options) => {
         options.tippy.hide();
     });
     // Show tooltip
-    options.tippy.update(options.view, {
+    options.tippy.update(options.editor.view, {
         arrow: tippy.roundArrow,
     });
     setTimeout(() => linkTextInput.focus());
@@ -580,14 +581,14 @@ const Pencil = ({ size = 24, fill = "rgb(104, 81, 255)", } = {}) => {
     `;
 };
 
-function previewHyperlink(options) {
+function previewHyperlinkModal(options) {
     const href = options.link.href;
-    const hyperlinkLinkModal = document.createElement("div");
+    const hyperlinkModal = 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");
+    newBubble.classList.add("hyperlink-preview-modal__metadata");
     const hrefTitle = document.createElement("a");
     hrefTitle.setAttribute("target", "_blank");
     hrefTitle.setAttribute("rel", "noreferrer");
@@ -616,39 +617,39 @@ function previewHyperlink(options) {
         .catch((error) => {
         console.error("Error fetching metadata:", error);
     });
-    hyperlinkLinkModal.classList.add("hyperlinkLinkModal");
-    removeButton.classList.add("remove");
+    hyperlinkModal.classList.add("hyperlink-preview-modal");
+    removeButton.classList.add("hyperlink-preview-modal__remove-button");
     removeButton.innerHTML = LinkSlash();
-    editButton.classList.add("edit");
+    editButton.classList.add("hyperlink-preview-modal__edit-button");
     editButton.innerHTML = Pencil();
-    copyButton.classList.add("copy");
+    copyButton.classList.add("hyperlink-preview-modal__copy-button");
     copyButton.innerHTML = Copy();
     removeButton.addEventListener("click", () => {
         options.tippy.hide();
         return options.editor.chain().focus().unsetHyperlink().run();
     });
-    editButton.addEventListener("click", () => editeHyperlinkHandler({ ...options, hyperlinkLinkModal }));
+    editButton.addEventListener("click", () => editHyperlinkHandler({ ...options, hyperlinkModal }));
     copyButton.addEventListener("click", () => {
         options.tippy.hide();
         navigator.clipboard.writeText(href);
     });
-    hyperlinkLinkModal.append(newBubble, copyButton, editButton, removeButton);
-    return hyperlinkLinkModal;
+    hyperlinkModal.append(newBubble, copyButton, editButton, removeButton);
+    return hyperlinkModal;
 }
 
 let tooltip = undefined;
-function setHyperlink(options) {
+function setHyperlinkModal(options) {
     // Create the tooltip instance
     if (!tooltip)
-        tooltip = new Tooltip({ ...options, view: options.editor.view });
+        tooltip = new options.Tooltip(options);
     // Initialize the tooltip
     let { tippyModal } = tooltip.init();
-    const hyperlinkLinkModal = document.createElement("div");
+    const hyperlinkModal = 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");
+    hyperlinkModal.classList.add("hyperlink-set-modal");
+    buttonsWrapper.classList.add("hyperlink-set-modal__buttons-wrapper");
+    inputsWrapper.classList.add("hyperlink-set-modal__inputs-wrapper");
     // create a form that contain url input and a button for submit
     const form = document.createElement("form");
     const input = document.createElement("input");
@@ -660,11 +661,11 @@ function setHyperlink(options) {
     inputsWrapper.append(input);
     buttonsWrapper.append(button);
     form.append(inputsWrapper, buttonsWrapper);
-    hyperlinkLinkModal.append(form);
+    hyperlinkModal.append(form);
     tippyModal.innerHTML = "";
-    tippyModal.append(hyperlinkLinkModal);
+    tippyModal.append(hyperlinkModal);
     tooltip.update(options.editor.view, {
-        arrow: tippy.roundArrow,
+        arrow: options.roundArrow,
     });
     // make sure
     setTimeout(() => {
@@ -706,6 +707,6 @@ function setHyperlink(options) {
 
 exports.Hyperlink = Hyperlink;
 exports.Tooltip = Tooltip;
-exports.previewHyperlink = previewHyperlink;
-exports.setHyperlink = setHyperlink;
+exports.previewHyperlinkModal = previewHyperlinkModal;
+exports.setHyperlinkModal = setHyperlinkModal;
 //# sourceMappingURL=index.cjs.map