@docs.plus/extension-hyperlink 1.0.4

package/src/helpers/autoHyperlink.ts

@@ -0,0 +1,167 @@
+import {
+  combineTransactionSteps,
+  findChildrenInRange,
+  getChangedRanges,
+  getMarksBetween,
+  NodeWithPos,
+} from "@tiptap/core";
+import { MarkType } from "@tiptap/pm/model";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { find, test } from "linkifyjs";
+
+type AutoHyperlinkOptions = {
+  type: MarkType;
+  validate?: (url: string) => boolean;
+};
+
+export default function autoHyperlink(options: AutoHyperlinkOptions): Plugin {
+  return new Plugin({
+    key: new PluginKey("autoHyperlink"),
+    appendTransaction: (transactions, oldState, newState) => {
+      const docChanges =
+        transactions.some((transaction) => transaction.docChanged) &&
+        !oldState.doc.eq(newState.doc);
+      const preventAutoHyperlink = transactions.some((transaction) =>
+        transaction.getMeta("preventAutoHyperlink")
+      );
+
+      if (!docChanges || preventAutoHyperlink) {
+        return;
+      }
+
+      const { tr } = newState;
+      const transform = combineTransactionSteps(oldState.doc, [
+        ...transactions,
+      ]);
+      const { mapping } = transform;
+      const changes = getChangedRanges(transform);
+
+      changes.forEach(({ oldRange, newRange }) => {
+        // at first we check if we have to remove links
+        getMarksBetween(oldRange.from, oldRange.to, oldState.doc)
+          .filter((item) => item.mark.type === options.type)
+          .forEach((oldMark) => {
+            const newFrom = mapping.map(oldMark.from);
+            const newTo = mapping.map(oldMark.to);
+            const newMarks = getMarksBetween(
+              newFrom,
+              newTo,
+              newState.doc
+            ).filter((item) => item.mark.type === options.type);
+
+            if (!newMarks.length) {
+              return;
+            }
+
+            const newMark = newMarks[0];
+            const oldLinkText = oldState.doc.textBetween(
+              oldMark.from,
+              oldMark.to,
+              undefined,
+              " "
+            );
+            const newLinkText = newState.doc.textBetween(
+              newMark.from,
+              newMark.to,
+              undefined,
+              " "
+            );
+            const wasLink = test(oldLinkText);
+            const isLink = test(newLinkText);
+
+            // remove only the link, if it was a link before too
+            // because we don’t want to remove links that were set manually
+            if (wasLink && !isLink) {
+              tr.removeMark(newMark.from, newMark.to, options.type);
+            }
+          });
+
+        // now let’s see if we can add new links
+        const nodesInChangedRanges = findChildrenInRange(
+          newState.doc,
+          newRange,
+          (node) => node.isTextblock
+        );
+
+        let textBlock: NodeWithPos | undefined;
+        let textBeforeWhitespace: string | undefined;
+
+        if (nodesInChangedRanges.length > 1) {
+          // Grab the first node within the changed ranges (ex. the first of two paragraphs when hitting enter)
+          textBlock = nodesInChangedRanges[0];
+          textBeforeWhitespace = newState.doc.textBetween(
+            textBlock.pos,
+            textBlock.pos + textBlock.node.nodeSize,
+            undefined,
+            " "
+          );
+        } else if (
+          nodesInChangedRanges.length &&
+          // We want to make sure to include the block seperator argument to treat hard breaks like spaces
+          newState.doc
+            .textBetween(newRange.from, newRange.to, " ", " ")
+            .endsWith(" ")
+        ) {
+          textBlock = nodesInChangedRanges[0];
+          textBeforeWhitespace = newState.doc.textBetween(
+            textBlock.pos,
+            newRange.to,
+            undefined,
+            " "
+          );
+        }
+
+        if (textBlock && textBeforeWhitespace) {
+          const wordsBeforeWhitespace = textBeforeWhitespace
+            .split(" ")
+            .filter((s) => s !== "");
+
+          if (wordsBeforeWhitespace.length <= 0) {
+            return false;
+          }
+
+          const lastWordBeforeSpace =
+            wordsBeforeWhitespace[wordsBeforeWhitespace.length - 1];
+          const lastWordAndBlockOffset =
+            textBlock.pos +
+            textBeforeWhitespace.lastIndexOf(lastWordBeforeSpace);
+
+          if (!lastWordBeforeSpace) {
+            return false;
+          }
+
+          find(lastWordBeforeSpace)
+            .filter((link) => link.isLink)
+            .filter((link) => {
+              if (options.validate) {
+                return options.validate(link.value);
+              }
+              return true;
+            })
+            // calculate link position
+            .map((link) => ({
+              ...link,
+              from: lastWordAndBlockOffset + link.start + 1,
+              to: lastWordAndBlockOffset + link.end + 1,
+            }))
+            // add link mark
+            .forEach((link) => {
+              tr.addMark(
+                link.from,
+                link.to,
+                options.type.create({
+                  href: link.href,
+                })
+              );
+            });
+        }
+      });
+
+      if (!tr.steps.length) {
+        return;
+      }
+
+      return tr;
+    },
+  });
+}

package/src/helpers/clickHandler.ts

@@ -0,0 +1,76 @@
+import { getAttributes } from "@tiptap/core";
+import { MarkType } from "@tiptap/pm/model";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { Editor } from "@tiptap/core";
+import { EditorView } from "@tiptap/pm/view";
+import * as tippy from "./tippyHelper";
+// import "tippy.js/dist/svg-arrow.css";
+
+// Define type for the ClickHandlerOptions
+type ClickHandlerOptions = {
+  type: MarkType;
+  editor: Editor;
+  validate?: (url: string) => boolean;
+  view: EditorView;
+  modals: {
+    previewHyperlink?: ((options: any) => HTMLElement) | null;
+    setHyperlink?: ((options: any) => HTMLElement) | null;
+  };
+};
+
+export default function clickHandler(options: ClickHandlerOptions): Plugin {
+  const { tippyModal } = tippy.init(options);
+
+  return new Plugin({
+    key: new PluginKey("handleClickHyperlink"),
+    props: {
+      handleClick: (view, pos, event) => {
+        if (event.button !== 0) return false;
+
+        // Get the target HTML element and its position
+        const nodeTarget: HTMLElement = event.target as HTMLElement;
+        const nodePos = view.posAtDOM(nodeTarget, 0);
+
+        // Find the closest link element to the target element
+        const link = nodeTarget?.closest("a");
+
+        // Extract attributes from the state
+        const attrs = getAttributes(view.state, options.type.name);
+
+        // Extract href and target attributes from the link element or the state
+        const href = link?.href ?? attrs.href;
+        const target = link?.target ?? attrs.target;
+
+        // If there is no previewHyperlink modal provided, then open the link in new window
+        if (!options.modals.previewHyperlink) {
+          if (link && href) {
+            window.open(href, target);
+          }
+          return true;
+        }
+
+        // if the link does not contain href attribute, hide the tooltip
+        if (!link?.href) return tippy.hide();
+
+        // Create a preview of the hyperlink
+        const hyperlinkPreview = options.modals.previewHyperlink({
+          link,
+          nodePos,
+          ...options,
+        });
+
+        // If there is no hyperlink preview, hide the modal
+        if (!hyperlinkPreview) return tippy.hide();
+
+        // Empty the modal and append the hyperlink preview box
+        tippyModal.innerHTML = "";
+        tippyModal.append(hyperlinkPreview);
+
+        // Update the modal position
+        tippy.update(options.view);
+
+        return false;
+      },
+    },
+  });
+}

package/src/helpers/editHyperlink.ts

@@ -0,0 +1,55 @@
+import { Editor } from "@tiptap/core";
+import { find } from "linkifyjs";
+
+type EditHyperlinkOptions = {
+  editor: Editor;
+  validate?: (url: string) => boolean;
+  newURL?: string;
+  newText?: string;
+};
+
+export default function editHyperlink(options: EditHyperlinkOptions) {
+  const { state, dispatch } = options.editor.view;
+  const { from, to } = state.selection;
+  let link: HTMLAnchorElement | null = null;
+
+  const selectedNode = options.editor.view.domAtPos(from - 1)
+    .node as HTMLElement;
+
+  if (selectedNode?.nodeName === "#text") {
+    link = (selectedNode.parentNode as HTMLElement)?.closest("a");
+  } else {
+    link = selectedNode?.closest("a");
+  }
+
+  if (!link) return true;
+
+  const text = options.newText || link?.innerText;
+  // Get the position of the link in the editor view
+  const nodePos = options.editor.view.posAtDOM(link, 0);
+
+  const sanitizeURL = find(options.newURL || link.href)
+    .filter((link) => link.isLink)
+    .filter((link) => (options.validate ? options.validate(link.value) : true))
+    .at(0);
+
+  return options.editor
+    .chain()
+    .focus()
+    .command(({ tr }) => {
+      // The command replaces the range from nodePos to nodePos + length of the text
+      // with a new text node with the provided text and a link mark with the sanitized URL
+      tr.replaceWith(
+        nodePos,
+        nodePos + text?.length,
+        options.editor.schema.text(text, [
+          options.editor.schema.marks.hyperlink.create({
+            href: sanitizeURL?.href,
+          }),
+        ])
+      );
+
+      return true;
+    })
+    .run();
+}

package/src/helpers/pasteHandler.ts

@@ -0,0 +1,46 @@
+import { Editor } from "@tiptap/core";
+import { MarkType } from "@tiptap/pm/model";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { find } from "linkifyjs";
+
+type PasteHandlerOptions = {
+  editor: Editor;
+  type: MarkType;
+};
+
+export function pasteHandler(options: PasteHandlerOptions): Plugin {
+  return new Plugin({
+    key: new PluginKey("handlePasteHyperlink"),
+    props: {
+      handlePaste: (view, event, slice) => {
+        const { state } = view;
+        const { selection } = state;
+        const { empty } = selection;
+
+        if (empty) {
+          return false;
+        }
+
+        let textContent = "";
+
+        slice.content.forEach((node) => {
+          textContent += node.textContent;
+        });
+
+        const link = find(textContent).find(
+          (item) => item.isLink && item.value === textContent
+        );
+
+        if (!textContent || !link) {
+          return false;
+        }
+
+        options.editor.commands.setMark(options.type, {
+          href: link.href,
+        });
+
+        return true;
+      },
+    },
+  });
+}

package/src/helpers/tippyHelper.ts

@@ -0,0 +1,126 @@
+import tippy, { Instance, Props, roundArrow } from "tippy.js";
+import { Editor } from "@tiptap/core";
+import { EditorView } from "@tiptap/pm/view";
+import { getAttributes, posToDOMRect } from "@tiptap/core";
+
+let tippyInstance: Instance | undefined;
+let preventHide: boolean = false;
+let tippyWrapper: HTMLDivElement;
+let editor: Editor;
+let view: EditorView;
+
+type TippyInitOptions = {
+  editor: Editor;
+  validate?: (url: string) => boolean;
+  view: EditorView;
+};
+
+export const init = (options: TippyInitOptions) => {
+  editor = options.editor;
+  view = options.view;
+  if (!tippyInstance) {
+    tippyWrapper = document.createElement("div");
+    tippyWrapper.addEventListener("mousedown", mousedownHandler, {
+      capture: true,
+    });
+    view.dom.addEventListener("dragstart", dragstartHandler);
+    editor.on("focus", focusHandler);
+    editor.on("blur", blurHandler);
+  }
+
+  return { tippyModal: tippyWrapper, tippyInstance: tippyInstance };
+};
+
+export const show = () => {
+  tippyInstance?.show();
+  return true;
+};
+
+export const hide = () => {
+  setTimeout(() => tippyInstance?.hide());
+  return false;
+};
+
+export const mousedownHandler = () => {
+  preventHide = true;
+};
+
+export const dragstartHandler = () => {
+  hide();
+};
+
+export const focusHandler = () => {
+  setTimeout(() => update(editor.view));
+};
+
+const blurHandler = ({ event }: { event: FocusEvent }) => {
+  if (preventHide) {
+    preventHide = false;
+    return;
+  }
+  if (event?.relatedTarget && tippyWrapper.parentNode?.contains(event.relatedTarget as Node)) {
+    return;
+  }
+  hide();
+};
+
+const tippyBlurHandler = (event: FocusEvent) => {
+  blurHandler({ event });
+};
+
+const createTooltip = () => {
+  if (!editor || !editor.options) return;
+  const { element: editorElement } = editor.options;
+  const editorIsAttached = !!editorElement.parentElement;
+
+  if (tippyInstance || !editorIsAttached) {
+    return;
+  }
+
+  tippyInstance = tippy(editorElement, {
+    duration: 0,
+    getReferenceClientRect: null,
+    content: tippyWrapper,
+    interactive: true,
+    trigger: "manual",
+    placement: "bottom",
+    hideOnClick: "toggle",
+  });
+
+  if (tippyInstance.popper.firstChild) {
+    (tippyInstance.popper.firstChild as HTMLElement).addEventListener("blur", tippyBlurHandler);
+  }
+};
+
+export const update = (view: EditorView, option: any = {}) => {
+  createTooltip();
+
+  // Ensure 'arrow' is false when not provided
+  option.arrow = option?.arrow ?? false;
+
+  if (tippyInstance) {
+    tippyInstance.setProps({
+      ...option,
+      getReferenceClientRect: () => {
+        const pos = view.state.selection.from;
+        return posToDOMRect(view, pos, pos);
+      },
+    });
+    show();
+  }
+
+  return {};
+};
+
+export const destroyTooltip = () => {
+  if (tippyInstance) {
+    tippyInstance.destroy();
+    tippyInstance = undefined;
+    tippyWrapper.removeEventListener("mousedown", mousedownHandler, {
+      capture: true,
+    });
+    view.dom.removeEventListener("dragstart", dragstartHandler);
+    editor.off("focus", focusHandler);
+    editor.off("blur", blurHandler);
+  }
+};