Add a function to create a LinkMatcher based on a RegExp (#3972)

packages/lexical-playground/src/plugins/AutoLinkPlugin/index.tsx

@@ -6,40 +6,25 @@
  *
  */
 
-import {AutoLinkPlugin} from '@lexical/react/LexicalAutoLinkPlugin';
+import {
+  AutoLinkPlugin,
+  createLinkMatcherWithRegExp,
+} from '@lexical/react/LexicalAutoLinkPlugin';
 import * as React from 'react';
 
-const URL_MATCHER =
+const URL_REGEX =
   /((https?:\/\/(www\.)?)|(www\.))[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/;
 
-const EMAIL_MATCHER =
+const EMAIL_REGEX =
   /(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))/;
 
 const MATCHERS = [
-  (text: string) => {
-    const match = URL_MATCHER.exec(text);
-    if (match === null) {
-      return null;
-    }
-    const fullMatch = match[0];
-    return {
-      index: match.index,
-      length: fullMatch.length,
-      text: fullMatch,
-      url: fullMatch.startsWith('http') ? fullMatch : `https://${fullMatch}`,
-    };
-  },
-  (text: string) => {
-    const match = EMAIL_MATCHER.exec(text);
-    return (
-      match && {
-        index: match.index,
-        length: match[0].length,
-        text: match[0],
-        url: `mailto:${match[0]}`,
-      }
-    );
-  },
+  createLinkMatcherWithRegExp(URL_REGEX, (text) => {
+    return text.startsWith('http') ? text : `https://${text}`;
+  }),
+  createLinkMatcherWithRegExp(EMAIL_REGEX, (text) => {
+    return `mailto:${text}`;
+  }),
 ];
 
 export default function LexicalAutoLinkPlugin(): JSX.Element {

packages/lexical-react/flow/LexicalAutoLinkPlugin.js.flow

@@ -21,6 +21,11 @@ type LinkMatcherResult = {
 
 export type LinkMatcher = (text: string) => LinkMatcherResult | null;
 
+declare export function createLinkMatcherWithRegExp(
+  regExp: RegExp,
+  urlTransformer?: (text: string) => string,
+): LinkMatcher;
+
 declare export function AutoLinkPlugin(props: {
   matchers: Array<LinkMatcher>,
   onChange?: ChangeHandler,

packages/lexical-react/src/LexicalAutoLinkPlugin.ts

@@ -39,6 +39,22 @@ type LinkMatcherResult = {
 
 export type LinkMatcher = (text: string) => LinkMatcherResult | null;
 
+export function createLinkMatcherWithRegExp(
+  regExp: RegExp,
+  urlTransformer: (text: string) => string = (text) => text,
+) {
+  return (text: string) => {
+    const match = regExp.exec(text);
+    if (match === null) return null;
+    return {
+      index: match.index,
+      length: match[0].length,
+      text: match[0],
+      url: urlTransformer(text),
+    };
+  };
+}
+
 function findFirstMatch(
   text: string,
   matchers: Array<LinkMatcher>,