@lexical/react 0.35.1-nightly.20250924.0 → 0.36.0

package/ExtensionComponent.d.ts

@@ -0,0 +1,42 @@
+/**
+ * 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.
+ *
+ */
+import type { ComponentProps } from 'react';
+import { type AnyLexicalExtension, type LexicalExtensionOutput } from 'lexical';
+/**
+ * The lexical:extension prop combined with the props of the given Extension's
+ * output Component.
+ */
+export type ExtensionComponentProps<Extension extends AnyLexicalExtension> = {
+    /** The Extension */ 'lexical:extension': Extension;
+} & ([LexicalExtensionOutput<Extension>] extends [
+    {
+        Component: infer OutputComponentType extends React.ComponentType;
+    }
+] ? Omit<ComponentProps<OutputComponentType>, 'lexical:extension'> : never);
+/**
+ * A convenient way to get an Extension's output Component with {@link useExtensionComponent}
+ * and construct it in one step.
+ *
+ * @example
+ * Usage
+ * ```tsx
+ * return (
+ *   <ExtensionComponent
+ *     lexical:extension={TreeViewExtension}
+ *     viewClassName="tree-view-output" />
+ * );
+ * ```
+ *
+ * @example
+ * Alternative without ExtensionComponent
+ * ```tsx
+ * const TreeViewComponent = useExtensionComponent(TreeViewExtension);
+ * return (<TreeViewComponent viewClassName="tree-view-output" />);
+ * ```
+ */
+export declare function ExtensionComponent<Extension extends AnyLexicalExtension>({ 'lexical:extension': extension, ...props }: ExtensionComponentProps<Extension>): import("react/jsx-runtime").JSX.Element;

package/LexicalAutoEmbedPlugin.dev.js

@@ -27,6 +27,8 @@ var jsxRuntime = require('react/jsx-runtime');
 const URL_MATCHER = /((https?:\/\/(www\.)?)|(www\.))[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/;
 const INSERT_EMBED_COMMAND = lexical.createCommand('INSERT_EMBED_COMMAND');
 class AutoEmbedOption extends LexicalNodeMenuPlugin.MenuOption {
+  title;
+  onSelect;
   constructor(title, options) {
     super(title);
     this.title = title;

package/LexicalAutoEmbedPlugin.dev.mjs

@@ -25,6 +25,8 @@ import { jsx } from 'react/jsx-runtime';
 const URL_MATCHER = /((https?:\/\/(www\.)?)|(www\.))[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/;
 const INSERT_EMBED_COMMAND = createCommand('INSERT_EMBED_COMMAND');
 class AutoEmbedOption extends MenuOption {
+  title;
+  onSelect;
   constructor(title, options) {
     super(title);
     this.title = title;

package/LexicalAutoEmbedPlugin.prod.js

@@ -6,4 +6,4 @@
  *
  */
 
-"use strict";var e=require("@lexical/link"),t=require("@lexical/react/LexicalComposerContext"),n=require("@lexical/react/LexicalNodeMenuPlugin"),o=require("@lexical/utils"),i=require("lexical"),r=require("react"),l=require("react/jsx-runtime");const s=i.createCommand("INSERT_EMBED_COMMAND");class u extends n.MenuOption{constructor(e,t){super(e),this.title=e,this.onSelect=t.onSelect.bind(this)}}exports.AutoEmbedOption=u,exports.INSERT_EMBED_COMMAND=s,exports.LexicalAutoEmbedPlugin=function({embedConfigs:u,onOpenEmbedModalForConfig:a,getMenuOptions:c,menuRenderFn:d,menuCommandPriority:m=i.COMMAND_PRIORITY_LOW}){const[p]=t.useLexicalComposerContext(),[x,C]=r.useState(null),[f,M]=r.useState(null),g=r.useCallback((()=>{C(null),M(null)}),[]),E=r.useCallback((async t=>{const n=p.getEditorState().read((function(){const n=i.$getNodeByKey(t);if(e.$isLinkNode(n))return n.getURL()}));if(void 0!==n)for(const e of u){null!=await Promise.resolve(e.parseUrl(n))&&(M(e),C(t))}}),[p,u]);r.useEffect((()=>o.mergeRegister(...[e.LinkNode,e.AutoLinkNode].map((e=>p.registerMutationListener(e,((...e)=>((e,{updateTags:t,dirtyLeaves:n})=>{for(const[o,r]of e)"created"===r&&t.has(i.PASTE_TAG)&&n.size<=3?E(o):o===x&&g()})(...e)),{skipInitialization:!0}))))),[E,p,u,x,g]),r.useEffect((()=>p.registerCommand(s,(e=>{const t=u.find((({type:t})=>t===e));return!!t&&(a(t),!0)}),i.COMMAND_PRIORITY_EDITOR)),[p,u,a]);const N=r.useCallback((async function(){if(null!=f&&null!=x){const t=p.getEditorState().read((()=>{const t=i.$getNodeByKey(x);return e.$isLinkNode(t)?t:null}));if(e.$isLinkNode(t)){const e=await Promise.resolve(f.parseUrl(t.__url));null!=e&&p.update((()=>{i.$getSelection()||t.selectEnd(),f.insertNode(p,e),t.isAttached()&&t.remove()}))}}}),[f,p,x]),L=r.useMemo((()=>null!=f&&null!=x?c(f,N,g):[]),[f,N,c,x,g]),A=r.useCallback(((e,t,n)=>{p.update((()=>{e.onSelect(t),n()}))}),[p]);return null!=x?l.jsx(n.LexicalNodeMenuPlugin,{nodeKey:x,onClose:g,onSelectOption:A,options:L,menuRenderFn:d,commandPriority:m}):null},exports.URL_MATCHER=/((https?:\/\/(www\.)?)|(www\.))[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/;
+"use strict";var e=require("@lexical/link"),t=require("@lexical/react/LexicalComposerContext"),n=require("@lexical/react/LexicalNodeMenuPlugin"),o=require("@lexical/utils"),i=require("lexical"),l=require("react"),r=require("react/jsx-runtime");const s=i.createCommand("INSERT_EMBED_COMMAND");class u extends n.MenuOption{title;onSelect;constructor(e,t){super(e),this.title=e,this.onSelect=t.onSelect.bind(this)}}exports.AutoEmbedOption=u,exports.INSERT_EMBED_COMMAND=s,exports.LexicalAutoEmbedPlugin=function({embedConfigs:u,onOpenEmbedModalForConfig:a,getMenuOptions:c,menuRenderFn:d,menuCommandPriority:m=i.COMMAND_PRIORITY_LOW}){const[p]=t.useLexicalComposerContext(),[x,C]=l.useState(null),[f,M]=l.useState(null),g=l.useCallback((()=>{C(null),M(null)}),[]),E=l.useCallback((async t=>{const n=p.getEditorState().read((function(){const n=i.$getNodeByKey(t);if(e.$isLinkNode(n))return n.getURL()}));if(void 0!==n)for(const e of u){null!=await Promise.resolve(e.parseUrl(n))&&(M(e),C(t))}}),[p,u]);l.useEffect((()=>o.mergeRegister(...[e.LinkNode,e.AutoLinkNode].map((e=>p.registerMutationListener(e,((...e)=>((e,{updateTags:t,dirtyLeaves:n})=>{for(const[o,l]of e)"created"===l&&t.has(i.PASTE_TAG)&&n.size<=3?E(o):o===x&&g()})(...e)),{skipInitialization:!0}))))),[E,p,u,x,g]),l.useEffect((()=>p.registerCommand(s,(e=>{const t=u.find((({type:t})=>t===e));return!!t&&(a(t),!0)}),i.COMMAND_PRIORITY_EDITOR)),[p,u,a]);const N=l.useCallback((async function(){if(null!=f&&null!=x){const t=p.getEditorState().read((()=>{const t=i.$getNodeByKey(x);return e.$isLinkNode(t)?t:null}));if(e.$isLinkNode(t)){const e=await Promise.resolve(f.parseUrl(t.__url));null!=e&&p.update((()=>{i.$getSelection()||t.selectEnd(),f.insertNode(p,e),t.isAttached()&&t.remove()}))}}}),[f,p,x]),L=l.useMemo((()=>null!=f&&null!=x?c(f,N,g):[]),[f,N,c,x,g]),A=l.useCallback(((e,t,n)=>{p.update((()=>{e.onSelect(t),n()}))}),[p]);return null!=x?r.jsx(n.LexicalNodeMenuPlugin,{nodeKey:x,onClose:g,onSelectOption:A,options:L,menuRenderFn:d,commandPriority:m}):null},exports.URL_MATCHER=/((https?:\/\/(www\.)?)|(www\.))[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/;

package/LexicalAutoEmbedPlugin.prod.mjs

@@ -6,4 +6,4 @@
  *
  */
 
-import{$isLinkNode as e,LinkNode as t,AutoLinkNode as n}from"@lexical/link";import{useLexicalComposerContext as o}from"@lexical/react/LexicalComposerContext";import{MenuOption as r,LexicalNodeMenuPlugin as i}from"@lexical/react/LexicalNodeMenuPlugin";import{mergeRegister as l}from"@lexical/utils";import{createCommand as s,$getNodeByKey as a,COMMAND_PRIORITY_EDITOR as c,$getSelection as u,COMMAND_PRIORITY_LOW as m,PASTE_TAG as d}from"lexical";import{useState as p,useCallback as f,useEffect as x,useMemo as g}from"react";import{jsx as w}from"react/jsx-runtime";const C=/((https?:\/\/(www\.)?)|(www\.))[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/,y=s("INSERT_EMBED_COMMAND");class E extends r{constructor(e,t){super(e),this.title=e,this.onSelect=t.onSelect.bind(this)}}function M({embedConfigs:r,onOpenEmbedModalForConfig:s,getMenuOptions:C,menuRenderFn:E,menuCommandPriority:M=m}){const[S]=o(),[h,_]=p(null),[v,z]=p(null),A=f((()=>{_(null),z(null)}),[]),L=f((async t=>{const n=S.getEditorState().read((function(){const n=a(t);if(e(n))return n.getURL()}));if(void 0!==n)for(const e of r){null!=await Promise.resolve(e.parseUrl(n))&&(z(e),_(t))}}),[S,r]);x((()=>l(...[t,n].map((e=>S.registerMutationListener(e,((...e)=>((e,{updateTags:t,dirtyLeaves:n})=>{for(const[o,r]of e)"created"===r&&t.has(d)&&n.size<=3?L(o):o===h&&A()})(...e)),{skipInitialization:!0}))))),[L,S,r,h,A]),x((()=>S.registerCommand(y,(e=>{const t=r.find((({type:t})=>t===e));return!!t&&(s(t),!0)}),c)),[S,r,s]);const P=f((async function(){if(null!=v&&null!=h){const t=S.getEditorState().read((()=>{const t=a(h);return e(t)?t:null}));if(e(t)){const e=await Promise.resolve(v.parseUrl(t.__url));null!=e&&S.update((()=>{u()||t.selectEnd(),v.insertNode(S,e),t.isAttached()&&t.remove()}))}}}),[v,S,h]),b=g((()=>null!=v&&null!=h?C(v,P,A):[]),[v,P,C,h,A]),N=f(((e,t,n)=>{S.update((()=>{e.onSelect(t),n()}))}),[S]);return null!=h?w(i,{nodeKey:h,onClose:A,onSelectOption:N,options:b,menuRenderFn:E,commandPriority:M}):null}export{E as AutoEmbedOption,y as INSERT_EMBED_COMMAND,M as LexicalAutoEmbedPlugin,C as URL_MATCHER};
+import{$isLinkNode as e,LinkNode as t,AutoLinkNode as n}from"@lexical/link";import{useLexicalComposerContext as o}from"@lexical/react/LexicalComposerContext";import{MenuOption as r,LexicalNodeMenuPlugin as i}from"@lexical/react/LexicalNodeMenuPlugin";import{mergeRegister as l}from"@lexical/utils";import{createCommand as s,$getNodeByKey as a,COMMAND_PRIORITY_EDITOR as c,$getSelection as u,COMMAND_PRIORITY_LOW as m,PASTE_TAG as d}from"lexical";import{useState as p,useCallback as f,useEffect as x,useMemo as g}from"react";import{jsx as w}from"react/jsx-runtime";const C=/((https?:\/\/(www\.)?)|(www\.))[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/,S=s("INSERT_EMBED_COMMAND");class y extends r{title;onSelect;constructor(e,t){super(e),this.title=e,this.onSelect=t.onSelect.bind(this)}}function E({embedConfigs:r,onOpenEmbedModalForConfig:s,getMenuOptions:C,menuRenderFn:y,menuCommandPriority:E=m}){const[M]=o(),[h,_]=p(null),[v,z]=p(null),A=f((()=>{_(null),z(null)}),[]),L=f((async t=>{const n=M.getEditorState().read((function(){const n=a(t);if(e(n))return n.getURL()}));if(void 0!==n)for(const e of r){null!=await Promise.resolve(e.parseUrl(n))&&(z(e),_(t))}}),[M,r]);x((()=>l(...[t,n].map((e=>M.registerMutationListener(e,((...e)=>((e,{updateTags:t,dirtyLeaves:n})=>{for(const[o,r]of e)"created"===r&&t.has(d)&&n.size<=3?L(o):o===h&&A()})(...e)),{skipInitialization:!0}))))),[L,M,r,h,A]),x((()=>M.registerCommand(S,(e=>{const t=r.find((({type:t})=>t===e));return!!t&&(s(t),!0)}),c)),[M,r,s]);const P=f((async function(){if(null!=v&&null!=h){const t=M.getEditorState().read((()=>{const t=a(h);return e(t)?t:null}));if(e(t)){const e=await Promise.resolve(v.parseUrl(t.__url));null!=e&&M.update((()=>{u()||t.selectEnd(),v.insertNode(M,e),t.isAttached()&&t.remove()}))}}}),[v,M,h]),b=g((()=>null!=v&&null!=h?C(v,P,A):[]),[v,P,C,h,A]),N=f(((e,t,n)=>{M.update((()=>{e.onSelect(t),n()}))}),[M]);return null!=h?w(i,{nodeKey:h,onClose:A,onSelectOption:N,options:b,menuRenderFn:y,commandPriority:E}):null}export{y as AutoEmbedOption,S as INSERT_EMBED_COMMAND,E as LexicalAutoEmbedPlugin,C as URL_MATCHER};

package/LexicalAutoLinkPlugin.d.ts

@@ -5,25 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import type { AutoLinkAttributes } from '@lexical/link';
+import type { ChangeHandler, LinkMatcher } from '@lexical/link';
 import type { JSX } from 'react';
-type ChangeHandler = (url: string | null, prevUrl: string | null) => void;
-type LinkMatcherResult = {
-    attributes?: AutoLinkAttributes;
-    index: number;
-    length: number;
-    text: string;
-    url: string;
-};
-export type LinkMatcher = (text: string) => LinkMatcherResult | null;
-export declare function createLinkMatcherWithRegExp(regExp: RegExp, urlTransformer?: (text: string) => string): (text: string) => {
-    index: number;
-    length: number;
-    text: string;
-    url: string;
-} | null;
+export { type ChangeHandler, createLinkMatcherWithRegExp, type LinkMatcher, } from '@lexical/link';
 export declare function AutoLinkPlugin({ matchers, onChange, }: {
     matchers: Array<LinkMatcher>;
     onChange?: ChangeHandler;
 }): JSX.Element | null;
-export {};

package/LexicalAutoLinkPlugin.dev.js

@@ -10,8 +10,6 @@
 
 var link = require('@lexical/link');
 var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
-var utils = require('@lexical/utils');
-var lexical = require('lexical');
 var react = require('react');
 
 /**
@@ -28,279 +26,6 @@ function formatDevErrorMessage(message) {
   throw new Error(message);
 }
 
-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 (lexical.$isElementNode(previousNode)) {
-    previousNode = previousNode.getLastDescendant();
-  }
-  return previousNode === null || lexical.$isLineBreakNode(previousNode) || lexical.$isTextNode(previousNode) && endsWithSeparator(previousNode.getTextContent());
-}
-function isNextNodeValid(node) {
-  let nextNode = node.getNextSibling();
-  if (lexical.$isElementNode(nextNode)) {
-    nextNode = nextNode.getFirstDescendant();
-  }
-  return nextNode === null || lexical.$isLineBreakNode(nextNode) || lexical.$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 = link.$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 = lexical.$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 = lexical.$getSelection();
-    const selectedTextNode = selection ? selection.getNodes().find(lexical.$isTextNode) : undefined;
-    const textNode = lexical.$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 (lexical.$isRangeSelection(selection)) {
-        textNode.select(selection.anchor.offset, selection.focus.offset);
-      } else if (lexical.$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 (!lexical.$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 (link.$isAutoLinkNode(previousSibling) && !previousSibling.getIsUnlinked() && (!startsWithSeparator(text) || startsWithTLD(text, previousSibling.isEmailURI()))) {
-    previousSibling.append(textNode);
-    handleLinkEdit(previousSibling, matchers, onChange);
-    onChange(null, previousSibling.getURL());
-  }
-  if (link.$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 && lexical.$isTextNode(nextSibling) && nextSibling.isSimpleText()) {
-    textNodesToMatch.push(nextSibling);
-    if (/[\s]/.test(nextSibling.getTextContent())) {
-      break;
-    }
-    nextSibling = nextSibling.getNextSibling();
-  }
-  return textNodesToMatch;
-}
 function useAutoLink(editor, matchers, onChange) {
   react.useEffect(() => {
     if (!editor.hasNodes([link.AutoLinkNode])) {
@@ -308,39 +33,12 @@ function useAutoLink(editor, matchers, onChange) {
         formatDevErrorMessage(`LexicalAutoLinkPlugin: AutoLinkNode not registered on editor`);
       }
     }
-    const onChangeWrapped = (url, prevUrl) => {
-      if (onChange) {
-        onChange(url, prevUrl);
-      }
-    };
-    return utils.mergeRegister(editor.registerNodeTransform(lexical.TextNode, textNode => {
-      const parent = textNode.getParentOrThrow();
-      const previous = textNode.getPreviousSibling();
-      if (link.$isAutoLinkNode(parent) && !parent.getIsUnlinked()) {
-        handleLinkEdit(parent, matchers, onChangeWrapped);
-      } else if (!link.$isLinkNode(parent)) {
-        if (textNode.isSimpleText() && (startsWithSeparator(textNode.getTextContent()) || !link.$isAutoLinkNode(previous))) {
-          const textNodesToMatch = getTextNodesToMatch(textNode);
-          $handleLinkCreation(textNodesToMatch, matchers, onChangeWrapped);
-        }
-        handleBadNeighbors(textNode, matchers, onChangeWrapped);
-      }
-    }), editor.registerCommand(link.TOGGLE_LINK_COMMAND, payload => {
-      const selection = lexical.$getSelection();
-      if (payload !== null || !lexical.$isRangeSelection(selection)) {
-        return false;
-      }
-      const nodes = selection.extract();
-      nodes.forEach(node => {
-        const parent = node.getParent();
-        if (link.$isAutoLinkNode(parent)) {
-          // invert the value
-          parent.setIsUnlinked(!parent.getIsUnlinked());
-          parent.markDirty();
-        }
-      });
-      return false;
-    }, lexical.COMMAND_PRIORITY_LOW));
+  });
+  react.useEffect(() => {
+    return link.registerAutoLink(editor, {
+      changeHandlers: onChange ? [onChange] : [],
+      matchers
+    });
   }, [editor, matchers, onChange]);
 }
 function AutoLinkPlugin({
@@ -352,5 +50,5 @@ function AutoLinkPlugin({
   return null;
 }
 
+exports.createLinkMatcherWithRegExp = link.createLinkMatcherWithRegExp;
 exports.AutoLinkPlugin = AutoLinkPlugin;
-exports.createLinkMatcherWithRegExp = createLinkMatcherWithRegExp;