@lexical/react 0.5.0 → 0.5.1-next.0

package/DEPRECATED_useLexicalDecorators.d.ts

@@ -6,4 +6,5 @@
  *
  */
 import type { LexicalEditor } from 'lexical';
-export declare function useLexicalDecorators(editor: LexicalEditor): Array<JSX.Element>;
+import { ErrorBoundaryType } from './shared/useDecorators';
+export declare function useLexicalDecorators(editor: LexicalEditor, ErrorBoundary?: ErrorBoundaryType): Array<JSX.Element>;

package/DEPRECATED_useLexicalDecorators.dev.js

@@ -6,9 +6,106 @@
  */
 'use strict';
 
-var react = require('react');
+var React = require('react');
 var reactDom = require('react-dom');
 
+/**
+ * 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 changedArray = (a = [], b = []) => a.length !== b.length || a.some((item, index) => !Object.is(item, b[index]));
+
+const initialState = {
+  error: null
+};
+
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = initialState;
+    this.resetErrorBoundary = this.resetErrorBoundary.bind(this);
+  }
+
+  static getDerivedStateFromError(error) {
+    return {
+      error
+    };
+  }
+
+  resetErrorBoundary(...args) {
+    // @ts-ignore
+    // eslint-disable-next-line no-unused-expressions
+    this.props.onReset && this.props.onReset(...args);
+    this.reset();
+  }
+
+  reset() {
+    this.setState(initialState);
+  }
+
+  componentDidCatch(error, info) {
+    // @ts-ignore
+    // eslint-disable-next-line no-unused-expressions
+    this.props.onError && this.props.onError(error, info);
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    const {
+      error
+    } = this.state;
+    const {
+      resetKeys
+    } = this.props; // There's an edge case where if the thing that triggered the error
+    // happens to *also* be in the resetKeys array, we'd end up resetting
+    // the error boundary immediately. This would likely trigger a second
+    // error to be thrown.
+    // So we make sure that we don't check the resetKeys on the first call
+    // of cDU after the error is set
+
+    if (error !== null && prevState.error !== null && changedArray(prevProps.resetKeys, resetKeys)) {
+      // @ts-ignore
+      // eslint-disable-next-line no-unused-expressions
+      this.props.onResetKeysChange && this.props.onResetKeysChange(prevProps.resetKeys, resetKeys);
+      this.reset();
+    }
+  }
+
+  render() {
+    const {
+      error
+    } = this.state;
+    const {
+      fallbackRender,
+      FallbackComponent,
+      fallback
+    } = this.props;
+
+    if (error !== null) {
+      const props = {
+        error,
+        resetErrorBoundary: this.resetErrorBoundary
+      };
+
+      if ( /*#__PURE__*/React.isValidElement(fallback)) {
+        return fallback;
+      } else if (typeof fallbackRender === 'function') {
+        return fallbackRender(props);
+      } else if (FallbackComponent) {
+        return /*#__PURE__*/React.createElement(FallbackComponent, props);
+      } else {
+        throw new Error('react-error-boundary requires either a fallback, fallbackRender, or FallbackComponent prop');
+      }
+    }
+
+    return this.props.children;
+  }
+
+}
+
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -25,7 +122,7 @@ const CAN_USE_DOM = typeof window !== 'undefined' && typeof window.document !==
  * LICENSE file in the root directory of this source tree.
  *
  */
-const useLayoutEffectImpl = CAN_USE_DOM ? react.useLayoutEffect : react.useEffect;
+const useLayoutEffectImpl = CAN_USE_DOM ? React.useLayoutEffect : React.useEffect;
 var useLayoutEffect = useLayoutEffectImpl;
 
 /**
@@ -35,8 +132,15 @@ var useLayoutEffect = useLayoutEffectImpl;
  * LICENSE file in the root directory of this source tree.
  *
  */
-function useDecorators(editor) {
-  const [decorators, setDecorators] = react.useState(() => editor.getDecorators()); // Subscribe to changes
+function useDecorators(editor, // TODO 0.6 Make non-optional non-default
+ErrorBoundary$1 = ({
+  children,
+  onError
+}) => /*#__PURE__*/React.createElement(ErrorBoundary, {
+  fallback: null,
+  onError: onError
+}, children)) {
+  const [decorators, setDecorators] = React.useState(() => editor.getDecorators()); // Subscribe to changes
 
   useLayoutEffect(() => {
     return editor.registerDecoratorListener(nextDecorators => {
@@ -45,20 +149,24 @@ function useDecorators(editor) {
       });
     });
   }, [editor]);
-  react.useEffect(() => {
+  React.useEffect(() => {
     // If the content editable mounts before the subscription is added, then
     // nothing will be rendered on initial pass. We can get around that by
     // ensuring that we set the value.
     setDecorators(editor.getDecorators());
   }, [editor]); // Return decorators defined as React Portals
 
-  return react.useMemo(() => {
+  return React.useMemo(() => {
     const decoratedPortals = [];
     const decoratorKeys = Object.keys(decorators);
 
     for (let i = 0; i < decoratorKeys.length; i++) {
       const nodeKey = decoratorKeys[i];
-      const reactDecorator = decorators[nodeKey];
+      const reactDecorator = /*#__PURE__*/React.createElement(ErrorBoundary$1, {
+        onError: e => editor._onError(e)
+      }, /*#__PURE__*/React.createElement(React.Suspense, {
+        fallback: null
+      }, decorators[nodeKey]));
       const element = editor.getElementByKey(nodeKey);
 
       if (element !== null) {
@@ -67,7 +175,7 @@ function useDecorators(editor) {
     }
 
     return decoratedPortals;
-  }, [decorators, editor]);
+  }, [ErrorBoundary$1, decorators, editor]);
 }
 
 /**
@@ -77,8 +185,15 @@ function useDecorators(editor) {
  * LICENSE file in the root directory of this source tree.
  *
  */
-function useLexicalDecorators(editor) {
-  return useDecorators(editor);
+function useLexicalDecorators(editor, // TODO 0.6 Make non-optional non-default
+ErrorBoundary$1 = ({
+  children,
+  onError
+}) => /*#__PURE__*/React.createElement(ErrorBoundary, {
+  fallback: null,
+  onError: onError
+}, children)) {
+  return useDecorators(editor, ErrorBoundary$1);
 }
 
 exports.useLexicalDecorators = useLexicalDecorators;

package/DEPRECATED_useLexicalDecorators.js.flow

@@ -12,6 +12,14 @@ import type {LexicalEditor} from 'lexical';
 
 import * as React from 'react';
 
+type ErrorBoundaryProps = $ReadOnly<{
+  children: React.Node,
+  onError?: (error: Error) => void,
+}>;
+export type ErrorBoundaryType = React.AbstractComponent<ErrorBoundaryProps>;
+
 declare export function useLexicalDecorators(
   editor: LexicalEditor,
+  // TODO 0.6 Make non-optional non-default
+  ErrorBoundary?: ErrorBoundaryType,
 ): Array<React.Node>;

package/DEPRECATED_useLexicalDecorators.prod.js

@@ -4,5 +4,9 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-'use strict';var b=require("react"),g=require("react-dom"),l="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?b.useLayoutEffect:b.useEffect;
-function m(a){let [e,h]=b.useState(()=>a.getDecorators());l(()=>a.registerDecoratorListener(d=>{g.flushSync(()=>{h(d)})}),[a]);b.useEffect(()=>{h(a.getDecorators())},[a]);return b.useMemo(()=>{let d=[],k=Object.keys(e);for(let f=0;f<k.length;f++){var c=k[f];let n=e[c];c=a.getElementByKey(c);null!==c&&d.push(g.createPortal(n,c))}return d},[e,a])}exports.useLexicalDecorators=function(a){return m(a)}
+'use strict';var e=require("react"),k=require("react-dom");let l=(a=[],b=[])=>a.length!==b.length||a.some((c,d)=>!Object.is(c,b[d])),m={error:null};
+class p extends e.Component{constructor(a){super(a);this.state=m;this.resetErrorBoundary=this.resetErrorBoundary.bind(this)}static getDerivedStateFromError(a){return{error:a}}resetErrorBoundary(...a){this.props.onReset&&this.props.onReset(...a);this.reset()}reset(){this.setState(m)}componentDidCatch(a,b){this.props.onError&&this.props.onError(a,b)}componentDidUpdate(a,b){let {error:c}=this.state,{resetKeys:d}=this.props;null!==c&&null!==b.error&&l(a.resetKeys,d)&&(this.props.onResetKeysChange&&this.props.onResetKeysChange(a.resetKeys,
+d),this.reset())}render(){var {error:a}=this.state;let {fallbackRender:b,FallbackComponent:c,fallback:d}=this.props;if(null!==a){a={error:a,resetErrorBoundary:this.resetErrorBoundary};if(e.isValidElement(d))return d;if("function"===typeof b)return b(a);if(c)return e.createElement(c,a);throw Error("react-error-boundary requires either a fallback, fallbackRender, or FallbackComponent prop");}return this.props.children}}
+var q="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?e.useLayoutEffect:e.useEffect;
+function r(a,b=({children:c,onError:d})=>e.createElement(p,{fallback:null,onError:d},c)){let [c,d]=e.useState(()=>a.getDecorators());q(()=>a.registerDecoratorListener(g=>{k.flushSync(()=>{d(g)})}),[a]);e.useEffect(()=>{d(a.getDecorators())},[a]);return e.useMemo(()=>{let g=[],n=Object.keys(c);for(let h=0;h<n.length;h++){var f=n[h];let u=e.createElement(b,{onError:t=>a._onError(t)},e.createElement(e.Suspense,{fallback:null},c[f]));f=a.getElementByKey(f);null!==f&&g.push(k.createPortal(u,f))}return g},
+[b,c,a])}exports.useLexicalDecorators=function(a,b=({children:c,onError:d})=>e.createElement(p,{fallback:null,onError:d},c)){return r(a,b)}

package/LexicalAutoEmbedPlugin.d.ts

@@ -6,9 +6,8 @@
  *
  */
 import type { LexicalNode } from 'lexical';
-import { TypeaheadOption } from '@lexical/react/LexicalTypeaheadMenuPlugin';
+import { MenuRenderFn, TypeaheadOption } from '@lexical/react/LexicalTypeaheadMenuPlugin';
 import { LexicalCommand, LexicalEditor } from 'lexical';
-import * as React from 'react';
 export declare type EmbedMatchResult = {
     url: string;
     id: string;
@@ -20,13 +19,6 @@ export interface EmbedConfig {
 }
 export declare const URL_MATCHER: RegExp;
 export declare const INSERT_EMBED_COMMAND: LexicalCommand<EmbedConfig['type']>;
-export declare type EmbedMenuProps = {
-    selectedItemIndex: number | null;
-    onOptionClick: (option: AutoEmbedOption, index: number) => void;
-    onOptionMouseEnter: (index: number) => void;
-    options: Array<AutoEmbedOption>;
-};
-export declare type EmbedMenuComponent = React.ComponentType<EmbedMenuProps>;
 export declare class AutoEmbedOption extends TypeaheadOption {
     title: string;
     onSelect: (targetNode: LexicalNode | null) => void;
@@ -37,8 +29,8 @@ export declare class AutoEmbedOption extends TypeaheadOption {
 declare type LexicalAutoEmbedPluginProps<TEmbedConfig extends EmbedConfig> = {
     embedConfigs: Array<TEmbedConfig>;
     onOpenEmbedModalForConfig: (embedConfig: TEmbedConfig) => void;
-    menuComponent: EmbedMenuComponent;
     getMenuOptions: (activeEmbedConfig: TEmbedConfig, embedFn: () => void, dismissFn: () => void) => Array<AutoEmbedOption>;
+    menuRenderFn: MenuRenderFn<AutoEmbedOption>;
 };
-export declare function LexicalAutoEmbedPlugin<TEmbedConfig extends EmbedConfig>({ embedConfigs, onOpenEmbedModalForConfig, getMenuOptions, menuComponent: MenuComponent, }: LexicalAutoEmbedPluginProps<TEmbedConfig>): JSX.Element | null;
+export declare function LexicalAutoEmbedPlugin<TEmbedConfig extends EmbedConfig>({ embedConfigs, onOpenEmbedModalForConfig, getMenuOptions, menuRenderFn, }: LexicalAutoEmbedPluginProps<TEmbedConfig>): JSX.Element | null;
 export {};

package/LexicalAutoEmbedPlugin.dev.js

@@ -12,7 +12,6 @@ var LexicalTypeaheadMenuPlugin = require('@lexical/react/LexicalTypeaheadMenuPlu
 var utils = require('@lexical/utils');
 var lexical = require('lexical');
 var React = require('react');
-var ReactDOM = require('react-dom');
 
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
@@ -22,7 +21,7 @@ var ReactDOM = require('react-dom');
  *
  */
 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();
+const INSERT_EMBED_COMMAND = lexical.createCommand('INSERT_EMBED_COMMAND');
 class AutoEmbedOption extends LexicalTypeaheadMenuPlugin.TypeaheadOption {
   constructor(title, options) {
     super(title);
@@ -35,7 +34,7 @@ function LexicalAutoEmbedPlugin({
   embedConfigs,
   onOpenEmbedModalForConfig,
   getMenuOptions,
-  menuComponent: MenuComponent
+  menuRenderFn
 }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
   const [nodeKey, setNodeKey] = React.useState(null);
@@ -131,21 +130,7 @@ function LexicalAutoEmbedPlugin({
     onClose: reset,
     onSelectOption: onSelectOption,
     options: options,
-    menuRenderFn: (anchorElement, {
-      selectedIndex,
-      selectOptionAndCleanUp,
-      setHighlightedIndex
-    }) => anchorElement && nodeKey != null ? /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(MenuComponent, {
-      options: options,
-      selectedItemIndex: selectedIndex,
-      onOptionClick: (option, index) => {
-        setHighlightedIndex(index);
-        selectOptionAndCleanUp(option);
-      },
-      onOptionMouseEnter: index => {
-        setHighlightedIndex(index);
-      }
-    }), anchorElement) : null
+    menuRenderFn: menuRenderFn
   }) : null;
 }
 

package/LexicalAutoEmbedPlugin.js.flow

@@ -13,6 +13,7 @@ import {TypeaheadOption} from '@lexical/react/LexicalTypeaheadMenuPlugin';
 import type {LexicalCommand, LexicalEditor, NodeKey, TextNode} from 'lexical';
 import * as React from 'react';
 import {createCommand} from 'lexical';
+import type {MenuRenderFn} from './LexicalTypeaheadMenuPlugin';
 
 export type EmbedMatchResult = {
   url: string,
@@ -32,26 +33,17 @@ export const URL_MATCHER: RegExp =
   /((https?:\/\/(www\.)?)|(www\.))[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/;
 
 export const INSERT_EMBED_COMMAND: LexicalCommand<EmbedConfig['type']> =
-  createCommand();
-
-export type EmbedMenuProps = {
-  selectedItemIndex: number | null,
-  onOptionClick: (option: AutoEmbedOption, index: number) => void,
-  onOptionMouseEnter: (index: number) => void,
-  options: Array<AutoEmbedOption>,
-};
-
-export type EmbedMenuComponent = React.ComponentType<EmbedMenuProps>;
+  createCommand('INSERT_EMBED_COMMAND');
 
 type LexicalAutoEmbedPluginProps<TEmbedConfig> = {
   embedConfigs: Array<TEmbedConfig>,
   onOpenEmbedModalForConfig: (embedConfig: TEmbedConfig) => void,
-  menuComponent: EmbedMenuComponent,
   getMenuOptions: (
     activeEmbedConfig: TEmbedConfig,
     embedFn: () => void,
     dismissFn: () => void,
   ) => Array<AutoEmbedOption>,
+  menuRenderFn: MenuRenderFn<AutoEmbedOption>,
 };
 
 declare export class AutoEmbedOption extends TypeaheadOption {

package/LexicalAutoEmbedPlugin.prod.js

@@ -4,8 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-'use strict';var e=require("@lexical/link"),m=require("@lexical/react/LexicalComposerContext"),p=require("@lexical/react/LexicalTypeaheadMenuPlugin"),t=require("@lexical/utils"),u=require("lexical"),B=require("react"),C=require("react-dom");let D=u.createCommand();class E extends p.TypeaheadOption{constructor(g,q){super(g);this.title=g;this.onSelect=q.onSelect.bind(this)}}exports.AutoEmbedOption=E;exports.INSERT_EMBED_COMMAND=D;
-exports.LexicalAutoEmbedPlugin=function({embedConfigs:g,onOpenEmbedModalForConfig:q,getMenuOptions:v,menuComponent:F}){let [c]=m.useLexicalComposerContext(),[f,w]=B.useState(null),[h,x]=B.useState(null),n=B.useCallback(()=>{w(null);x(null)},[]),y=B.useCallback(b=>{c.getEditorState().read(()=>{const a=u.$getNodeByKey(b);if(e.$isLinkNode(a)){const d=g.find(k=>k.parseUrl(a.__url));null!=d&&(x(d),w(a.getKey()))}})},[c,g]);B.useEffect(()=>{let b=(a,{updateTags:d,dirtyLeaves:k})=>{for(const [l,r]of a)"created"===
-r&&d.has("paste")&&1===k.size?y(l):l===f&&n()};return t.mergeRegister(...[e.LinkNode,e.AutoLinkNode].map(a=>c.registerMutationListener(a,(...d)=>b(...d))))},[y,c,g,f,n]);B.useEffect(()=>c.registerCommand(D,b=>{let a=g.find(({type:d})=>d===b);return a?(q(a),!0):!1},u.COMMAND_PRIORITY_EDITOR),[c,g,q]);let z=B.useCallback(()=>{if(null!=h&&null!=f){const b=c.getEditorState().read(()=>{const a=u.$getNodeByKey(f);return e.$isLinkNode(a)?a:null});if(e.$isLinkNode(b)){const a=h.parseUrl(b.__url);null!=a&&
-(c.update(()=>{h.insertNode(c,a)}),b.isAttached()&&c.update(()=>{b.remove()}))}}},[h,c,f]),A=B.useMemo(()=>null!=h&&null!=f?v(h,z,n):[],[h,z,v,f,n]),G=B.useCallback((b,a,d)=>{c.update(()=>{b.onSelect(a);d()})},[c]);return null!=f?B.createElement(p.LexicalNodeMenuPlugin,{nodeKey:f,onClose:n,onSelectOption:G,options:A,menuRenderFn:(b,{selectedIndex:a,selectOptionAndCleanUp:d,setHighlightedIndex:k})=>b&&null!=f?C.createPortal(B.createElement(F,{options:A,selectedItemIndex:a,onOptionClick:(l,r)=>{k(r);
-d(l)},onOptionMouseEnter:l=>{k(l)}}),b):null}):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 d=require("@lexical/link"),k=require("@lexical/react/LexicalComposerContext"),m=require("@lexical/react/LexicalTypeaheadMenuPlugin"),q=require("@lexical/utils"),r=require("lexical"),z=require("react");let A=r.createCommand("INSERT_EMBED_COMMAND");class B extends m.TypeaheadOption{constructor(g,n){super(g);this.title=g;this.onSelect=n.onSelect.bind(this)}}exports.AutoEmbedOption=B;exports.INSERT_EMBED_COMMAND=A;
+exports.LexicalAutoEmbedPlugin=function({embedConfigs:g,onOpenEmbedModalForConfig:n,getMenuOptions:t,menuRenderFn:C}){let [b]=k.useLexicalComposerContext(),[f,u]=z.useState(null),[h,v]=z.useState(null),l=z.useCallback(()=>{u(null);v(null)},[]),w=z.useCallback(c=>{b.getEditorState().read(()=>{const a=r.$getNodeByKey(c);if(d.$isLinkNode(a)){const e=g.find(p=>p.parseUrl(a.__url));null!=e&&(v(e),u(a.getKey()))}})},[b,g]);z.useEffect(()=>{let c=(a,{updateTags:e,dirtyLeaves:p})=>{for(const [x,D]of a)"created"===
+D&&e.has("paste")&&1===p.size?w(x):x===f&&l()};return q.mergeRegister(...[d.LinkNode,d.AutoLinkNode].map(a=>b.registerMutationListener(a,(...e)=>c(...e))))},[w,b,g,f,l]);z.useEffect(()=>b.registerCommand(A,c=>{let a=g.find(({type:e})=>e===c);return a?(n(a),!0):!1},r.COMMAND_PRIORITY_EDITOR),[b,g,n]);let y=z.useCallback(()=>{if(null!=h&&null!=f){const c=b.getEditorState().read(()=>{const a=r.$getNodeByKey(f);return d.$isLinkNode(a)?a:null});if(d.$isLinkNode(c)){const a=h.parseUrl(c.__url);null!=a&&
+(b.update(()=>{h.insertNode(b,a)}),c.isAttached()&&b.update(()=>{c.remove()}))}}},[h,b,f]),E=z.useMemo(()=>null!=h&&null!=f?t(h,y,l):[],[h,y,t,f,l]),F=z.useCallback((c,a,e)=>{b.update(()=>{c.onSelect(a);e()})},[b]);return null!=f?z.createElement(m.LexicalNodeMenuPlugin,{nodeKey:f,onClose:l,onSelectOption:F,options:E,menuRenderFn:C}):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/LexicalAutoLinkPlugin.dev.js

@@ -32,6 +32,20 @@ function findFirstMatch(text, matchers) {
   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]);
+}
+
 function isPreviousNodeValid(node) {
   let previousNode = node.getPreviousSibling();
 
@@ -39,7 +53,7 @@ function isPreviousNodeValid(node) {
     previousNode = previousNode.getLastDescendant();
   }
 
-  return previousNode === null || lexical.$isLineBreakNode(previousNode) || lexical.$isTextNode(previousNode) && previousNode.getTextContent().endsWith(' ');
+  return previousNode === null || lexical.$isLineBreakNode(previousNode) || lexical.$isTextNode(previousNode) && endsWithSeparator(previousNode.getTextContent());
 }
 
 function isNextNodeValid(node) {
@@ -49,64 +63,55 @@ function isNextNodeValid(node) {
     nextNode = nextNode.getFirstDescendant();
   }
 
-  return nextNode === null || lexical.$isLineBreakNode(nextNode) || lexical.$isTextNode(nextNode) && nextNode.getTextContent().startsWith(' ');
+  return nextNode === null || lexical.$isLineBreakNode(nextNode) || lexical.$isTextNode(nextNode) && startsWithSeparator(nextNode.getTextContent());
+}
+
+function isContentAroundIsValid(matchStart, matchEnd, text, node) {
+  const contentBeforeIsValid = matchStart > 0 ? isSeparator(text[matchStart - 1]) : isPreviousNodeValid(node);
+
+  if (!contentBeforeIsValid) {
+    return false;
+  }
+
+  const contentAfterIsValid = matchEnd < text.length ? isSeparator(text[matchEnd]) : isNextNodeValid(node);
+  return contentAfterIsValid;
 }
 
 function handleLinkCreation(node, matchers, onChange) {
   const nodeText = node.getTextContent();
-  const nodeTextLength = nodeText.length;
   let text = nodeText;
-  let textOffset = 0;
-  let lastNode = node;
+  let invalidMatchEnd = 0;
+  let remainingTextNode = node;
   let match;
 
   while ((match = findFirstMatch(text, matchers)) && match !== null) {
-    const matchOffset = match.index;
-    const offset = textOffset + matchOffset;
-    const matchLength = match.length; // Previous node is valid if any of:
-    // 1. Space before same node
-    // 2. Space in previous simple text node
-    // 3. Previous node is LineBreakNode
-
-    let contentBeforeMatchIsValid;
-
-    if (offset > 0) {
-      contentBeforeMatchIsValid = nodeText[offset - 1] === ' ';
-    } else {
-      contentBeforeMatchIsValid = isPreviousNodeValid(node);
-    } // Next node is valid if any of:
-    // 1. Space after same node
-    // 2. Space in next simple text node
-    // 3. Next node is LineBreakNode
-
+    const matchStart = match.index;
+    const matchLength = match.length;
+    const matchEnd = matchStart + matchLength;
+    const isValid = isContentAroundIsValid(invalidMatchEnd + matchStart, invalidMatchEnd + matchEnd, nodeText, node);
 
-    let contentAfterMatchIsValid;
+    if (isValid) {
+      let linkTextNode;
 
-    if (offset + matchLength < nodeTextLength) {
-      contentAfterMatchIsValid = nodeText[offset + matchLength] === ' ';
-    } else {
-      contentAfterMatchIsValid = isNextNodeValid(node);
-    }
-
-    if (contentBeforeMatchIsValid && contentAfterMatchIsValid) {
-      let middleNode;
-
-      if (matchOffset === 0) {
-        [middleNode, lastNode] = lastNode.splitText(matchLength);
+      if (invalidMatchEnd + matchStart === 0) {
+        [linkTextNode, remainingTextNode] = remainingTextNode.splitText(invalidMatchEnd + matchLength);
       } else {
-        [, middleNode, lastNode] = lastNode.splitText(matchOffset, matchOffset + matchLength);
+        [, linkTextNode, remainingTextNode] = remainingTextNode.splitText(invalidMatchEnd + matchStart, invalidMatchEnd + matchStart + matchLength);
       }
 
-      const nodeFormat = node.__format;
       const linkNode = link.$createAutoLinkNode(match.url);
-      linkNode.append(lexical.$createTextNode(match.text).setFormat(nodeFormat));
-      middleNode.replace(linkNode);
+      const textNode = lexical.$createTextNode(match.text);
+      textNode.setFormat(linkTextNode.getFormat());
+      textNode.setDetail(linkTextNode.getDetail());
+      linkNode.append(textNode);
+      linkTextNode.replace(linkNode);
       onChange(match.url, null);
+      invalidMatchEnd = 0;
+    } else {
+      invalidMatchEnd += matchEnd;
     }
 
-    const iterationOffset = matchOffset + matchLength;
-    text = text.substring(iterationOffset);
-    textOffset += iterationOffset;
+    text = text.substring(matchEnd);
   }
 }
 
@@ -157,12 +162,12 @@ function handleBadNeighbors(textNode, onChange) {
   const nextSibling = textNode.getNextSibling();
   const text = textNode.getTextContent();
 
-  if (link.$isAutoLinkNode(previousSibling) && !text.startsWith(' ')) {
+  if (link.$isAutoLinkNode(previousSibling) && !startsWithSeparator(text)) {
     replaceWithChildren(previousSibling);
     onChange(null, previousSibling.getURL());
   }
 
-  if (link.$isAutoLinkNode(nextSibling) && !text.endsWith(' ')) {
+  if (link.$isAutoLinkNode(nextSibling) && !endsWithSeparator(text)) {
     replaceWithChildren(nextSibling);
     onChange(null, nextSibling.getURL());
   }
@@ -206,8 +211,6 @@ function useAutoLink(editor, matchers, onChange) {
 
         handleBadNeighbors(textNode, onChangeWrapped);
       }
-    }), editor.registerNodeTransform(link.AutoLinkNode, linkNode => {
-      handleLinkEdit(linkNode, matchers, onChangeWrapped);
     }));
   }, [editor, matchers, onChange]);
 }

package/LexicalAutoLinkPlugin.prod.js

@@ -4,9 +4,9 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-'use strict';var h=require("@lexical/link"),m=require("@lexical/react/LexicalComposerContext"),p=require("@lexical/utils"),v=require("lexical"),w=require("react");function x(a,c){for(let b=0;b<c.length;b++){let e=c[b](a);if(e)return e}return null}function y(a){a=a.getPreviousSibling();v.$isElementNode(a)&&(a=a.getLastDescendant());return null===a||v.$isLineBreakNode(a)||v.$isTextNode(a)&&a.getTextContent().endsWith(" ")}
-function A(a){a=a.getNextSibling();v.$isElementNode(a)&&(a=a.getFirstDescendant());return null===a||v.$isLineBreakNode(a)||v.$isTextNode(a)&&a.getTextContent().startsWith(" ")}
-function B(a,c,b){var e=a.getChildren();let d=e.length;for(let f=0;f<d;f++){let g=e[f];if(!v.$isTextNode(g)||!g.isSimpleText()){C(a);b(null,a.getURL());return}}e=a.getTextContent();c=x(e,c);null===c||c.text!==e?(C(a),b(null,a.getURL())):y(a)&&A(a)?(e=a.getURL(),null!==c&&e!==c.url&&(a.setURL(c.url),b(c.url,e))):(C(a),b(null,a.getURL()))}function C(a){let c=a.getChildren();var b=c.length;for(--b;0<=b;b--)a.insertAfter(c[b]);a.remove();return c.map(e=>e.getLatest())}
-function D(a,c,b){w.useEffect(()=>{if(!a.hasNodes([h.AutoLinkNode]))throw Error("Minified Lexical error #77; visit https://lexical.dev/docs/error?code=77 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.");let e=(d,f)=>{b&&b(d,f)};return p.mergeRegister(a.registerNodeTransform(v.TextNode,d=>{var f=d.getParentOrThrow();if(h.$isAutoLinkNode(f))B(f,c,e);else if(!h.$isLinkNode(f)){if(d.isSimpleText()){f=d.getTextContent();let E=f.length,u=f,
-z=0,r=d;for(var g;(g=x(u,c))&&null!==g;){var n=g.index,k=z+n;let q=g.length;var t=void 0;t=0<k?" "===f[k-1]:y(d);k=k+q<E?" "===f[k+q]:A(d);if(t&&k){var l=void 0;0===n?[l,r]=r.splitText(q):[,l,r]=r.splitText(n,n+q);t=d.__format;k=h.$createAutoLinkNode(g.url);k.append(v.$createTextNode(g.text).setFormat(t));l.replace(k);b&&b(g.url,null)}n+=q;u=u.substring(n);z+=n}}l=d.getPreviousSibling();g=d.getNextSibling();d=d.getTextContent();h.$isAutoLinkNode(l)&&!d.startsWith(" ")&&(C(l),l=l.getURL(),b&&b(null,
-l));h.$isAutoLinkNode(g)&&!d.endsWith(" ")&&(C(g),d=g.getURL(),b&&b(null,d))}}),a.registerNodeTransform(h.AutoLinkNode,d=>{B(d,c,e)}))},[a,c,b])}exports.AutoLinkPlugin=function({matchers:a,onChange:c}){let [b]=m.useLexicalComposerContext();D(b,a,c);return null}
+'use strict';var h=require("@lexical/link"),l=require("@lexical/react/LexicalComposerContext"),m=require("@lexical/utils"),q=require("lexical"),y=require("react");function z(b,e){for(let c=0;c<e.length;c++){let a=e[c](b);if(a)return a}return null}let A=/[.,;\s]/;function C(b){b=b.getPreviousSibling();q.$isElementNode(b)&&(b=b.getLastDescendant());var e;!(e=null===b||q.$isLineBreakNode(b))&&(e=q.$isTextNode(b))&&(b=b.getTextContent(),e=A.test(b[b.length-1]));return e}
+function D(b){b=b.getNextSibling();q.$isElementNode(b)&&(b=b.getFirstDescendant());return null===b||q.$isLineBreakNode(b)||q.$isTextNode(b)&&A.test(b.getTextContent()[0])}function E(b){let e=b.getChildren();var c=e.length;for(--c;0<=c;c--)b.insertAfter(e[c]);b.remove();return e.map(a=>a.getLatest())}
+function F(b,e,c){y.useEffect(()=>{if(!b.hasNodes([h.AutoLinkNode]))throw Error("Minified Lexical error #77; visit https://lexical.dev/docs/error?code=77 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.");return m.mergeRegister(b.registerNodeTransform(q.TextNode,a=>{var f=a.getParentOrThrow();if(h.$isAutoLinkNode(f))a:{a=f.getChildren();var d=a.length;for(var g=0;g<d;g++){var n=a[g];if(!q.$isTextNode(n)||!n.isSimpleText()){E(f);a=f.getURL();
+c&&c(null,a);break a}}d=f.getTextContent();a=z(d,e);null===a||a.text!==d?(E(f),a=f.getURL(),c&&c(null,a)):C(f)&&D(f)?(d=f.getURL(),null!==a&&d!==a.url&&(f.setURL(a.url),c&&c(a.url,d))):(E(f),a=f.getURL(),c&&c(null,a))}else if(!h.$isLinkNode(f)){if(a.isSimpleText()){n=f=a.getTextContent();let k=0,u=a;for(;(d=z(n,e))&&null!==d;){let r=d.index,v=d.length,w=r+v;var t=k+r,p=k+w,x=f,B=a;(0<t?A.test(x[t-1]):C(B))&&(p<x.length?A.test(x[p]):D(B))?(0===k+r?[g,u]=u.splitText(k+v):[,g,u]=u.splitText(k+r,k+r+
+v),t=h.$createAutoLinkNode(d.url),p=q.$createTextNode(d.text),p.setFormat(g.getFormat()),p.setDetail(g.getDetail()),t.append(p),g.replace(t),c&&c(d.url,null),k=0):k+=w;n=n.substring(w)}}g=a.getPreviousSibling();d=a.getNextSibling();a=a.getTextContent();h.$isAutoLinkNode(g)&&!A.test(a[0])&&(E(g),g=g.getURL(),c&&c(null,g));h.$isAutoLinkNode(d)&&!A.test(a[a.length-1])&&(E(d),a=d.getURL(),c&&c(null,a))}}))},[b,e,c])}
+exports.AutoLinkPlugin=function({matchers:b,onChange:e}){let [c]=l.useLexicalComposerContext();F(c,b,e);return null}

package/LexicalHorizontalRuleNode.dev.js

@@ -19,7 +19,7 @@ var React = require('react');
  * LICENSE file in the root directory of this source tree.
  *
  */
-const INSERT_HORIZONTAL_RULE_COMMAND = lexical.createCommand();
+const INSERT_HORIZONTAL_RULE_COMMAND = lexical.createCommand('INSERT_HORIZONTAL_RULE_COMMAND');
 
 function HorizontalRuleComponent({
   nodeKey

package/LexicalHorizontalRuleNode.prod.js

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-'use strict';var a=require("@lexical/react/LexicalComposerContext"),d=require("@lexical/react/useLexicalNodeSelection"),h=require("@lexical/utils"),l=require("lexical"),p=require("react");let q=l.createCommand();
+'use strict';var a=require("@lexical/react/LexicalComposerContext"),d=require("@lexical/react/useLexicalNodeSelection"),h=require("@lexical/utils"),l=require("lexical"),p=require("react");let q=l.createCommand("INSERT_HORIZONTAL_RULE_COMMAND");
 function r({nodeKey:b}){let [f]=a.useLexicalComposerContext(),m=p.useRef(null),[e,g,n]=d.useLexicalNodeSelection(b),k=p.useCallback(c=>{e&&l.$isNodeSelection(l.$getSelection())&&(c.preventDefault(),c=l.$getNodeByKey(b),t(c)&&c.remove(),g(!1));return!1},[e,b,g]);p.useEffect(()=>h.mergeRegister(f.registerCommand(l.CLICK_COMMAND,c=>c.target===m.current?(c.shiftKey||n(),g(!e),!0):!1,l.COMMAND_PRIORITY_LOW),f.registerCommand(l.KEY_DELETE_COMMAND,k,l.COMMAND_PRIORITY_LOW),f.registerCommand(l.KEY_BACKSPACE_COMMAND,
 k,l.COMMAND_PRIORITY_LOW)),[n,f,e,k,g]);return p.createElement("hr",{ref:m,className:e?"selected":void 0})}
 class u extends l.DecoratorNode{static getType(){return"horizontalrule"}static clone(b){return new u(b.__key)}static importJSON(){return v()}static importDOM(){return{hr:()=>({conversion:w,priority:0})}}exportJSON(){return{type:"horizontalrule",version:1}}exportDOM(){return{element:document.createElement("hr")}}createDOM(){let b=document.createElement("div");b.style.display="contents";return b}getTextContent(){return"\n"}isInline(){return!1}updateDOM(){return!1}decorate(){return p.createElement(r,{nodeKey:this.__key})}}

package/LexicalPlainTextPlugin.d.ts

@@ -5,7 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-export declare function PlainTextPlugin({ contentEditable, placeholder, }: {
+import { ErrorBoundaryType } from './shared/useDecorators';
+export declare function PlainTextPlugin({ contentEditable, placeholder, ErrorBoundary, }: {
     contentEditable: JSX.Element;
     placeholder: JSX.Element | string;
+    ErrorBoundary?: ErrorBoundaryType;
 }): JSX.Element;