zurfyx-lexical-react 0.39.1-nightly.20251225.0

package/npm/LexicalTablePlugin.dev.mjs

@@ -0,0 +1,75 @@
+/**
+ * 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 { signal } from '@lexical/extension';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $isScrollableTablesActive, setScrollableTablesActive, TableNode, registerTablePlugin, registerTableSelectionObserver, registerTableCellUnmergeTransform, TableCellNode } from '@lexical/table';
+import { useEffect, useMemo } from 'react';
+
+/**
+ * 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.
+ *
+ */
+
+/**
+ * A plugin to enable all of the features of Lexical's TableNode.
+ *
+ * @param props - See type for documentation
+ * @returns An element to render in your LexicalComposer
+ */
+function TablePlugin({
+  hasCellMerge = true,
+  hasCellBackgroundColor = true,
+  hasTabHandler = true,
+  hasHorizontalScroll = false,
+  hasNestedTables = false
+}) {
+  const [editor] = useLexicalComposerContext();
+  useEffect(() => {
+    const hadHorizontalScroll = $isScrollableTablesActive(editor);
+    if (hadHorizontalScroll !== hasHorizontalScroll) {
+      setScrollableTablesActive(editor, hasHorizontalScroll);
+      // Registering the transform has the side-effect of marking all existing
+      // TableNodes as dirty. The handler is immediately unregistered.
+      editor.registerNodeTransform(TableNode, () => {})();
+    }
+  }, [editor, hasHorizontalScroll]);
+  const hasNestedTablesSignal = useMemo(() => signal(false), []);
+  if (hasNestedTablesSignal.peek() !== hasNestedTables) {
+    hasNestedTablesSignal.value = hasNestedTables;
+  }
+  useEffect(() => registerTablePlugin(editor, {
+    hasNestedTables: hasNestedTablesSignal
+  }), [editor, hasNestedTablesSignal]);
+  useEffect(() => registerTableSelectionObserver(editor, hasTabHandler), [editor, hasTabHandler]);
+
+  // Unmerge cells when the feature isn't enabled
+  useEffect(() => {
+    if (!hasCellMerge) {
+      return registerTableCellUnmergeTransform(editor);
+    }
+  }, [editor, hasCellMerge]);
+
+  // Remove cell background color when feature is disabled
+  useEffect(() => {
+    if (hasCellBackgroundColor) {
+      return;
+    }
+    return editor.registerNodeTransform(TableCellNode, node => {
+      if (node.getBackgroundColor() !== null) {
+        node.setBackgroundColor(null);
+      }
+    });
+  }, [editor, hasCellBackgroundColor, hasCellMerge]);
+  return null;
+}
+
+export { TablePlugin };

package/npm/LexicalTablePlugin.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 LexicalTablePlugin = process.env.NODE_ENV !== 'production' ? require('./LexicalTablePlugin.dev.js') : require('./LexicalTablePlugin.prod.js');
+module.exports = LexicalTablePlugin;

package/npm/LexicalTablePlugin.js.flow

@@ -0,0 +1,15 @@
+/**
+ * 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
+ */
+
+type Props = $ReadOnly<{
+  hasCellMerge?: boolean,
+  hasCellBackgroundColor?: boolean,
+  hasTabHandler?: boolean,
+}>;
+declare export function TablePlugin(props: Props): null;

package/npm/LexicalTablePlugin.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 './LexicalTablePlugin.dev.mjs';
+import * as modProd from './LexicalTablePlugin.prod.mjs';
+const mod = process.env.NODE_ENV !== 'production' ? modDev : modProd;
+export const TablePlugin = mod.TablePlugin;

package/npm/LexicalTablePlugin.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('./LexicalTablePlugin.dev.mjs') : import('./LexicalTablePlugin.prod.mjs'));
+export const TablePlugin = mod.TablePlugin;

package/npm/LexicalTablePlugin.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/extension"),r=require("@lexical/react/LexicalComposerContext"),l=require("@lexical/table"),s=require("react");exports.TablePlugin=function({hasCellMerge:a=!0,hasCellBackgroundColor:t=!0,hasTabHandler:o=!0,hasHorizontalScroll:i=!1,hasNestedTables:n=!1}){const[c]=r.useLexicalComposerContext();s.useEffect(()=>{l.$isScrollableTablesActive(c)!==i&&(l.setScrollableTablesActive(c,i),c.registerNodeTransform(l.TableNode,()=>{})())},[c,i]);const u=s.useMemo(()=>e.signal(!1),[]);return u.peek()!==n&&(u.value=n),s.useEffect(()=>l.registerTablePlugin(c,{hasNestedTables:u}),[c,u]),s.useEffect(()=>l.registerTableSelectionObserver(c,o),[c,o]),s.useEffect(()=>{if(!a)return l.registerTableCellUnmergeTransform(c)},[c,a]),s.useEffect(()=>{if(!t)return c.registerNodeTransform(l.TableCellNode,e=>{null!==e.getBackgroundColor()&&e.setBackgroundColor(null)})},[c,t,a]),null};

package/npm/LexicalTablePlugin.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{signal as e}from"@lexical/extension";import{useLexicalComposerContext as r}from"@lexical/react/LexicalComposerContext";import{$isScrollableTablesActive as o,setScrollableTablesActive as l,TableNode as a,registerTablePlugin as t,registerTableSelectionObserver as n,registerTableCellUnmergeTransform as s,TableCellNode as i}from"@lexical/table";import{useEffect as c,useMemo as m}from"react";function u({hasCellMerge:u=!0,hasCellBackgroundColor:f=!0,hasTabHandler:d=!0,hasHorizontalScroll:g=!1,hasNestedTables:p=!1}){const[x]=r();c(()=>{o(x)!==g&&(l(x,g),x.registerNodeTransform(a,()=>{})())},[x,g]);const C=m(()=>e(!1),[]);return C.peek()!==p&&(C.value=p),c(()=>t(x,{hasNestedTables:C}),[x,C]),c(()=>n(x,d),[x,d]),c(()=>{if(!u)return s(x)},[x,u]),c(()=>{if(!f)return x.registerNodeTransform(i,e=>{null!==e.getBackgroundColor()&&e.setBackgroundColor(null)})},[x,f,u]),null}export{u as TablePlugin};

package/npm/LexicalTreeView.d.ts

@@ -0,0 +1,37 @@
+/**
+ * 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 type { LexicalEditor } from 'lexical';
+import type { JSX } from 'react';
+import { CustomPrintNodeFn } from '@lexical/devtools-core';
+/**
+ * TreeView is a React component that provides a visual representation of
+ * the Lexical editor's state and enables debugging features like time travel
+ * and custom tree node rendering.
+ *
+ * @param {Object} props - The properties passed to the TreeView component.
+ * @param {LexicalEditor} props.editor - The Lexical editor instance to be visualized and debugged.
+ * @param {string} [props.treeTypeButtonClassName] - Custom class name for the tree type toggle button.
+ * @param {string} [props.timeTravelButtonClassName] - Custom class name for the time travel toggle button.
+ * @param {string} [props.timeTravelPanelButtonClassName] - Custom class name for buttons inside the time travel panel.
+ * @param {string} [props.timeTravelPanelClassName] - Custom class name for the overall time travel panel container.
+ * @param {string} [props.timeTravelPanelSliderClassName] - Custom class name for the time travel slider in the panel.
+ * @param {string} [props.viewClassName] - Custom class name for the tree view container.
+ * @param {CustomPrintNodeFn} [props.customPrintNode] - A function for customizing the display of nodes in the tree.
+ *
+ * @returns {JSX.Element} - A React element that visualizes the editor's state and supports debugging interactions.
+ */
+export declare function TreeView({ treeTypeButtonClassName, timeTravelButtonClassName, timeTravelPanelSliderClassName, timeTravelPanelButtonClassName, timeTravelPanelClassName, viewClassName, editor, customPrintNode, }: {
+    editor: LexicalEditor;
+    treeTypeButtonClassName?: string;
+    timeTravelButtonClassName?: string;
+    timeTravelPanelButtonClassName?: string;
+    timeTravelPanelClassName?: string;
+    timeTravelPanelSliderClassName?: string;
+    viewClassName?: string;
+    customPrintNode?: CustomPrintNodeFn;
+}): JSX.Element;

package/npm/LexicalTreeView.dev.js

@@ -0,0 +1,105 @@
+/**
+ * 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 devtoolsCore = require('@lexical/devtools-core');
+var utils = require('@lexical/utils');
+var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    for (var k in e) {
+      n[k] = e[k];
+    }
+  }
+  n.default = e;
+  return n;
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+/**
+ * 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 TreeView({
+  treeTypeButtonClassName,
+  timeTravelButtonClassName,
+  timeTravelPanelSliderClassName,
+  timeTravelPanelButtonClassName,
+  timeTravelPanelClassName,
+  viewClassName,
+  editor,
+  customPrintNode
+}) {
+  const treeElementRef = /*#__PURE__*/React__namespace.createRef();
+  const [editorCurrentState, setEditorCurrentState] = React.useState(editor.getEditorState());
+  const commandsLog = devtoolsCore.useLexicalCommandsLog(editor);
+  React.useEffect(() => {
+    // Registers listeners to update the tree view when the editor state changes
+    return utils.mergeRegister(editor.registerUpdateListener(({
+      editorState
+    }) => {
+      setEditorCurrentState(editorState);
+    }), editor.registerEditableListener(() => {
+      setEditorCurrentState(editor.getEditorState());
+    }));
+  }, [editor]);
+  React.useEffect(() => {
+    const element = treeElementRef.current;
+    if (element !== null) {
+      // Assigns the editor instance to the tree view DOM element for internal tracking
+      // @ts-ignore Internal field used by Lexical
+      element.__lexicalEditor = editor;
+      return () => {
+        // Cleans up the reference when the component is unmounted
+        // @ts-ignore Internal field used by Lexical
+        element.__lexicalEditor = null;
+      };
+    }
+  }, [editor, treeElementRef]);
+
+  /**
+   * Handles toggling the readonly state of the editor.
+   *
+   * @param {boolean} isReadonly - Whether the editor should be set to readonly.
+   */
+  const handleEditorReadOnly = isReadonly => {
+    const rootElement = editor.getRootElement();
+    if (rootElement == null) {
+      return;
+    }
+    rootElement.contentEditable = isReadonly ? 'false' : 'true';
+  };
+  return /*#__PURE__*/jsxRuntime.jsx(devtoolsCore.TreeView, {
+    treeTypeButtonClassName: treeTypeButtonClassName,
+    timeTravelButtonClassName: timeTravelButtonClassName,
+    timeTravelPanelSliderClassName: timeTravelPanelSliderClassName,
+    timeTravelPanelButtonClassName: timeTravelPanelButtonClassName,
+    viewClassName: viewClassName,
+    timeTravelPanelClassName: timeTravelPanelClassName,
+    setEditorReadOnly: handleEditorReadOnly,
+    editorState: editorCurrentState,
+    setEditorState: state => editor.setEditorState(state),
+    generateContent: async function (exportDOM) {
+      // Generates the content for the tree view, allowing customization with exportDOM and customPrintNode
+      return devtoolsCore.generateContent(editor, commandsLog, exportDOM, customPrintNode);
+    },
+    ref: treeElementRef,
+    commandsLog: commandsLog
+  });
+}
+
+exports.TreeView = TreeView;

package/npm/LexicalTreeView.dev.mjs

@@ -0,0 +1,91 @@
+/**
+ * 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 { useLexicalCommandsLog, TreeView as TreeView$1, generateContent } from '@lexical/devtools-core';
+import { mergeRegister } from '@lexical/utils';
+import * as React from 'react';
+import { useState, useEffect } from 'react';
+import { jsx } 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.
+ *
+ */
+
+function TreeView({
+  treeTypeButtonClassName,
+  timeTravelButtonClassName,
+  timeTravelPanelSliderClassName,
+  timeTravelPanelButtonClassName,
+  timeTravelPanelClassName,
+  viewClassName,
+  editor,
+  customPrintNode
+}) {
+  const treeElementRef = /*#__PURE__*/React.createRef();
+  const [editorCurrentState, setEditorCurrentState] = useState(editor.getEditorState());
+  const commandsLog = useLexicalCommandsLog(editor);
+  useEffect(() => {
+    // Registers listeners to update the tree view when the editor state changes
+    return mergeRegister(editor.registerUpdateListener(({
+      editorState
+    }) => {
+      setEditorCurrentState(editorState);
+    }), editor.registerEditableListener(() => {
+      setEditorCurrentState(editor.getEditorState());
+    }));
+  }, [editor]);
+  useEffect(() => {
+    const element = treeElementRef.current;
+    if (element !== null) {
+      // Assigns the editor instance to the tree view DOM element for internal tracking
+      // @ts-ignore Internal field used by Lexical
+      element.__lexicalEditor = editor;
+      return () => {
+        // Cleans up the reference when the component is unmounted
+        // @ts-ignore Internal field used by Lexical
+        element.__lexicalEditor = null;
+      };
+    }
+  }, [editor, treeElementRef]);
+
+  /**
+   * Handles toggling the readonly state of the editor.
+   *
+   * @param {boolean} isReadonly - Whether the editor should be set to readonly.
+   */
+  const handleEditorReadOnly = isReadonly => {
+    const rootElement = editor.getRootElement();
+    if (rootElement == null) {
+      return;
+    }
+    rootElement.contentEditable = isReadonly ? 'false' : 'true';
+  };
+  return /*#__PURE__*/jsx(TreeView$1, {
+    treeTypeButtonClassName: treeTypeButtonClassName,
+    timeTravelButtonClassName: timeTravelButtonClassName,
+    timeTravelPanelSliderClassName: timeTravelPanelSliderClassName,
+    timeTravelPanelButtonClassName: timeTravelPanelButtonClassName,
+    viewClassName: viewClassName,
+    timeTravelPanelClassName: timeTravelPanelClassName,
+    setEditorReadOnly: handleEditorReadOnly,
+    editorState: editorCurrentState,
+    setEditorState: state => editor.setEditorState(state),
+    generateContent: async function (exportDOM) {
+      // Generates the content for the tree view, allowing customization with exportDOM and customPrintNode
+      return generateContent(editor, commandsLog, exportDOM, customPrintNode);
+    },
+    ref: treeElementRef,
+    commandsLog: commandsLog
+  });
+}
+
+export { TreeView };

package/npm/LexicalTreeView.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 LexicalTreeView = process.env.NODE_ENV !== 'production' ? require('./LexicalTreeView.dev.js') : require('./LexicalTreeView.prod.js');
+module.exports = LexicalTreeView;

package/npm/LexicalTreeView.js.flow

@@ -0,0 +1,21 @@
+/**
+ * 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
+ */
+
+import type {CustomPrintNodeFn} from '@lexical/devtools-core';
+import type {LexicalEditor} from 'lexical';
+
+declare export function TreeView(props: {
+  timeTravelPanelClassName: string,
+  timeTravelPanelSliderClassName: string,
+  timeTravelPanelButtonClassName: string,
+  timeTravelButtonClassName: string,
+  viewClassName: string,
+  editor: LexicalEditor,
+  customPrintNode?: CustomPrintNodeFn,
+}): React.Node;

package/npm/LexicalTreeView.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 './LexicalTreeView.dev.mjs';
+import * as modProd from './LexicalTreeView.prod.mjs';
+const mod = process.env.NODE_ENV !== 'production' ? modDev : modProd;
+export const TreeView = mod.TreeView;

package/npm/LexicalTreeView.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('./LexicalTreeView.dev.mjs') : import('./LexicalTreeView.prod.mjs'));
+export const TreeView = mod.TreeView;

package/npm/LexicalTreeView.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/devtools-core"),t=require("@lexical/utils"),a=require("react"),r=require("react/jsx-runtime");function l(e){var t=Object.create(null);if(e)for(var a in e)t[a]=e[a];return t.default=e,t}var s=l(a);exports.TreeView=function({treeTypeButtonClassName:l,timeTravelButtonClassName:i,timeTravelPanelSliderClassName:n,timeTravelPanelButtonClassName:o,timeTravelPanelClassName:u,viewClassName:m,editor:c,customPrintNode:d}){const v=s.createRef(),[C,f]=a.useState(c.getEditorState()),N=e.useLexicalCommandsLog(c);return a.useEffect(()=>t.mergeRegister(c.registerUpdateListener(({editorState:e})=>{f(e)}),c.registerEditableListener(()=>{f(c.getEditorState())})),[c]),a.useEffect(()=>{const e=v.current;if(null!==e)return e.__lexicalEditor=c,()=>{e.__lexicalEditor=null}},[c,v]),r.jsx(e.TreeView,{treeTypeButtonClassName:l,timeTravelButtonClassName:i,timeTravelPanelSliderClassName:n,timeTravelPanelButtonClassName:o,viewClassName:m,timeTravelPanelClassName:u,setEditorReadOnly:e=>{const t=c.getRootElement();null!=t&&(t.contentEditable=e?"false":"true")},editorState:C,setEditorState:e=>c.setEditorState(e),generateContent:async function(t){return e.generateContent(c,N,t,d)},ref:v,commandsLog:N})};

package/npm/LexicalTreeView.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{useLexicalCommandsLog as e,TreeView as t,generateContent as a}from"@lexical/devtools-core";import{mergeRegister as r}from"@lexical/utils";import*as l from"react";import{useState as i,useEffect as o}from"react";import{jsx as s}from"react/jsx-runtime";function n({treeTypeButtonClassName:n,timeTravelButtonClassName:m,timeTravelPanelSliderClassName:c,timeTravelPanelButtonClassName:d,timeTravelPanelClassName:u,viewClassName:C,editor:N,customPrintNode:f}){const v=l.createRef(),[T,E]=i(N.getEditorState()),p=e(N);o(()=>r(N.registerUpdateListener(({editorState:e})=>{E(e)}),N.registerEditableListener(()=>{E(N.getEditorState())})),[N]),o(()=>{const e=v.current;if(null!==e)return e.__lexicalEditor=N,()=>{e.__lexicalEditor=null}},[N,v]);return s(t,{treeTypeButtonClassName:n,timeTravelButtonClassName:m,timeTravelPanelSliderClassName:c,timeTravelPanelButtonClassName:d,viewClassName:C,timeTravelPanelClassName:u,setEditorReadOnly:e=>{const t=N.getRootElement();null!=t&&(t.contentEditable=e?"false":"true")},editorState:T,setEditorState:e=>N.setEditorState(e),generateContent:async function(e){return a(N,p,e,f)},ref:v,commandsLog:p})}export{n as TreeView};

package/npm/LexicalTreeViewExtension.dev.js

@@ -0,0 +1,57 @@
+/**
+ * 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 LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
+var LexicalTreeView = require('@lexical/react/LexicalTreeView');
+var ReactExtension = require('@lexical/react/ReactExtension');
+var useExtensionComponent = require('@lexical/react/useExtensionComponent');
+var lexical = require('lexical');
+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.
+ *
+ */
+
+function TreeViewExtensionComponent(props) {
+  const [editor] = LexicalComposerContext.useLexicalComposerContext();
+  return /*#__PURE__*/jsxRuntime.jsx(LexicalTreeView.TreeView, {
+    editor: editor,
+    ...useExtensionComponent.useExtensionDependency(TreeViewExtension).config,
+    ...props
+  });
+}
+const config = {
+  timeTravelButtonClassName: 'debug-timetravel-button',
+  timeTravelPanelButtonClassName: 'debug-timetravel-panel-button',
+  timeTravelPanelClassName: 'debug-timetravel-panel',
+  timeTravelPanelSliderClassName: 'debug-timetravel-panel-slider',
+  treeTypeButtonClassName: 'debug-treetype-button',
+  viewClassName: 'tree-view-output'
+};
+
+/**
+ * Provides a configured TreeView debugging tool (React dependent)
+ * as an output component with configurable class names.
+ */
+const TreeViewExtension = lexical.defineExtension({
+  build: () => ({
+    Component: TreeViewExtensionComponent
+  }),
+  config,
+  dependencies: [ReactExtension.ReactExtension],
+  name: '@lexical/react/TreeView'
+});
+
+exports.TreeViewExtension = TreeViewExtension;
+exports.TreeViewExtensionComponent = TreeViewExtensionComponent;

package/npm/LexicalTreeViewExtension.dev.mjs

@@ -0,0 +1,54 @@
+/**
+ * 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 } from '@lexical/react/LexicalComposerContext';
+import { TreeView } from '@lexical/react/LexicalTreeView';
+import { ReactExtension } from '@lexical/react/ReactExtension';
+import { useExtensionDependency } from '@lexical/react/useExtensionComponent';
+import { defineExtension } from 'lexical';
+import { jsx } 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.
+ *
+ */
+
+function TreeViewExtensionComponent(props) {
+  const [editor] = useLexicalComposerContext();
+  return /*#__PURE__*/jsx(TreeView, {
+    editor: editor,
+    ...useExtensionDependency(TreeViewExtension).config,
+    ...props
+  });
+}
+const config = {
+  timeTravelButtonClassName: 'debug-timetravel-button',
+  timeTravelPanelButtonClassName: 'debug-timetravel-panel-button',
+  timeTravelPanelClassName: 'debug-timetravel-panel',
+  timeTravelPanelSliderClassName: 'debug-timetravel-panel-slider',
+  treeTypeButtonClassName: 'debug-treetype-button',
+  viewClassName: 'tree-view-output'
+};
+
+/**
+ * Provides a configured TreeView debugging tool (React dependent)
+ * as an output component with configurable class names.
+ */
+const TreeViewExtension = defineExtension({
+  build: () => ({
+    Component: TreeViewExtensionComponent
+  }),
+  config,
+  dependencies: [ReactExtension],
+  name: '@lexical/react/TreeView'
+});
+
+export { TreeViewExtension, TreeViewExtensionComponent };

package/npm/LexicalTreeViewExtension.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 LexicalTreeViewExtension = process.env.NODE_ENV !== 'production' ? require('./LexicalTreeViewExtension.dev.js') : require('./LexicalTreeViewExtension.prod.js');
+module.exports = LexicalTreeViewExtension;

package/npm/LexicalTreeViewExtension.js.flow

@@ -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.
+ *
+ * @flow strict
+ */
+
+/**
+ * LexicalTreeViewExtension
+ */

package/npm/LexicalTreeViewExtension.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 './LexicalTreeViewExtension.dev.mjs';
+import * as modProd from './LexicalTreeViewExtension.prod.mjs';
+const mod = process.env.NODE_ENV !== 'production' ? modDev : modProd;
+export const TreeViewExtension = mod.TreeViewExtension;
+export const TreeViewExtensionComponent = mod.TreeViewExtensionComponent;

package/npm/LexicalTreeViewExtension.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('./LexicalTreeViewExtension.dev.mjs') : import('./LexicalTreeViewExtension.prod.mjs'));
+export const TreeViewExtension = mod.TreeViewExtension;
+export const TreeViewExtensionComponent = mod.TreeViewExtensionComponent;

package/npm/LexicalTreeViewExtension.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"),t=require("@lexical/react/LexicalTreeView"),i=require("@lexical/react/ReactExtension"),n=require("@lexical/react/useExtensionComponent"),r=require("lexical"),a=require("react/jsx-runtime");function l(i){const[r]=e.useLexicalComposerContext();return a.jsx(t.TreeView,{editor:r,...n.useExtensionDependency(o).config,...i})}const o=r.defineExtension({build:()=>({Component:l}),config:{timeTravelButtonClassName:"debug-timetravel-button",timeTravelPanelButtonClassName:"debug-timetravel-panel-button",timeTravelPanelClassName:"debug-timetravel-panel",timeTravelPanelSliderClassName:"debug-timetravel-panel-slider",treeTypeButtonClassName:"debug-treetype-button",viewClassName:"tree-view-output"},dependencies:[i.ReactExtension],name:"@lexical/react/TreeView"});exports.TreeViewExtension=o,exports.TreeViewExtensionComponent=l;

package/npm/LexicalTreeViewExtension.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 e}from"@lexical/react/LexicalComposerContext";import{TreeView as t}from"@lexical/react/LexicalTreeView";import{ReactExtension as a}from"@lexical/react/ReactExtension";import{useExtensionDependency as r}from"@lexical/react/useExtensionComponent";import{defineExtension as i}from"lexical";import{jsx as l}from"react/jsx-runtime";function o(a){const[i]=e();return l(t,{editor:i,...r(n).config,...a})}const n=i({build:()=>({Component:o}),config:{timeTravelButtonClassName:"debug-timetravel-button",timeTravelPanelButtonClassName:"debug-timetravel-panel-button",timeTravelPanelClassName:"debug-timetravel-panel",timeTravelPanelSliderClassName:"debug-timetravel-panel-slider",treeTypeButtonClassName:"debug-treetype-button",viewClassName:"tree-view-output"},dependencies:[a],name:"@lexical/react/TreeView"});export{n as TreeViewExtension,o as TreeViewExtensionComponent};