@ekz/lexical-react 0.40.0

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

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

package/LexicalTableOfContentsPlugin.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("@ekz/lexical-react/LexicalComposerContext"),t=require("@ekz/lexical-rich-text"),n=require("@ekz/lexical-utils"),o=require("@ekz/lexical"),r=require("react");function i(e){return[e.getKey(),e.getTextContent(),e.getTag()]}function s(e,t,n){if(null===t)return n;const o=i(t);let r=[];if(null===e){if(n.length>0&&n[0][0]===t.__key)return n;r=[o,...n]}else for(let i=0;i<n.length;i++){const s=n[i][0];if(r.push(n[i]),s===e.getKey()&&s!==t.getKey()){if(i+1<n.length&&n[i+1][0]===t.__key)return n;r.push(o)}}return r}function u(e,t){const n=[];for(const o of t)o[0]!==e&&n.push(o);return n}function l(e,t){const n=[];for(const o of t)o[0]===e.getKey()?n.push(i(e)):n.push(o);return n}function c(e,t,n){const o=[],r=i(t);e||o.push(r);for(const i of n)i[0]!==t.getKey()&&(o.push(i),e&&i[0]===e.getKey()&&o.push(r));return o}function d(e){let o=n.$getNextRightPreorderNode(e);for(;null!==o&&!t.$isHeadingNode(o);)o=n.$getNextRightPreorderNode(o);return o}exports.TableOfContentsPlugin=function({children:n}){const[i,g]=r.useState([]),[f]=e.useLexicalComposerContext();return r.useEffect(()=>{let e=[];f.getEditorState().read(()=>{const n=r=>{for(const i of r.getChildren())t.$isHeadingNode(i)?e.push([i.getKey(),i.getTextContent(),i.getTag()]):o.$isElementNode(i)&&n(i)};n(o.$getRoot()),g(e)});const n=f.registerUpdateListener(({editorState:n,dirtyElements:r})=>{n.read(()=>{const n=r=>{for(const i of r.getChildren())if(t.$isHeadingNode(i)){const t=d(i);e=c(t,i,e),g(e)}else o.$isElementNode(i)&&n(i)};o.$getRoot().getChildren().forEach(e=>{o.$isElementNode(e)&&r.get(e.__key)&&n(e)})})}),r=f.registerMutationListener(t.HeadingNode,t=>{f.getEditorState().read(()=>{for(const[n,r]of t)if("created"===r){const t=o.$getNodeByKey(n);if(null!==t){const n=d(t);e=s(n,t,e)}}else if("destroyed"===r)e=u(n,e);else if("updated"===r){const t=o.$getNodeByKey(n);if(null!==t){const n=d(t);e=c(n,t,e)}}g(e)})},{skipInitialization:!0}),i=f.registerMutationListener(o.TextNode,n=>{f.getEditorState().read(()=>{for(const[r,i]of n)if("updated"===i){const n=o.$getNodeByKey(r);if(null!==n){const o=n.getParentOrThrow();t.$isHeadingNode(o)&&(e=l(o,e),g(e))}}})},{skipInitialization:!0});return()=>{r(),i(),n()}},[f]),n(i,f)};

package/LexicalTableOfContentsPlugin.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 t}from"@ekz/lexical-react/LexicalComposerContext";import{HeadingNode as e,$isHeadingNode as n}from"@ekz/lexical-rich-text";import{$getNextRightPreorderNode as r}from"@ekz/lexical-utils";import{$getRoot as o,$isElementNode as i,$getNodeByKey as s,TextNode as f}from"@ekz/lexical";import{useState as c,useEffect as l}from"react";function u(t){return[t.getKey(),t.getTextContent(),t.getTag()]}function a(t,e,n){if(null===e)return n;const r=u(e);let o=[];if(null===t){if(n.length>0&&n[0][0]===e.__key)return n;o=[r,...n]}else for(let i=0;i<n.length;i++){const s=n[i][0];if(o.push(n[i]),s===t.getKey()&&s!==e.getKey()){if(i+1<n.length&&n[i+1][0]===e.__key)return n;o.push(r)}}return o}function g(t,e){const n=[];for(const r of e)r[0]!==t&&n.push(r);return n}function d(t,e){const n=[];for(const r of e)r[0]===t.getKey()?n.push(u(t)):n.push(r);return n}function p(t,e,n){const r=[],o=u(e);t||r.push(o);for(const i of n)i[0]!==e.getKey()&&(r.push(i),t&&i[0]===t.getKey()&&r.push(o));return r}function h(t){let e=r(t);for(;null!==e&&!n(e);)e=r(e);return e}function m({children:r}){const[u,m]=c([]),[y]=t();return l(()=>{let t=[];y.getEditorState().read(()=>{const e=r=>{for(const o of r.getChildren())n(o)?t.push([o.getKey(),o.getTextContent(),o.getTag()]):i(o)&&e(o)};e(o()),m(t)});const r=y.registerUpdateListener(({editorState:e,dirtyElements:r})=>{e.read(()=>{const e=r=>{for(const o of r.getChildren())if(n(o)){const e=h(o);t=p(e,o,t),m(t)}else i(o)&&e(o)};o().getChildren().forEach(t=>{i(t)&&r.get(t.__key)&&e(t)})})}),c=y.registerMutationListener(e,e=>{y.getEditorState().read(()=>{for(const[n,r]of e)if("created"===r){const e=s(n);if(null!==e){const n=h(e);t=a(n,e,t)}}else if("destroyed"===r)t=g(n,t);else if("updated"===r){const e=s(n);if(null!==e){const n=h(e);t=p(n,e,t)}}m(t)})},{skipInitialization:!0}),l=y.registerMutationListener(f,e=>{y.getEditorState().read(()=>{for(const[r,o]of e)if("updated"===o){const e=s(r);if(null!==e){const r=e.getParentOrThrow();n(r)&&(t=d(r,t),m(t))}}})},{skipInitialization:!0});return()=>{c(),l(),r()}},[y]),r(u,y)}export{m as TableOfContentsPlugin};

package/LexicalTablePlugin.d.ts

@@ -0,0 +1,46 @@
+/**
+ * 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 { JSX } from 'react';
+export interface TablePluginProps {
+    /**
+     * When `false` (default `true`), merged cell support (colspan and rowspan) will be disabled and all
+     * tables will be forced into a regular grid with 1x1 table cells.
+     */
+    hasCellMerge?: boolean;
+    /**
+     * When `false` (default `true`), the background color of TableCellNode will always be removed.
+     */
+    hasCellBackgroundColor?: boolean;
+    /**
+     * When `true` (default `true`), the tab key can be used to navigate table cells.
+     */
+    hasTabHandler?: boolean;
+    /**
+     * When `true` (default `false`), tables will be wrapped in a `<div>` to enable horizontal scrolling
+     */
+    hasHorizontalScroll?: boolean;
+    /**
+     * When `true` (default `false`), nested tables will be allowed.
+     *
+     * @experimental Nested tables are not officially supported.
+     */
+    hasNestedTables?: boolean;
+    /**
+     * When `true` (default `false`), nested tables will be resized to fit the width of the parent table cell.
+     *
+     * @experimental Nested tables are not officially supported.
+     */
+    hasFitNestedTables?: boolean;
+}
+/**
+ * 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
+ */
+export declare function TablePlugin({ hasCellMerge, hasCellBackgroundColor, hasTabHandler, hasHorizontalScroll, hasNestedTables, hasFitNestedTables, }: TablePluginProps): JSX.Element | null;

package/LexicalTablePlugin.dev.js

@@ -0,0 +1,81 @@
+/**
+ * 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 lexicalExtension = require('@ekz/lexical-extension');
+var LexicalComposerContext = require('@ekz/lexical-react/LexicalComposerContext');
+var lexicalTable = require('@ekz/lexical-table');
+var react = require('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,
+  hasFitNestedTables = false
+}) {
+  const [editor] = LexicalComposerContext.useLexicalComposerContext();
+  react.useEffect(() => {
+    const hadHorizontalScroll = lexicalTable.$isScrollableTablesActive(editor);
+    if (hadHorizontalScroll !== hasHorizontalScroll) {
+      lexicalTable.setScrollableTablesActive(editor, hasHorizontalScroll);
+      // Registering the transform has the side-effect of marking all existing
+      // TableNodes as dirty. The handler is immediately unregistered.
+      editor.registerNodeTransform(lexicalTable.TableNode, () => {})();
+    }
+  }, [editor, hasHorizontalScroll]);
+  const hasNestedTablesSignal = usePropSignal(hasNestedTables);
+  const hasFitNestedTablesSignal = usePropSignal(hasFitNestedTables);
+  react.useEffect(() => lexicalTable.registerTablePlugin(editor), [editor, hasNestedTablesSignal, hasFitNestedTablesSignal]);
+  react.useEffect(() => lexicalTable.registerTableSelectionObserver(editor, hasTabHandler), [editor, hasTabHandler]);
+
+  // Unmerge cells when the feature isn't enabled
+  react.useEffect(() => {
+    if (!hasCellMerge) {
+      return lexicalTable.registerTableCellUnmergeTransform(editor);
+    }
+  }, [editor, hasCellMerge]);
+
+  // Remove cell background color when feature is disabled
+  react.useEffect(() => {
+    if (hasCellBackgroundColor) {
+      return;
+    }
+    return editor.registerNodeTransform(lexicalTable.TableCellNode, node => {
+      if (node.getBackgroundColor() !== null) {
+        node.setBackgroundColor(null);
+      }
+    });
+  }, [editor, hasCellBackgroundColor, hasCellMerge]);
+  return null;
+}
+function usePropSignal(value) {
+  const [configSignal] = react.useState(() => lexicalExtension.signal(value));
+  if (configSignal.peek() !== value) {
+    configSignal.value = value;
+  }
+  return configSignal;
+}
+
+exports.TablePlugin = TablePlugin;

package/LexicalTablePlugin.dev.mjs

@@ -0,0 +1,79 @@
+/**
+ * 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 '@ekz/lexical-extension';
+import { useLexicalComposerContext } from '@ekz/lexical-react/LexicalComposerContext';
+import { $isScrollableTablesActive, setScrollableTablesActive, TableNode, registerTablePlugin, registerTableSelectionObserver, registerTableCellUnmergeTransform, TableCellNode } from '@ekz/lexical-table';
+import { useEffect, useState } 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,
+  hasFitNestedTables = 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 = usePropSignal(hasNestedTables);
+  const hasFitNestedTablesSignal = usePropSignal(hasFitNestedTables);
+  useEffect(() => registerTablePlugin(editor), [editor, hasNestedTablesSignal, hasFitNestedTablesSignal]);
+  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;
+}
+function usePropSignal(value) {
+  const [configSignal] = useState(() => signal(value));
+  if (configSignal.peek() !== value) {
+    configSignal.value = value;
+  }
+  return configSignal;
+}
+
+export { TablePlugin };

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

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

package/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 '@ekz/lexical';
+import type { JSX } from 'react';
+import { CustomPrintNodeFn } from '@ekz/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/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 lexicalDevtoolsCore = require('@ekz/lexical-devtools-core');
+var lexicalUtils = require('@ekz/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 = lexicalDevtoolsCore.useLexicalCommandsLog(editor);
+  React.useEffect(() => {
+    // Registers listeners to update the tree view when the editor state changes
+    return lexicalUtils.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(lexicalDevtoolsCore.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 lexicalDevtoolsCore.generateContent(editor, commandsLog, exportDOM, customPrintNode);
+    },
+    ref: treeElementRef,
+    commandsLog: commandsLog
+  });
+}
+
+exports.TreeView = TreeView;

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

package/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/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/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("@ekz/lexical-devtools-core"),t=require("@ekz/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/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"@ekz/lexical-devtools-core";import{mergeRegister as r}from"@ekz/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};