@lexical/link 0.35.1-nightly.20250924.0 → 0.36.0

package/LexicalLink.dev.mjs

@@ -6,8 +6,9 @@
  *
  */
 
-import { addClassNamesToElement, isHTMLAnchorElement, $findMatchingParent } from '@lexical/utils';
-import { createCommand, ElementNode, $isRangeSelection, $applyNodeReplacement, $isElementNode, $getSelection, $isNodeSelection, $normalizeSelection__EXPERIMENTAL, $setSelection } from 'lexical';
+import { addClassNamesToElement, isHTMLAnchorElement, $findMatchingParent, mergeRegister, objectKlassEquals } from '@lexical/utils';
+import { createCommand, ElementNode, $isRangeSelection, $applyNodeReplacement, $isElementNode, $getSelection, $isNodeSelection, $normalizeSelection__EXPERIMENTAL, $setSelection, defineExtension, COMMAND_PRIORITY_LOW, PASTE_COMMAND, safeCast, isDOMNode, getNearestEditorFromDOMNode, $getNearestNodeFromDOMNode, shallowMergeConfig, TextNode, $isTextNode, $isLineBreakNode, $createTextNode } from 'lexical';
+import { namedSignals, effect } from '@lexical/extension';
 
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
@@ -28,13 +29,13 @@ const SUPPORTED_URL_PROTOCOLS = new Set(['http:', 'https:', 'mailto:', 'sms:', '
 /** @noInheritDoc */
 class LinkNode extends ElementNode {
   /** @internal */
-
+  __url;
   /** @internal */
-
+  __target;
   /** @internal */
-
+  __rel;
   /** @internal */
-
+  __title;
   static getType() {
     return 'link';
   }
@@ -229,7 +230,7 @@ function $isLinkNode(node) {
 class AutoLinkNode extends LinkNode {
   /** @internal */
   /** Indicates whether the autolink was ever unlinked. **/
-
+  __isUnlinked;
   constructor(url = '', attributes = {}, key) {
     super(url, attributes, key);
     this.__isUnlinked = attributes.isUnlinked !== undefined && attributes.isUnlinked !== null ? attributes.isUnlinked : false;
@@ -369,10 +370,24 @@ function $withSelectedNodes($fn) {
 /**
  * Generates or updates a LinkNode. It can also delete a LinkNode if the URL is null,
  * but saves any children and brings them up to the parent node.
- * @param url - The URL the link directs to.
+ * @param urlOrAttributes - The URL the link directs to, or an attributes object with an url property
  * @param attributes - Optional HTML a tag attributes. \\{ target, rel, title \\}
  */
-function $toggleLink(url, attributes = {}) {
+function $toggleLink(urlOrAttributes, attributes = {}) {
+  let url;
+  if (urlOrAttributes && typeof urlOrAttributes === 'object') {
+    const {
+      url: urlProp,
+      ...rest
+    } = urlOrAttributes;
+    url = urlProp;
+    attributes = {
+      ...rest,
+      ...attributes
+    };
+  } else {
+    url = urlOrAttributes;
+  }
   const {
     target,
     title
@@ -514,8 +529,6 @@ function $toggleLink(url, attributes = {}) {
     }
   });
 }
-/** @deprecated renamed to {@link $toggleLink} by @lexical/eslint-plugin rules-of-lexical */
-const toggleLink = $toggleLink;
 const PHONE_NUMBER_REGEX = /^\+?[0-9\s()-]{5,}$/;
 
 /**
@@ -550,4 +563,560 @@ function formatUrl(url) {
   return `https://${url}`;
 }
 
-export { $createAutoLinkNode, $createLinkNode, $isAutoLinkNode, $isLinkNode, $toggleLink, AutoLinkNode, LinkNode, TOGGLE_LINK_COMMAND, formatUrl, toggleLink };
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+const defaultProps = {
+  attributes: undefined,
+  validateUrl: undefined
+};
+
+/** @internal */
+function registerLink(editor, stores) {
+  return mergeRegister(effect(() => editor.registerCommand(TOGGLE_LINK_COMMAND, payload => {
+    const validateUrl = stores.validateUrl.peek();
+    const attributes = stores.attributes.peek();
+    if (payload === null) {
+      $toggleLink(null);
+      return true;
+    } else if (typeof payload === 'string') {
+      if (validateUrl === undefined || validateUrl(payload)) {
+        $toggleLink(payload, attributes);
+        return true;
+      }
+      return false;
+    } else {
+      const {
+        url,
+        target,
+        rel,
+        title
+      } = payload;
+      $toggleLink(url, {
+        ...attributes,
+        rel,
+        target,
+        title
+      });
+      return true;
+    }
+  }, COMMAND_PRIORITY_LOW)), effect(() => {
+    const validateUrl = stores.validateUrl.value;
+    if (!validateUrl) {
+      return;
+    }
+    const attributes = stores.attributes.value;
+    return editor.registerCommand(PASTE_COMMAND, event => {
+      const selection = $getSelection();
+      if (!$isRangeSelection(selection) || selection.isCollapsed() || !objectKlassEquals(event, ClipboardEvent)) {
+        return false;
+      }
+      if (event.clipboardData === null) {
+        return false;
+      }
+      const clipboardText = event.clipboardData.getData('text');
+      if (!validateUrl(clipboardText)) {
+        return false;
+      }
+      // If we select nodes that are elements then avoid applying the link.
+      if (!selection.getNodes().some(node => $isElementNode(node))) {
+        editor.dispatchCommand(TOGGLE_LINK_COMMAND, {
+          ...attributes,
+          url: clipboardText
+        });
+        event.preventDefault();
+        return true;
+      }
+      return false;
+    }, COMMAND_PRIORITY_LOW);
+  }));
+}
+
+/**
+ * Provides {@link LinkNode}, an implementation of
+ * {@link TOGGLE_LINK_COMMAND}, and a {@link PASTE_COMMAND}
+ * listener to wrap selected nodes in a link when a
+ * URL is pasted and `validateUrl` is defined.
+ */
+const LinkExtension = defineExtension({
+  build(editor, config, state) {
+    return namedSignals(config);
+  },
+  config: defaultProps,
+  name: '@lexical/link/Link',
+  nodes: [LinkNode],
+  register(editor, config, state) {
+    return registerLink(editor, state.getOutput());
+  }
+});
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+function findMatchingDOM(startNode, predicate) {
+  let node = startNode;
+  while (node != null) {
+    if (predicate(node)) {
+      return node;
+    }
+    node = node.parentNode;
+  }
+  return null;
+}
+function registerClickableLink(editor, stores, eventOptions = {}) {
+  const onClick = event => {
+    const target = event.target;
+    if (!isDOMNode(target)) {
+      return;
+    }
+    const nearestEditor = getNearestEditorFromDOMNode(target);
+    if (nearestEditor === null) {
+      return;
+    }
+    let url = null;
+    let urlTarget = null;
+    nearestEditor.update(() => {
+      const clickedNode = $getNearestNodeFromDOMNode(target);
+      if (clickedNode !== null) {
+        const maybeLinkNode = $findMatchingParent(clickedNode, $isElementNode);
+        if (!stores.disabled.peek()) {
+          if ($isLinkNode(maybeLinkNode)) {
+            url = maybeLinkNode.sanitizeUrl(maybeLinkNode.getURL());
+            urlTarget = maybeLinkNode.getTarget();
+          } else {
+            const a = findMatchingDOM(target, isHTMLAnchorElement);
+            if (a !== null) {
+              url = a.href;
+              urlTarget = a.target;
+            }
+          }
+        }
+      }
+    });
+    if (url === null || url === '') {
+      return;
+    }
+
+    // Allow user to select link text without following url
+    const selection = editor.getEditorState().read($getSelection);
+    if ($isRangeSelection(selection) && !selection.isCollapsed()) {
+      event.preventDefault();
+      return;
+    }
+    const isMiddle = event.type === 'auxclick' && event.button === 1;
+    window.open(url, stores.newTab.peek() || isMiddle || event.metaKey || event.ctrlKey || urlTarget === '_blank' ? '_blank' : '_self');
+    event.preventDefault();
+  };
+  const onMouseUp = event => {
+    if (event.button === 1) {
+      onClick(event);
+    }
+  };
+  return editor.registerRootListener((rootElement, prevRootElement) => {
+    if (prevRootElement !== null) {
+      prevRootElement.removeEventListener('click', onClick);
+      prevRootElement.removeEventListener('mouseup', onMouseUp);
+    }
+    if (rootElement !== null) {
+      rootElement.addEventListener('click', onClick, eventOptions);
+      rootElement.addEventListener('mouseup', onMouseUp, eventOptions);
+    }
+  });
+}
+
+/**
+ * Normally in a Lexical editor the `CLICK_COMMAND` on a LinkNode will cause the
+ * selection to change instead of opening a link. This extension can be used to
+ * restore the default behavior, e.g. when the editor is not editable.
+ */
+const ClickableLinkExtension = defineExtension({
+  build(editor, config, state) {
+    return namedSignals(config);
+  },
+  config: safeCast({
+    disabled: false,
+    newTab: false
+  }),
+  dependencies: [LinkExtension],
+  name: '@lexical/link/ClickableLink',
+  register(editor, config, state) {
+    return registerClickableLink(editor, state.getOutput());
+  }
+});
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+function createLinkMatcherWithRegExp(regExp, urlTransformer = text => text) {
+  return text => {
+    const match = regExp.exec(text);
+    if (match === null) {
+      return null;
+    }
+    return {
+      index: match.index,
+      length: match[0].length,
+      text: match[0],
+      url: urlTransformer(match[0])
+    };
+  };
+}
+function findFirstMatch(text, matchers) {
+  for (let i = 0; i < matchers.length; i++) {
+    const match = matchers[i](text);
+    if (match) {
+      return match;
+    }
+  }
+  return null;
+}
+const PUNCTUATION_OR_SPACE = /[.,;\s]/;
+function isSeparator(char) {
+  return PUNCTUATION_OR_SPACE.test(char);
+}
+function endsWithSeparator(textContent) {
+  return isSeparator(textContent[textContent.length - 1]);
+}
+function startsWithSeparator(textContent) {
+  return isSeparator(textContent[0]);
+}
+
+/**
+ * Check if the text content starts with a fullstop followed by a top-level domain.
+ * Meaning if the text content can be a beginning of a top level domain.
+ * @param textContent
+ * @param isEmail
+ * @returns boolean
+ */
+function startsWithTLD(textContent, isEmail) {
+  if (isEmail) {
+    return /^\.[a-zA-Z]{2,}/.test(textContent);
+  } else {
+    return /^\.[a-zA-Z0-9]{1,}/.test(textContent);
+  }
+}
+function isPreviousNodeValid(node) {
+  let previousNode = node.getPreviousSibling();
+  if ($isElementNode(previousNode)) {
+    previousNode = previousNode.getLastDescendant();
+  }
+  return previousNode === null || $isLineBreakNode(previousNode) || $isTextNode(previousNode) && endsWithSeparator(previousNode.getTextContent());
+}
+function isNextNodeValid(node) {
+  let nextNode = node.getNextSibling();
+  if ($isElementNode(nextNode)) {
+    nextNode = nextNode.getFirstDescendant();
+  }
+  return nextNode === null || $isLineBreakNode(nextNode) || $isTextNode(nextNode) && startsWithSeparator(nextNode.getTextContent());
+}
+function isContentAroundIsValid(matchStart, matchEnd, text, nodes) {
+  const contentBeforeIsValid = matchStart > 0 ? isSeparator(text[matchStart - 1]) : isPreviousNodeValid(nodes[0]);
+  if (!contentBeforeIsValid) {
+    return false;
+  }
+  const contentAfterIsValid = matchEnd < text.length ? isSeparator(text[matchEnd]) : isNextNodeValid(nodes[nodes.length - 1]);
+  return contentAfterIsValid;
+}
+function extractMatchingNodes(nodes, startIndex, endIndex) {
+  const unmodifiedBeforeNodes = [];
+  const matchingNodes = [];
+  const unmodifiedAfterNodes = [];
+  let matchingOffset = 0;
+  let currentOffset = 0;
+  const currentNodes = [...nodes];
+  while (currentNodes.length > 0) {
+    const currentNode = currentNodes[0];
+    const currentNodeText = currentNode.getTextContent();
+    const currentNodeLength = currentNodeText.length;
+    const currentNodeStart = currentOffset;
+    const currentNodeEnd = currentOffset + currentNodeLength;
+    if (currentNodeEnd <= startIndex) {
+      unmodifiedBeforeNodes.push(currentNode);
+      matchingOffset += currentNodeLength;
+    } else if (currentNodeStart >= endIndex) {
+      unmodifiedAfterNodes.push(currentNode);
+    } else {
+      matchingNodes.push(currentNode);
+    }
+    currentOffset += currentNodeLength;
+    currentNodes.shift();
+  }
+  return [matchingOffset, unmodifiedBeforeNodes, matchingNodes, unmodifiedAfterNodes];
+}
+function $createAutoLinkNode_(nodes, startIndex, endIndex, match) {
+  const linkNode = $createAutoLinkNode(match.url, match.attributes);
+  if (nodes.length === 1) {
+    let remainingTextNode = nodes[0];
+    let linkTextNode;
+    if (startIndex === 0) {
+      [linkTextNode, remainingTextNode] = remainingTextNode.splitText(endIndex);
+    } else {
+      [, linkTextNode, remainingTextNode] = remainingTextNode.splitText(startIndex, endIndex);
+    }
+    const textNode = $createTextNode(match.text);
+    textNode.setFormat(linkTextNode.getFormat());
+    textNode.setDetail(linkTextNode.getDetail());
+    textNode.setStyle(linkTextNode.getStyle());
+    linkNode.append(textNode);
+    linkTextNode.replace(linkNode);
+    return remainingTextNode;
+  } else if (nodes.length > 1) {
+    const firstTextNode = nodes[0];
+    let offset = firstTextNode.getTextContent().length;
+    let firstLinkTextNode;
+    if (startIndex === 0) {
+      firstLinkTextNode = firstTextNode;
+    } else {
+      [, firstLinkTextNode] = firstTextNode.splitText(startIndex);
+    }
+    const linkNodes = [];
+    let remainingTextNode;
+    for (let i = 1; i < nodes.length; i++) {
+      const currentNode = nodes[i];
+      const currentNodeText = currentNode.getTextContent();
+      const currentNodeLength = currentNodeText.length;
+      const currentNodeStart = offset;
+      const currentNodeEnd = offset + currentNodeLength;
+      if (currentNodeStart < endIndex) {
+        if (currentNodeEnd <= endIndex) {
+          linkNodes.push(currentNode);
+        } else {
+          const [linkTextNode, endNode] = currentNode.splitText(endIndex - currentNodeStart);
+          linkNodes.push(linkTextNode);
+          remainingTextNode = endNode;
+        }
+      }
+      offset += currentNodeLength;
+    }
+    const selection = $getSelection();
+    const selectedTextNode = selection ? selection.getNodes().find($isTextNode) : undefined;
+    const textNode = $createTextNode(firstLinkTextNode.getTextContent());
+    textNode.setFormat(firstLinkTextNode.getFormat());
+    textNode.setDetail(firstLinkTextNode.getDetail());
+    textNode.setStyle(firstLinkTextNode.getStyle());
+    linkNode.append(textNode, ...linkNodes);
+    // it does not preserve caret position if caret was at the first text node
+    // so we need to restore caret position
+    if (selectedTextNode && selectedTextNode === firstLinkTextNode) {
+      if ($isRangeSelection(selection)) {
+        textNode.select(selection.anchor.offset, selection.focus.offset);
+      } else if ($isNodeSelection(selection)) {
+        textNode.select(0, textNode.getTextContent().length);
+      }
+    }
+    firstLinkTextNode.replace(linkNode);
+    return remainingTextNode;
+  }
+  return undefined;
+}
+function $handleLinkCreation(nodes, matchers, onChange) {
+  let currentNodes = [...nodes];
+  const initialText = currentNodes.map(node => node.getTextContent()).join('');
+  let text = initialText;
+  let match;
+  let invalidMatchEnd = 0;
+  while ((match = findFirstMatch(text, matchers)) && match !== null) {
+    const matchStart = match.index;
+    const matchLength = match.length;
+    const matchEnd = matchStart + matchLength;
+    const isValid = isContentAroundIsValid(invalidMatchEnd + matchStart, invalidMatchEnd + matchEnd, initialText, currentNodes);
+    if (isValid) {
+      const [matchingOffset,, matchingNodes, unmodifiedAfterNodes] = extractMatchingNodes(currentNodes, invalidMatchEnd + matchStart, invalidMatchEnd + matchEnd);
+      const actualMatchStart = invalidMatchEnd + matchStart - matchingOffset;
+      const actualMatchEnd = invalidMatchEnd + matchEnd - matchingOffset;
+      const remainingTextNode = $createAutoLinkNode_(matchingNodes, actualMatchStart, actualMatchEnd, match);
+      currentNodes = remainingTextNode ? [remainingTextNode, ...unmodifiedAfterNodes] : unmodifiedAfterNodes;
+      onChange(match.url, null);
+      invalidMatchEnd = 0;
+    } else {
+      invalidMatchEnd += matchEnd;
+    }
+    text = text.substring(matchEnd);
+  }
+}
+function handleLinkEdit(linkNode, matchers, onChange) {
+  // Check children are simple text
+  const children = linkNode.getChildren();
+  const childrenLength = children.length;
+  for (let i = 0; i < childrenLength; i++) {
+    const child = children[i];
+    if (!$isTextNode(child) || !child.isSimpleText()) {
+      replaceWithChildren(linkNode);
+      onChange(null, linkNode.getURL());
+      return;
+    }
+  }
+
+  // Check text content fully matches
+  const text = linkNode.getTextContent();
+  const match = findFirstMatch(text, matchers);
+  if (match === null || match.text !== text) {
+    replaceWithChildren(linkNode);
+    onChange(null, linkNode.getURL());
+    return;
+  }
+
+  // Check neighbors
+  if (!isPreviousNodeValid(linkNode) || !isNextNodeValid(linkNode)) {
+    replaceWithChildren(linkNode);
+    onChange(null, linkNode.getURL());
+    return;
+  }
+  const url = linkNode.getURL();
+  if (url !== match.url) {
+    linkNode.setURL(match.url);
+    onChange(match.url, url);
+  }
+  if (match.attributes) {
+    const rel = linkNode.getRel();
+    if (rel !== match.attributes.rel) {
+      linkNode.setRel(match.attributes.rel || null);
+      onChange(match.attributes.rel || null, rel);
+    }
+    const target = linkNode.getTarget();
+    if (target !== match.attributes.target) {
+      linkNode.setTarget(match.attributes.target || null);
+      onChange(match.attributes.target || null, target);
+    }
+  }
+}
+
+// Bad neighbors are edits in neighbor nodes that make AutoLinks incompatible.
+// Given the creation preconditions, these can only be simple text nodes.
+function handleBadNeighbors(textNode, matchers, onChange) {
+  const previousSibling = textNode.getPreviousSibling();
+  const nextSibling = textNode.getNextSibling();
+  const text = textNode.getTextContent();
+  if ($isAutoLinkNode(previousSibling) && !previousSibling.getIsUnlinked() && (!startsWithSeparator(text) || startsWithTLD(text, previousSibling.isEmailURI()))) {
+    previousSibling.append(textNode);
+    handleLinkEdit(previousSibling, matchers, onChange);
+    onChange(null, previousSibling.getURL());
+  }
+  if ($isAutoLinkNode(nextSibling) && !nextSibling.getIsUnlinked() && !endsWithSeparator(text)) {
+    replaceWithChildren(nextSibling);
+    handleLinkEdit(nextSibling, matchers, onChange);
+    onChange(null, nextSibling.getURL());
+  }
+}
+function replaceWithChildren(node) {
+  const children = node.getChildren();
+  const childrenLength = children.length;
+  for (let j = childrenLength - 1; j >= 0; j--) {
+    node.insertAfter(children[j]);
+  }
+  node.remove();
+  return children.map(child => child.getLatest());
+}
+function getTextNodesToMatch(textNode) {
+  // check if next siblings are simple text nodes till a node contains a space separator
+  const textNodesToMatch = [textNode];
+  let nextSibling = textNode.getNextSibling();
+  while (nextSibling !== null && $isTextNode(nextSibling) && nextSibling.isSimpleText()) {
+    textNodesToMatch.push(nextSibling);
+    if (/[\s]/.test(nextSibling.getTextContent())) {
+      break;
+    }
+    nextSibling = nextSibling.getNextSibling();
+  }
+  return textNodesToMatch;
+}
+const defaultConfig = {
+  changeHandlers: [],
+  matchers: []
+};
+function registerAutoLink(editor, config = defaultConfig) {
+  const {
+    matchers,
+    changeHandlers
+  } = config;
+  const onChange = (url, prevUrl) => {
+    for (const handler of changeHandlers) {
+      handler(url, prevUrl);
+    }
+  };
+  return mergeRegister(editor.registerNodeTransform(TextNode, textNode => {
+    const parent = textNode.getParentOrThrow();
+    const previous = textNode.getPreviousSibling();
+    if ($isAutoLinkNode(parent) && !parent.getIsUnlinked()) {
+      handleLinkEdit(parent, matchers, onChange);
+    } else if (!$isLinkNode(parent)) {
+      if (textNode.isSimpleText() && (startsWithSeparator(textNode.getTextContent()) || !$isAutoLinkNode(previous))) {
+        const textNodesToMatch = getTextNodesToMatch(textNode);
+        $handleLinkCreation(textNodesToMatch, matchers, onChange);
+      }
+      handleBadNeighbors(textNode, matchers, onChange);
+    }
+  }), editor.registerCommand(TOGGLE_LINK_COMMAND, payload => {
+    const selection = $getSelection();
+    if (payload !== null || !$isRangeSelection(selection)) {
+      return false;
+    }
+    const nodes = selection.extract();
+    nodes.forEach(node => {
+      const parent = node.getParent();
+      if ($isAutoLinkNode(parent)) {
+        // invert the value
+        parent.setIsUnlinked(!parent.getIsUnlinked());
+        parent.markDirty();
+      }
+    });
+    return false;
+  }, COMMAND_PRIORITY_LOW));
+}
+
+/**
+ * An extension to automatically create AutoLinkNode from text
+ * that matches the configured matchers. No default implementation
+ * is provided for any matcher, see {@link createLinkMatcherWithRegExp}
+ * for a helper function to create a matcher from a RegExp, and the
+ * Playground's [AutoLinkPlugin](https://github.com/facebook/lexical/blob/main/packages/lexical-playground/src/plugins/AutoLinkPlugin/index.tsx)
+ * for some example RegExps that could be used.
+ *
+ * The given `matchers` and `changeHandlers` will be merged by
+ * concatenating the configured arrays.
+ */
+const AutoLinkExtension = defineExtension({
+  config: defaultConfig,
+  dependencies: [LinkExtension],
+  mergeConfig(config, overrides) {
+    const merged = shallowMergeConfig(config, overrides);
+    for (const k of ['matchers', 'changeHandlers']) {
+      const v = overrides[k];
+      if (Array.isArray(v)) {
+        merged[k] = [...config[k], ...v];
+      }
+    }
+    return merged;
+  },
+  name: '@lexical/link/AutoLink',
+  register: registerAutoLink
+});
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+
+/** @deprecated renamed to {@link $toggleLink} by @lexical/eslint-plugin rules-of-lexical */
+const toggleLink = $toggleLink;
+
+export { $createAutoLinkNode, $createLinkNode, $isAutoLinkNode, $isLinkNode, $toggleLink, AutoLinkExtension, AutoLinkNode, ClickableLinkExtension, LinkExtension, LinkNode, TOGGLE_LINK_COMMAND, createLinkMatcherWithRegExp, formatUrl, registerAutoLink, registerClickableLink, registerLink, toggleLink };