@astryxdesign/richtext 0.7.12-canary.d84658f → 0.7.12-canary.dfd75a6

package/README.md

@@ -71,6 +71,12 @@ if your app has its own reset) loads first.
 
 ## Editing code blocks
 
+In a code block, Tab and Shift+Tab indent and outdent every line the selection
+touches, by the indent the block already uses: a tab when one of its lines
+starts with a tab, otherwise the fewest leading spaces of any indented line,
+kept between 2 and 8, otherwise 2 spaces. Press Escape, then Tab, to move focus
+out of the editor.
+
 Backspace at the very start of a code block turns it into a paragraph of its
 lines, instead of merging the code into the block above.
 

package/dist/CodeTabPlugin.d.ts

@@ -0,0 +1,2 @@
+export declare function CodeTabPlugin(): null;
+//# sourceMappingURL=CodeTabPlugin.d.ts.map

package/dist/CodeTabPlugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeTabPlugin.d.ts","sourceRoot":"","sources":["../src/CodeTabPlugin.tsx"],"names":[],"mappings":"AAwQA,wBAAgB,aAAa,IAAI,IAAI,CAiCpC"}

package/dist/CodeTabPlugin.js

@@ -0,0 +1,256 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file CodeTabPlugin.tsx
+ * @input Uses @lexical/react (composer context), @lexical/code (CodeNode), and
+ *   lexical.
+ * @output Exports CodeTabPlugin, which makes Tab and Shift+Tab in a code block
+ *   indent and outdent every line the selection touches, by the indent the
+ *   block's own lines use.
+ * @position Rendered by RichTextEditor; always on, and not exported from the
+ *   package. A press indents by the block's own indent, so edited code keeps
+ *   the indentation its author chose; the selection stays on the same
+ *   characters, and each press is one undo step. It replaces only what Tab
+ *   did in a code block before: TabIndentationPlugin put a tab character in
+ *   place of the selection. Its listener sits at the front of the
+ *   editor-priority queue, ahead of TabIndentationPlugin and behind every
+ *   low-priority listener, so Escape then Tab still moves focus out of the
+ *   editor (TabFocusEscapePlugin, WCAG 2.1.2). A selection that reaches
+ *   outside the code block keeps TabIndentationPlugin's meaning. Read-only
+ *   and disabled editors are unchanged.
+ */
+import { useEffect } from 'react';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $isCodeNode } from '@lexical/code';
+import { $addUpdateTag, $createTextNode, $getSelection, $isRangeSelection, $isTabNode, $isTextNode, COMMAND_PRIORITY_BEFORE_EDITOR, HISTORY_PUSH_TAG, KEY_TAB_COMMAND } from 'lexical';
+
+/** The narrowest space indent a block uses, and the widest. */
+const MIN_SPACE_INDENT = 2;
+const MAX_SPACE_INDENT = 8;
+function leadingSpaces(line) {
+  return /^ */.exec(line)?.[0].length ?? 0;
+}
+
+/**
+ * The indent a code block's lines use: a tab when any line starts with one;
+ * otherwise the fewest spaces an indented line starts with, kept between two
+ * and eight; otherwise two spaces.
+ */
+function codeIndentUnit(lines) {
+  if (lines.some(line => line.startsWith('\t'))) {
+    return '\t';
+  }
+  const widths = lines.map(leadingSpaces).filter(width => width > 0);
+  const width = widths.length === 0 ? MIN_SPACE_INDENT : Math.min(...widths);
+  return ' '.repeat(Math.min(MAX_SPACE_INDENT, Math.max(MIN_SPACE_INDENT, width)));
+}
+
+/**
+ * A code block's children, the offset in the block's text where each one
+ * starts, and that text. A line ends at a line break node or at a newline
+ * inside a text node: imported code holds newlines, and Enter adds line
+ * break nodes.
+ */
+
+function $layoutOf(code) {
+  const children = code.getChildren();
+  const starts = [];
+  let text = '';
+  for (const child of children) {
+    starts.push(text.length);
+    text += child.getTextContent();
+  }
+  return {
+    children,
+    starts,
+    text
+  };
+}
+
+/** A text node that can take a caret and grow: any but a tab node. */
+function $isPlainText(node) {
+  return $isTextNode(node) && !$isTabNode(node);
+}
+
+/** The code block that holds both ends of the selection, or null. */
+function $selectionCodeBlock(selection) {
+  const blockOf = point => {
+    const node = point.getNode();
+    return $isCodeNode(node) ? node : node.getParent();
+  };
+  const block = blockOf(selection.anchor);
+  return $isCodeNode(block) && block.is(blockOf(selection.focus)) ? block : null;
+}
+
+/** Where a point of the block's selection falls in the block's text. */
+function $offsetOf(code, layout, point) {
+  if (point.key === code.getKey()) {
+    return point.offset < layout.children.length ? layout.starts[point.offset] : layout.text.length;
+  }
+  const index = layout.children.findIndex(child => child.getKey() === point.key);
+  return index < 0 ? 0 : layout.starts[index] + point.offset;
+}
+
+/**
+ * Moves a selection point to an offset in the block's text: into the text
+ * node there, or between children where none holds it (beside a tab or a
+ * line break, or on an empty line).
+ */
+function $placePoint(code, point, offset) {
+  const children = code.getChildren();
+  let start = 0;
+  for (let index = 0; index < children.length; index++) {
+    const child = children[index];
+    const size = child.getTextContentSize();
+    if ($isPlainText(child) && offset >= start && offset <= start + size) {
+      point.set(child.getKey(), offset - start, 'text');
+      return;
+    }
+    if (offset <= start) {
+      point.set(code.getKey(), index, 'element');
+      return;
+    }
+    start += size;
+  }
+  point.set(code.getKey(), children.length, 'element');
+}
+
+/** Inserts text at an offset in the block's text. */
+function $insertAt(code, offset, text) {
+  const {
+    children,
+    starts
+  } = $layoutOf(code);
+  for (let index = 0; index < children.length; index++) {
+    const child = children[index];
+    const start = starts[index];
+    if ($isPlainText(child) && offset >= start && offset <= start + child.getTextContentSize()) {
+      const content = child.getTextContent();
+      const at = offset - start;
+      child.setTextContent(content.slice(0, at) + text + content.slice(at));
+      return;
+    }
+    if (offset <= start) {
+      child.insertBefore($createTextNode(text));
+      return;
+    }
+  }
+  code.append($createTextNode(text));
+}
+
+/** Removes `count` characters at an offset in the block's text. */
+function $removeAt(code, offset, count) {
+  const {
+    children,
+    starts
+  } = $layoutOf(code);
+  let left = count;
+  for (let index = 0; index < children.length && left > 0; index++) {
+    const child = children[index];
+    const size = child.getTextContentSize();
+    if (!$isTextNode(child) || starts[index] + size <= offset) {
+      continue;
+    }
+    const from = Math.max(0, offset - starts[index]);
+    const removed = Math.min(left, size - from);
+    const content = child.getTextContent();
+    const rest = content.slice(0, from) + content.slice(from + removed);
+    if (rest === '') {
+      child.remove();
+    } else {
+      child.setTextContent(rest);
+    }
+    left -= removed;
+  }
+}
+
+/**
+ * Indents, or outdents, every line the selection touches by the block's own
+ * indent, and puts the selection back on the characters it held.
+ */
+function $shiftLines(code, selection, isOutdent) {
+  const layout = $layoutOf(code);
+  const lines = layout.text.split('\n');
+  const lineStarts = [];
+  let lineStart = 0;
+  for (const line of lines) {
+    lineStarts.push(lineStart);
+    lineStart += line.length + 1;
+  }
+  const lineAt = offset => {
+    let line = 0;
+    while (line + 1 < lineStarts.length && lineStarts[line + 1] <= offset) {
+      line++;
+    }
+    return line;
+  };
+  const unit = codeIndentUnit(lines);
+  // A tab-indented block outdents a space-indented line by the narrowest
+  // space indent.
+  const spaceUnit = unit === '\t' ? MIN_SPACE_INDENT : unit.length;
+  const anchor = $offsetOf(code, layout, selection.anchor);
+  const focus = $offsetOf(code, layout, selection.focus);
+  const start = Math.min(anchor, focus);
+  const end = Math.max(anchor, focus);
+  const first = lineAt(start);
+  let last = lineAt(end);
+  // A selection that ends where a line begins does not reach into that line.
+  if (last > first && lineStarts[last] === end) {
+    last--;
+  }
+  // Each edit as [offset, characters added (negative when removed)], made
+  // from the last line up so the offsets of the lines above stay true.
+  const edits = [];
+  for (let line = last; line >= first; line--) {
+    const at = lineStarts[line];
+    if (!isOutdent) {
+      $insertAt(code, at, unit);
+      edits.push([at, unit.length]);
+      continue;
+    }
+    const removed = lines[line].startsWith('\t') ? 1 : Math.min(leadingSpaces(lines[line]), spaceUnit);
+    if (removed > 0) {
+      $removeAt(code, at, removed);
+      edits.push([at, -removed]);
+    }
+  }
+  // A point keeps its character: text added at or before it pushes it on,
+  // and a point inside removed indentation moves to its line's start.
+  const shifted = offset => edits.reduce((moved, [at, delta]) => {
+    if (delta > 0) {
+      return offset >= at ? moved + delta : moved;
+    }
+    return offset > at ? moved - Math.min(-delta, offset - at) : moved;
+  }, offset);
+  $placePoint(code, selection.anchor, shifted(anchor));
+  $placePoint(code, selection.focus, shifted(focus));
+}
+export function CodeTabPlugin() {
+  const [editor] = useLexicalComposerContext();
+  useEffect(() => editor.registerCommand(KEY_TAB_COMMAND, event => {
+    const selection = $getSelection();
+    if (!editor.isEditable() || !$isRangeSelection(selection)) {
+      return false;
+    }
+    const code = $selectionCodeBlock(selection);
+    if (code == null) {
+      return false;
+    }
+    event.preventDefault();
+    // One undo step per press, even when a press adds or removes a
+    // single character beside the caret. The push tag starts a step
+    // before the press. A dirty block makes history class the press
+    // as its own change, so typing after it starts another step.
+    $addUpdateTag(HISTORY_PUSH_TAG);
+    $shiftLines(code, selection, event.shiftKey);
+    code.markDirty();
+    return true;
+  },
+  // After TabFocusEscapePlugin's low-priority listener, which lets an
+  // armed Tab move focus, and before TabIndentationPlugin's; see the
+  // file header.
+  COMMAND_PRIORITY_BEFORE_EDITOR), [editor]);
+  return null;
+}

package/dist/RichTextEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RichTextEditor.d.ts","sourceRoot":"","sources":["../src/RichTextEditor.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"RichTextEditor.d.ts","sourceRoot":"","sources":["../src/RichTextEditor.tsx"],"names":[],"mappings":"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"}

package/dist/RichTextEditor.js

@@ -53,6 +53,7 @@ import { CodeBackspacePlugin } from "./CodeBackspacePlugin.js";
 import { CodeBlockHeaderPlugin } from "./CodeBlockHeaderPlugin.js";
 import { CodePastePlugin } from "./CodePastePlugin.js";
 import { CodeSyntaxPlugin } from "./CodeSyntaxPlugin.js";
+import { CodeTabPlugin } from "./CodeTabPlugin.js";
 import { MarkdownExtensionsPlugin } from "./MarkdownExtensionsPlugin.js";
 import { TaskCheckboxPlugin } from "./TaskCheckboxPlugin.js";
 import { DisabledLinkGuardPlugin } from "./DisabledLinkGuardPlugin.js";
@@ -370,7 +371,7 @@ export const RichTextEditor = function RichTextEditor({
             }), /*#__PURE__*/_jsx(CodeBackspacePlugin, {}), /*#__PURE__*/_jsx(CodePastePlugin, {}), markdownExtensions != null && markdownExtensions.length > 0 ? /*#__PURE__*/_jsx(MarkdownExtensionsPlugin, {
               extensions: markdownExtensions,
               transformers: markdownTransformers
-            }) : null, /*#__PURE__*/_jsx(TabIndentationPlugin, {}), /*#__PURE__*/_jsx(TabFocusEscapePlugin, {}), /*#__PURE__*/_jsx(SelectAllScopePlugin, {}), /*#__PURE__*/_jsx(ImageSourceCaretPlugin, {}), hasMarkdownShortcuts && /*#__PURE__*/_jsx(MarkdownShortcutPlugin, {
+            }) : null, /*#__PURE__*/_jsx(CodeTabPlugin, {}), /*#__PURE__*/_jsx(TabIndentationPlugin, {}), /*#__PURE__*/_jsx(TabFocusEscapePlugin, {}), /*#__PURE__*/_jsx(SelectAllScopePlugin, {}), /*#__PURE__*/_jsx(ImageSourceCaretPlugin, {}), hasMarkdownShortcuts && /*#__PURE__*/_jsx(MarkdownShortcutPlugin, {
               transformers: markdownTransformers
             }), hasAutoFocus && /*#__PURE__*/_jsx(AutoFocusOnMount, {}), onChange && /*#__PURE__*/_jsx(OnChangePlugin, {
               onChange: onChange,
@@ -443,7 +444,8 @@ const ESCAPE_REARM_EXEMPT_KEYS = new Set(['Escape', 'Tab', 'Shift', 'Control', '
  * listeners from the highest priority down, stopping at the first one that
  * returns true. Registering at COMMAND_PRIORITY_LOW (1) therefore runs first;
  * when the escape is armed we return true WITHOUT calling
- * `event.preventDefault()`, so the indentation handler never sees the event
+ * `event.preventDefault()`, so the indentation handlers (TabIndentationPlugin,
+ * and CodeTabPlugin at the front of the same priority) never see the event
  * and the browser performs its default Tab focus navigation.
  */
 function TabFocusEscapePlugin() {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@astryxdesign/richtext",
   "displayName": "Rich Text",
-  "version": "0.7.12-canary.d84658f",
+  "version": "0.7.12-canary.dfd75a6",
   "description": "Astryx rich text — a Lexical-based rich text editor and viewer, styled with Astryx design tokens.",
   "author": "Meta Open Source",
   "license": "MIT",
@@ -66,7 +66,7 @@
   },
   "peerDependencies": {
     "@stylexjs/stylex": ">=0.10.0",
-    "@astryxdesign/core": "0.7.12-canary.d84658f",
+    "@astryxdesign/core": "0.7.12-canary.dfd75a6",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0",
     "lexical": "^0.52.0",
@@ -125,8 +125,8 @@
     }
   },
   "devDependencies": {
-    "@astryxdesign/a11y-spec": "0.7.12-canary.d84658f",
-    "@astryxdesign/cli": "0.7.12-canary.d84658f",
+    "@astryxdesign/a11y-spec": "0.7.12-canary.dfd75a6",
+    "@astryxdesign/cli": "0.7.12-canary.dfd75a6",
     "@babel/cli": "^7.29.7",
     "@babel/core": "^7.29.7",
     "@babel/preset-react": "^7.29.7",

package/src/CodeTabPlugin.tsx

@@ -0,0 +1,298 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file CodeTabPlugin.tsx
+ * @input Uses @lexical/react (composer context), @lexical/code (CodeNode), and
+ *   lexical.
+ * @output Exports CodeTabPlugin, which makes Tab and Shift+Tab in a code block
+ *   indent and outdent every line the selection touches, by the indent the
+ *   block's own lines use.
+ * @position Rendered by RichTextEditor; always on, and not exported from the
+ *   package. A press indents by the block's own indent, so edited code keeps
+ *   the indentation its author chose; the selection stays on the same
+ *   characters, and each press is one undo step. It replaces only what Tab
+ *   did in a code block before: TabIndentationPlugin put a tab character in
+ *   place of the selection. Its listener sits at the front of the
+ *   editor-priority queue, ahead of TabIndentationPlugin and behind every
+ *   low-priority listener, so Escape then Tab still moves focus out of the
+ *   editor (TabFocusEscapePlugin, WCAG 2.1.2). A selection that reaches
+ *   outside the code block keeps TabIndentationPlugin's meaning. Read-only
+ *   and disabled editors are unchanged.
+ */
+
+import {useEffect} from 'react';
+import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
+import {$isCodeNode, type CodeNode} from '@lexical/code';
+import {
+  $addUpdateTag,
+  $createTextNode,
+  $getSelection,
+  $isRangeSelection,
+  $isTabNode,
+  $isTextNode,
+  COMMAND_PRIORITY_BEFORE_EDITOR,
+  HISTORY_PUSH_TAG,
+  KEY_TAB_COMMAND,
+  type LexicalNode,
+  type PointType,
+  type RangeSelection,
+  type TextNode,
+} from 'lexical';
+
+/** The narrowest space indent a block uses, and the widest. */
+const MIN_SPACE_INDENT = 2;
+const MAX_SPACE_INDENT = 8;
+
+function leadingSpaces(line: string): number {
+  return /^ */.exec(line)?.[0].length ?? 0;
+}
+
+/**
+ * The indent a code block's lines use: a tab when any line starts with one;
+ * otherwise the fewest spaces an indented line starts with, kept between two
+ * and eight; otherwise two spaces.
+ */
+function codeIndentUnit(lines: ReadonlyArray<string>): string {
+  if (lines.some(line => line.startsWith('\t'))) {
+    return '\t';
+  }
+  const widths = lines.map(leadingSpaces).filter(width => width > 0);
+  const width = widths.length === 0 ? MIN_SPACE_INDENT : Math.min(...widths);
+  return ' '.repeat(
+    Math.min(MAX_SPACE_INDENT, Math.max(MIN_SPACE_INDENT, width)),
+  );
+}
+
+/**
+ * A code block's children, the offset in the block's text where each one
+ * starts, and that text. A line ends at a line break node or at a newline
+ * inside a text node: imported code holds newlines, and Enter adds line
+ * break nodes.
+ */
+interface CodeLayout {
+  readonly children: ReadonlyArray<LexicalNode>;
+  readonly starts: ReadonlyArray<number>;
+  readonly text: string;
+}
+
+function $layoutOf(code: CodeNode): CodeLayout {
+  const children = code.getChildren();
+  const starts: number[] = [];
+  let text = '';
+  for (const child of children) {
+    starts.push(text.length);
+    text += child.getTextContent();
+  }
+  return {children, starts, text};
+}
+
+/** A text node that can take a caret and grow: any but a tab node. */
+function $isPlainText(node: LexicalNode): node is TextNode {
+  return $isTextNode(node) && !$isTabNode(node);
+}
+
+/** The code block that holds both ends of the selection, or null. */
+function $selectionCodeBlock(selection: RangeSelection): CodeNode | null {
+  const blockOf = (point: PointType) => {
+    const node = point.getNode();
+    return $isCodeNode(node) ? node : node.getParent();
+  };
+  const block = blockOf(selection.anchor);
+  return $isCodeNode(block) && block.is(blockOf(selection.focus))
+    ? block
+    : null;
+}
+
+/** Where a point of the block's selection falls in the block's text. */
+function $offsetOf(
+  code: CodeNode,
+  layout: CodeLayout,
+  point: PointType,
+): number {
+  if (point.key === code.getKey()) {
+    return point.offset < layout.children.length
+      ? layout.starts[point.offset]
+      : layout.text.length;
+  }
+  const index = layout.children.findIndex(
+    child => child.getKey() === point.key,
+  );
+  return index < 0 ? 0 : layout.starts[index] + point.offset;
+}
+
+/**
+ * Moves a selection point to an offset in the block's text: into the text
+ * node there, or between children where none holds it (beside a tab or a
+ * line break, or on an empty line).
+ */
+function $placePoint(code: CodeNode, point: PointType, offset: number): void {
+  const children = code.getChildren();
+  let start = 0;
+  for (let index = 0; index < children.length; index++) {
+    const child = children[index];
+    const size = child.getTextContentSize();
+    if ($isPlainText(child) && offset >= start && offset <= start + size) {
+      point.set(child.getKey(), offset - start, 'text');
+      return;
+    }
+    if (offset <= start) {
+      point.set(code.getKey(), index, 'element');
+      return;
+    }
+    start += size;
+  }
+  point.set(code.getKey(), children.length, 'element');
+}
+
+/** Inserts text at an offset in the block's text. */
+function $insertAt(code: CodeNode, offset: number, text: string): void {
+  const {children, starts} = $layoutOf(code);
+  for (let index = 0; index < children.length; index++) {
+    const child = children[index];
+    const start = starts[index];
+    if (
+      $isPlainText(child) &&
+      offset >= start &&
+      offset <= start + child.getTextContentSize()
+    ) {
+      const content = child.getTextContent();
+      const at = offset - start;
+      child.setTextContent(content.slice(0, at) + text + content.slice(at));
+      return;
+    }
+    if (offset <= start) {
+      child.insertBefore($createTextNode(text));
+      return;
+    }
+  }
+  code.append($createTextNode(text));
+}
+
+/** Removes `count` characters at an offset in the block's text. */
+function $removeAt(code: CodeNode, offset: number, count: number): void {
+  const {children, starts} = $layoutOf(code);
+  let left = count;
+  for (let index = 0; index < children.length && left > 0; index++) {
+    const child = children[index];
+    const size = child.getTextContentSize();
+    if (!$isTextNode(child) || starts[index] + size <= offset) {
+      continue;
+    }
+    const from = Math.max(0, offset - starts[index]);
+    const removed = Math.min(left, size - from);
+    const content = child.getTextContent();
+    const rest = content.slice(0, from) + content.slice(from + removed);
+    if (rest === '') {
+      child.remove();
+    } else {
+      child.setTextContent(rest);
+    }
+    left -= removed;
+  }
+}
+
+/**
+ * Indents, or outdents, every line the selection touches by the block's own
+ * indent, and puts the selection back on the characters it held.
+ */
+function $shiftLines(
+  code: CodeNode,
+  selection: RangeSelection,
+  isOutdent: boolean,
+): void {
+  const layout = $layoutOf(code);
+  const lines = layout.text.split('\n');
+  const lineStarts: number[] = [];
+  let lineStart = 0;
+  for (const line of lines) {
+    lineStarts.push(lineStart);
+    lineStart += line.length + 1;
+  }
+  const lineAt = (offset: number) => {
+    let line = 0;
+    while (line + 1 < lineStarts.length && lineStarts[line + 1] <= offset) {
+      line++;
+    }
+    return line;
+  };
+  const unit = codeIndentUnit(lines);
+  // A tab-indented block outdents a space-indented line by the narrowest
+  // space indent.
+  const spaceUnit = unit === '\t' ? MIN_SPACE_INDENT : unit.length;
+  const anchor = $offsetOf(code, layout, selection.anchor);
+  const focus = $offsetOf(code, layout, selection.focus);
+  const start = Math.min(anchor, focus);
+  const end = Math.max(anchor, focus);
+  const first = lineAt(start);
+  let last = lineAt(end);
+  // A selection that ends where a line begins does not reach into that line.
+  if (last > first && lineStarts[last] === end) {
+    last--;
+  }
+  // Each edit as [offset, characters added (negative when removed)], made
+  // from the last line up so the offsets of the lines above stay true.
+  const edits: Array<readonly [number, number]> = [];
+  for (let line = last; line >= first; line--) {
+    const at = lineStarts[line];
+    if (!isOutdent) {
+      $insertAt(code, at, unit);
+      edits.push([at, unit.length]);
+      continue;
+    }
+    const removed = lines[line].startsWith('\t')
+      ? 1
+      : Math.min(leadingSpaces(lines[line]), spaceUnit);
+    if (removed > 0) {
+      $removeAt(code, at, removed);
+      edits.push([at, -removed]);
+    }
+  }
+  // A point keeps its character: text added at or before it pushes it on,
+  // and a point inside removed indentation moves to its line's start.
+  const shifted = (offset: number) =>
+    edits.reduce((moved, [at, delta]) => {
+      if (delta > 0) {
+        return offset >= at ? moved + delta : moved;
+      }
+      return offset > at ? moved - Math.min(-delta, offset - at) : moved;
+    }, offset);
+  $placePoint(code, selection.anchor, shifted(anchor));
+  $placePoint(code, selection.focus, shifted(focus));
+}
+
+export function CodeTabPlugin(): null {
+  const [editor] = useLexicalComposerContext();
+  useEffect(
+    () =>
+      editor.registerCommand(
+        KEY_TAB_COMMAND,
+        event => {
+          const selection = $getSelection();
+          if (!editor.isEditable() || !$isRangeSelection(selection)) {
+            return false;
+          }
+          const code = $selectionCodeBlock(selection);
+          if (code == null) {
+            return false;
+          }
+          event.preventDefault();
+          // One undo step per press, even when a press adds or removes a
+          // single character beside the caret. The push tag starts a step
+          // before the press. A dirty block makes history class the press
+          // as its own change, so typing after it starts another step.
+          $addUpdateTag(HISTORY_PUSH_TAG);
+          $shiftLines(code, selection, event.shiftKey);
+          code.markDirty();
+          return true;
+        },
+        // After TabFocusEscapePlugin's low-priority listener, which lets an
+        // armed Tab move focus, and before TabIndentationPlugin's; see the
+        // file header.
+        COMMAND_PRIORITY_BEFORE_EDITOR,
+      ),
+    [editor],
+  );
+  return null;
+}

package/src/RichTextEditor.doc.mjs

@@ -238,6 +238,11 @@ export const docs = {
         description:
           'GFM pipe tables import, edit, and export by default. The first row renders as header cells, delimiter-row colons set each column alignment, rows shorter than the widest row gain empty cells, and a wide table scrolls inside its own wrapper. Arrow keys move between cells; Tab keeps its editor meaning, so Escape then Tab still leaves the editor. Tables export in the canonical form: outer pipes and three-dash delimiters. RichTextView renders the same tables. Install @lexical/table with the other lexical peers.',
       },
+      {
+        guidance: true,
+        description:
+          'In a code block, Tab and Shift+Tab indent and outdent every line the selection touches, by the indent the block already uses: a tab when one of its lines starts with a tab, otherwise the fewest spaces an indented line starts with (2 to 8), otherwise 2 spaces. The selection stays on the same characters, and each press is one undo step. Escape then Tab still moves focus out of the editor.',
+      },
       {
         guidance: true,
         description:

package/src/RichTextEditor.tsx

@@ -81,6 +81,7 @@ import {CodeBackspacePlugin} from './CodeBackspacePlugin';
 import {CodeBlockHeaderPlugin} from './CodeBlockHeaderPlugin';
 import {CodePastePlugin} from './CodePastePlugin';
 import {CodeSyntaxPlugin} from './CodeSyntaxPlugin';
+import {CodeTabPlugin} from './CodeTabPlugin';
 import {MarkdownExtensionsPlugin} from './MarkdownExtensionsPlugin';
 import type {RichTextMarkdownExtension} from './markdownExtensions';
 import type {CodeLanguage} from '@astryxdesign/core/CodeBlock';
@@ -741,6 +742,9 @@ export const RichTextEditor = function RichTextEditor({
                   transformers={markdownTransformers}
                 />
               ) : null}
+              {/* In a code block, Tab indents the lines the selection
+                  touches instead of inserting a tab character. */}
+              <CodeTabPlugin />
               <TabIndentationPlugin />
               <TabFocusEscapePlugin />
               <SelectAllScopePlugin />
@@ -835,7 +839,8 @@ const ESCAPE_REARM_EXEMPT_KEYS = new Set([
  * listeners from the highest priority down, stopping at the first one that
  * returns true. Registering at COMMAND_PRIORITY_LOW (1) therefore runs first;
  * when the escape is armed we return true WITHOUT calling
- * `event.preventDefault()`, so the indentation handler never sees the event
+ * `event.preventDefault()`, so the indentation handlers (TabIndentationPlugin,
+ * and CodeTabPlugin at the front of the same priority) never see the event
  * and the browser performs its default Tab focus navigation.
  */
 function TabFocusEscapePlugin(): null {