@depup/lexical__react 0.41.0-depup.0

package/LexicalReactExtension.dev.mjs

@@ -0,0 +1,184 @@
+/**
+ * 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 { ContentEditable } from '@lexical/react/LexicalContentEditable';
+import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';
+import { ReactProviderExtension } from '@lexical/react/ReactProviderExtension';
+import { defineExtension, declarePeerDependency, shallowMergeConfig } from 'lexical';
+import { LexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { useMemo, useSyncExternalStore, Suspense } from 'react';
+import { createPortal } from 'react-dom';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+/**
+ * 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.
+ *
+ */
+
+// Do not require this module directly! Use normal `invariant` calls.
+
+function formatDevErrorMessage(message) {
+  throw new Error(message);
+}
+
+/**
+ * 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.
+ *
+ */
+
+/** @internal */
+function useReactDecorators(editor, ErrorBoundary) {
+  const [subscribe, getSnapshot] = useMemo(() => [cb => editor.registerDecoratorListener(cb), () => editor.getDecorators()], [editor]);
+  const decorators = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+
+  // Return decorators defined as React Portals
+  return useMemo(() => {
+    const decoratedPortals = [];
+    for (const nodeKey in decorators) {
+      const element = editor.getElementByKey(nodeKey);
+      if (element !== null) {
+        const reactDecorator = /*#__PURE__*/jsx(ErrorBoundary, {
+          onError: e => {
+            editor._onError(e);
+          },
+          children: /*#__PURE__*/jsx(Suspense, {
+            fallback: null,
+            children: decorators[nodeKey]
+          })
+        });
+        decoratedPortals.push(/*#__PURE__*/createPortal(reactDecorator, element, nodeKey));
+      }
+    }
+    return decoratedPortals;
+  }, [ErrorBoundary, decorators, editor]);
+}
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+function buildEditorComponent(config, context) {
+  const [editor] = context;
+  const rawConfigDecorators = config.decorators.map(El =>
+  // eslint-disable-next-line react/jsx-key -- wrapped later
+  typeof El === 'function' ? /*#__PURE__*/jsx(El, {
+    context: context
+  }) : El);
+  return function EditorComponent(props) {
+    const {
+      EditorChildrenComponent = config.EditorChildrenComponent,
+      ErrorBoundary = config.ErrorBoundary,
+      contentEditable = config.contentEditable,
+      children
+    } = props;
+    const decorators = useReactDecorators(editor, ErrorBoundary);
+    const configDecorators = useMemo(() => rawConfigDecorators.map((decorator, i) => /*#__PURE__*/jsx(ErrorBoundary, {
+      onError: e => {
+        editor._onError(e);
+      }
+      // eslint-disable-next-line react/no-array-index-key -- no natural key
+      ,
+      children: /*#__PURE__*/jsx(Suspense, {
+        fallback: null,
+        children: decorator
+      })
+    }, i)), [ErrorBoundary]);
+    return /*#__PURE__*/jsx(LexicalComposerContext.Provider, {
+      value: context,
+      children: /*#__PURE__*/jsxs(EditorChildrenComponent, {
+        context: context,
+        contentEditable: contentEditable,
+        children: [children, configDecorators, decorators]
+      })
+    });
+  };
+}
+
+/**
+ * @example
+ * The default EditorChildrenComponent implementation
+ * ```jsx
+ * return (
+ *   <>
+ *     {contentEditable}
+ *     {children}
+ *   </>
+ * );
+ * ```
+ */
+function DefaultEditorChildrenComponent({
+  contentEditable,
+  children
+}) {
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [contentEditable, children]
+  });
+}
+const initialConfig = {
+  EditorChildrenComponent: DefaultEditorChildrenComponent,
+  ErrorBoundary: LexicalErrorBoundary,
+  contentEditable: /*#__PURE__*/jsx(ContentEditable, {}),
+  decorators: []
+};
+
+/**
+ * An extension to use or configure React for use with Lexical. In an editor, you
+ * would typically use {@link LexicalExtensionComposer} (for React projects) or
+ * {@link ReactPluginHostExtension} (to use React Extensions and plug-ins in a non-React
+ * project).
+ *
+ * See {@link ReactConfig} for more detailed exextensionations of how to use
+ * the config for this Extension.
+ *
+ * For an Extension developer, you can defineConfig() override the extension with
+ * decorators to add JSX inside the editor context that is not
+ * location-dependent (e.g. floating UI that does not need to be mounted in
+ * some specific location, or effects that return null).
+ */
+const ReactExtension = defineExtension({
+  build(editor, config, state) {
+    const providerPeer = state.getPeer(ReactProviderExtension.name);
+    if (!providerPeer) {
+      {
+        formatDevErrorMessage(`No ReactProviderExtension detected. You must use ReactPluginHostExtension or LexicalExtensionComposer to host React extensions. The following extensions depend on ReactExtension: ${[...state.getDirectDependentNames()].join(' ')}`);
+      }
+    }
+    const context = [editor, {
+      getTheme: () => editor._config.theme
+    }];
+    const Component = buildEditorComponent(config, context);
+    return {
+      Component,
+      context
+    };
+  },
+  config: initialConfig,
+  mergeConfig(a, b) {
+    const config = shallowMergeConfig(a, b);
+    if (b.decorators) {
+      config.decorators = b.decorators.length > 0 ? [...a.decorators, ...b.decorators] : a.decorators;
+    }
+    return config;
+  },
+  name: '@lexical/react/React',
+  peerDependencies: [
+  // We are not trying to avoid the import, just the direct dependency,
+  // so using the extension directly is fine.
+  declarePeerDependency(ReactProviderExtension.name)]
+});
+
+export { DefaultEditorChildrenComponent, ReactExtension };

package/LexicalReactExtension.js

@@ -0,0 +1,11 @@
+/**
+ * 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.
+ *
+ */
+
+'use strict'
+const LexicalReactExtension = process.env.NODE_ENV !== 'production' ? require('./LexicalReactExtension.dev.js') : require('./LexicalReactExtension.prod.js');
+module.exports = LexicalReactExtension;

package/LexicalReactExtension.js.flow

@@ -0,0 +1,68 @@
+/**
+ * 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.
+ *
+ * @flow strict
+ */
+
+/**
+ * LexicalReactExtension
+ */
+
+import type {LexicalExtension} from 'lexical';
+import type {LexicalComposerContextWithEditor} from '@lexical/react/LexicalComposerContext';
+
+export interface EditorChildrenComponentProps {
+  context: LexicalComposerContextWithEditor;
+  contentEditable: null | React.Node;
+  children?: React.Node;
+}
+
+export type EditorChildrenComponentType = (
+  props: EditorChildrenComponentProps,
+) => React.Node | null;
+
+export interface DecoratorComponentProps {
+  context: LexicalComposerContextWithEditor;
+}
+export type DecoratorComponentType =
+  | React.Node
+  | ((props: DecoratorComponentProps) => React.Node | null);
+
+export type EditorComponentProps = {
+  EditorChildrenComponent: EditorChildrenComponentType;
+  children?: React.Node;
+  contentEditable: React.Node | null;
+  ErrorBoundary: ErrorBoundaryType;
+};
+
+export type EditorComponentType = (
+  props: Partial<EditorComponentProps>,
+) => React.Node;
+
+export type ReactConfig = {
+  contentEditable: React.Node | null;
+  ErrorBoundary: ErrorBoundaryType;
+  EditorChildrenComponent: EditorChildrenComponentType;
+  decorators: $ReadOnlyArray<DecoratorComponentType>;
+};
+
+export type ReactOutputs = {
+  Component: EditorComponentType;
+  context: LexicalComposerContextWithEditor;
+};
+
+export type ErrorBoundaryProps = {
+  children: React.Node;
+  onError: (error: Error) => void;
+};
+
+export type ErrorBoundaryType = React.ComponentType<ErrorBoundaryProps>;
+
+declare export function DefaultEditorChildrenComponent(props: EditorChildrenComponentProps): React.Node;
+declare export var ReactExtension: LexicalExtension<ReactConfig, "@lexical/react/React", {
+    Component: (props: Partial<EditorComponentProps>) => React.Node;
+    context: LexicalComposerContextWithEditor;
+}, void>;

package/LexicalReactExtension.mjs

@@ -0,0 +1,13 @@
+/**
+ * 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 * as modDev from './LexicalReactExtension.dev.mjs';
+import * as modProd from './LexicalReactExtension.prod.mjs';
+const mod = process.env.NODE_ENV !== 'production' ? modDev : modProd;
+export const DefaultEditorChildrenComponent = mod.DefaultEditorChildrenComponent;
+export const ReactExtension = mod.ReactExtension;

package/LexicalReactExtension.node.mjs

@@ -0,0 +1,11 @@
+/**
+ * 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 mod = await (process.env.NODE_ENV !== 'production' ? import('./LexicalReactExtension.dev.mjs') : import('./LexicalReactExtension.prod.mjs'));
+export const DefaultEditorChildrenComponent = mod.DefaultEditorChildrenComponent;
+export const ReactExtension = mod.ReactExtension;

package/LexicalReactExtension.prod.js

@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+"use strict";var e=require("@lexical/react/LexicalContentEditable"),r=require("@lexical/react/LexicalErrorBoundary"),n=require("@lexical/react/ReactProviderExtension"),t=require("lexical"),o=require("@lexical/react/LexicalComposerContext"),i=require("react"),c=require("react-dom"),a=require("react/jsx-runtime");function s(e,r){const[n]=r,t=e.decorators.map(e=>"function"==typeof e?a.jsx(e,{context:r}):e);return function(s){const{EditorChildrenComponent:l=e.EditorChildrenComponent,ErrorBoundary:d=e.ErrorBoundary,contentEditable:u=e.contentEditable,children:x}=s,E=function(e,r){const[n,t]=i.useMemo(()=>[r=>e.registerDecoratorListener(r),()=>e.getDecorators()],[e]),o=i.useSyncExternalStore(n,t,t);return i.useMemo(()=>{const n=[];for(const t in o){const s=e.getElementByKey(t);if(null!==s){const l=a.jsx(r,{onError:r=>{e._onError(r)},children:a.jsx(i.Suspense,{fallback:null,children:o[t]})});n.push(c.createPortal(l,s,t))}}return n},[r,o,e])}(n,d),m=i.useMemo(()=>t.map((e,r)=>a.jsx(d,{onError:e=>{n._onError(e)},children:a.jsx(i.Suspense,{fallback:null,children:e})},r)),[d]);return a.jsx(o.LexicalComposerContext.Provider,{value:r,children:a.jsxs(l,{context:r,contentEditable:u,children:[x,m,E]})})}}function l({contentEditable:e,children:r}){return a.jsxs(a.Fragment,{children:[e,r]})}const d={EditorChildrenComponent:l,ErrorBoundary:r.LexicalErrorBoundary,contentEditable:a.jsx(e.ContentEditable,{}),decorators:[]},u=t.defineExtension({build(e,r,t){t.getPeer(n.ReactProviderExtension.name)||function(e,...r){const n=new URL("https://lexical.dev/docs/error"),t=new URLSearchParams;t.append("code",e);for(const e of r)t.append("v",e);throw n.search=t.toString(),Error(`Minified Lexical error #${e}; visit ${n.toString()} for the full message or use the non-minified dev environment for full errors and additional helpful warnings.`)}(321,[...t.getDirectDependentNames()].join(" "));const o=[e,{getTheme:()=>e._config.theme}];return{Component:s(r,o),context:o}},config:d,mergeConfig(e,r){const n=t.shallowMergeConfig(e,r);return r.decorators&&(n.decorators=r.decorators.length>0?[...e.decorators,...r.decorators]:e.decorators),n},name:"@lexical/react/React",peerDependencies:[t.declarePeerDependency(n.ReactProviderExtension.name)]});exports.DefaultEditorChildrenComponent=l,exports.ReactExtension=u;

package/LexicalReactExtension.prod.mjs

@@ -0,0 +1,9 @@
+/**
+ * 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{ContentEditable as r}from"@lexical/react/LexicalContentEditable";import{LexicalErrorBoundary as e}from"@lexical/react/LexicalErrorBoundary";import{ReactProviderExtension as o}from"@lexical/react/ReactProviderExtension";import{defineExtension as t,declarePeerDependency as n,shallowMergeConfig as c}from"lexical";import{LexicalComposerContext as i}from"@lexical/react/LexicalComposerContext";import{useMemo as a,useSyncExternalStore as l,Suspense as d}from"react";import{createPortal as s}from"react-dom";import{jsx as m,jsxs as f,Fragment as u}from"react/jsx-runtime";function p(r,e){const[o]=e,t=r.decorators.map(r=>"function"==typeof r?m(r,{context:e}):r);return function(n){const{EditorChildrenComponent:c=r.EditorChildrenComponent,ErrorBoundary:u=r.ErrorBoundary,contentEditable:p=r.contentEditable,children:h}=n,E=function(r,e){const[o,t]=a(()=>[e=>r.registerDecoratorListener(e),()=>r.getDecorators()],[r]),n=l(o,t,t);return a(()=>{const o=[];for(const t in n){const c=r.getElementByKey(t);if(null!==c){const i=m(e,{onError:e=>{r._onError(e)},children:m(d,{fallback:null,children:n[t]})});o.push(s(i,c,t))}}return o},[e,n,r])}(o,u),x=a(()=>t.map((r,e)=>m(u,{onError:r=>{o._onError(r)},children:m(d,{fallback:null,children:r})},e)),[u]);return m(i.Provider,{value:e,children:f(c,{context:e,contentEditable:p,children:[h,x,E]})})}}function h({contentEditable:r,children:e}){return f(u,{children:[r,e]})}const E={EditorChildrenComponent:h,ErrorBoundary:e,contentEditable:m(r,{}),decorators:[]},x=t({build(r,e,t){t.getPeer(o.name)||function(r,...e){const o=new URL("https://lexical.dev/docs/error"),t=new URLSearchParams;t.append("code",r);for(const r of e)t.append("v",r);throw o.search=t.toString(),Error(`Minified Lexical error #${r}; visit ${o.toString()} for the full message or use the non-minified dev environment for full errors and additional helpful warnings.`)}(321,[...t.getDirectDependentNames()].join(" "));const n=[r,{getTheme:()=>r._config.theme}];return{Component:p(e,n),context:n}},config:E,mergeConfig(r,e){const o=c(r,e);return e.decorators&&(o.decorators=e.decorators.length>0?[...r.decorators,...e.decorators]:r.decorators),o},name:"@lexical/react/React",peerDependencies:[n(o.name)]});export{h as DefaultEditorChildrenComponent,x as ReactExtension};

package/LexicalReactPluginHostExtension.dev.js

@@ -0,0 +1,189 @@
+/**
+ * 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.
+ *
+ */
+
+'use strict';
+
+var extension = require('@lexical/extension');
+var ReactExtension = require('@lexical/react/ReactExtension');
+var ReactProviderExtension = require('@lexical/react/ReactProviderExtension');
+var utils = require('@lexical/utils');
+var lexical = require('lexical');
+var react = require('react');
+var reactDom = require('react-dom');
+var client = require('react-dom/client');
+var jsxRuntime = require('react/jsx-runtime');
+
+/**
+ * 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.
+ *
+ */
+
+// Do not require this module directly! Use normal `invariant` calls.
+
+function formatDevErrorMessage(message) {
+  throw new Error(message);
+}
+
+function mountReactExtensionComponent(editor, opts) {
+  const {
+    props,
+    extension: extension$1,
+    ...rest
+  } = opts;
+  const {
+    Component
+  } = extension.getExtensionDependencyFromEditor(editor, extension$1).output;
+  const element = props ? /*#__PURE__*/jsxRuntime.jsx(Component, {
+    ...props
+  }) : null;
+  mountReactPluginElement(editor, {
+    ...rest,
+    element
+  });
+}
+function mountReactPluginComponent(editor, opts) {
+  const {
+    Component,
+    props,
+    ...rest
+  } = opts;
+  mountReactPluginElement(editor, {
+    ...rest,
+    element: props ? /*#__PURE__*/jsxRuntime.jsx(Component, {
+      ...props
+    }) : null
+  });
+}
+function mountReactPluginElement(editor, opts) {
+  extension.getExtensionDependencyFromEditor(editor, ReactPluginHostExtension).output.mountReactPlugin(opts);
+}
+function mountReactPluginHost(editor, container) {
+  extension.getExtensionDependencyFromEditor(editor, ReactPluginHostExtension).output.mountReactPluginHost(container);
+}
+const REACT_PLUGIN_HOST_MOUNT_ROOT_COMMAND = lexical.createCommand('REACT_PLUGIN_HOST_MOUNT_ROOT_COMMAND');
+const REACT_PLUGIN_HOST_MOUNT_PLUGIN_COMMAND = lexical.createCommand('REACT_PLUGIN_HOST_MOUNT_PLUGIN_COMMAND');
+function PluginHostDecorator({
+  context: [editor]
+}) {
+  const {
+    mountedPluginsStore
+  } = extension.getExtensionDependencyFromEditor(editor, ReactPluginHostExtension).output;
+  const {
+    ErrorBoundary
+  } = extension.getExtensionDependencyFromEditor(editor, ReactExtension.ReactExtension).config;
+  const onError = editor._onError.bind(editor);
+  const [{
+    plugins
+  }, setMountedPlugins] = react.useState(() => mountedPluginsStore.peek());
+  react.useEffect(() => extension.effect(() => setMountedPlugins(mountedPluginsStore.value)), [mountedPluginsStore]);
+  const children = [];
+  for (const {
+    key,
+    element,
+    domNode
+  } of plugins.values()) {
+    if (!element) {
+      continue;
+    }
+    const wrapped = /*#__PURE__*/jsxRuntime.jsx(ErrorBoundary, {
+      onError: onError,
+      children: /*#__PURE__*/jsxRuntime.jsx(react.Suspense, {
+        fallback: null,
+        children: element
+      })
+    }, key);
+    children.push(domNode ? /*#__PURE__*/reactDom.createPortal(wrapped, domNode, key) : wrapped);
+  }
+  return children.length > 0 ? /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: children
+  }) : null;
+}
+
+/**
+ * This extension provides a React host for editors that are not built
+ * with LexicalExtensionComposer (e.g. you are using Vanilla JS or some
+ * other framework).
+ *
+ * You must use {@link mountReactPluginHost} for any React content to work.
+ * Afterwards, you may use {@link mountReactExtensionComponent} to
+ * render UI for a specific React Extension.
+ * {@link mountReactPluginComponent} and
+ * {@link mountReactPluginElement} can be used to render
+ * legacy React plug-ins (or any React content).
+ */
+const ReactPluginHostExtension = lexical.defineExtension({
+  build(editor, config, state) {
+    const mountedPluginsStore = extension.signal({
+      plugins: new Map()
+    });
+    return {
+      mountReactPlugin: arg => {
+        editor.dispatchCommand(REACT_PLUGIN_HOST_MOUNT_PLUGIN_COMMAND, arg);
+      },
+      // Using outputs to wrap commands will give us better error messages
+      // if the mount functions are called on an editor without this extension
+      mountReactPluginHost: container => editor.dispatchCommand(REACT_PLUGIN_HOST_MOUNT_ROOT_COMMAND, {
+        root: client.createRoot(container)
+      }),
+      mountedPluginsStore
+    };
+  },
+  dependencies: [ReactProviderExtension.ReactProviderExtension, lexical.configExtension(ReactExtension.ReactExtension, {
+    decorators: [PluginHostDecorator]
+  })],
+  name: '@lexical/react/ReactPluginHost',
+  register(editor, _config, state) {
+    let root;
+    const {
+      mountedPluginsStore
+    } = state.getOutput();
+    const {
+      Component
+    } = state.getDependency(ReactExtension.ReactExtension).output;
+    return utils.mergeRegister(() => {
+      if (root) {
+        root.unmount();
+      }
+      extension.untracked(() => {
+        mountedPluginsStore.value.plugins.clear();
+      });
+    }, editor.registerCommand(REACT_PLUGIN_HOST_MOUNT_PLUGIN_COMMAND, arg => {
+      // This runs before the PluginHost version
+      extension.untracked(() => {
+        const {
+          plugins
+        } = mountedPluginsStore.value;
+        plugins.set(arg.key, arg);
+        mountedPluginsStore.value = {
+          plugins
+        };
+      });
+      return false;
+    }, lexical.COMMAND_PRIORITY_CRITICAL), editor.registerCommand(REACT_PLUGIN_HOST_MOUNT_ROOT_COMMAND, arg => {
+      if (!(root === undefined)) {
+        formatDevErrorMessage(`ReactPluginHostExtension: Root is already mounted`);
+      }
+      root = arg.root;
+      root.render(/*#__PURE__*/jsxRuntime.jsx(Component, {
+        contentEditable: null
+      }));
+      return true;
+    }, lexical.COMMAND_PRIORITY_EDITOR));
+  }
+});
+
+exports.REACT_PLUGIN_HOST_MOUNT_PLUGIN_COMMAND = REACT_PLUGIN_HOST_MOUNT_PLUGIN_COMMAND;
+exports.REACT_PLUGIN_HOST_MOUNT_ROOT_COMMAND = REACT_PLUGIN_HOST_MOUNT_ROOT_COMMAND;
+exports.ReactPluginHostExtension = ReactPluginHostExtension;
+exports.mountReactExtensionComponent = mountReactExtensionComponent;
+exports.mountReactPluginComponent = mountReactPluginComponent;
+exports.mountReactPluginElement = mountReactPluginElement;
+exports.mountReactPluginHost = mountReactPluginHost;

package/LexicalReactPluginHostExtension.dev.mjs

@@ -0,0 +1,181 @@
+/**
+ * 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 { untracked, signal, getExtensionDependencyFromEditor, effect } from '@lexical/extension';
+import { ReactExtension } from '@lexical/react/ReactExtension';
+import { ReactProviderExtension } from '@lexical/react/ReactProviderExtension';
+import { mergeRegister } from '@lexical/utils';
+import { createCommand, defineExtension, configExtension, COMMAND_PRIORITY_CRITICAL, COMMAND_PRIORITY_EDITOR } from 'lexical';
+import { useState, useEffect, Suspense } from 'react';
+import { createPortal } from 'react-dom';
+import { createRoot } from 'react-dom/client';
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+/**
+ * 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.
+ *
+ */
+
+// Do not require this module directly! Use normal `invariant` calls.
+
+function formatDevErrorMessage(message) {
+  throw new Error(message);
+}
+
+function mountReactExtensionComponent(editor, opts) {
+  const {
+    props,
+    extension,
+    ...rest
+  } = opts;
+  const {
+    Component
+  } = getExtensionDependencyFromEditor(editor, extension).output;
+  const element = props ? /*#__PURE__*/jsx(Component, {
+    ...props
+  }) : null;
+  mountReactPluginElement(editor, {
+    ...rest,
+    element
+  });
+}
+function mountReactPluginComponent(editor, opts) {
+  const {
+    Component,
+    props,
+    ...rest
+  } = opts;
+  mountReactPluginElement(editor, {
+    ...rest,
+    element: props ? /*#__PURE__*/jsx(Component, {
+      ...props
+    }) : null
+  });
+}
+function mountReactPluginElement(editor, opts) {
+  getExtensionDependencyFromEditor(editor, ReactPluginHostExtension).output.mountReactPlugin(opts);
+}
+function mountReactPluginHost(editor, container) {
+  getExtensionDependencyFromEditor(editor, ReactPluginHostExtension).output.mountReactPluginHost(container);
+}
+const REACT_PLUGIN_HOST_MOUNT_ROOT_COMMAND = createCommand('REACT_PLUGIN_HOST_MOUNT_ROOT_COMMAND');
+const REACT_PLUGIN_HOST_MOUNT_PLUGIN_COMMAND = createCommand('REACT_PLUGIN_HOST_MOUNT_PLUGIN_COMMAND');
+function PluginHostDecorator({
+  context: [editor]
+}) {
+  const {
+    mountedPluginsStore
+  } = getExtensionDependencyFromEditor(editor, ReactPluginHostExtension).output;
+  const {
+    ErrorBoundary
+  } = getExtensionDependencyFromEditor(editor, ReactExtension).config;
+  const onError = editor._onError.bind(editor);
+  const [{
+    plugins
+  }, setMountedPlugins] = useState(() => mountedPluginsStore.peek());
+  useEffect(() => effect(() => setMountedPlugins(mountedPluginsStore.value)), [mountedPluginsStore]);
+  const children = [];
+  for (const {
+    key,
+    element,
+    domNode
+  } of plugins.values()) {
+    if (!element) {
+      continue;
+    }
+    const wrapped = /*#__PURE__*/jsx(ErrorBoundary, {
+      onError: onError,
+      children: /*#__PURE__*/jsx(Suspense, {
+        fallback: null,
+        children: element
+      })
+    }, key);
+    children.push(domNode ? /*#__PURE__*/createPortal(wrapped, domNode, key) : wrapped);
+  }
+  return children.length > 0 ? /*#__PURE__*/jsx(Fragment, {
+    children: children
+  }) : null;
+}
+
+/**
+ * This extension provides a React host for editors that are not built
+ * with LexicalExtensionComposer (e.g. you are using Vanilla JS or some
+ * other framework).
+ *
+ * You must use {@link mountReactPluginHost} for any React content to work.
+ * Afterwards, you may use {@link mountReactExtensionComponent} to
+ * render UI for a specific React Extension.
+ * {@link mountReactPluginComponent} and
+ * {@link mountReactPluginElement} can be used to render
+ * legacy React plug-ins (or any React content).
+ */
+const ReactPluginHostExtension = defineExtension({
+  build(editor, config, state) {
+    const mountedPluginsStore = signal({
+      plugins: new Map()
+    });
+    return {
+      mountReactPlugin: arg => {
+        editor.dispatchCommand(REACT_PLUGIN_HOST_MOUNT_PLUGIN_COMMAND, arg);
+      },
+      // Using outputs to wrap commands will give us better error messages
+      // if the mount functions are called on an editor without this extension
+      mountReactPluginHost: container => editor.dispatchCommand(REACT_PLUGIN_HOST_MOUNT_ROOT_COMMAND, {
+        root: createRoot(container)
+      }),
+      mountedPluginsStore
+    };
+  },
+  dependencies: [ReactProviderExtension, configExtension(ReactExtension, {
+    decorators: [PluginHostDecorator]
+  })],
+  name: '@lexical/react/ReactPluginHost',
+  register(editor, _config, state) {
+    let root;
+    const {
+      mountedPluginsStore
+    } = state.getOutput();
+    const {
+      Component
+    } = state.getDependency(ReactExtension).output;
+    return mergeRegister(() => {
+      if (root) {
+        root.unmount();
+      }
+      untracked(() => {
+        mountedPluginsStore.value.plugins.clear();
+      });
+    }, editor.registerCommand(REACT_PLUGIN_HOST_MOUNT_PLUGIN_COMMAND, arg => {
+      // This runs before the PluginHost version
+      untracked(() => {
+        const {
+          plugins
+        } = mountedPluginsStore.value;
+        plugins.set(arg.key, arg);
+        mountedPluginsStore.value = {
+          plugins
+        };
+      });
+      return false;
+    }, COMMAND_PRIORITY_CRITICAL), editor.registerCommand(REACT_PLUGIN_HOST_MOUNT_ROOT_COMMAND, arg => {
+      if (!(root === undefined)) {
+        formatDevErrorMessage(`ReactPluginHostExtension: Root is already mounted`);
+      }
+      root = arg.root;
+      root.render(/*#__PURE__*/jsx(Component, {
+        contentEditable: null
+      }));
+      return true;
+    }, COMMAND_PRIORITY_EDITOR));
+  }
+});
+
+export { REACT_PLUGIN_HOST_MOUNT_PLUGIN_COMMAND, REACT_PLUGIN_HOST_MOUNT_ROOT_COMMAND, ReactPluginHostExtension, mountReactExtensionComponent, mountReactPluginComponent, mountReactPluginElement, mountReactPluginHost };