@etrepum/lexical-react-extension 0.0.36

package/README.md

@@ -0,0 +1,3 @@
+# `@etrepum/lexical-react-extension`
+
+**EXPERIMENTAL** A lexical builder extension for React

package/dist/DefaultEditorChildrenComponent.d.ts

@@ -0,0 +1,14 @@
+import { EditorChildrenComponentProps } from './types';
+/**
+ * @example The default EditorChildrenComponent implementation
+ * ```jsx
+ * return (
+ *   <>
+ *     {contentEditable}
+ *     {children}
+ *   </>
+ * );
+ * ```
+ */
+export declare function DefaultEditorChildrenComponent({ contentEditable, children, }: EditorChildrenComponentProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DefaultEditorChildrenComponent.d.ts.map

package/dist/DefaultEditorChildrenComponent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultEditorChildrenComponent.d.ts","sourceRoot":"","sources":["../src/DefaultEditorChildrenComponent.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,4BAA4B,EAAE,MAAM,SAAS,CAAC;AAE5D;;;;;;;;;;GAUG;AACH,wBAAgB,8BAA8B,CAAC,EAC7C,eAAe,EACf,QAAQ,GACT,EAAE,4BAA4B,2CAO9B"}

package/dist/LexicalExtensionComposer.d.ts

@@ -0,0 +1,59 @@
+import { AnyLexicalExtensionArgument } from '@etrepum/lexical-builder';
+export interface LexicalExtensionComposerProps {
+    /**
+     * Your root extension, typically defined with {@link defineExtension}
+     */
+    extension: AnyLexicalExtensionArgument;
+    /**
+     * Any children will have access to useLexicalComposerContext (e.g. for React plug-ins or UX)
+     */
+    children: React.ReactNode;
+}
+/**
+ * The equivalent of LexicalComposer for an extension. Make sure that your extension
+ * argument is stable (e.g. using module scope or useMemo) so
+ * that you are not re-creating the editor on every render!
+ *
+ * @example Module scoped extension
+ * ```tsx
+ * const extension = defineExtension({
+ *   name: "[root]",
+ *   dependencies: [RichTextExtension, HistoryExtension, EmojiExtension]
+ * });
+ * function MyEditor({ children }) {
+ *   return (<LexicalExtensionComposer extension={extension}>{children}</LexicalExtensionComposer>);
+ * }
+ * ```
+ *
+ * @example useMemo extension
+ * ```tsx
+ * function MyEditor({ emojiBaseUrl, children }) {
+ *   const extension = useMemo(() => {
+ *     return defineExtension({
+ *       name: "[root]",
+ *       dependencies: [
+ *         RichTextExtension,
+ *         HistoryExtension,
+ *         configExtension(EmojiExtension, { emojiBaseUrl }),
+ *       ],
+ *     });
+ *   }, [emojiBaseUrl]);
+ *   return (<LexicalExtensionComposer extension={extension}>{children}</LexicalExtensionComposer>);
+ * }
+ * ```
+ *
+ * @example Incorrect usage with unstable extension
+ * ```tsx
+ * function MyBrokenEditor({ emojiBaseUrl }) {
+ *   // This argument is not stable, the editor is re-created every render and
+ *   // all state is lost!
+ *   const extension = defineExtension({
+ *     name: "[root]",
+ *     dependencies: [RichTextExtension, HistoryExtension, EmojiExtension]
+ *   });
+ *   return (<LexicalExtensionComposer extension={extension}>{children}</LexicalExtensionComposer>);
+ * }
+ * ```
+ */
+export declare function LexicalExtensionComposer({ extension, children, }: LexicalExtensionComposerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=LexicalExtensionComposer.d.ts.map

package/dist/LexicalExtensionComposer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LexicalExtensionComposer.d.ts","sourceRoot":"","sources":["../src/LexicalExtensionComposer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,2BAA2B,EACjC,MAAM,0BAA0B,CAAC;AAMlC,MAAM,WAAW,6BAA6B;IAC5C;;OAEG;IACH,SAAS,EAAE,2BAA2B,CAAC;IACvC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,wBAAgB,wBAAwB,CAAC,EACvC,SAAS,EACT,QAAQ,GACT,EAAE,6BAA6B,2CAoB/B"}

package/dist/ReactExtension.d.ts

@@ -0,0 +1,17 @@
+import { ReactConfig, ReactOutputs } from './types';
+/**
+ * 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).
+ */
+export declare const ReactExtension: import('@etrepum/lexical-builder').LexicalExtension<ReactConfig, "@etrepum/lexical-builder/React", ReactOutputs, unknown>;
+//# sourceMappingURL=ReactExtension.d.ts.map

package/dist/ReactExtension.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactExtension.d.ts","sourceRoot":"","sources":["../src/ReactExtension.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAYH,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,YAAY,EAAE,MAAM,SAAS,CAAC;AAY9D;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,cAAc,2HAuCzB,CAAC"}

package/dist/ReactPluginHostExtension.d.ts

@@ -0,0 +1,46 @@
+import { LexicalEditor } from 'lexical';
+import { Root, Container } from 'react-dom/client';
+import { AnyLexicalExtension, LexicalExtensionOutput } from '@etrepum/lexical-builder';
+import * as React from "react";
+export interface HostMountCommandArg {
+    root: Root;
+}
+export interface MountPluginCommandArg {
+    key: string;
+    element: JSX.Element | null;
+    domNode?: Container | null;
+}
+export declare function mountReactExtensionComponent<Extension extends AnyLexicalExtension>(editor: LexicalEditor, opts: {
+    extension: Extension;
+    props: [LexicalExtensionOutput<Extension>] extends [
+        {
+            Component: infer OutputComponentType extends React.ComponentType;
+        }
+    ] ? /** The Props from the Extension output Component */ React.ComponentProps<OutputComponentType> | null : never;
+} & Omit<MountPluginCommandArg, "element">): void;
+export declare function mountReactPluginComponent<P extends Record<never, never> = Record<never, never>>(editor: LexicalEditor, opts: {
+    Component: React.ComponentType<P>;
+    props: (P & React.Attributes) | null;
+} & Omit<MountPluginCommandArg, "element">): void;
+export declare function mountReactPluginElement(editor: LexicalEditor, opts: MountPluginCommandArg): void;
+export declare function mountReactPluginHost(editor: LexicalEditor, container: Container): void;
+export declare const REACT_PLUGIN_HOST_MOUNT_ROOT_COMMAND: import('lexical').LexicalCommand<HostMountCommandArg>;
+export declare const REACT_PLUGIN_HOST_MOUNT_PLUGIN_COMMAND: import('lexical').LexicalCommand<MountPluginCommandArg>;
+/**
+ * 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).
+ */
+export declare const ReactPluginHostExtension: import('@etrepum/lexical-builder').LexicalExtension<import('@etrepum/lexical-builder').ExtensionConfigBase, "@etrepum/lexical-builder/ReactPluginHost", {
+    renderMountedPlugins: () => import("react/jsx-runtime").JSX.Element | null;
+    mountReactPluginHost: (container: Container) => boolean;
+    mountReactPlugin: (arg: MountPluginCommandArg) => boolean;
+}, unknown>;
+//# sourceMappingURL=ReactPluginHostExtension.d.ts.map

package/dist/ReactPluginHostExtension.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactPluginHostExtension.d.ts","sourceRoot":"","sources":["../src/ReactPluginHostExtension.tsx"],"names":[],"mappings":"AAQA,OAAO,EAIL,KAAK,aAAa,EACnB,MAAM,SAAS,CAAC;AAEjB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAc,KAAK,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAC;AACzE,OAAO,EACL,KAAK,mBAAmB,EAIxB,KAAK,sBAAsB,EAE5B,MAAM,0BAA0B,CAAC;AAMlC,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,IAAI,CAAC;CACZ;AAED,MAAM,WAAW,qBAAqB;IACpC,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC;IAC5B,OAAO,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;CAC5B;AAED,wBAAgB,4BAA4B,CAAC,SAAS,SAAS,mBAAmB,EAChF,MAAM,EAAE,aAAa,EACrB,IAAI,EAAE;IACJ,SAAS,EAAE,SAAS,CAAC;IACrB,KAAK,EAAE,CAAC,sBAAsB,CAAC,SAAS,CAAC,CAAC,SAAS;QACjD;YACE,SAAS,EAAE,MAAM,mBAAmB,SAAS,KAAK,CAAC,aAAa,CAAC;SAClE;KACF,GACwD,AAArD,oDAAoD,CAAC,KAAK,CAAC,cAAc,CAAC,mBAAmB,CAAC,GAAG,IAAI,GACrG,KAAK,CAAC;CACX,GAAG,IAAI,CAAC,qBAAqB,EAAE,SAAS,CAAC,QAS3C;AAED,wBAAgB,yBAAyB,CACvC,CAAC,SAAS,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,GAAG,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,EAErD,MAAM,EAAE,aAAa,EACrB,IAAI,EAAE;IACJ,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;IAClC,KAAK,EAAE,CAAC,CAAC,GAAG,KAAK,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC;CACtC,GAAG,IAAI,CAAC,qBAAqB,EAAE,SAAS,CAAC,QAO3C;AAED,wBAAgB,uBAAuB,CACrC,MAAM,EAAE,aAAa,EACrB,IAAI,EAAE,qBAAqB,QAM5B;AAED,wBAAgB,oBAAoB,CAClC,MAAM,EAAE,aAAa,EACrB,SAAS,EAAE,SAAS,QAMrB;AAED,eAAO,MAAM,oCAAoC,uDAC2B,CAAC;AAC7E,eAAO,MAAM,sCAAsC,yDAGhD,CAAC;AAuBJ;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,wBAAwB;;sCAsCK,SAAS;4BAInB,qBAAqB;WAmCnD,CAAC"}

package/dist/ReactProviderExtension.d.ts

@@ -0,0 +1,10 @@
+/**
+ * An extension used to declare that there is a LexicalExtensionComposer or
+ * ReactPluginHostExtension available so that we can issue runtime warnings
+ * when plugins that depend on React are hosted in an environment
+ * where it is not ever going to be rendered.
+ *
+ * It is a separate extension so it can be used as a peer dependency.
+ */
+export declare const ReactProviderExtension: import('@etrepum/lexical-builder').LexicalExtension<import('@etrepum/lexical-builder').ExtensionConfigBase, "@etrepum/lexical-builder/ReactProvider", unknown, unknown>;
+//# sourceMappingURL=ReactProviderExtension.d.ts.map

package/dist/ReactProviderExtension.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactProviderExtension.d.ts","sourceRoot":"","sources":["../src/ReactProviderExtension.tsx"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AACH,eAAO,MAAM,sBAAsB,yKAEjC,CAAC"}

package/dist/TreeViewExtension.d.ts

@@ -0,0 +1,7 @@
+import { TreeView } from '@lexical/react/LexicalTreeView';
+export type TreeViewConfig = Omit<Parameters<typeof TreeView>[0], "editor">;
+export declare function TreeViewExtensionComponent(props: Partial<TreeViewConfig>): JSX.Element;
+export declare const TreeViewExtension: import('@etrepum/lexical-builder').LexicalExtension<TreeViewConfig, "@etrepum/lexical-builder/TreeView", {
+    Component: typeof TreeViewExtensionComponent;
+}, unknown>;
+//# sourceMappingURL=TreeViewExtension.d.ts.map

package/dist/TreeViewExtension.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeViewExtension.d.ts","sourceRoot":"","sources":["../src/TreeViewExtension.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAK1D,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC;AAC5E,wBAAgB,0BAA0B,CACxC,KAAK,EAAE,OAAO,CAAC,cAAc,CAAC,GAC7B,GAAG,CAAC,OAAO,CASb;AAWD,eAAO,MAAM,iBAAiB;;WAK5B,CAAC"}

package/dist/buildEditorComponent.d.ts

@@ -0,0 +1,5 @@
+import { LexicalComposerContextWithEditor } from '@lexical/react/LexicalComposerContext';
+import { ReactConfig, EditorComponentProps } from './types';
+/** @internal */
+export declare function buildEditorComponent(config: ReactConfig, context: LexicalComposerContextWithEditor): (props: Partial<EditorComponentProps>) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=buildEditorComponent.d.ts.map

package/dist/buildEditorComponent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"buildEditorComponent.d.ts","sourceRoot":"","sources":["../src/buildEditorComponent.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,gCAAgC,EACtC,MAAM,uCAAuC,CAAC;AAG/C,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAEtE,gBAAgB;AAChB,wBAAgB,oBAAoB,CAClC,MAAM,EAAE,WAAW,EACnB,OAAO,EAAE,gCAAgC,WAOF,OAAO,CAAC,oBAAoB,CAAC,6CAoCrE"}

package/dist/index.d.ts

@@ -0,0 +1,16 @@
+/**
+ * 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.
+ *
+ */
+export declare const PACKAGE_VERSION: string;
+export { type DecoratorComponentProps, type DecoratorComponentType, type EditorChildrenComponentProps, type EditorChildrenComponentType, type EditorComponentProps, type EditorComponentType, type ReactConfig, type ErrorBoundaryType, type ErrorBoundaryProps, type ReactOutputs, } from './types';
+export { ReactExtension } from './ReactExtension';
+export { type LexicalExtensionComposerProps, LexicalExtensionComposer, } from './LexicalExtensionComposer';
+export { type HostMountCommandArg, type MountPluginCommandArg, mountReactPluginComponent, mountReactPluginElement, mountReactPluginHost, mountReactExtensionComponent, REACT_PLUGIN_HOST_MOUNT_ROOT_COMMAND, REACT_PLUGIN_HOST_MOUNT_PLUGIN_COMMAND, ReactPluginHostExtension, } from './ReactPluginHostExtension';
+export { DefaultEditorChildrenComponent } from './DefaultEditorChildrenComponent';
+export { useExtensionDependency, useExtensionComponent, UseExtensionComponent, type UseExtensionComponentProps, } from './useExtensionComponent';
+export { type TreeViewConfig, TreeViewExtensionComponent, TreeViewExtension, } from './TreeViewExtension';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,eAAO,MAAM,eAAe,EAAE,MAAwC,CAAC;AAEvE,OAAO,EACL,KAAK,uBAAuB,EAC5B,KAAK,sBAAsB,EAC3B,KAAK,4BAA4B,EACjC,KAAK,2BAA2B,EAChC,KAAK,oBAAoB,EACzB,KAAK,mBAAmB,EACxB,KAAK,WAAW,EAChB,KAAK,iBAAiB,EACtB,KAAK,kBAAkB,EACvB,KAAK,YAAY,GAClB,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EACL,KAAK,6BAA6B,EAClC,wBAAwB,GACzB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EACL,KAAK,mBAAmB,EACxB,KAAK,qBAAqB,EAC1B,yBAAyB,EACzB,uBAAuB,EACvB,oBAAoB,EACpB,4BAA4B,EAC5B,oCAAoC,EACpC,sCAAsC,EACtC,wBAAwB,GACzB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,8BAA8B,EAAE,MAAM,kCAAkC,CAAC;AAClF,OAAO,EACL,sBAAsB,EACtB,qBAAqB,EACrB,qBAAqB,EACrB,KAAK,0BAA0B,GAChC,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACL,KAAK,cAAc,EACnB,0BAA0B,EAC1B,iBAAiB,GAClB,MAAM,qBAAqB,CAAC"}

package/dist/index.js

@@ -0,0 +1,308 @@
+import { jsx as i, jsxs as b, Fragment as v } from "react/jsx-runtime";
+import { defineExtension as R, shallowMergeConfig as U, declarePeerDependency as k, provideOutput as _, buildEditorFromExtensions as B, getExtensionDependencyFromEditor as m, configExtension as G } from "@etrepum/lexical-builder";
+import { ContentEditable as K } from "@lexical/react/LexicalContentEditable";
+import { LexicalErrorBoundary as V } from "@lexical/react/LexicalErrorBoundary";
+import { LexicalComposerContext as j, useLexicalComposerContext as y } from "@lexical/react/LexicalComposerContext";
+import { useLayoutEffect as F, useEffect as x, useState as I, useMemo as T, Suspense as D } from "react";
+import { flushSync as Y, createPortal as L } from "react-dom";
+import { CAN_USE_DOM as q, mergeRegister as z } from "@lexical/utils";
+import { createCommand as A, COMMAND_PRIORITY_CRITICAL as J, COMMAND_PRIORITY_EDITOR as w } from "lexical";
+import { createRoot as Q } from "react-dom/client";
+import { TreeView as W } from "@lexical/react/LexicalTreeView";
+const X = q ? F : x;
+function N(e, t, ...n) {
+  if (!e)
+    throw new Error(
+      n.reduce((r, o) => r.replace("%s", String(o)), t || "")
+    );
+}
+function Z(e, t) {
+  const [n, r] = I(
+    () => e.getDecorators()
+  );
+  return X(() => e.registerDecoratorListener((o) => {
+    Y(() => {
+      r(o);
+    });
+  }), [e]), x(() => {
+    r(e.getDecorators());
+  }, [e]), T(() => {
+    const o = [], c = Object.keys(n);
+    for (let u = 0; u < c.length; u++) {
+      const a = c[u];
+      N(
+        a !== void 0,
+        "useReactDecorators: decoratorKeys[%s] must be defined",
+        String(u)
+      );
+      const l = e.getElementByKey(a);
+      if (l !== null) {
+        const d = /* @__PURE__ */ i(
+          t,
+          {
+            onError: (s) => {
+              e._onError(s);
+            },
+            children: /* @__PURE__ */ i(D, { fallback: null, children: n[a] })
+          }
+        );
+        o.push(L(d, l, a));
+      }
+    }
+    return o;
+  }, [t, n, e]);
+}
+function $(e, t) {
+  const [n] = t, r = e.decorators.map(
+    (o) => (
+      // eslint-disable-next-line react/jsx-key -- wrapped later
+      typeof o == "function" ? /* @__PURE__ */ i(o, { context: t }) : o
+    )
+  );
+  return function(c) {
+    const {
+      EditorChildrenComponent: u = e.EditorChildrenComponent,
+      ErrorBoundary: a = e.ErrorBoundary,
+      contentEditable: l = e.contentEditable,
+      children: d
+    } = c, s = Z(n, a), f = T(
+      () => r.map((C, g) => /* @__PURE__ */ i(
+        a,
+        {
+          onError: (E) => {
+            n._onError(E);
+          },
+          children: /* @__PURE__ */ i(D, { fallback: null, children: C })
+        },
+        g
+      )),
+      [a]
+    );
+    return /* @__PURE__ */ i(j.Provider, { value: t, children: /* @__PURE__ */ b(
+      u,
+      {
+        context: t,
+        contentEditable: l,
+        children: [
+          d,
+          f,
+          s
+        ]
+      }
+    ) });
+  };
+}
+function ee({
+  contentEditable: e,
+  children: t
+}) {
+  return /* @__PURE__ */ b(v, { children: [
+    e,
+    t
+  ] });
+}
+const P = R({
+  name: "@etrepum/lexical-builder/ReactProvider"
+}), te = {
+  EditorChildrenComponent: ee,
+  ErrorBoundary: V,
+  contentEditable: /* @__PURE__ */ i(K, {}),
+  decorators: []
+}, p = R({
+  config: te,
+  mergeConfig(e, t) {
+    const n = U(e, t);
+    return t.decorators && (n.decorators = t.decorators.length > 0 ? [...e.decorators, ...t.decorators] : e.decorators), n;
+  },
+  name: "@etrepum/lexical-builder/React",
+  peerDependencies: [
+    // We are not trying to avoid the import, just the direct dependency,
+    // so using the extension directly is fine.
+    k(P.name)
+  ],
+  register(e, t, n) {
+    n.getPeer(
+      P.name
+    ) || N(
+      !1,
+      "No ReactProviderExtension detected. You must use ReactPluginHostExtension or LexicalExtensionComposer to host React extensions. The following extensions depend on ReactExtension: %s",
+      [...n.getDirectDependentNames()].join(" ")
+    );
+    const o = [
+      e,
+      { getTheme: () => e._config.theme }
+    ], c = $(t, o);
+    return _({
+      context: o,
+      Component: c
+    });
+  }
+}), ne = "queueMicrotask" in globalThis ? queueMicrotask : (e) => Promise.resolve().then(e);
+function Re({
+  extension: e,
+  children: t
+}) {
+  const n = T(
+    () => B(P, p, e),
+    [e]
+  );
+  x(() => {
+    let o = !1;
+    return ne(() => {
+      o = !0;
+    }), () => {
+      o && n.dispose();
+    };
+  }, [n]);
+  const { Component: r } = m(n, p).output;
+  return /* @__PURE__ */ i(r, { children: t });
+}
+function xe(e, t) {
+  const { props: n, extension: r, ...o } = t, { Component: c } = m(e, r).output, u = n ? /* @__PURE__ */ i(c, { ...n }) : null;
+  H(e, {
+    ...o,
+    element: u
+  });
+}
+function he(e, t) {
+  const { Component: n, props: r, ...o } = t;
+  H(e, {
+    ...o,
+    element: r ? /* @__PURE__ */ i(n, { ...r }) : null
+  });
+}
+function H(e, t) {
+  m(
+    e,
+    M
+  ).output.mountReactPlugin(t);
+}
+function _e(e, t) {
+  m(
+    e,
+    M
+  ).output.mountReactPluginHost(t);
+}
+const O = A("REACT_PLUGIN_HOST_MOUNT_ROOT_COMMAND"), h = A(
+  "REACT_PLUGIN_HOST_MOUNT_PLUGIN_COMMAND"
+);
+function oe({
+  context: [e]
+}) {
+  const {
+    output: { renderMountedPlugins: t }
+  } = m(e, M), [n, r] = I(t);
+  return x(() => e.registerCommand(
+    h,
+    () => (r(t), !0),
+    w
+  ), [e, t]), n;
+}
+const M = R({
+  dependencies: [
+    P,
+    G(p, { decorators: [oe] })
+  ],
+  name: "@etrepum/lexical-builder/ReactPluginHost",
+  register(e, t, n) {
+    let r;
+    const o = /* @__PURE__ */ new Map(), c = n.getDependency(p), {
+      config: { ErrorBoundary: u },
+      output: { Component: a }
+    } = c, l = e._onError.bind(e);
+    function d() {
+      const s = [];
+      for (const { key: f, element: C, domNode: g } of o.values()) {
+        if (!C)
+          continue;
+        const E = /* @__PURE__ */ i(u, { onError: l, children: /* @__PURE__ */ i(D, { fallback: null, children: C }) }, f);
+        s.push(g ? L(E, g, f) : E);
+      }
+      return s.length > 0 ? /* @__PURE__ */ i(v, { children: s }) : null;
+    }
+    return _(
+      {
+        renderMountedPlugins: d,
+        // Using outputs to wrap commands will give us better error messages
+        // if the mount functions are called on an editor without this extension
+        mountReactPluginHost: (s) => e.dispatchCommand(O, {
+          root: Q(s)
+        }),
+        mountReactPlugin: (s) => e.dispatchCommand(h, s)
+      },
+      z(
+        () => {
+          r && r.unmount(), o.clear();
+        },
+        e.registerCommand(
+          h,
+          (s) => (o.set(s.key, s), !1),
+          J
+        ),
+        e.registerCommand(
+          O,
+          (s) => (N(
+            r === void 0,
+            "ReactPluginHostExtension: Root is already mounted"
+          ), r = s.root, r.render(/* @__PURE__ */ i(a, { contentEditable: null })), !0),
+          w
+        )
+      )
+    );
+  }
+});
+function S(e) {
+  return m(y()[0], e);
+}
+function re(e) {
+  return S(e).output.Component;
+}
+function Te({
+  "lexical:extension": e,
+  ...t
+}) {
+  const n = re(e);
+  return /* @__PURE__ */ i(n, { ...t });
+}
+function se(e) {
+  const [t] = y();
+  return /* @__PURE__ */ i(
+    W,
+    {
+      editor: t,
+      ...S(ce).config,
+      ...e
+    }
+  );
+}
+const ie = {
+  viewClassName: "tree-view-output",
+  treeTypeButtonClassName: "debug-treetype-button",
+  timeTravelPanelClassName: "debug-timetravel-panel",
+  timeTravelButtonClassName: "debug-timetravel-button",
+  timeTravelPanelSliderClassName: "debug-timetravel-panel-slider",
+  timeTravelPanelButtonClassName: "debug-timetravel-panel-button"
+}, ce = R({
+  name: "@etrepum/lexical-builder/TreeView",
+  dependencies: [p],
+  config: ie,
+  register: () => _({ Component: se })
+}), De = "0.0.36";
+export {
+  ee as DefaultEditorChildrenComponent,
+  Re as LexicalExtensionComposer,
+  De as PACKAGE_VERSION,
+  h as REACT_PLUGIN_HOST_MOUNT_PLUGIN_COMMAND,
+  O as REACT_PLUGIN_HOST_MOUNT_ROOT_COMMAND,
+  p as ReactExtension,
+  M as ReactPluginHostExtension,
+  ce as TreeViewExtension,
+  se as TreeViewExtensionComponent,
+  Te as UseExtensionComponent,
+  xe as mountReactExtensionComponent,
+  he as mountReactPluginComponent,
+  H as mountReactPluginElement,
+  _e as mountReactPluginHost,
+  re as useExtensionComponent,
+  S as useExtensionDependency
+};

package/dist/registerSubscription.d.ts

@@ -0,0 +1,10 @@
+import { LexicalEditor } from 'lexical';
+export interface RegisterLexicalSubscription<T> {
+    initialValueFn: (editor: LexicalEditor) => T;
+    subscribe: (editor: LexicalEditor, onChange: (value: T) => void) => () => void;
+}
+/**
+ * Shortcut to Lexical subscriptions when values are used for render.
+ */
+export declare function registerLexicalSubscription<T>(editor: LexicalEditor, subscription: RegisterLexicalSubscription<T>, onChange: (value: T) => void): () => void;
+//# sourceMappingURL=registerSubscription.d.ts.map

package/dist/registerSubscription.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"registerSubscription.d.ts","sourceRoot":"","sources":["../src/registerSubscription.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7C,MAAM,WAAW,2BAA2B,CAAC,CAAC;IAC5C,cAAc,EAAE,CAAC,MAAM,EAAE,aAAa,KAAK,CAAC,CAAC;IAC7C,SAAS,EAAE,CACT,MAAM,EAAE,aAAa,EACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,KACzB,MAAM,IAAI,CAAC;CACjB;AAED;;GAEG;AACH,wBAAgB,2BAA2B,CAAC,CAAC,EAC3C,MAAM,EAAE,aAAa,EACrB,YAAY,EAAE,2BAA2B,CAAC,CAAC,CAAC,EAC5C,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,GAC3B,MAAM,IAAI,CAWZ"}

package/dist/shared/invariant.d.ts

@@ -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.
+ *
+ */
+export default function invariant(cond?: boolean, message?: string, ...args: string[]): asserts cond;
+//# sourceMappingURL=invariant.d.ts.map

package/dist/shared/invariant.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"invariant.d.ts","sourceRoot":"","sources":["../../src/shared/invariant.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAKH,MAAM,CAAC,OAAO,UAAU,SAAS,CAC/B,IAAI,CAAC,EAAE,OAAO,EACd,OAAO,CAAC,EAAE,MAAM,EAChB,GAAG,IAAI,EAAE,MAAM,EAAE,GAChB,OAAO,CAAC,IAAI,CAQd"}

package/dist/shared/scheduleMicroTask.d.ts

@@ -0,0 +1,2 @@
+export declare const scheduleMicrotask: typeof queueMicrotask;
+//# sourceMappingURL=scheduleMicroTask.d.ts.map

package/dist/shared/scheduleMicroTask.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scheduleMicroTask.d.ts","sourceRoot":"","sources":["../../src/shared/scheduleMicroTask.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,iBAAiB,uBAGsB,CAAC"}

package/dist/shared/useLayoutEffect.d.ts

@@ -0,0 +1,4 @@
+import { useLayoutEffect } from 'react';
+declare const useLayoutEffectImpl: typeof useLayoutEffect;
+export default useLayoutEffectImpl;
+//# sourceMappingURL=useLayoutEffect.d.ts.map

package/dist/shared/useLayoutEffect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLayoutEffect.d.ts","sourceRoot":"","sources":["../../src/shared/useLayoutEffect.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAa,eAAe,EAAE,MAAM,OAAO,CAAC;AAGnD,QAAA,MAAM,mBAAmB,EAAE,OAAO,eAErB,CAAC;AAEd,eAAe,mBAAmB,CAAC"}

package/dist/types.d.ts

@@ -0,0 +1,82 @@
+import { LexicalComposerContextWithEditor } from '@lexical/react/LexicalComposerContext';
+export interface EditorChildrenComponentProps {
+    context: LexicalComposerContextWithEditor;
+    contentEditable: null | JSX.Element;
+    children?: React.ReactNode;
+}
+export type EditorChildrenComponentType = (props: EditorChildrenComponentProps) => JSX.Element | null;
+export interface DecoratorComponentProps {
+    context: LexicalComposerContextWithEditor;
+}
+export type DecoratorComponentType = JSX.Element | ((props: DecoratorComponentProps) => JSX.Element | null);
+export interface EditorComponentProps {
+    /**
+     * The EditorChildrenComponent from the config
+     */
+    EditorChildrenComponent: EditorChildrenComponentType;
+    /**
+     * The children to pass to EditorChildrenComponent
+     */
+    children?: React.ReactNode;
+    /**
+     * contentEditable from the config
+     */
+    contentEditable: JSX.Element | null;
+    /**
+     * ErrorBoundary from the config
+     */
+    ErrorBoundary: ErrorBoundaryType;
+}
+export type EditorComponentType = (
+/** Optional overrides to any of the props, typically only children is used */
+props: Partial<EditorComponentProps>) => JSX.Element;
+export interface ReactConfig {
+    /**
+     * The default root element of the editor as JSX. Uses `<ContentEditable />`
+     * from \@lexical/react/ContentEditable by default,
+     * but may be null or another component.
+     *
+     * This component is responsible for calling `editor.setRootElement(elem)`.
+     */
+    contentEditable: JSX.Element | null;
+    /**
+     * The ErrorBoundary used for rendering decorators in the editor. By default
+     * it is `ErrorBoundary` from \@lexical/react/ErrorBoundary.
+     */
+    ErrorBoundary: ErrorBoundaryType;
+    /**
+     * The component that renders the children of the editor context, by default
+     * it is {@link DefaultEditorChildrenComponent} which takes the given props
+     * and renders them in this order:
+     *
+     * - contentEditable
+     * - children
+     */
+    EditorChildrenComponent: EditorChildrenComponentType;
+    /**
+     * An array of JSX or components that return JSX that should be rendered
+     * as children of Component. These will be merged by array concatenation.
+     */
+    decorators: readonly DecoratorComponentType[];
+}
+export interface ReactOutputs {
+    /**
+     * The editor component, this can be used by Extensions that depend on this to
+     * render the editor such as {@link ReactPluginHostExtension} or internally by
+     * {@link LexicalExtensionComposer}.
+     *
+     * All props have defaults based on the config and editor state, but may be
+     * overridden.
+     */
+    Component: EditorComponentType;
+    /**
+     * This is equivalent to useLexicalComposerContext() from \@lexical/react/LexicalComposerContext.
+     */
+    context: LexicalComposerContextWithEditor;
+}
+export interface ErrorBoundaryProps {
+    children: JSX.Element;
+    onError: (error: Error) => void;
+}
+export type ErrorBoundaryType = React.ComponentClass<ErrorBoundaryProps> | React.FC<ErrorBoundaryProps>;
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,gCAAgC,EAAE,MAAM,uCAAuC,CAAC;AAE9F,MAAM,WAAW,4BAA4B;IAC3C,OAAO,EAAE,gCAAgC,CAAC;IAC1C,eAAe,EAAE,IAAI,GAAG,GAAG,CAAC,OAAO,CAAC;IACpC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,MAAM,2BAA2B,GAAG,CACxC,KAAK,EAAE,4BAA4B,KAChC,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC;AAExB,MAAM,WAAW,uBAAuB;IACtC,OAAO,EAAE,gCAAgC,CAAC;CAC3C;AACD,MAAM,MAAM,sBAAsB,GAC9B,GAAG,CAAC,OAAO,GACX,CAAC,CAAC,KAAK,EAAE,uBAAuB,KAAK,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC;AAE7D,MAAM,WAAW,oBAAoB;IACnC;;OAEG;IACH,uBAAuB,EAAE,2BAA2B,CAAC;IACrD;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,eAAe,EAAE,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC;IACpC;;OAEG;IACH,aAAa,EAAE,iBAAiB,CAAC;CAClC;AAED,MAAM,MAAM,mBAAmB,GAAG;AAChC,8EAA8E;AAC9E,KAAK,EAAE,OAAO,CAAC,oBAAoB,CAAC,KACjC,GAAG,CAAC,OAAO,CAAC;AAEjB,MAAM,WAAW,WAAW;IAC1B;;;;;;OAMG;IACH,eAAe,EAAE,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC;IACpC;;;OAGG;IACH,aAAa,EAAE,iBAAiB,CAAC;IACjC;;;;;;;OAOG;IACH,uBAAuB,EAAE,2BAA2B,CAAC;IAErD;;;OAGG;IACH,UAAU,EAAE,SAAS,sBAAsB,EAAE,CAAC;CAC/C;AAED,MAAM,WAAW,YAAY;IAC3B;;;;;;;OAOG;IACH,SAAS,EAAE,mBAAmB,CAAC;IAC/B;;OAEG;IACH,OAAO,EAAE,gCAAgC,CAAC;CAC3C;AAED,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;IACtB,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CACjC;AAED,MAAM,MAAM,iBAAiB,GACzB,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC,GACxC,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC"}

package/dist/useExtensionComponent.d.ts

@@ -0,0 +1,43 @@
+import { LexicalExtensionOutput, OutputComponentExtension, AnyLexicalExtension, LexicalExtensionDependency } from '@etrepum/lexical-builder';
+import { ComponentProps } from 'react';
+export declare function useExtensionDependency<Extension extends AnyLexicalExtension>(extension: Extension): LexicalExtensionDependency<Extension>;
+/**
+ * Use a Component from the given Extension that uses the ReactExtension convention
+ * of exposing a Component property in its output.
+ *
+ * @param extension - An extension with a Component property in the output
+ * @returns `getExtensionConfigFromEditor(useLexicalComposerContext()[0], extension).Component`
+ */
+export declare function useExtensionComponent<Props extends Record<never, never>, OutputComponent extends React.ComponentType<Props>, Extension extends OutputComponentExtension<OutputComponent>>(extension: Extension): OutputComponent;
+/**
+ * The lexical:extension prop combined with the props of the given Extension's
+ * output Component.
+ */
+export type UseExtensionComponentProps<Extension extends AnyLexicalExtension> = {
+    /** The Extension */ "lexical:extension": Extension;
+} & ([LexicalExtensionOutput<Extension>] extends [
+    {
+        Component: infer OutputComponentType extends React.ComponentType;
+    }
+] ? Omit<ComponentProps<OutputComponentType>, "lexical:extension"> : never);
+/**
+ * A convenient way to get an Extension's output Component with {@link useExtensionComponent}
+ * and construct it in one step.
+ *
+ * @example Usage
+ * ```tsx
+ * return (
+ *   <UseExtensionComponent
+ *     lexical:extension={TreeViewExtension}
+ *     viewClassName="tree-view-output" />
+ * );
+ * ```
+ *
+ * @example Alternative without UseExtensionComponent
+ * ```tsx
+ * const TreeViewComponent = useExtensionComponent(TreeViewExtension);
+ * return (<TreeViewComponent viewClassName="tree-view-output" />);
+ * ```
+ */
+export declare function UseExtensionComponent<Extension extends AnyLexicalExtension>({ "lexical:extension": extension, ...props }: UseExtensionComponentProps<Extension>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=useExtensionComponent.d.ts.map

package/dist/useExtensionComponent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useExtensionComponent.d.ts","sourceRoot":"","sources":["../src/useExtensionComponent.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,sBAAsB,EAC3B,KAAK,wBAAwB,EAE7B,KAAK,mBAAmB,EACxB,KAAK,0BAA0B,EAChC,MAAM,0BAA0B,CAAC;AAElC,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,wBAAgB,sBAAsB,CAAC,SAAS,SAAS,mBAAmB,EAC1E,SAAS,EAAE,SAAS,GACnB,0BAA0B,CAAC,SAAS,CAAC,CAEvC;AAED;;;;;;GAMG;AACH,wBAAgB,qBAAqB,CACnC,KAAK,SAAS,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,EAClC,eAAe,SAAS,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,EAClD,SAAS,SAAS,wBAAwB,CAAC,eAAe,CAAC,EAC3D,SAAS,EAAE,SAAS,GAAG,eAAe,CAEvC;AAED;;;GAGG;AACH,MAAM,MAAM,0BAA0B,CAAC,SAAS,SAAS,mBAAmB,IAAI;IAC9E,oBAAoB,CAAC,mBAAmB,EAAE,SAAS,CAAC;CACrD,GAAG,CAAC,CAAC,sBAAsB,CAAC,SAAS,CAAC,CAAC,SAAS;IAC/C;QACE,SAAS,EAAE,MAAM,mBAAmB,SAAS,KAAK,CAAC,aAAa,CAAC;KAClE;CACF,GACwD,IAAI,CACvD,cAAc,CAAC,mBAAmB,CAAC,EACnC,mBAAmB,CACpB,GACD,KAAK,CAAC,CAAC;AAEX;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,qBAAqB,CAAC,SAAS,SAAS,mBAAmB,EAAE,EAC3E,mBAAmB,EAAE,SAAS,EAC9B,GAAG,KAAK,EACT,EAAE,0BAA0B,CAAC,SAAS,CAAC,2CAGvC"}

package/dist/useReactDecorators.d.ts

@@ -0,0 +1,4 @@
+import { LexicalEditor } from 'lexical';
+import { ErrorBoundaryType } from './types';
+export declare function useReactDecorators(editor: LexicalEditor, ErrorBoundary: ErrorBoundaryType): JSX.Element[];
+//# sourceMappingURL=useReactDecorators.d.ts.map

package/dist/useReactDecorators.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useReactDecorators.d.ts","sourceRoot":"","sources":["../src/useReactDecorators.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAW,MAAM,SAAS,CAAC;AAKtD,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAEjD,wBAAgB,kBAAkB,CAChC,MAAM,EAAE,aAAa,EACrB,aAAa,EAAE,iBAAiB,GAC/B,GAAG,CAAC,OAAO,EAAE,CAmDf"}

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "@etrepum/lexical-react-extension",
+  "description": "[EXPERIMENTAL] Lexical Builder React extension",
+  "type": "module",
+  "keywords": [
+    "lexical",
+    "lexical-builder",
+    "react",
+    "plug-in",
+    "extension"
+  ],
+  "scripts": {
+    "build": "tsc --noEmit && vite build",
+    "dev": "vite",
+    "lint": "eslint",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "version": "0.0.36",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/etrepum/lexical-builder.git",
+    "directory": "packages/lexical-react-extension"
+  },
+  "bugs": {
+    "url": "https://github.com/etrepum/lexical-builder/issues"
+  },
+  "homepage": "https://github.com/etrepum/lexical-builder",
+  "dependencies": {
+    "@etrepum/lexical-builder": "*"
+  },
+  "peerDependencies": {
+    "@lexical/react": ">=0.33.1 || >=0.33.2-nightly.0",
+    "@lexical/text": ">=0.33.1 || >=0.33.2-nightly.0",
+    "@lexical/utils": ">=0.33.1 || >=0.33.2-nightly.0",
+    "lexical": ">=0.33.1 || >=0.33.2-nightly.0",
+    "react": ">=18"
+  },
+  "sideEffects": false,
+  "devDependencies": {
+    "@repo/eslint-config": "*",
+    "@testing-library/dom": "^10.1.0",
+    "@testing-library/jest-dom": "^6.4.5",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "eslint": "^8.57.0",
+    "jsdom": "^24.1.0",
+    "tslib": "^2.6.2",
+    "typescript": "^5.5.2",
+    "vite": "^5.4.0",
+    "vite-plugin-dts": "^4.0.2",
+    "vite-plugin-package-version": "^1.1.0",
+    "vitest": "^2.0.5"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ]
+}