@lexical/react 0.4.1 → 0.5.1-next.0

package/DEPRECATED_useLexical.js.flow

@@ -18,7 +18,6 @@ import type {
 declare export function useLexical<EditorContext>(editorConfig?: {
   namespace?: string,
   onError: (error: Error) => void,
-  initialEditorState?: EditorState,
   theme?: EditorThemeClasses,
   context?: EditorContext,
   nodes?: Array<Class<LexicalNode>>,

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/DEPRECATED_useLexicalPlainText.d.ts

@@ -6,5 +6,5 @@
  *
  */
 import type { HistoryState } from './DEPRECATED_useLexicalHistory';
-import type { EditorState, LexicalEditor } from 'lexical';
-export declare function useLexicalPlainText(editor: LexicalEditor, externalHistoryState?: HistoryState, initialEditorState?: null | string | EditorState | (() => void)): void;
+import type { LexicalEditor } from 'lexical';
+export declare function useLexicalPlainText(editor: LexicalEditor, externalHistoryState?: HistoryState): void;

package/DEPRECATED_useLexicalPlainText.dev.js

@@ -63,9 +63,9 @@ var useLayoutEffect = useLayoutEffectImpl;
  * LICENSE file in the root directory of this source tree.
  *
  */
-function usePlainTextSetup(editor, initialEditorState) {
+function usePlainTextSetup(editor) {
   useLayoutEffect(() => {
-    return utils.mergeRegister(plainText.registerPlainText(editor, initialEditorState), dragon.registerDragonSupport(editor)); // We only do this for init
+    return utils.mergeRegister(plainText.registerPlainText(editor), dragon.registerDragonSupport(editor)); // We only do this for init
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editor]);
 }
@@ -77,8 +77,8 @@ function usePlainTextSetup(editor, initialEditorState) {
  * LICENSE file in the root directory of this source tree.
  *
  */
-function useLexicalPlainText(editor, externalHistoryState, initialEditorState) {
-  usePlainTextSetup(editor, initialEditorState);
+function useLexicalPlainText(editor, externalHistoryState) {
+  usePlainTextSetup(editor);
   useLexicalHistory(editor, externalHistoryState);
 }
 

package/DEPRECATED_useLexicalPlainText.js.flow

@@ -14,5 +14,4 @@ import type {EditorState, LexicalEditor} from 'lexical';
 declare export function useLexicalPlainText(
   editor: LexicalEditor,
   externalHistoryState?: HistoryState,
-  initialEditorState?: null | string | EditorState | (() => void),
 ): void;

package/DEPRECATED_useLexicalPlainText.prod.js

@@ -4,5 +4,5 @@
  * 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 history=require("@lexical/history"),d=require("react"),f=require("@lexical/dragon"),g=require("@lexical/plain-text"),h=require("@lexical/utils");function k(a,b,c=1E3){let e=d.useMemo(()=>b||history.createEmptyHistoryState(),[b]);d.useEffect(()=>history.registerHistory(a,e,c),[c,a,e])}function l(a,b,c=1E3){return k(a,b,c)}var m="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?d.useLayoutEffect:d.useEffect;
-function n(a,b){m(()=>h.mergeRegister(g.registerPlainText(a,b),f.registerDragonSupport(a)),[a])}exports.useLexicalPlainText=function(a,b,c){n(a,c);l(a,b)}
+'use strict';var history=require("@lexical/history"),c=require("react"),f=require("@lexical/dragon"),g=require("@lexical/plain-text"),h=require("@lexical/utils");function k(a,b,d=1E3){let e=c.useMemo(()=>b||history.createEmptyHistoryState(),[b]);c.useEffect(()=>history.registerHistory(a,e,d),[d,a,e])}function l(a,b,d=1E3){return k(a,b,d)}var m="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?c.useLayoutEffect:c.useEffect;
+function n(a){m(()=>h.mergeRegister(g.registerPlainText(a),f.registerDragonSupport(a)),[a])}exports.useLexicalPlainText=function(a,b){n(a);l(a,b)}

package/DEPRECATED_useLexicalRichText.d.ts

@@ -6,5 +6,5 @@
  *
  */
 import type { HistoryState } from './DEPRECATED_useLexicalHistory';
-import type { EditorState, LexicalEditor } from 'lexical';
-export declare function useLexicalRichText(editor: LexicalEditor, externalHistoryState?: HistoryState, initialEditorState?: null | string | EditorState | (() => void)): void;
+import type { LexicalEditor } from 'lexical';
+export declare function useLexicalRichText(editor: LexicalEditor, externalHistoryState?: HistoryState): void;

package/DEPRECATED_useLexicalRichText.dev.js

@@ -63,9 +63,9 @@ var useLayoutEffect = useLayoutEffectImpl;
  * LICENSE file in the root directory of this source tree.
  *
  */
-function useRichTextSetup(editor, initialEditorState) {
+function useRichTextSetup(editor) {
   useLayoutEffect(() => {
-    return utils.mergeRegister(richText.registerRichText(editor, initialEditorState), dragon.registerDragonSupport(editor)); // We only do this for init
+    return utils.mergeRegister(richText.registerRichText(editor), dragon.registerDragonSupport(editor)); // We only do this for init
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editor]);
 }
@@ -77,8 +77,8 @@ function useRichTextSetup(editor, initialEditorState) {
  * LICENSE file in the root directory of this source tree.
  *
  */
-function useLexicalRichText(editor, externalHistoryState, initialEditorState) {
-  useRichTextSetup(editor, initialEditorState);
+function useLexicalRichText(editor, externalHistoryState) {
+  useRichTextSetup(editor);
   useLexicalHistory(editor, externalHistoryState);
 }
 

package/DEPRECATED_useLexicalRichText.js.flow

@@ -14,5 +14,4 @@ import type {EditorState, LexicalEditor} from 'lexical';
 declare export function useLexicalRichText(
   editor: LexicalEditor,
   externalHistoryState?: HistoryState,
-  initialEditorState?: null | string | EditorState | (() => void),
 ): void;

package/DEPRECATED_useLexicalRichText.prod.js

@@ -4,5 +4,5 @@
  * 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 history=require("@lexical/history"),d=require("react"),f=require("@lexical/dragon"),g=require("@lexical/rich-text"),h=require("@lexical/utils");function k(a,b,c=1E3){let e=d.useMemo(()=>b||history.createEmptyHistoryState(),[b]);d.useEffect(()=>history.registerHistory(a,e,c),[c,a,e])}function l(a,b,c=1E3){return k(a,b,c)}var m="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?d.useLayoutEffect:d.useEffect;
-function n(a,b){m(()=>h.mergeRegister(g.registerRichText(a,b),f.registerDragonSupport(a)),[a])}exports.useLexicalRichText=function(a,b,c){n(a,c);l(a,b)}
+'use strict';var history=require("@lexical/history"),c=require("react"),f=require("@lexical/dragon"),g=require("@lexical/rich-text"),h=require("@lexical/utils");function k(a,b,d=1E3){let e=c.useMemo(()=>b||history.createEmptyHistoryState(),[b]);c.useEffect(()=>history.registerHistory(a,e,d),[d,a,e])}function l(a,b,d=1E3){return k(a,b,d)}var m="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?c.useLayoutEffect:c.useEffect;
+function n(a){m(()=>h.mergeRegister(g.registerRichText(a),f.registerDragonSupport(a)),[a])}exports.useLexicalRichText=function(a,b){n(a);l(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,27 +19,18 @@ 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;
-    icon?: JSX.Element;
     onSelect: (targetNode: LexicalNode | null) => void;
     constructor(title: string, options: {
-        icon?: JSX.Element;
         onSelect: (targetNode: LexicalNode | null) => void;
     });
 }
 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,12 +21,11 @@ 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);
     this.title = title;
-    this.icon = options.icon;
     this.onSelect = options.onSelect.bind(this);
   }
 
@@ -36,7 +34,7 @@ function LexicalAutoEmbedPlugin({
   embedConfigs,
   onOpenEmbedModalForConfig,
   getMenuOptions,
-  menuComponent: MenuComponent
+  menuRenderFn
 }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
   const [nodeKey, setNodeKey] = React.useState(null);
@@ -132,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"),q=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 q.TypeaheadOption{constructor(g,n){super(g);this.title=g;this.icon=n.icon;this.onSelect=n.onSelect.bind(this)}}exports.AutoEmbedOption=E;exports.INSERT_EMBED_COMMAND=D;
-exports.LexicalAutoEmbedPlugin=function({embedConfigs:g,onOpenEmbedModalForConfig:n,getMenuOptions:v,menuComponent:F}){let [c]=m.useLexicalComposerContext(),[f,w]=B.useState(null),[h,x]=B.useState(null),p=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&&p()};return t.mergeRegister(...[e.LinkNode,e.AutoLinkNode].map(a=>c.registerMutationListener(a,(...d)=>b(...d))))},[y,c,g,f,p]);B.useEffect(()=>c.registerCommand(D,b=>{let a=g.find(({type:d})=>d===b);return a?(n(a),!0):!1},u.COMMAND_PRIORITY_EDITOR),[c,g,n]);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,p):[],[h,z,v,f,p]),G=B.useCallback((b,a,d)=>{c.update(()=>{b.onSelect(a);d()})},[c]);return null!=f?B.createElement(q.LexicalNodeMenuPlugin,{nodeKey:f,onClose:p,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,63 +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 linkNode = link.$createAutoLinkNode(match.url);
-      linkNode.append(lexical.$createTextNode(match.text));
-      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);
   }
 }
 
@@ -156,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());
   }
@@ -205,8 +211,6 @@ function useAutoLink(editor, matchers, onChange) {
 
         handleBadNeighbors(textNode, onChangeWrapped);
       }
-    }), editor.registerNodeTransform(link.AutoLinkNode, linkNode => {
-      handleLinkEdit(linkNode, matchers, onChangeWrapped);
     }));
   }, [editor, matchers, onChange]);
 }