@lexical/react 0.15.0 → 0.16.0

package/LexicalTableOfContentsPlugin.dev.js

@@ -0,0 +1,198 @@
+/**
+ * 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 richText = require('@lexical/rich-text');
+var utils = require('@lexical/utils');
+var lexical = require('lexical');
+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.
+ *
+ */
+
+function toEntry(heading) {
+  return [heading.getKey(), heading.getTextContent(), heading.getTag()];
+}
+function $insertHeadingIntoTableOfContents(prevHeading, newHeading, currentTableOfContents) {
+  if (newHeading === null) {
+    return currentTableOfContents;
+  }
+  const newEntry = toEntry(newHeading);
+  let newTableOfContents = [];
+  if (prevHeading === null) {
+    // check if key already exists
+    if (currentTableOfContents.length > 0 && currentTableOfContents[0][0] === newHeading.__key) {
+      return currentTableOfContents;
+    }
+    newTableOfContents = [newEntry, ...currentTableOfContents];
+  } else {
+    for (let i = 0; i < currentTableOfContents.length; i++) {
+      const key = currentTableOfContents[i][0];
+      newTableOfContents.push(currentTableOfContents[i]);
+      if (key === prevHeading.getKey() && key !== newHeading.getKey()) {
+        // check if key already exists
+        if (i + 1 < currentTableOfContents.length && currentTableOfContents[i + 1][0] === newHeading.__key) {
+          return currentTableOfContents;
+        }
+        newTableOfContents.push(newEntry);
+      }
+    }
+  }
+  return newTableOfContents;
+}
+function $deleteHeadingFromTableOfContents(key, currentTableOfContents) {
+  const newTableOfContents = [];
+  for (const heading of currentTableOfContents) {
+    if (heading[0] !== key) {
+      newTableOfContents.push(heading);
+    }
+  }
+  return newTableOfContents;
+}
+function $updateHeadingInTableOfContents(heading, currentTableOfContents) {
+  const newTableOfContents = [];
+  for (const oldHeading of currentTableOfContents) {
+    if (oldHeading[0] === heading.getKey()) {
+      newTableOfContents.push(toEntry(heading));
+    } else {
+      newTableOfContents.push(oldHeading);
+    }
+  }
+  return newTableOfContents;
+}
+
+/**
+ * Returns the updated table of contents, placing the given `heading` before the given `prevHeading`. If `prevHeading`
+ * is undefined, `heading` is placed at the start of table of contents
+ */
+function $updateHeadingPosition(prevHeading, heading, currentTableOfContents) {
+  const newTableOfContents = [];
+  const newEntry = toEntry(heading);
+  if (!prevHeading) {
+    newTableOfContents.push(newEntry);
+  }
+  for (const oldHeading of currentTableOfContents) {
+    if (oldHeading[0] === heading.getKey()) {
+      continue;
+    }
+    newTableOfContents.push(oldHeading);
+    if (prevHeading && oldHeading[0] === prevHeading.getKey()) {
+      newTableOfContents.push(newEntry);
+    }
+  }
+  return newTableOfContents;
+}
+function $getPreviousHeading(node) {
+  let prevHeading = utils.$getNextRightPreorderNode(node);
+  while (prevHeading !== null && !richText.$isHeadingNode(prevHeading)) {
+    prevHeading = utils.$getNextRightPreorderNode(prevHeading);
+  }
+  return prevHeading;
+}
+function TableOfContentsPlugin({
+  children
+}) {
+  const [tableOfContents, setTableOfContents] = react.useState([]);
+  const [editor] = LexicalComposerContext.useLexicalComposerContext();
+  react.useEffect(() => {
+    // Set table of contents initial state
+    let currentTableOfContents = [];
+    editor.getEditorState().read(() => {
+      const root = lexical.$getRoot();
+      const rootChildren = root.getChildren();
+      for (const child of rootChildren) {
+        if (richText.$isHeadingNode(child)) {
+          currentTableOfContents.push([child.getKey(), child.getTextContent(), child.getTag()]);
+        }
+      }
+      setTableOfContents(currentTableOfContents);
+    });
+    const removeRootUpdateListener = editor.registerUpdateListener(({
+      editorState,
+      dirtyElements
+    }) => {
+      editorState.read(() => {
+        const updateChildHeadings = node => {
+          for (const child of node.getChildren()) {
+            if (richText.$isHeadingNode(child)) {
+              const prevHeading = $getPreviousHeading(child);
+              currentTableOfContents = $updateHeadingPosition(prevHeading, child, currentTableOfContents);
+              setTableOfContents(currentTableOfContents);
+            } else if (lexical.$isElementNode(child)) {
+              updateChildHeadings(child);
+            }
+          }
+        };
+
+        // If a node is changes, all child heading positions need to be updated
+        lexical.$getRoot().getChildren().forEach(node => {
+          if (lexical.$isElementNode(node) && dirtyElements.get(node.__key)) {
+            updateChildHeadings(node);
+          }
+        });
+      });
+    });
+
+    // Listen to updates to heading mutations and update state
+    const removeHeaderMutationListener = editor.registerMutationListener(richText.HeadingNode, mutatedNodes => {
+      editor.getEditorState().read(() => {
+        for (const [nodeKey, mutation] of mutatedNodes) {
+          if (mutation === 'created') {
+            const newHeading = lexical.$getNodeByKey(nodeKey);
+            if (newHeading !== null) {
+              const prevHeading = $getPreviousHeading(newHeading);
+              currentTableOfContents = $insertHeadingIntoTableOfContents(prevHeading, newHeading, currentTableOfContents);
+            }
+          } else if (mutation === 'destroyed') {
+            currentTableOfContents = $deleteHeadingFromTableOfContents(nodeKey, currentTableOfContents);
+          } else if (mutation === 'updated') {
+            const newHeading = lexical.$getNodeByKey(nodeKey);
+            if (newHeading !== null) {
+              const prevHeading = $getPreviousHeading(newHeading);
+              currentTableOfContents = $updateHeadingPosition(prevHeading, newHeading, currentTableOfContents);
+            }
+          }
+        }
+        setTableOfContents(currentTableOfContents);
+      });
+    });
+
+    // Listen to text node mutation updates
+    const removeTextNodeMutationListener = editor.registerMutationListener(lexical.TextNode, mutatedNodes => {
+      editor.getEditorState().read(() => {
+        for (const [nodeKey, mutation] of mutatedNodes) {
+          if (mutation === 'updated') {
+            const currNode = lexical.$getNodeByKey(nodeKey);
+            if (currNode !== null) {
+              const parentNode = currNode.getParentOrThrow();
+              if (richText.$isHeadingNode(parentNode)) {
+                currentTableOfContents = $updateHeadingInTableOfContents(parentNode, currentTableOfContents);
+                setTableOfContents(currentTableOfContents);
+              }
+            }
+          }
+        }
+      });
+    });
+    return () => {
+      removeHeaderMutationListener();
+      removeTextNodeMutationListener();
+      removeRootUpdateListener();
+    };
+  }, [editor]);
+  return children(tableOfContents, editor);
+}
+
+exports.TableOfContentsPlugin = TableOfContentsPlugin;

package/LexicalTableOfContentsPlugin.dev.mjs

@@ -0,0 +1,196 @@
+/**
+ * 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 { $isHeadingNode, HeadingNode } from '@lexical/rich-text';
+import { $getNextRightPreorderNode } from '@lexical/utils';
+import { $getRoot, $isElementNode, $getNodeByKey, TextNode } from 'lexical';
+import { useState, useEffect } 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.
+ *
+ */
+
+function toEntry(heading) {
+  return [heading.getKey(), heading.getTextContent(), heading.getTag()];
+}
+function $insertHeadingIntoTableOfContents(prevHeading, newHeading, currentTableOfContents) {
+  if (newHeading === null) {
+    return currentTableOfContents;
+  }
+  const newEntry = toEntry(newHeading);
+  let newTableOfContents = [];
+  if (prevHeading === null) {
+    // check if key already exists
+    if (currentTableOfContents.length > 0 && currentTableOfContents[0][0] === newHeading.__key) {
+      return currentTableOfContents;
+    }
+    newTableOfContents = [newEntry, ...currentTableOfContents];
+  } else {
+    for (let i = 0; i < currentTableOfContents.length; i++) {
+      const key = currentTableOfContents[i][0];
+      newTableOfContents.push(currentTableOfContents[i]);
+      if (key === prevHeading.getKey() && key !== newHeading.getKey()) {
+        // check if key already exists
+        if (i + 1 < currentTableOfContents.length && currentTableOfContents[i + 1][0] === newHeading.__key) {
+          return currentTableOfContents;
+        }
+        newTableOfContents.push(newEntry);
+      }
+    }
+  }
+  return newTableOfContents;
+}
+function $deleteHeadingFromTableOfContents(key, currentTableOfContents) {
+  const newTableOfContents = [];
+  for (const heading of currentTableOfContents) {
+    if (heading[0] !== key) {
+      newTableOfContents.push(heading);
+    }
+  }
+  return newTableOfContents;
+}
+function $updateHeadingInTableOfContents(heading, currentTableOfContents) {
+  const newTableOfContents = [];
+  for (const oldHeading of currentTableOfContents) {
+    if (oldHeading[0] === heading.getKey()) {
+      newTableOfContents.push(toEntry(heading));
+    } else {
+      newTableOfContents.push(oldHeading);
+    }
+  }
+  return newTableOfContents;
+}
+
+/**
+ * Returns the updated table of contents, placing the given `heading` before the given `prevHeading`. If `prevHeading`
+ * is undefined, `heading` is placed at the start of table of contents
+ */
+function $updateHeadingPosition(prevHeading, heading, currentTableOfContents) {
+  const newTableOfContents = [];
+  const newEntry = toEntry(heading);
+  if (!prevHeading) {
+    newTableOfContents.push(newEntry);
+  }
+  for (const oldHeading of currentTableOfContents) {
+    if (oldHeading[0] === heading.getKey()) {
+      continue;
+    }
+    newTableOfContents.push(oldHeading);
+    if (prevHeading && oldHeading[0] === prevHeading.getKey()) {
+      newTableOfContents.push(newEntry);
+    }
+  }
+  return newTableOfContents;
+}
+function $getPreviousHeading(node) {
+  let prevHeading = $getNextRightPreorderNode(node);
+  while (prevHeading !== null && !$isHeadingNode(prevHeading)) {
+    prevHeading = $getNextRightPreorderNode(prevHeading);
+  }
+  return prevHeading;
+}
+function TableOfContentsPlugin({
+  children
+}) {
+  const [tableOfContents, setTableOfContents] = useState([]);
+  const [editor] = useLexicalComposerContext();
+  useEffect(() => {
+    // Set table of contents initial state
+    let currentTableOfContents = [];
+    editor.getEditorState().read(() => {
+      const root = $getRoot();
+      const rootChildren = root.getChildren();
+      for (const child of rootChildren) {
+        if ($isHeadingNode(child)) {
+          currentTableOfContents.push([child.getKey(), child.getTextContent(), child.getTag()]);
+        }
+      }
+      setTableOfContents(currentTableOfContents);
+    });
+    const removeRootUpdateListener = editor.registerUpdateListener(({
+      editorState,
+      dirtyElements
+    }) => {
+      editorState.read(() => {
+        const updateChildHeadings = node => {
+          for (const child of node.getChildren()) {
+            if ($isHeadingNode(child)) {
+              const prevHeading = $getPreviousHeading(child);
+              currentTableOfContents = $updateHeadingPosition(prevHeading, child, currentTableOfContents);
+              setTableOfContents(currentTableOfContents);
+            } else if ($isElementNode(child)) {
+              updateChildHeadings(child);
+            }
+          }
+        };
+
+        // If a node is changes, all child heading positions need to be updated
+        $getRoot().getChildren().forEach(node => {
+          if ($isElementNode(node) && dirtyElements.get(node.__key)) {
+            updateChildHeadings(node);
+          }
+        });
+      });
+    });
+
+    // Listen to updates to heading mutations and update state
+    const removeHeaderMutationListener = editor.registerMutationListener(HeadingNode, mutatedNodes => {
+      editor.getEditorState().read(() => {
+        for (const [nodeKey, mutation] of mutatedNodes) {
+          if (mutation === 'created') {
+            const newHeading = $getNodeByKey(nodeKey);
+            if (newHeading !== null) {
+              const prevHeading = $getPreviousHeading(newHeading);
+              currentTableOfContents = $insertHeadingIntoTableOfContents(prevHeading, newHeading, currentTableOfContents);
+            }
+          } else if (mutation === 'destroyed') {
+            currentTableOfContents = $deleteHeadingFromTableOfContents(nodeKey, currentTableOfContents);
+          } else if (mutation === 'updated') {
+            const newHeading = $getNodeByKey(nodeKey);
+            if (newHeading !== null) {
+              const prevHeading = $getPreviousHeading(newHeading);
+              currentTableOfContents = $updateHeadingPosition(prevHeading, newHeading, currentTableOfContents);
+            }
+          }
+        }
+        setTableOfContents(currentTableOfContents);
+      });
+    });
+
+    // Listen to text node mutation updates
+    const removeTextNodeMutationListener = editor.registerMutationListener(TextNode, mutatedNodes => {
+      editor.getEditorState().read(() => {
+        for (const [nodeKey, mutation] of mutatedNodes) {
+          if (mutation === 'updated') {
+            const currNode = $getNodeByKey(nodeKey);
+            if (currNode !== null) {
+              const parentNode = currNode.getParentOrThrow();
+              if ($isHeadingNode(parentNode)) {
+                currentTableOfContents = $updateHeadingInTableOfContents(parentNode, currentTableOfContents);
+                setTableOfContents(currentTableOfContents);
+              }
+            }
+          }
+        }
+      });
+    });
+    return () => {
+      removeHeaderMutationListener();
+      removeTextNodeMutationListener();
+      removeRootUpdateListener();
+    };
+  }, [editor]);
+  return children(tableOfContents, editor);
+}
+
+export { TableOfContentsPlugin };

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

package/LexicalTableOfContentsPlugin.js.flow

@@ -0,0 +1,18 @@
+/**
+ * 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 {HeadingTagType} from '@lexical/rich-text';
+import type {LexicalEditor, NodeKey} from 'lexical';
+
+declare export function TableOfContentsPlugin({
+  children: (
+    tableOfContents: Array<[NodeKey, string, HeadingTagType]>,
+    editor: LexicalEditor,
+  ) => React$Node,
+}): React$Node;

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

package/LexicalTableOfContentsPlugin.prod.js

@@ -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.
+ *
+ */
+
+'use strict';var h=require("@lexical/react/LexicalComposerContext"),q=require("@lexical/rich-text"),v=require("@lexical/utils"),w=require("lexical"),x=require("react");function y(d){return[d.getKey(),d.getTextContent(),d.getTag()]}function z(d,t,n){let e=[],c=y(t);d||e.push(c);for(let r of n)r[0]!==t.getKey()&&(e.push(r),d&&r[0]===d.getKey()&&e.push(c));return e}function B(d){for(d=v.$getNextRightPreorderNode(d);null!==d&&!q.$isHeadingNode(d);)d=v.$getNextRightPreorderNode(d);return d}
+exports.TableOfContentsPlugin=function({children:d}){let [t,n]=x.useState([]),[e]=h.useLexicalComposerContext();x.useEffect(()=>{let c=[];e.getEditorState().read(()=>{let l=w.$getRoot().getChildren();for(let a of l)q.$isHeadingNode(a)&&c.push([a.getKey(),a.getTextContent(),a.getTag()]);n(c)});let r=e.registerUpdateListener(({editorState:l,dirtyElements:a})=>{l.read(()=>{const f=b=>{for(const g of b.getChildren())q.$isHeadingNode(g)?(b=B(g),c=z(b,g,c),n(c)):w.$isElementNode(g)&&f(g)};w.$getRoot().getChildren().forEach(b=>
+{w.$isElementNode(b)&&a.get(b.__key)&&f(b)})})}),C=e.registerMutationListener(q.HeadingNode,l=>{e.getEditorState().read(()=>{for(const [g,m]of l)if("created"===m){var a=w.$getNodeByKey(g);if(null!==a)a:{var f=B(a),b=c;if(null===a){c=b;break a}let k=y(a),u=[];if(null===f){if(0<b.length&&b[0][0]===a.__key){c=b;break a}u=[k,...b]}else for(let p=0;p<b.length;p++){let A=b[p][0];u.push(b[p]);if(A===f.getKey()&&A!==a.getKey()){if(p+1<b.length&&b[p+1][0]===a.__key){c=b;break a}u.push(k)}}c=u}}else if("destroyed"===
+m){f=g;a=c;b=[];for(let k of a)k[0]!==f&&b.push(k);c=b}else"updated"===m&&(f=w.$getNodeByKey(g),null!==f&&(a=B(f),c=z(a,f,c)));n(c)})}),D=e.registerMutationListener(w.TextNode,l=>{e.getEditorState().read(()=>{for(const [b,g]of l)if("updated"===g){var a=w.$getNodeByKey(b);if(null!==a&&(a=a.getParentOrThrow(),q.$isHeadingNode(a))){var f=c;let m=[];for(let k of f)k[0]===a.getKey()?m.push(y(a)):m.push(k);c=m;n(c)}}})});return()=>{C();D();r()}},[e]);return d(t,e)}

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

package/LexicalTreeView.d.ts

@@ -7,7 +7,8 @@
  */
 /// <reference types="react" />
 import type { LexicalEditor } from 'lexical';
-export declare function TreeView({ treeTypeButtonClassName, timeTravelButtonClassName, timeTravelPanelSliderClassName, timeTravelPanelButtonClassName, viewClassName, timeTravelPanelClassName, editor, }: {
+import { CustomPrintNodeFn } from '@lexical/devtools-core';
+export declare function TreeView({ treeTypeButtonClassName, timeTravelButtonClassName, timeTravelPanelSliderClassName, timeTravelPanelButtonClassName, viewClassName, timeTravelPanelClassName, editor, customPrintNode, }: {
     editor: LexicalEditor;
     treeTypeButtonClassName: string;
     timeTravelButtonClassName: string;
@@ -15,4 +16,5 @@ export declare function TreeView({ treeTypeButtonClassName, timeTravelButtonClas
     timeTravelPanelClassName: string;
     timeTravelPanelSliderClassName: string;
     viewClassName: string;
+    customPrintNode?: CustomPrintNodeFn;
 }): JSX.Element;

package/LexicalTreeView.dev.js

@@ -11,6 +11,7 @@
 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);
@@ -40,7 +41,8 @@ function TreeView({
   timeTravelPanelButtonClassName,
   viewClassName,
   timeTravelPanelClassName,
-  editor
+  editor,
+  customPrintNode
 }) {
   const treeElementRef = /*#__PURE__*/React__namespace.createRef();
   const [editorCurrentState, setEditorCurrentState] = React.useState(editor.getEditorState());
@@ -72,7 +74,7 @@ function TreeView({
     }
     rootElement.contentEditable = isReadonly ? 'false' : 'true';
   };
-  return /*#__PURE__*/React__namespace.createElement(devtoolsCore.TreeView, {
+  return /*#__PURE__*/jsxRuntime.jsx(devtoolsCore.TreeView, {
     treeTypeButtonClassName: treeTypeButtonClassName,
     timeTravelButtonClassName: timeTravelButtonClassName,
     timeTravelPanelSliderClassName: timeTravelPanelSliderClassName,
@@ -83,7 +85,7 @@ function TreeView({
     editorState: editorCurrentState,
     setEditorState: state => editor.setEditorState(state),
     generateContent: async function (exportDOM) {
-      return devtoolsCore.generateContent(editor, commandsLog, exportDOM);
+      return devtoolsCore.generateContent(editor, commandsLog, exportDOM, customPrintNode);
     },
     ref: treeElementRef
   });

package/LexicalTreeView.dev.mjs

@@ -10,6 +10,7 @@ import { useLexicalCommandsLog, TreeView as TreeView$1, generateContent } from '
 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.
@@ -26,7 +27,8 @@ function TreeView({
   timeTravelPanelButtonClassName,
   viewClassName,
   timeTravelPanelClassName,
-  editor
+  editor,
+  customPrintNode
 }) {
   const treeElementRef = /*#__PURE__*/React.createRef();
   const [editorCurrentState, setEditorCurrentState] = useState(editor.getEditorState());
@@ -58,7 +60,7 @@ function TreeView({
     }
     rootElement.contentEditable = isReadonly ? 'false' : 'true';
   };
-  return /*#__PURE__*/React.createElement(TreeView$1, {
+  return /*#__PURE__*/jsx(TreeView$1, {
     treeTypeButtonClassName: treeTypeButtonClassName,
     timeTravelButtonClassName: timeTravelButtonClassName,
     timeTravelPanelSliderClassName: timeTravelPanelSliderClassName,
@@ -69,7 +71,7 @@ function TreeView({
     editorState: editorCurrentState,
     setEditorState: state => editor.setEditorState(state),
     generateContent: async function (exportDOM) {
-      return generateContent(editor, commandsLog, exportDOM);
+      return generateContent(editor, commandsLog, exportDOM, customPrintNode);
     },
     ref: treeElementRef
   });

package/LexicalTreeView.js.flow

@@ -7,6 +7,7 @@
  * @flow strict
  */
 
+import type {CustomPrintNodeFn} from '@lexical/devtools-core';
 import type {LexicalEditor} from 'lexical';
 
 declare export function TreeView(props: {
@@ -16,4 +17,5 @@ declare export function TreeView(props: {
   timeTravelButtonClassName: string,
   viewClassName: string,
   editor: LexicalEditor,
+  customPrintNode?: CustomPrintNodeFn,
 }): React$Node;

package/LexicalTreeView.prod.js

@@ -6,6 +6,6 @@
  *
  */
 
-'use strict';var c=require("@lexical/devtools-core"),d=require("@lexical/utils"),e=require("react"),g=Object.create(null);if(e)for(var l in e)g[l]=e[l];g.default=e;
-exports.TreeView=function({treeTypeButtonClassName:m,timeTravelButtonClassName:n,timeTravelPanelSliderClassName:p,timeTravelPanelButtonClassName:q,viewClassName:r,timeTravelPanelClassName:t,editor:a}){let f=g.createRef(),[u,h]=e.useState(a.getEditorState()),v=c.useLexicalCommandsLog(a);e.useEffect(()=>d.mergeRegister(a.registerUpdateListener(({editorState:b})=>{h(b)}),a.registerEditableListener(()=>{h(a.getEditorState())})),[a]);e.useEffect(()=>{let b=f.current;if(null!==b)return b.__lexicalEditor=
-a,()=>{b.__lexicalEditor=null}},[a,f]);return g.createElement(c.TreeView,{treeTypeButtonClassName:m,timeTravelButtonClassName:n,timeTravelPanelSliderClassName:p,timeTravelPanelButtonClassName:q,viewClassName:r,timeTravelPanelClassName:t,setEditorReadOnly:b=>{const k=a.getRootElement();null!=k&&(k.contentEditable=b?"false":"true")},editorState:u,setEditorState:b=>a.setEditorState(b),generateContent:async function(b){return c.generateContent(a,v,b)},ref:f})}
+'use strict';var c=require("@lexical/devtools-core"),d=require("@lexical/utils"),e=require("react"),g=require("react/jsx-runtime"),l=Object.create(null);if(e)for(var m in e)l[m]=e[m];l.default=e;
+exports.TreeView=function({treeTypeButtonClassName:n,timeTravelButtonClassName:p,timeTravelPanelSliderClassName:q,timeTravelPanelButtonClassName:r,viewClassName:t,timeTravelPanelClassName:u,editor:a,customPrintNode:v}){let f=l.createRef(),[w,h]=e.useState(a.getEditorState()),x=c.useLexicalCommandsLog(a);e.useEffect(()=>d.mergeRegister(a.registerUpdateListener(({editorState:b})=>{h(b)}),a.registerEditableListener(()=>{h(a.getEditorState())})),[a]);e.useEffect(()=>{let b=f.current;if(null!==b)return b.__lexicalEditor=
+a,()=>{b.__lexicalEditor=null}},[a,f]);return g.jsx(c.TreeView,{treeTypeButtonClassName:n,timeTravelButtonClassName:p,timeTravelPanelSliderClassName:q,timeTravelPanelButtonClassName:r,viewClassName:t,timeTravelPanelClassName:u,setEditorReadOnly:b=>{const k=a.getRootElement();null!=k&&(k.contentEditable=b?"false":"true")},editorState:w,setEditorState:b=>a.setEditorState(b),generateContent:async function(b){return c.generateContent(a,x,b,v)},ref:f})}

package/LexicalTreeView.prod.mjs

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

package/LexicalTypeaheadMenuPlugin.dev.js

@@ -12,6 +12,7 @@ var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
 var lexical = require('lexical');
 var React = require('react');
 var utils = require('@lexical/utils');
+var jsxRuntime = require('react/jsx-runtime');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -44,6 +45,10 @@ const CAN_USE_DOM = typeof window !== 'undefined' && typeof window.document !==
  *
  */
 
+
+// This workaround is no longer necessary in React 19,
+// but we currently support React >=17.x
+// https://github.com/facebook/react/pull/26395
 const useLayoutEffectImpl = CAN_USE_DOM ? React.useLayoutEffect : React.useEffect;
 
 /**
@@ -571,7 +576,7 @@ function LexicalTypeaheadMenuPlugin({
       removeUpdateListener();
     };
   }, [editor, triggerFn, onQueryChange, resolution, closeTypeahead, openTypeahead]);
-  return resolution === null || editor === null ? null : /*#__PURE__*/React__namespace.createElement(LexicalMenu, {
+  return resolution === null || editor === null ? null : /*#__PURE__*/jsxRuntime.jsx(LexicalMenu, {
     close: closeTypeahead,
     resolution: resolution,
     editor: editor,

package/LexicalTypeaheadMenuPlugin.dev.mjs

@@ -11,6 +11,7 @@ import { createCommand, KEY_ARROW_DOWN_COMMAND, KEY_ARROW_UP_COMMAND, KEY_ESCAPE
 import * as React from 'react';
 import { useLayoutEffect, useEffect, useState, useCallback, useMemo, useRef } from 'react';
 import { mergeRegister } from '@lexical/utils';
+import { jsx } from 'react/jsx-runtime';
 
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
@@ -30,6 +31,10 @@ const CAN_USE_DOM = typeof window !== 'undefined' && typeof window.document !==
  *
  */
 
+
+// This workaround is no longer necessary in React 19,
+// but we currently support React >=17.x
+// https://github.com/facebook/react/pull/26395
 const useLayoutEffectImpl = CAN_USE_DOM ? useLayoutEffect : useEffect;
 
 /**
@@ -557,7 +562,7 @@ function LexicalTypeaheadMenuPlugin({
       removeUpdateListener();
     };
   }, [editor, triggerFn, onQueryChange, resolution, closeTypeahead, openTypeahead]);
-  return resolution === null || editor === null ? null : /*#__PURE__*/React.createElement(LexicalMenu, {
+  return resolution === null || editor === null ? null : /*#__PURE__*/jsx(LexicalMenu, {
     close: closeTypeahead,
     resolution: resolution,
     editor: editor,