@docs.plus/extension-hyperlink 1.3.12 → 1.5.0

package/README.md

@@ -5,12 +5,10 @@
 [![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 <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.
+The Link extension adds support for `<a>` tags to the editor. The extension is headless, there is no actual <u>**UI**</u> to add, <u>modify</u> or <u>delete</u> 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.
 
-> Pasted URLs will be transformed to links automatically.
-
 ## Installation
 
 ````sh
@@ -92,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");
@@ -122,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");
@@ -174,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,
+  });
 
-    // event listenr for submit button
+  // make sure
+  setTimeout(() => input.focus();, 100);
+
+  // 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();
   });
@@ -199,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
@@ -311,14 +343,8 @@ this.editor.getAttributes('link').href
 
 ## Inspiration and Acknowledgment, Let's Connect
 
-Hey there! Thanks so much for taking an interest in our Hyperlink extension, a part of the awesome world of docs.plus. At docs.plus, we're all about making collaboration and knowledge sharing not just simpler, but downright enjoyable!
-
-Let us share a little behind-the-scenes story with you. Our extension was inspired by Tiptap's [extension-link](https://github.com/ueberdosis/tiptap/tree/main/packages/extension-link). We were so impressed by their "headless" approach that we decided to take it further and add our own touch to make it even more user-friendly and versatile.
-
-Now, let's be clear, we're not officially affiliated with Tiptap, but we firmly believe in giving credit where it's due. Their brilliant work laid the foundation for our extension, and we're truly grateful for that!
-
-But enough about us, let's talk about you! We genuinely appreciate your interest in our work. If you have any ideas or suggestions on how we can make this extension even better, or if you're simply curious about Docs.plus, we'd love to chat.
+Thank you for exploring our Hyperlink extension from docs.plus! We aim to make collaboration and knowledge sharing not just easy, but also enjoyable.
 
-If you want to dive deeper into what we're all about, feel free to explore the [docs.plus repository](https://github.com/docs-plus/docs.plus) - it's there for you!
+Our extension is inspired by Tiptap's [extension-link](https://github.com/ueberdosis/tiptap/tree/main/packages/extension-link). While we've incorporated our own enhancements, we'd like to tip our hats to Tiptap for pioneering the "headless" approach that we admire greatly. Please note: We're not affiliated with Tiptap, but we believe in recognizing foundational work.
 
-Once again, thank you for dropping by. We're thrilled to see what incredible things we can create together in this amazing world of open source!
+Your feedback and interest in docs.plus are invaluable to us. Share your thoughts, suggestions, or dive deeper into our mission at the [docs.plus](https://github.com/docs-plus/docs.plus) repository. Wish to converse? Connect with us [here](https://github.com/docs-plus/docs.plus#-connect-with-us).

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