@lexical/react 0.13.1 → 0.14.1

package/LexicalOnChangePlugin.dev.esm.js

@@ -0,0 +1,62 @@
+/**
+ * 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 { useLayoutEffect as useLayoutEffect$1, 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.
+ *
+ */
+
+const CAN_USE_DOM = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined';
+
+/**
+ * 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 useLayoutEffectImpl = CAN_USE_DOM ? useLayoutEffect$1 : useEffect;
+var useLayoutEffect = useLayoutEffectImpl;
+
+/**
+ * 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 OnChangePlugin({
+  ignoreHistoryMergeTagChange = true,
+  ignoreSelectionChange = false,
+  onChange
+}) {
+  const [editor] = useLexicalComposerContext();
+  useLayoutEffect(() => {
+    if (onChange) {
+      return editor.registerUpdateListener(({
+        editorState,
+        dirtyElements,
+        dirtyLeaves,
+        prevEditorState,
+        tags
+      }) => {
+        if (ignoreSelectionChange && dirtyElements.size === 0 && dirtyLeaves.size === 0 || ignoreHistoryMergeTagChange && tags.has('history-merge') || prevEditorState.isEmpty()) {
+          return;
+        }
+        onChange(editorState, editor, tags);
+      });
+    }
+  }, [editor, ignoreHistoryMergeTagChange, ignoreSelectionChange, onChange]);
+  return null;
+}
+
+export { OnChangePlugin };

package/LexicalOnChangePlugin.esm.js

@@ -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.
+ */
+import * as modDev from './LexicalOnChangePlugin.dev.esm.js';
+import * as modProd from './LexicalOnChangePlugin.prod.esm.js';
+const mod = process.env.NODE_ENV === 'development' ? modDev : modProd;
+export const OnChangePlugin = mod.OnChangePlugin;

package/LexicalOnChangePlugin.js

@@ -5,5 +5,5 @@
  * LICENSE file in the root directory of this source tree.
  */
 'use strict'
-const LexicalOnChangePlugin = process.env.NODE_ENV === 'development' ? require('./LexicalOnChangePlugin.dev.js') : require('./LexicalOnChangePlugin.prod.js')
+const LexicalOnChangePlugin = process.env.NODE_ENV === 'development' ? require('./LexicalOnChangePlugin.dev.js') : require('./LexicalOnChangePlugin.prod.js');
 module.exports = LexicalOnChangePlugin;

package/LexicalOnChangePlugin.prod.esm.js

@@ -0,0 +1,7 @@
+/**
+ * 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{useLayoutEffect as t,useEffect as r}from"react";var o="undefined"!=typeof window&&void 0!==window.document&&void 0!==window.document.createElement?t:r;function i({ignoreHistoryMergeTagChange:t=!0,ignoreSelectionChange:r=!1,onChange:i}){const[n]=e();return o((()=>{if(i)return n.registerUpdateListener((({editorState:e,dirtyElements:o,dirtyLeaves:a,prevEditorState:s,tags:d})=>{r&&0===o.size&&0===a.size||t&&d.has("history-merge")||s.isEmpty()||i(e,n,d)}))}),[n,t,r,i]),null}export{i as OnChangePlugin};

package/LexicalPlainTextPlugin.dev.esm.js

@@ -0,0 +1,161 @@
+/**
+ * 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 useLexicalEditable from '@lexical/react/useLexicalEditable';
+import * as React from 'react';
+import { useLayoutEffect as useLayoutEffect$1, useEffect, useState, useMemo, Suspense } from 'react';
+import { $canShowPlaceholderCurry } from '@lexical/text';
+import { mergeRegister } from '@lexical/utils';
+import { createPortal, flushSync } from 'react-dom';
+import { registerDragonSupport } from '@lexical/dragon';
+import { registerPlainText } from '@lexical/plain-text';
+
+/**
+ * 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 CAN_USE_DOM = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined';
+
+/**
+ * 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 useLayoutEffectImpl = CAN_USE_DOM ? useLayoutEffect$1 : useEffect;
+var useLayoutEffect = useLayoutEffectImpl;
+
+/**
+ * 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));
+  useLayoutEffect(() => {
+    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.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+function useDecorators(editor, ErrorBoundary) {
+  const [decorators, setDecorators] = useState(() => editor.getDecorators());
+
+  // Subscribe to changes
+  useLayoutEffect(() => {
+    return editor.registerDecoratorListener(nextDecorators => {
+      flushSync(() => {
+        setDecorators(nextDecorators);
+      });
+    });
+  }, [editor]);
+  useEffect(() => {
+    // If the content editable mounts before the subscription is added, then
+    // nothing will be rendered on initial pass. We can get around that by
+    // ensuring that we set the value.
+    setDecorators(editor.getDecorators());
+  }, [editor]);
+
+  // Return decorators defined as React Portals
+  return useMemo(() => {
+    const decoratedPortals = [];
+    const decoratorKeys = Object.keys(decorators);
+    for (let i = 0; i < decoratorKeys.length; i++) {
+      const nodeKey = decoratorKeys[i];
+      const reactDecorator = /*#__PURE__*/React.createElement(ErrorBoundary, {
+        onError: e => editor._onError(e)
+      }, /*#__PURE__*/React.createElement(Suspense, {
+        fallback: null
+      }, decorators[nodeKey]));
+      const element = editor.getElementByKey(nodeKey);
+      if (element !== null) {
+        decoratedPortals.push( /*#__PURE__*/createPortal(reactDecorator, element, nodeKey));
+      }
+    }
+    return decoratedPortals;
+  }, [ErrorBoundary, decorators, editor]);
+}
+
+/**
+ * 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 usePlainTextSetup(editor) {
+  useLayoutEffect(() => {
+    return mergeRegister(registerPlainText(editor), registerDragonSupport(editor));
+
+    // We only do this for init
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor]);
+}
+
+/**
+ * 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 PlainTextPlugin({
+  contentEditable,
+  placeholder,
+  ErrorBoundary
+}) {
+  const [editor] = useLexicalComposerContext();
+  const decorators = useDecorators(editor, ErrorBoundary);
+  usePlainTextSetup(editor);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, contentEditable, /*#__PURE__*/React.createElement(Placeholder, {
+    content: placeholder
+  }), decorators);
+}
+function Placeholder({
+  content
+}) {
+  const [editor] = useLexicalComposerContext();
+  const showPlaceholder = useCanShowPlaceholder(editor);
+  const editable = useLexicalEditable();
+  if (!showPlaceholder) {
+    return null;
+  }
+  if (typeof content === 'function') {
+    return content(editable);
+  } else {
+    return content;
+  }
+}
+
+export { PlainTextPlugin };

package/LexicalPlainTextPlugin.esm.js

@@ -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.
+ */
+import * as modDev from './LexicalPlainTextPlugin.dev.esm.js';
+import * as modProd from './LexicalPlainTextPlugin.prod.esm.js';
+const mod = process.env.NODE_ENV === 'development' ? modDev : modProd;
+export const PlainTextPlugin = mod.PlainTextPlugin;

package/LexicalPlainTextPlugin.js

@@ -5,5 +5,5 @@
  * LICENSE file in the root directory of this source tree.
  */
 'use strict'
-const LexicalPlainTextPlugin = process.env.NODE_ENV === 'development' ? require('./LexicalPlainTextPlugin.dev.js') : require('./LexicalPlainTextPlugin.prod.js')
+const LexicalPlainTextPlugin = process.env.NODE_ENV === 'development' ? require('./LexicalPlainTextPlugin.dev.js') : require('./LexicalPlainTextPlugin.prod.js');
 module.exports = LexicalPlainTextPlugin;

package/LexicalPlainTextPlugin.prod.esm.js

@@ -0,0 +1,7 @@
+/**
+ * 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 t from"@lexical/react/useLexicalEditable";import*as r from"react";import{useLayoutEffect as o,useEffect as n,useState as c,useMemo as i,Suspense as l}from"react";import{$canShowPlaceholderCurry as a}from"@lexical/text";import{mergeRegister as m}from"@lexical/utils";import{createPortal as u,flushSync as s}from"react-dom";import{registerDragonSupport as f}from"@lexical/dragon";import{registerPlainText as d}from"@lexical/plain-text";var p="undefined"!=typeof window&&void 0!==window.document&&void 0!==window.document.createElement?o:n;function E(e){return e.getEditorState().read(a(e.isComposing()))}function x({contentEditable:t,placeholder:o,ErrorBoundary:a}){const[E]=e(),x=function(e,t){const[o,a]=c((()=>e.getDecorators()));return p((()=>e.registerDecoratorListener((e=>{s((()=>{a(e)}))}))),[e]),n((()=>{a(e.getDecorators())}),[e]),i((()=>{const n=[],c=Object.keys(o);for(let i=0;i<c.length;i++){const a=c[i],m=r.createElement(t,{onError:t=>e._onError(t)},r.createElement(l,{fallback:null},o[a])),s=e.getElementByKey(a);null!==s&&n.push(u(m,s,a))}return n}),[t,o,e])}(E,a);return function(e){p((()=>m(d(e),f(e))),[e])}(E),r.createElement(r.Fragment,null,t,r.createElement(g,{content:o}),x)}function g({content:r}){const[o]=e(),n=function(e){const[t,r]=c((()=>E(e)));return p((()=>{function t(){const t=E(e);r(t)}return t(),m(e.registerUpdateListener((()=>{t()})),e.registerEditableListener((()=>{t()})))}),[e]),t}(o),i=t();return n?"function"==typeof r?r(i):r:null}export{x as PlainTextPlugin};

package/LexicalRichTextPlugin.dev.esm.js

@@ -0,0 +1,161 @@
+/**
+ * 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 useLexicalEditable from '@lexical/react/useLexicalEditable';
+import * as React from 'react';
+import { useLayoutEffect as useLayoutEffect$1, useEffect, useState, useMemo, Suspense } from 'react';
+import { $canShowPlaceholderCurry } from '@lexical/text';
+import { mergeRegister } from '@lexical/utils';
+import { createPortal, flushSync } from 'react-dom';
+import { registerDragonSupport } from '@lexical/dragon';
+import { registerRichText } from '@lexical/rich-text';
+
+/**
+ * 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 CAN_USE_DOM = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined';
+
+/**
+ * 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 useLayoutEffectImpl = CAN_USE_DOM ? useLayoutEffect$1 : useEffect;
+var useLayoutEffect = useLayoutEffectImpl;
+
+/**
+ * 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));
+  useLayoutEffect(() => {
+    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.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+function useDecorators(editor, ErrorBoundary) {
+  const [decorators, setDecorators] = useState(() => editor.getDecorators());
+
+  // Subscribe to changes
+  useLayoutEffect(() => {
+    return editor.registerDecoratorListener(nextDecorators => {
+      flushSync(() => {
+        setDecorators(nextDecorators);
+      });
+    });
+  }, [editor]);
+  useEffect(() => {
+    // If the content editable mounts before the subscription is added, then
+    // nothing will be rendered on initial pass. We can get around that by
+    // ensuring that we set the value.
+    setDecorators(editor.getDecorators());
+  }, [editor]);
+
+  // Return decorators defined as React Portals
+  return useMemo(() => {
+    const decoratedPortals = [];
+    const decoratorKeys = Object.keys(decorators);
+    for (let i = 0; i < decoratorKeys.length; i++) {
+      const nodeKey = decoratorKeys[i];
+      const reactDecorator = /*#__PURE__*/React.createElement(ErrorBoundary, {
+        onError: e => editor._onError(e)
+      }, /*#__PURE__*/React.createElement(Suspense, {
+        fallback: null
+      }, decorators[nodeKey]));
+      const element = editor.getElementByKey(nodeKey);
+      if (element !== null) {
+        decoratedPortals.push( /*#__PURE__*/createPortal(reactDecorator, element, nodeKey));
+      }
+    }
+    return decoratedPortals;
+  }, [ErrorBoundary, decorators, editor]);
+}
+
+/**
+ * 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 useRichTextSetup(editor) {
+  useLayoutEffect(() => {
+    return mergeRegister(registerRichText(editor), registerDragonSupport(editor));
+
+    // We only do this for init
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor]);
+}
+
+/**
+ * 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 RichTextPlugin({
+  contentEditable,
+  placeholder,
+  ErrorBoundary
+}) {
+  const [editor] = useLexicalComposerContext();
+  const decorators = useDecorators(editor, ErrorBoundary);
+  useRichTextSetup(editor);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, contentEditable, /*#__PURE__*/React.createElement(Placeholder, {
+    content: placeholder
+  }), decorators);
+}
+function Placeholder({
+  content
+}) {
+  const [editor] = useLexicalComposerContext();
+  const showPlaceholder = useCanShowPlaceholder(editor);
+  const editable = useLexicalEditable();
+  if (!showPlaceholder) {
+    return null;
+  }
+  if (typeof content === 'function') {
+    return content(editable);
+  } else {
+    return content;
+  }
+}
+
+export { RichTextPlugin };

package/LexicalRichTextPlugin.esm.js

@@ -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.
+ */
+import * as modDev from './LexicalRichTextPlugin.dev.esm.js';
+import * as modProd from './LexicalRichTextPlugin.prod.esm.js';
+const mod = process.env.NODE_ENV === 'development' ? modDev : modProd;
+export const RichTextPlugin = mod.RichTextPlugin;

package/LexicalRichTextPlugin.js

@@ -5,5 +5,5 @@
  * LICENSE file in the root directory of this source tree.
  */
 'use strict'
-const LexicalRichTextPlugin = process.env.NODE_ENV === 'development' ? require('./LexicalRichTextPlugin.dev.js') : require('./LexicalRichTextPlugin.prod.js')
+const LexicalRichTextPlugin = process.env.NODE_ENV === 'development' ? require('./LexicalRichTextPlugin.dev.js') : require('./LexicalRichTextPlugin.prod.js');
 module.exports = LexicalRichTextPlugin;

package/LexicalRichTextPlugin.prod.esm.js

@@ -0,0 +1,7 @@
+/**
+ * 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 t from"@lexical/react/useLexicalEditable";import*as r from"react";import{useLayoutEffect as o,useEffect as n,useState as c,useMemo as i,Suspense as l}from"react";import{$canShowPlaceholderCurry as a}from"@lexical/text";import{mergeRegister as m}from"@lexical/utils";import{createPortal as u,flushSync as s}from"react-dom";import{registerDragonSupport as f}from"@lexical/dragon";import{registerRichText as d}from"@lexical/rich-text";var p="undefined"!=typeof window&&void 0!==window.document&&void 0!==window.document.createElement?o:n;function E(e){return e.getEditorState().read(a(e.isComposing()))}function x({contentEditable:t,placeholder:o,ErrorBoundary:a}){const[E]=e(),x=function(e,t){const[o,a]=c((()=>e.getDecorators()));return p((()=>e.registerDecoratorListener((e=>{s((()=>{a(e)}))}))),[e]),n((()=>{a(e.getDecorators())}),[e]),i((()=>{const n=[],c=Object.keys(o);for(let i=0;i<c.length;i++){const a=c[i],m=r.createElement(t,{onError:t=>e._onError(t)},r.createElement(l,{fallback:null},o[a])),s=e.getElementByKey(a);null!==s&&n.push(u(m,s,a))}return n}),[t,o,e])}(E,a);return function(e){p((()=>m(d(e),f(e))),[e])}(E),r.createElement(r.Fragment,null,t,r.createElement(g,{content:o}),x)}function g({content:r}){const[o]=e(),n=function(e){const[t,r]=c((()=>E(e)));return p((()=>{function t(){const t=E(e);r(t)}return t(),m(e.registerUpdateListener((()=>{t()})),e.registerEditableListener((()=>{t()})))}),[e]),t}(o),i=t();return n?"function"==typeof r?r(i):r:null}export{x as RichTextPlugin};

package/LexicalTabIndentationPlugin.dev.esm.js

@@ -0,0 +1,76 @@
+/**
+ * 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 { $filter, $getNearestBlockElementAncestorOrThrow } from '@lexical/utils';
+import { KEY_TAB_COMMAND, $getSelection, $isRangeSelection, OUTDENT_CONTENT_COMMAND, INDENT_CONTENT_COMMAND, INSERT_TAB_COMMAND, COMMAND_PRIORITY_EDITOR, $isBlockElementNode, $createRangeSelection, $normalizeSelection__EXPERIMENTAL } from 'lexical';
+import { 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 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) {
+  return 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);
+}
+
+/**
+ * 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 acessibility for keyboard
+ * users, causing focus to become trapped within the editor.
+ */
+function TabIndentationPlugin() {
+  const [editor] = useLexicalComposerContext();
+  useEffect(() => {
+    return registerTabIndentation(editor);
+  });
+  return null;
+}
+
+export { TabIndentationPlugin, registerTabIndentation };

package/LexicalTabIndentationPlugin.esm.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.
+ */
+import * as modDev from './LexicalTabIndentationPlugin.dev.esm.js';
+import * as modProd from './LexicalTabIndentationPlugin.prod.esm.js';
+const mod = process.env.NODE_ENV === 'development' ? modDev : modProd;
+export const TabIndentationPlugin = mod.TabIndentationPlugin;
+export const registerTabIndentation = mod.registerTabIndentation;

package/LexicalTabIndentationPlugin.js

@@ -5,5 +5,5 @@
  * LICENSE file in the root directory of this source tree.
  */
 'use strict'
-const LexicalTabIndentationPlugin = process.env.NODE_ENV === 'development' ? require('./LexicalTabIndentationPlugin.dev.js') : require('./LexicalTabIndentationPlugin.prod.js')
+const LexicalTabIndentationPlugin = process.env.NODE_ENV === 'development' ? require('./LexicalTabIndentationPlugin.dev.js') : require('./LexicalTabIndentationPlugin.prod.js');
 module.exports = LexicalTabIndentationPlugin;

package/LexicalTabIndentationPlugin.prod.esm.js

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