@docs.plus/extension-hyperlink 1.4.0 → 1.5.1

package/README.md

@@ -4,7 +4,6 @@
 [![Downloads](https://img.shields.io/npm/dm/@docs.plus/extension-hyperlink.svg)](https://npmcharts.com/compare/@docs.plus/extension-hyperlink)
 [![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, 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.
@@ -90,29 +89,26 @@ Hyperlink.configure({
 })
 ````
 
-### DialogBoxs
+### Modals
+
+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 `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,59 @@ const previewHyperlink(options: HyperlinkDialogBoxOptions): HTMLElement {
   hrefTitle.setAttribute("href", href);
   hrefTitle.innerText = href;
 
-  hyperlinkLinkDialogBox.append(hrefTitle);
+  newBubble.append(hrefTitle);
+
+  hyperlinkModal.classList.add("hyperlink-preview-modal");
 
-  return hyperlinkLinkDialogBox;
+  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 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>;
-};
+import { Editor } from "@tiptap/core";
+import { find } from "linkifyjs";
 
-let tooltip: Tooltip = undefined;
+let tooltip = undefined;
 
-
-const setHyperlink(options: setHyperlinkDialogOptions): void {
+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 +184,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();
   });
@@ -194,25 +227,131 @@ const setHyperlink(options: setHyperlinkDialogOptions): void {
 
 </details>
 
+
+<details>
+<summary>The Hyperlink styles.scss</summary>
+
+```scss
+.tippy-box {
+  .hyperlink-preview-modal,
+  .hyperlink-set-modal,
+  .hyperlink-edit-modal {
+    background-color: #fff;
+    border-radius: 10px;
+    border: 1px solid #dadce0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 6px 6px;
+    box-shadow: 0 1px 3px 1px rgba(60, 64, 67, 0.15);
+    margin-top: -6px;
+
+    &__metadata {
+      width: 200px;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      flex-direction: row-reverse;
+      a {
+        font-size: 0.9rem;
+        margin-right: 6px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      img {
+        width: 18px;
+        height: 18px;
+        border-radius: 50%;
+        margin-right: 8px;
+      }
+    }
+
+    &__remove-button,
+    &__edit-button,
+    &__copy-button,
+    &__apply-button {
+      width: 30px;
+      height: 30px;
+      border-radius: 50%;
+      margin: 0 0.25rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: background-color 0.1s ease-in-out;
+      &:hover {
+        background-color: #eee;
+      }
+      > svg {
+        width: 16px;
+        height: 16px;
+      }
+    }
+
+    form {
+      display: flex;
+      align-items: flex-end;
+      width: 100%;
+      input {
+        border: 1px solid #dadce0;
+        border-radius: 6px;
+        padding: 0.4rem 0.8rem;
+        margin-bottom: 0.2rem;
+        width: 100%;
+        &:last-of-type {
+          margin-bottom: 0;
+        }
+      }
+      .hyperlink-set-modal__buttons-wrapper,
+      .hyperlink-edit-modal__buttons-wrapper {
+        margin-left: 8px;
+        button {
+          border-radius: 6px;
+          padding: 4px 14px;
+          width: 70px;
+          margin-bottom: 0.2rem;
+          color: #1a73e8;
+          &:hover {
+            background: rgba(26, 115, 232, 0.04);
+            color: #174ea6;
+          }
+        }
+      }
+    }
+  }
+
+  .tippy-svg-arrow {
+    top: -6px !important;
+  }
+}
+```
+
+</details>
+
+
 ````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)
+
+<Su>
+
 
 
 ### Removing and overriding existing html attributes
@@ -311,6 +450,7 @@ this.editor.getAttributes('link').href
 
 Thank you for exploring our Hyperlink extension from docs.plus! We aim to make collaboration and knowledge sharing not just easy, but also enjoyable.
 
-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.
+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.
 
 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