@docs.plus/extension-hyperlink 1.5.2 → 2.1.0

package/src/helpers/tippyHelper.ts

@@ -1,136 +0,0 @@
-import tippy, { Instance, Props, roundArrow } from "tippy.js";
-import { Editor } from "@tiptap/core";
-import { EditorView } from "@tiptap/pm/view";
-import { posToDOMRect } from "@tiptap/core";
-
-export interface TippyInitOptions {
-  editor: Editor;
-  validate?: (url: string) => boolean;
-}
-
-class Tooltip {
-  private tippyInstance?: Instance;
-  private preventHide: boolean = false;
-  private tippyWrapper: HTMLDivElement;
-  private editor: Editor;
-  private view: EditorView;
-
-  constructor(options: TippyInitOptions) {
-    this.editor = options.editor;
-    this.view = this.editor.view;
-    this.tippyWrapper = document.createElement("div");
-    this.tippyWrapper.addEventListener("mousedown", this.mousedownHandler, {
-      capture: true,
-    });
-    this.view.dom.addEventListener("dragstart", this.dragstartHandler);
-    this.editor.on("blur", this.blurHandler);
-  }
-
-  init() {
-    this.tippyWrapper.innerHTML = "";
-
-    return { tippyModal: this.tippyWrapper, tippyInstance: this.tippyInstance };
-  }
-
-  show() {
-    this.tippyInstance?.show();
-    return true;
-  }
-
-  hide() {
-    setTimeout(() => this.tippyInstance?.hide());
-    return false;
-  }
-
-  private mousedownHandler = () => {
-    this.preventHide = true;
-  };
-
-  private dragstartHandler = () => {
-    this.hide();
-  };
-
-  private blurHandler = ({ event }: { event: FocusEvent }) => {
-    if (this.preventHide) {
-      this.preventHide = false;
-      return;
-    }
-    if (
-      event?.relatedTarget &&
-      this.tippyWrapper.parentNode?.contains(event.relatedTarget as Node)
-    ) {
-      return;
-    }
-    this.hide();
-  };
-
-  private tippyBlurHandler = (event: FocusEvent) => {
-    this.blurHandler({ event });
-  };
-
-  private createTooltip() {
-    if (!this.editor || !this.editor.options) return;
-    const { element: editorElement } = this.editor.options;
-    const editorIsAttached = !!editorElement.parentElement;
-
-    if (this.tippyInstance || !editorIsAttached) {
-      return;
-    }
-
-    this.tippyInstance = tippy(editorElement, {
-      duration: 0,
-      getReferenceClientRect: null,
-      content: this.tippyWrapper,
-      interactive: true,
-      trigger: "manual",
-      placement: "bottom",
-      hideOnClick: true,
-      onClickOutside: (instance, event) => {
-        this.hide();
-      },
-      onAfterUpdate: (instance, partialProps) => {
-        this.show();
-      },
-    });
-
-    if (this.tippyInstance.popper.firstChild) {
-      (this.tippyInstance.popper.firstChild as HTMLElement).addEventListener(
-        "blur",
-        this.tippyBlurHandler
-      );
-    }
-  }
-
-  update(view: EditorView, option: any = {}) {
-    this.createTooltip();
-
-    option.arrow = option?.arrow ?? false;
-
-    if (this.tippyInstance) {
-      this.tippyInstance.setProps({
-        ...option,
-        getReferenceClientRect: () => {
-          const pos = view.state.selection.from;
-          // width: 0 is a hack to prevent tippy display in the wrong position
-          return { ...posToDOMRect(view, pos, pos), width: 0 };
-        },
-      });
-    }
-
-    return {};
-  }
-
-  destroyTooltip() {
-    if (this.tippyInstance) {
-      this.tippyInstance.destroy();
-      this.tippyInstance = undefined;
-      this.tippyWrapper.removeEventListener("mousedown", this.mousedownHandler, {
-        capture: true,
-      });
-      this.view.dom.removeEventListener("dragstart", this.dragstartHandler);
-      this.editor.off("blur", this.blurHandler);
-    }
-  }
-}
-
-export default Tooltip;

package/src/hyperlink.ts

@@ -1,277 +0,0 @@
-import { Mark, markPasteRule, mergeAttributes } from "@tiptap/core";
-import { Plugin } from "@tiptap/pm/state";
-import { find, registerCustomProtocol, reset } from "linkifyjs";
-import autoHyperlink from "./helpers/autoHyperlink";
-import clickHandler from "./helpers/clickHandler";
-import { pasteHandler } from "./helpers/pasteHandler";
-import editHyperlinkHelper from "./helpers/editHyperlink";
-import Tooltip from "./helpers/tippyHelper";
-import { roundArrow } from "tippy.js";
-import { TSetHyperlinkModalOptions } from "./modals/setHyperlink";
-import { THyperlinkPreviewModalOptions } from "./modals/previewHyperlink";
-
-export interface LinkProtocolOptions {
-  scheme: string;
-  optionalSlashes?: boolean;
-}
-
-export interface HyperlinkOptions {
-  /**
-   * If enabled, it adds links as you type.
-   */
-  autoHyperlink: boolean;
-  /**
-   * An array of custom protocols to be registered with linkifyjs.
-   */
-  protocols: Array<LinkProtocolOptions | string>;
-  /**
-   * If enabled, links will be opened on click.
-   */
-  openOnClick: boolean;
-  /**
-   * Adds a link to the current selection if the pasted content only contains an url.
-   */
-  hyperlinkOnPaste: boolean;
-  /**
-   * A list of HTML attributes to be rendered.
-   */
-  HTMLAttributes: Record<string, any>;
-  /**
-   * A list of modals to be rendered.
-   * @default null
-   * @example
-   */
-  modals: {
-    previewHyperlink?: ((options: THyperlinkPreviewModalOptions) => void | HTMLElement) | null;
-    setHyperlink?: ((options: TSetHyperlinkModalOptions) => void | HTMLElement) | null;
-  };
-  /**
-   * A validation function that modifies link verification for the auto linker.
-   * @param url - The url to be validated.
-   * @returns - True if the url is valid, false otherwise.
-   */
-  validate?: (url: string) => boolean;
-}
-
-declare module "@tiptap/core" {
-  interface Commands<ReturnType> {
-    link: {
-      /**
-       * Edit the hyperlink's text
-       */
-      editHyperLinkText: (text: string) => ReturnType;
-
-      /**
-       * Edit the hyperlink's href value
-       */
-      editHyperLinkHref: (href: string) => ReturnType;
-
-      /**
-       * Edit the hyperlink's
-       */
-      editHyperlink: (attributes?: { newText?: string; newURL?: string }) => ReturnType;
-
-      /**
-       *  Set a hyperlink
-       */
-      setHyperlink: (attributes?: { href: string; target?: string | null }) => ReturnType;
-
-      /**
-       * Unset a link mark
-       */
-      unsetHyperlink: () => ReturnType;
-    };
-  }
-}
-
-export const Hyperlink = Mark.create<HyperlinkOptions>({
-  name: "hyperlink",
-
-  priority: 1000,
-
-  keepOnSplit: false,
-
-  onCreate() {
-    this.options.protocols.forEach((protocol) => {
-      if (typeof protocol === "string") {
-        registerCustomProtocol(protocol);
-        return;
-      }
-      registerCustomProtocol(protocol.scheme, protocol.optionalSlashes);
-    });
-  },
-
-  onDestroy() {
-    reset();
-  },
-
-  inclusive() {
-    return this.options.autoHyperlink;
-  },
-
-  addOptions() {
-    return {
-      openOnClick: true,
-      hyperlinkOnPaste: true,
-      autoHyperlink: true,
-      protocols: [],
-      HTMLAttributes: {
-        target: "_blank",
-        rel: "noopener noreferrer nofollow",
-        class: null,
-      },
-      modals: {
-        previewHyperlink: null,
-        setHyperlink: null,
-      },
-      validate: undefined,
-    };
-  },
-
-  addAttributes() {
-    return {
-      href: {
-        default: null,
-      },
-      target: {
-        default: this.options.HTMLAttributes.target,
-      },
-      class: {
-        default: this.options.HTMLAttributes.class,
-      },
-    };
-  },
-
-  parseHTML() {
-    return [{ tag: 'a[href]:not([href *= "javascript:" i])' }];
-  },
-
-  renderHTML({ HTMLAttributes }) {
-    return ["a", mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
-  },
-
-  addCommands() {
-    return {
-      setHyperlink:
-        (attributes) =>
-        ({ editor, chain }) => {
-          if (!this.options.modals.setHyperlink) {
-            return chain()
-              .setMark(this.name, attributes)
-              .setMeta("preventAutohyperlink", true)
-              .run();
-          } else {
-            this.options.modals.setHyperlink({
-              editor,
-              validate: this.options.validate,
-              extentionName: this.name,
-              attributes,
-              Tooltip,
-              roundArrow,
-            });
-            return true;
-          }
-        },
-
-      editHyperlink:
-        (attributes) =>
-        ({ editor }) => {
-          return editHyperlinkHelper({
-            ...attributes,
-            editor,
-            validate: this.options.validate,
-          });
-        },
-
-      editHyperLinkText:
-        (newText) =>
-        ({ editor }) => {
-          return editHyperlinkHelper({
-            editor,
-            newText,
-            validate: this.options.validate,
-          });
-        },
-
-      editHyperLinkHref:
-        (newURL) =>
-        ({ editor }) => {
-          return editHyperlinkHelper({
-            editor,
-            validate: this.options.validate,
-            newURL,
-          });
-        },
-
-      unsetHyperlink:
-        () =>
-        ({ chain }) => {
-          return chain()
-            .unsetMark(this.name, { extendEmptyMarkRange: true })
-            .setMeta("preventAutohyperlink", true)
-            .run();
-        },
-    };
-  },
-
-  addPasteRules() {
-    return [
-      markPasteRule({
-        find: (text) =>
-          find(text)
-            .filter((link) => {
-              if (this.options.validate) {
-                return this.options.validate(link.value);
-              }
-
-              return true;
-            })
-            .filter((link) => link.isLink)
-            .map((link) => ({
-              text: link.value,
-              index: link.start,
-              data: link,
-            })),
-        type: this.type,
-        getAttributes: (match) => ({
-          href: match.data?.href,
-        }),
-      }),
-    ];
-  },
-
-  addProseMirrorPlugins() {
-    const plugins: Plugin[] = [];
-
-    if (this.options.autoHyperlink) {
-      plugins.push(
-        autoHyperlink({
-          type: this.type,
-          validate: this.options.validate,
-        })
-      );
-    }
-
-    if (this.options.openOnClick) {
-      plugins.push(
-        clickHandler({
-          type: this.type,
-          editor: this.editor,
-          validate: this.options.validate,
-          modal: this.options.modals.previewHyperlink,
-        })
-      );
-    }
-
-    if (this.options.hyperlinkOnPaste) {
-      plugins.push(
-        pasteHandler({
-          editor: this.editor,
-          type: this.type,
-        })
-      );
-    }
-
-    return plugins;
-  },
-});

package/src/index.ts

@@ -1,17 +0,0 @@
-export * from "./hyperlink";
-
-export * from "./helpers/tippyHelper";
-
-export * from "./modals/previewHyperlink";
-
-export * from "./modals/setHyperlink";
-
-import { previewHyperlinkModal } from "./modals/previewHyperlink";
-
-import { setHyperlinkModal } from "./modals/setHyperlink";
-
-import Tooltip from "./helpers/tippyHelper";
-
-import { Hyperlink } from "./hyperlink";
-
-export { Hyperlink, Tooltip, previewHyperlinkModal, setHyperlinkModal };

package/src/modals/editeHyperlink.ts

@@ -1,99 +0,0 @@
-import { Editor } from "@tiptap/core";
-import { roundArrow } from "tippy.js";
-import { find } from "linkifyjs";
-import Tooltip from "../helpers/tippyHelper";
-
-type EditHyperlinkModalOptions = {
-  editor: Editor;
-  validate?: (url: string) => boolean;
-  link: HTMLAnchorElement;
-  hyperlinkModal: HTMLElement;
-  tippy: Tooltip;
-};
-
-export const editHyperlinkHandler = (options: EditHyperlinkModalOptions) => {
-  // 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("hyperlink-edit-modal__buttons-wrapper");
-  inputsWrapper.classList.add("hyperlink-edit-modal__inputs-wrapper");
-
-  linkTextInput.type = "text";
-  linkTextInput.value = options.link?.innerText || "";
-  linkTextInput.placeholder = "Enter link text";
-
-  hrefInput.type = "text";
-  hrefInput.value = options.link.href;
-  hrefInput.placeholder = "Enter href";
-
-  applyButton.type = "submit";
-  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.hyperlinkModal.innerHTML = "";
-  options.hyperlinkModal.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 = find(newHref)
-      .filter((link) => link.isLink)
-      .filter((link) => {
-        if (options.validate) {
-          return options.validate(link.value);
-        }
-        return true;
-      })
-      .at(0);
-
-    if (!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.editor.view, {
-    arrow: roundArrow,
-  });
-
-  setTimeout(() => linkTextInput.focus());
-};

package/src/modals/icons.ts

@@ -1,46 +0,0 @@
-interface IconProps {
-  size?: number;
-  fill?: string;
-}
-
-// prettier-ignore
-export const Copy = ({ size = 24, fill = 'rgb(104, 81, 255)' }: IconProps = {}) => {
-    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>
-    `
-}
-
-export const LinkSlash = ({
-  size = 24,
-  fill = "rgb(104, 81, 255)",
-}: IconProps = {}) => {
-  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>
-    `;
-};
-
-export const Pencil = ({
-  size = 24,
-  fill = "rgb(104, 81, 255)",
-}: IconProps = {}) => {
-  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>
-    `;
-};
-
-export const AngleUp = ({
-  size = 32,
-  fill = "rgb(104, 81, 255)",
-}: IconProps = {}) => {
-  return `
-        <svg fill=${fill} viewBox="0 0 24 24" width=${size} xmlns="http://www.w3.org/2000/svg">
-            <path d="M17.293,15.207,12,9.914,6.707,15.207,5.293,13.793,10.586,8.5a2,2,0,0,1,2.828,0l5.293,5.293Z"/>
-        </svg>
-    `;
-};

package/src/modals/previewHyperlink.ts

@@ -1,85 +0,0 @@
-import { Editor } from "@tiptap/core";
-import { editHyperlinkHandler } from "./editeHyperlink";
-import { Copy, LinkSlash, Pencil } from "./icons";
-import Tooltip from "../helpers/tippyHelper";
-
-export type THyperlinkPreviewModalOptions = {
-  editor: Editor;
-  validate?: (url: string) => boolean;
-  link: HTMLAnchorElement;
-  node?: any;
-  nodePos: number;
-  tippy: Tooltip;
-};
-
-export function previewHyperlinkModal(options: THyperlinkPreviewModalOptions): HTMLElement {
-  const href = options.link.href;
-
-  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("hyperlink-preview-modal__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);
-    });
-
-  hyperlinkModal.classList.add("hyperlink-preview-modal");
-
-  removeButton.classList.add("hyperlink-preview-modal__remove-button");
-  removeButton.innerHTML = LinkSlash();
-
-  editButton.classList.add("hyperlink-preview-modal__edit-button");
-  editButton.innerHTML = Pencil();
-
-  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", () => editHyperlinkHandler({ ...options, hyperlinkModal }));
-
-  copyButton.addEventListener("click", () => {
-    options.tippy.hide();
-    navigator.clipboard.writeText(href);
-  });
-
-  hyperlinkModal.append(newBubble, copyButton, editButton, removeButton);
-
-  return hyperlinkModal;
-}