@lexical/react 0.35.1-nightly.20250924.0 → 0.36.0

package/LexicalRichTextPlugin.dev.mjs

@@ -8,11 +8,13 @@
 
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { useLexicalEditable } from '@lexical/react/useLexicalEditable';
-import { $canShowPlaceholderCurry } from '@lexical/text';
-import { mergeRegister } from '@lexical/utils';
+import { LexicalBuilder } from '@lexical/extension';
+import { ReactProviderExtension } from '@lexical/react/ReactProviderExtension';
 import { useLayoutEffect, useEffect, useState, useMemo, Suspense } from 'react';
 import { flushSync, createPortal } from 'react-dom';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { $canShowPlaceholderCurry } from '@lexical/text';
+import { mergeRegister } from '@lexical/utils';
 import { registerDragonSupport } from '@lexical/dragon';
 import { registerRichText } from '@lexical/rich-text';
 
@@ -24,7 +26,11 @@ import { registerRichText } from '@lexical/rich-text';
  *
  */
 
-const CAN_USE_DOM = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined';
+// Do not require this module directly! Use normal `invariant` calls.
+
+function formatDevErrorMessage(message) {
+  throw new Error(message);
+}
 
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
@@ -34,11 +40,7 @@ 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;
+const CAN_USE_DOM = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined';
 
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
@@ -48,26 +50,11 @@ const useLayoutEffectImpl = CAN_USE_DOM ? useLayoutEffect : useEffect;
  *
  */
 
-function canShowPlaceholderFromCurrentEditorState(editor) {
-  const currentCanShowPlaceholder = editor.getEditorState().read($canShowPlaceholderCurry(editor.isComposing()));
-  return currentCanShowPlaceholder;
-}
-function useCanShowPlaceholder(editor) {
-  const [canShowPlaceholder, setCanShowPlaceholder] = useState(() => canShowPlaceholderFromCurrentEditorState(editor));
-  useLayoutEffectImpl(() => {
-    function resetCanShowPlaceholder() {
-      const currentCanShowPlaceholder = canShowPlaceholderFromCurrentEditorState(editor);
-      setCanShowPlaceholder(currentCanShowPlaceholder);
-    }
-    resetCanShowPlaceholder();
-    return mergeRegister(editor.registerUpdateListener(() => {
-      resetCanShowPlaceholder();
-    }), editor.registerEditableListener(() => {
-      resetCanShowPlaceholder();
-    }));
-  }, [editor]);
-  return canShowPlaceholder;
-}
+
+// 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;
 
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
@@ -117,6 +104,72 @@ function useDecorators(editor, ErrorBoundary) {
   }, [ErrorBoundary, decorators, editor]);
 }
 
+function isUsingReactExtension(editor) {
+  const builder = LexicalBuilder.maybeFromEditor(editor);
+  if (builder && builder.hasExtensionByName(ReactProviderExtension.name)) {
+    for (const name of ['@lexical/plain-text', '@lexical/rich-text']) {
+      if (!!builder.hasExtensionByName(name)) {
+        formatDevErrorMessage(`LexicalBuilder: @lexical/react legacy text plugins conflict with the ${name} extension. Remove the legacy <RichTextPlugin/> or <PlainTextPlugin/> component.`);
+      }
+    }
+    return true;
+  }
+  return false;
+}
+function Decorators({
+  editor,
+  ErrorBoundary
+}) {
+  return useDecorators(editor, ErrorBoundary);
+}
+
+/**
+ * @internal
+ *
+ * When using @lexical/extension, the ReactProvider is expected to handle
+ * rendering decorators. This component allows RichTextPlugin and
+ * PlainTextPlugin to be used in extension projects that have not yet
+ * migrated to use RichTextExtension or PlainTextExtension.
+ **/
+function LegacyDecorators({
+  editor,
+  ErrorBoundary
+}) {
+  return isUsingReactExtension(editor) ? null : /*#__PURE__*/jsx(Decorators, {
+    editor: editor,
+    ErrorBoundary: ErrorBoundary
+  });
+}
+
+/**
+ * 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 canShowPlaceholderFromCurrentEditorState(editor) {
+  const currentCanShowPlaceholder = editor.getEditorState().read($canShowPlaceholderCurry(editor.isComposing()));
+  return currentCanShowPlaceholder;
+}
+function useCanShowPlaceholder(editor) {
+  const [canShowPlaceholder, setCanShowPlaceholder] = useState(() => canShowPlaceholderFromCurrentEditorState(editor));
+  useLayoutEffectImpl(() => {
+    function resetCanShowPlaceholder() {
+      const currentCanShowPlaceholder = canShowPlaceholderFromCurrentEditorState(editor);
+      setCanShowPlaceholder(currentCanShowPlaceholder);
+    }
+    resetCanShowPlaceholder();
+    return mergeRegister(editor.registerUpdateListener(() => {
+      resetCanShowPlaceholder();
+    }), editor.registerEditableListener(() => {
+      resetCanShowPlaceholder();
+    }));
+  }, [editor]);
+  return canShowPlaceholder;
+}
+
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -149,12 +202,14 @@ function RichTextPlugin({
   ErrorBoundary
 }) {
   const [editor] = useLexicalComposerContext();
-  const decorators = useDecorators(editor, ErrorBoundary);
   useRichTextSetup(editor);
   return /*#__PURE__*/jsxs(Fragment, {
     children: [contentEditable, /*#__PURE__*/jsx(Placeholder, {
       content: placeholder
-    }), decorators]
+    }), /*#__PURE__*/jsx(LegacyDecorators, {
+      editor: editor,
+      ErrorBoundary: ErrorBoundary
+    })]
   });
 }
 

package/LexicalRichTextPlugin.prod.js

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

package/LexicalRichTextPlugin.prod.mjs

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

package/LexicalTabIndentationPlugin.d.ts

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import type { LexicalEditor } from 'lexical';
-export declare function registerTabIndentation(editor: LexicalEditor, maxIndent?: number): () => void;
+import { registerTabIndentation } from '@lexical/extension';
+export { registerTabIndentation };
 /**
  * This plugin adds the ability to indent content using the tab key. Generally, we don't
  * recommend using this plugin as it could negatively affect accessibility for keyboard

package/LexicalTabIndentationPlugin.dev.js

@@ -8,9 +8,8 @@
 
 'use strict';
 
+var extension = require('@lexical/extension');
 var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
-var utils = require('@lexical/utils');
-var lexical = require('lexical');
 var react = require('react');
 
 /**
@@ -21,59 +20,6 @@ var react = require('react');
  *
  */
 
-function $indentOverTab(selection) {
-  // const handled = new Set();
-  const nodes = selection.getNodes();
-  const canIndentBlockNodes = utils.$filter(nodes, node => {
-    if (lexical.$isBlockElementNode(node) && node.canIndent()) {
-      return node;
-    }
-    return null;
-  });
-  // 1. If selection spans across canIndent block nodes: indent
-  if (canIndentBlockNodes.length > 0) {
-    return true;
-  }
-  // 2. If first (anchor/focus) is at block start: indent
-  const anchor = selection.anchor;
-  const focus = selection.focus;
-  const first = focus.isBefore(anchor) ? focus : anchor;
-  const firstNode = first.getNode();
-  const firstBlock = utils.$getNearestBlockElementAncestorOrThrow(firstNode);
-  if (firstBlock.canIndent()) {
-    const firstBlockKey = firstBlock.getKey();
-    let selectionAtStart = lexical.$createRangeSelection();
-    selectionAtStart.anchor.set(firstBlockKey, 0, 'element');
-    selectionAtStart.focus.set(firstBlockKey, 0, 'element');
-    selectionAtStart = lexical.$normalizeSelection__EXPERIMENTAL(selectionAtStart);
-    if (selectionAtStart.anchor.is(first)) {
-      return true;
-    }
-  }
-  // 3. Else: tab
-  return false;
-}
-function registerTabIndentation(editor, maxIndent) {
-  return utils.mergeRegister(editor.registerCommand(lexical.KEY_TAB_COMMAND, event => {
-    const selection = lexical.$getSelection();
-    if (!lexical.$isRangeSelection(selection)) {
-      return false;
-    }
-    event.preventDefault();
-    const command = $indentOverTab(selection) ? event.shiftKey ? lexical.OUTDENT_CONTENT_COMMAND : lexical.INDENT_CONTENT_COMMAND : lexical.INSERT_TAB_COMMAND;
-    return editor.dispatchCommand(command, undefined);
-  }, lexical.COMMAND_PRIORITY_EDITOR), editor.registerCommand(lexical.INDENT_CONTENT_COMMAND, () => {
-    if (maxIndent == null) {
-      return false;
-    }
-    const selection = lexical.$getSelection();
-    if (!lexical.$isRangeSelection(selection)) {
-      return false;
-    }
-    const indents = selection.getNodes().map(node => utils.$getNearestBlockElementAncestorOrThrow(node).getIndent());
-    return Math.max(...indents) + 1 >= maxIndent;
-  }, lexical.COMMAND_PRIORITY_CRITICAL));
-}
 
 /**
  * This plugin adds the ability to indent content using the tab key. Generally, we don't
@@ -85,10 +31,10 @@ function TabIndentationPlugin({
 }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
   react.useEffect(() => {
-    return registerTabIndentation(editor, maxIndent);
+    return extension.registerTabIndentation(editor, maxIndent);
   }, [editor, maxIndent]);
   return null;
 }
 
+exports.registerTabIndentation = extension.registerTabIndentation;
 exports.TabIndentationPlugin = TabIndentationPlugin;
-exports.registerTabIndentation = registerTabIndentation;

package/LexicalTabIndentationPlugin.dev.mjs

@@ -6,9 +6,9 @@
  *
  */
 
+import { registerTabIndentation } from '@lexical/extension';
+export { registerTabIndentation } from '@lexical/extension';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { mergeRegister, $getNearestBlockElementAncestorOrThrow, $filter } from '@lexical/utils';
-import { KEY_TAB_COMMAND, $getSelection, $isRangeSelection, OUTDENT_CONTENT_COMMAND, INDENT_CONTENT_COMMAND, INSERT_TAB_COMMAND, COMMAND_PRIORITY_EDITOR, COMMAND_PRIORITY_CRITICAL, $isBlockElementNode, $createRangeSelection, $normalizeSelection__EXPERIMENTAL } from 'lexical';
 import { useEffect } from 'react';
 
 /**
@@ -19,59 +19,6 @@ import { useEffect } from 'react';
  *
  */
 
-function $indentOverTab(selection) {
-  // const handled = new Set();
-  const nodes = selection.getNodes();
-  const canIndentBlockNodes = $filter(nodes, node => {
-    if ($isBlockElementNode(node) && node.canIndent()) {
-      return node;
-    }
-    return null;
-  });
-  // 1. If selection spans across canIndent block nodes: indent
-  if (canIndentBlockNodes.length > 0) {
-    return true;
-  }
-  // 2. If first (anchor/focus) is at block start: indent
-  const anchor = selection.anchor;
-  const focus = selection.focus;
-  const first = focus.isBefore(anchor) ? focus : anchor;
-  const firstNode = first.getNode();
-  const firstBlock = $getNearestBlockElementAncestorOrThrow(firstNode);
-  if (firstBlock.canIndent()) {
-    const firstBlockKey = firstBlock.getKey();
-    let selectionAtStart = $createRangeSelection();
-    selectionAtStart.anchor.set(firstBlockKey, 0, 'element');
-    selectionAtStart.focus.set(firstBlockKey, 0, 'element');
-    selectionAtStart = $normalizeSelection__EXPERIMENTAL(selectionAtStart);
-    if (selectionAtStart.anchor.is(first)) {
-      return true;
-    }
-  }
-  // 3. Else: tab
-  return false;
-}
-function registerTabIndentation(editor, maxIndent) {
-  return mergeRegister(editor.registerCommand(KEY_TAB_COMMAND, event => {
-    const selection = $getSelection();
-    if (!$isRangeSelection(selection)) {
-      return false;
-    }
-    event.preventDefault();
-    const command = $indentOverTab(selection) ? event.shiftKey ? OUTDENT_CONTENT_COMMAND : INDENT_CONTENT_COMMAND : INSERT_TAB_COMMAND;
-    return editor.dispatchCommand(command, undefined);
-  }, COMMAND_PRIORITY_EDITOR), editor.registerCommand(INDENT_CONTENT_COMMAND, () => {
-    if (maxIndent == null) {
-      return false;
-    }
-    const selection = $getSelection();
-    if (!$isRangeSelection(selection)) {
-      return false;
-    }
-    const indents = selection.getNodes().map(node => $getNearestBlockElementAncestorOrThrow(node).getIndent());
-    return Math.max(...indents) + 1 >= maxIndent;
-  }, COMMAND_PRIORITY_CRITICAL));
-}
 
 /**
  * This plugin adds the ability to indent content using the tab key. Generally, we don't
@@ -88,4 +35,4 @@ function TabIndentationPlugin({
   return null;
 }
 
-export { TabIndentationPlugin, registerTabIndentation };
+export { TabIndentationPlugin };

package/LexicalTabIndentationPlugin.prod.js

@@ -6,4 +6,4 @@
  *
  */
 
-"use strict";var e=require("@lexical/react/LexicalComposerContext"),t=require("@lexical/utils"),n=require("lexical"),r=require("react");function o(e,r){return t.mergeRegister(e.registerCommand(n.KEY_TAB_COMMAND,(r=>{const o=n.$getSelection();if(!n.$isRangeSelection(o))return!1;r.preventDefault();const i=function(e){const r=e.getNodes();if(t.$filter(r,(e=>n.$isBlockElementNode(e)&&e.canIndent()?e:null)).length>0)return!0;const o=e.anchor,i=e.focus,c=i.isBefore(o)?i:o,s=c.getNode(),l=t.$getNearestBlockElementAncestorOrThrow(s);if(l.canIndent()){const e=l.getKey();let t=n.$createRangeSelection();if(t.anchor.set(e,0,"element"),t.focus.set(e,0,"element"),t=n.$normalizeSelection__EXPERIMENTAL(t),t.anchor.is(c))return!0}return!1}(o)?r.shiftKey?n.OUTDENT_CONTENT_COMMAND:n.INDENT_CONTENT_COMMAND:n.INSERT_TAB_COMMAND;return e.dispatchCommand(i,void 0)}),n.COMMAND_PRIORITY_EDITOR),e.registerCommand(n.INDENT_CONTENT_COMMAND,(()=>{if(null==r)return!1;const e=n.$getSelection();if(!n.$isRangeSelection(e))return!1;const o=e.getNodes().map((e=>t.$getNearestBlockElementAncestorOrThrow(e).getIndent()));return Math.max(...o)+1>=r}),n.COMMAND_PRIORITY_CRITICAL))}exports.TabIndentationPlugin=function({maxIndent:t}){const[n]=e.useLexicalComposerContext();return r.useEffect((()=>o(n,t)),[n,t]),null},exports.registerTabIndentation=o;
+"use strict";var e=require("@lexical/extension"),t=require("@lexical/react/LexicalComposerContext"),n=require("react");exports.registerTabIndentation=e.registerTabIndentation,exports.TabIndentationPlugin=function({maxIndent:r}){const[i]=t.useLexicalComposerContext();return n.useEffect((()=>e.registerTabIndentation(i,r)),[i,r]),null};

package/LexicalTabIndentationPlugin.prod.mjs

@@ -6,4 +6,4 @@
  *
  */
 
-import{useLexicalComposerContext as t}from"@lexical/react/LexicalComposerContext";import{mergeRegister as e,$getNearestBlockElementAncestorOrThrow as n,$filter as r}from"@lexical/utils";import{KEY_TAB_COMMAND as o,$getSelection as c,$isRangeSelection as i,OUTDENT_CONTENT_COMMAND as s,INDENT_CONTENT_COMMAND as a,INSERT_TAB_COMMAND as m,COMMAND_PRIORITY_EDITOR as u,COMMAND_PRIORITY_CRITICAL as l,$isBlockElementNode as f,$createRangeSelection as d,$normalizeSelection__EXPERIMENTAL as p}from"lexical";import{useEffect as g}from"react";function x(t,g){return e(t.registerCommand(o,(e=>{const o=c();if(!i(o))return!1;e.preventDefault();const u=function(t){const e=t.getNodes();if(r(e,(t=>f(t)&&t.canIndent()?t:null)).length>0)return!0;const o=t.anchor,c=t.focus,i=c.isBefore(o)?c:o,s=i.getNode(),a=n(s);if(a.canIndent()){const t=a.getKey();let e=d();if(e.anchor.set(t,0,"element"),e.focus.set(t,0,"element"),e=p(e),e.anchor.is(i))return!0}return!1}(o)?e.shiftKey?s:a:m;return t.dispatchCommand(u,void 0)}),u),t.registerCommand(a,(()=>{if(null==g)return!1;const t=c();if(!i(t))return!1;const e=t.getNodes().map((t=>n(t).getIndent()));return Math.max(...e)+1>=g}),l))}function h({maxIndent:e}){const[n]=t();return g((()=>x(n,e)),[n,e]),null}export{h as TabIndentationPlugin,x as registerTabIndentation};
+import{registerTabIndentation as e}from"@lexical/extension";export{registerTabIndentation}from"@lexical/extension";import{useLexicalComposerContext as t}from"@lexical/react/LexicalComposerContext";import{useEffect as o}from"react";function r({maxIndent:r}){const[n]=t();return o((()=>e(n,r)),[n,r]),null}export{r as TabIndentationPlugin};

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

package/LexicalTypeaheadMenuPlugin.dev.js

@@ -68,6 +68,8 @@ const useLayoutEffectImpl = CAN_USE_DOM ? React.useLayoutEffect : React.useEffec
  */
 
 class MenuOption {
+  key;
+  ref;
   constructor(key) {
     this.key = key;
     this.ref = {

package/LexicalTypeaheadMenuPlugin.dev.mjs

@@ -7,8 +7,8 @@
  */
 
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { createCommand, KEY_ARROW_DOWN_COMMAND, KEY_ARROW_UP_COMMAND, KEY_ESCAPE_COMMAND, KEY_TAB_COMMAND, KEY_ENTER_COMMAND, COMMAND_PRIORITY_LOW, $getSelection, $isRangeSelection, getDOMSelection, $isTextNode } from 'lexical';
-import React, { useLayoutEffect, useEffect, useState, useCallback, useMemo, useRef } from 'react';
+import { createCommand, COMMAND_PRIORITY_LOW, KEY_ARROW_DOWN_COMMAND, KEY_ARROW_UP_COMMAND, KEY_ESCAPE_COMMAND, KEY_TAB_COMMAND, KEY_ENTER_COMMAND, $getSelection, $isRangeSelection, $isTextNode, getDOMSelection } from 'lexical';
+import React, { useLayoutEffect, useEffect, useRef, useCallback, useState, useMemo } from 'react';
 import { mergeRegister } from '@lexical/utils';
 import { jsx } from 'react/jsx-runtime';
 
@@ -66,6 +66,8 @@ const useLayoutEffectImpl = CAN_USE_DOM ? useLayoutEffect : useEffect;
  */
 
 class MenuOption {
+  key;
+  ref;
   constructor(key) {
     this.key = key;
     this.ref = {