zurfyx-lexical-react 0.39.1-nightly.20251225.0

package/dist/LexicalPlainTextPlugin.mjs

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

package/dist/LexicalPlainTextPlugin.node.mjs

@@ -0,0 +1,10 @@
+/**
+ * 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('./LexicalPlainTextPlugin.dev.mjs') : import('./LexicalPlainTextPlugin.prod.mjs'));
+export const PlainTextPlugin = mod.PlainTextPlugin;

package/dist/LexicalPlainTextPlugin.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/LexicalComposerContext"),r=require("@lexical/react/useLexicalEditable"),t=require("@lexical/extension"),n=require("@lexical/react/ReactProviderExtension"),o=require("react"),i=require("react-dom"),c=require("react/jsx-runtime"),a=require("@lexical/text"),s=require("@lexical/utils"),l=require("@lexical/dragon"),u=require("@lexical/plain-text");function d(e,...r){const t=new URL("https://lexical.dev/docs/error"),n=new URLSearchParams;n.append("code",e);for(const e of r)n.append("v",e);throw t.search=n.toString(),Error(`Minified Lexical error #${e}; visit ${t.toString()} for the full message or use the non-minified dev environment for full errors and additional helpful warnings.`)}const x="undefined"!=typeof window&&void 0!==window.document&&void 0!==window.document.createElement?o.useLayoutEffect:o.useEffect;function f({editor:e,ErrorBoundary:r}){return function(e,r){const[t,n]=o.useState(()=>e.getDecorators());return x(()=>e.registerDecoratorListener(e=>{i.flushSync(()=>{n(e)})}),[e]),o.useEffect(()=>{n(e.getDecorators())},[e]),o.useMemo(()=>{const n=[],a=Object.keys(t);for(let s=0;s<a.length;s++){const l=a[s],u=c.jsx(r,{onError:r=>e._onError(r),children:c.jsx(o.Suspense,{fallback:null,children:t[l]})}),d=e.getElementByKey(l);null!==d&&n.push(i.createPortal(u,d,l))}return n},[r,t,e])}(e,r)}function g({editor:e,ErrorBoundary:r}){return function(e){const r=t.LexicalBuilder.maybeFromEditor(e);if(r&&r.hasExtensionByName(n.ReactProviderExtension.name)){for(const e of["@lexical/plain-text","@lexical/rich-text"])r.hasExtensionByName(e)&&d(320,e);return!0}return!1}(e)?null:c.jsx(f,{editor:e,ErrorBoundary:r})}function m(e){return e.getEditorState().read(a.$canShowPlaceholderCurry(e.isComposing()))}function E({content:t}){const[n]=e.useLexicalComposerContext(),i=function(e){const[r,t]=o.useState(()=>m(e));return x(()=>{function r(){const r=m(e);t(r)}return r(),s.mergeRegister(e.registerUpdateListener(()=>{r()}),e.registerEditableListener(()=>{r()}))},[e]),r}(n),c=r.useLexicalEditable();return i?"function"==typeof t?t(c):t:null}exports.PlainTextPlugin=function({contentEditable:r,placeholder:t=null,ErrorBoundary:n}){const[o]=e.useLexicalComposerContext();return function(e){x(()=>s.mergeRegister(u.registerPlainText(e),l.registerDragonSupport(e)),[e])}(o),c.jsxs(c.Fragment,{children:[r,c.jsx(E,{content:t}),c.jsx(g,{editor:o,ErrorBoundary:n})]})};

package/dist/LexicalPlainTextPlugin.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{useLexicalComposerContext as r}from"@lexical/react/LexicalComposerContext";import{useLexicalEditable as e}from"@lexical/react/useLexicalEditable";import{LexicalBuilder as t}from"@lexical/extension";import{ReactProviderExtension as o}from"@lexical/react/ReactProviderExtension";import{useLayoutEffect as n,useEffect as i,useState as c,useMemo as a,Suspense as l}from"react";import{flushSync as s,createPortal as u}from"react-dom";import{jsx as d,jsxs as f,Fragment as m}from"react/jsx-runtime";import{$canShowPlaceholderCurry as p}from"@lexical/text";import{mergeRegister as x}from"@lexical/utils";import{registerDragonSupport as E}from"@lexical/dragon";import{registerPlainText as h}from"@lexical/plain-text";function g(r,...e){const t=new URL("https://lexical.dev/docs/error"),o=new URLSearchParams;o.append("code",r);for(const r of e)o.append("v",r);throw t.search=o.toString(),Error(`Minified Lexical error #${r}; visit ${t.toString()} for the full message or use the non-minified dev environment for full errors and additional helpful warnings.`)}const y="undefined"!=typeof window&&void 0!==window.document&&void 0!==window.document.createElement?n:i;function w({editor:r,ErrorBoundary:e}){return function(r,e){const[t,o]=c(()=>r.getDecorators());return y(()=>r.registerDecoratorListener(r=>{s(()=>{o(r)})}),[r]),i(()=>{o(r.getDecorators())},[r]),a(()=>{const o=[],n=Object.keys(t);for(let i=0;i<n.length;i++){const c=n[i],a=d(e,{onError:e=>r._onError(e),children:d(l,{fallback:null,children:t[c]})}),s=r.getElementByKey(c);null!==s&&o.push(u(a,s,c))}return o},[e,t,r])}(r,e)}function v({editor:r,ErrorBoundary:e}){return function(r){const e=t.maybeFromEditor(r);if(e&&e.hasExtensionByName(o.name)){for(const r of["@lexical/plain-text","@lexical/rich-text"])e.hasExtensionByName(r)&&g(320,r);return!0}return!1}(r)?null:d(w,{editor:r,ErrorBoundary:e})}function B(r){return r.getEditorState().read(p(r.isComposing()))}function L({contentEditable:e,placeholder:t=null,ErrorBoundary:o}){const[n]=r();return function(r){y(()=>x(h(r),E(r)),[r])}(n),f(m,{children:[e,d(b,{content:t}),d(v,{editor:n,ErrorBoundary:o})]})}function b({content:t}){const[o]=r(),n=function(r){const[e,t]=c(()=>B(r));return y(()=>{function e(){const e=B(r);t(e)}return e(),x(r.registerUpdateListener(()=>{e()}),r.registerEditableListener(()=>{e()}))},[r]),e}(o),i=e();return n?"function"==typeof t?t(i):t:null}export{L as PlainTextPlugin};

package/dist/LexicalReactExtension.dev.js

@@ -0,0 +1,187 @@
+/**
+ * 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 LexicalContentEditable = require('@lexical/react/LexicalContentEditable');
+var LexicalErrorBoundary = require('@lexical/react/LexicalErrorBoundary');
+var ReactProviderExtension = require('@lexical/react/ReactProviderExtension');
+var lexical = require('lexical');
+var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
+var react = require('react');
+var reactDom = require('react-dom');
+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);
+}
+
+/**
+ * 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] = react.useMemo(() => [cb => editor.registerDecoratorListener(cb), () => editor.getDecorators()], [editor]);
+  const decorators = react.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+
+  // Return decorators defined as React Portals
+  return react.useMemo(() => {
+    const decoratedPortals = [];
+    for (const nodeKey in decorators) {
+      const element = editor.getElementByKey(nodeKey);
+      if (element !== null) {
+        const reactDecorator = /*#__PURE__*/jsxRuntime.jsx(ErrorBoundary, {
+          onError: e => {
+            editor._onError(e);
+          },
+          children: /*#__PURE__*/jsxRuntime.jsx(react.Suspense, {
+            fallback: null,
+            children: decorators[nodeKey]
+          })
+        });
+        decoratedPortals.push(/*#__PURE__*/reactDom.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__*/jsxRuntime.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 = react.useMemo(() => rawConfigDecorators.map((decorator, i) => /*#__PURE__*/jsxRuntime.jsx(ErrorBoundary, {
+      onError: e => {
+        editor._onError(e);
+      }
+      // eslint-disable-next-line react/no-array-index-key -- no natural key
+      ,
+      children: /*#__PURE__*/jsxRuntime.jsx(react.Suspense, {
+        fallback: null,
+        children: decorator
+      })
+    }, i)), [ErrorBoundary]);
+    return /*#__PURE__*/jsxRuntime.jsx(LexicalComposerContext.LexicalComposerContext.Provider, {
+      value: context,
+      children: /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [contentEditable, children]
+  });
+}
+const initialConfig = {
+  EditorChildrenComponent: DefaultEditorChildrenComponent,
+  ErrorBoundary: LexicalErrorBoundary.LexicalErrorBoundary,
+  contentEditable: /*#__PURE__*/jsxRuntime.jsx(LexicalContentEditable.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 = lexical.defineExtension({
+  build(editor, config, state) {
+    const providerPeer = state.getPeer(ReactProviderExtension.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 = lexical.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.
+  lexical.declarePeerDependency(ReactProviderExtension.ReactProviderExtension.name)]
+});
+
+exports.DefaultEditorChildrenComponent = DefaultEditorChildrenComponent;
+exports.ReactExtension = ReactExtension;

package/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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;