@astryxdesign/richtext 0.7.12-canary.f543ec7 → 0.7.12

package/dist/RichTextEditorAutoLinkPlugin.d.ts

@@ -6,8 +6,9 @@
  * @output Exports `RichTextEditorAutoLinkPlugin` and its props type, plus the
  *   default `DEFAULT_LINK_MATCHERS`.
  * @position @astryxdesign/richtext. Drop into RichTextEditor's `plugins` slot to
- *   auto-linkify URLs and emails as they are typed or pasted. Requires
- *   `AutoLinkNode` to be registered (it is, by default).
+ *   auto-linkify URLs and emails as they are typed or pasted, except inside
+ *   a code block. Requires `AutoLinkNode` to be registered (it is, by
+ *   default).
  *
  * SYNC: When modified, update:
  * - /packages/richtext/src/index.ts (exports / barrel)
@@ -24,9 +25,8 @@
  * and new-tab defaults, so a consumer supplies a richer matcher set — an
  * application-specific identifier or ticket syntax, say — through the
  * `matchers` prop without changing the contract. An application needing a
- * hardened transform (expanded separators, code-block exclusion) substitutes
- * its own plugin in the same slot; astryx stays on the upstream
- * `AutoLinkPlugin`.
+ * hardened transform (expanded separators, say) substitutes its own plugin in
+ * the same slot; astryx stays on the upstream `AutoLinkPlugin`.
  */
 import { type LinkMatcher } from '@lexical/react/LexicalAutoLinkPlugin';
 /**

package/dist/RichTextEditorAutoLinkPlugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RichTextEditorAutoLinkPlugin.d.ts","sourceRoot":"","sources":["../src/RichTextEditorAutoLinkPlugin.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAEH,OAAO,EAGL,KAAK,WAAW,EACjB,MAAM,sCAAsC,CAAC;AAG9C;;;;GAIG;AACH,eAAO,MAAM,uBAAuB;;;CAG1B,CAAC;AAEX;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,EAAE,WAAW,EAc9C,CAAC;AAEF,MAAM,WAAW,iCAAiC;IAChD;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAC;IACzB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,EAAE,OAAO,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CACjE;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,4BAA4B,CAAC,EAC3C,QAAgC,EAChC,QAAQ,GACT,EAAE,iCAAiC,+BAEnC;yBALe,4BAA4B"}
+{"version":3,"file":"RichTextEditorAutoLinkPlugin.d.ts","sourceRoot":"","sources":["../src/RichTextEditorAutoLinkPlugin.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAEH,OAAO,EAGL,KAAK,WAAW,EACjB,MAAM,sCAAsC,CAAC;AAK9C;;;;GAIG;AACH,eAAO,MAAM,uBAAuB;;;CAG1B,CAAC;AAEX;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,EAAE,WAAW,EAc9C,CAAC;AAMF,MAAM,WAAW,iCAAiC;IAChD;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAC;IACzB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,EAAE,OAAO,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CACjE;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,4BAA4B,CAAC,EAC3C,QAAgC,EAChC,QAAQ,GACT,EAAE,iCAAiC,+BAQnC;yBAXe,4BAA4B"}

package/dist/RichTextEditorAutoLinkPlugin.js

@@ -10,8 +10,9 @@
  * @output Exports `RichTextEditorAutoLinkPlugin` and its props type, plus the
  *   default `DEFAULT_LINK_MATCHERS`.
  * @position @astryxdesign/richtext. Drop into RichTextEditor's `plugins` slot to
- *   auto-linkify URLs and emails as they are typed or pasted. Requires
- *   `AutoLinkNode` to be registered (it is, by default).
+ *   auto-linkify URLs and emails as they are typed or pasted, except inside
+ *   a code block. Requires `AutoLinkNode` to be registered (it is, by
+ *   default).
  *
  * SYNC: When modified, update:
  * - /packages/richtext/src/index.ts (exports / barrel)
@@ -28,11 +29,11 @@
  * and new-tab defaults, so a consumer supplies a richer matcher set — an
  * application-specific identifier or ticket syntax, say — through the
  * `matchers` prop without changing the contract. An application needing a
- * hardened transform (expanded separators, code-block exclusion) substitutes
- * its own plugin in the same slot; astryx stays on the upstream
- * `AutoLinkPlugin`.
+ * hardened transform (expanded separators, say) substitutes its own plugin in
+ * the same slot; astryx stays on the upstream `AutoLinkPlugin`.
  */
 import { AutoLinkPlugin, createLinkMatcherWithRegExp } from '@lexical/react/LexicalAutoLinkPlugin';
+import { $isCodeNode } from '@lexical/code';
 import { URL_MATCHER, EMAIL_MATCHER, sanitizeUrl } from "./linkUtils.js";
 
 /**
@@ -65,6 +66,10 @@ export const DEFAULT_LINK_MATCHERS = [text => {
     attributes: NEW_TAB_LINK_ATTRIBUTES
   } : null;
 }];
+
+// Text in a code block is never linked. The upstream plugin registers again
+// when this array changes. Keep it a module constant.
+const EXCLUDE_PARENTS = [$isCodeNode];
 /**
  * Automatically converts typed/pasted URLs and email addresses into links.
  * Render it inside the editor's `plugins` slot — it reaches the editor via
@@ -87,7 +92,8 @@ export function RichTextEditorAutoLinkPlugin({
 }) {
   return /*#__PURE__*/_jsx(AutoLinkPlugin, {
     matchers: matchers,
-    onChange: onChange
+    onChange: onChange,
+    excludeParents: EXCLUDE_PARENTS
   });
 }
 RichTextEditorAutoLinkPlugin.displayName = 'RichTextEditorAutoLinkPlugin';

package/dist/privateAttributes/layerPortalBoundary.stylex.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @file privateAttributes/layerPortalBoundary.stylex.ts
+ * @input The editable root Lexical reconciles
+ * @output rendererManagedRootProps, which marks that root
+ * @position Owner module of the private layer-portal-boundary attribute in
+ *   RichText: the only RichText file that writes its name. Core's Layer reads
+ *   the mark through its own owner module of the same name. No package entry
+ *   exports it.
+ */
+/** Spread on the editable root, whose DOM Lexical reconciles. */
+export declare const rendererManagedRootProps: Readonly<Record<`data-${string}`, string>>;
+//# sourceMappingURL=layerPortalBoundary.stylex.d.ts.map

package/dist/privateAttributes/layerPortalBoundary.stylex.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layerPortalBoundary.stylex.d.ts","sourceRoot":"","sources":["../../src/privateAttributes/layerPortalBoundary.stylex.ts"],"names":[],"mappings":"AAEA;;;;;;;;GAQG;AAEH,iEAAiE;AACjE,eAAO,MAAM,wBAAwB,EAAE,QAAQ,CAC7C,MAAM,CAAC,QAAQ,MAAM,EAAE,EAAE,MAAM,CAAC,CAGjC,CAAC"}

package/dist/privateAttributes/layerPortalBoundary.stylex.js

@@ -0,0 +1,16 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file privateAttributes/layerPortalBoundary.stylex.ts
+ * @input The editable root Lexical reconciles
+ * @output rendererManagedRootProps, which marks that root
+ * @position Owner module of the private layer-portal-boundary attribute in
+ *   RichText: the only RichText file that writes its name. Core's Layer reads
+ *   the mark through its own owner module of the same name. No package entry
+ *   exports it.
+ */
+
+/** Spread on the editable root, whose DOM Lexical reconciles. */
+export const rendererManagedRootProps = {
+  'data-astryx-layer-portal-boundary': 'external'
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@astryxdesign/richtext",
   "displayName": "Rich Text",
-  "version": "0.7.12-canary.f543ec7",
+  "version": "0.7.12",
   "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.f543ec7",
+    "@astryxdesign/core": "0.7.12",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0",
     "lexical": "^0.52.0",
@@ -125,8 +125,6 @@
     }
   },
   "devDependencies": {
-    "@astryxdesign/a11y-spec": "0.7.12-canary.f543ec7",
-    "@astryxdesign/cli": "0.7.12-canary.f543ec7",
     "@babel/cli": "^7.29.7",
     "@babel/core": "^7.29.7",
     "@babel/preset-react": "^7.29.7",
@@ -145,7 +143,9 @@
     "@lexical/utils": "^0.52.0",
     "@stylexjs/babel-plugin": "^0.19.0",
     "@testing-library/react": "^16.3.2",
-    "lexical": "^0.52.0"
+    "lexical": "^0.52.0",
+    "@astryxdesign/a11y-spec": "0.0.0",
+    "@astryxdesign/cli": "0.7.12"
   },
   "scripts": {
     "api:report": "node ../../scripts/api-report/cli.mjs --package .",

package/src/CodePastePlugin.tsx

@@ -0,0 +1,143 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file CodePastePlugin.tsx
+ * @input Uses @lexical/react (composer context), @lexical/code (CodeNode), and
+ *   lexical.
+ * @output Exports CodePastePlugin, which makes rich content pasted or dropped
+ *   into a code block go in as plain lines of code.
+ * @position Rendered by RichTextEditor; always on; not exported. A paste
+ *   whose selection starts in a code block goes in as plain text: the
+ *   clipboard's plain text, or else one line per pasted block.
+ */
+
+import {useEffect} from 'react';
+import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
+import {$isCodeNode} from '@lexical/code';
+import {
+  $addUpdateTag,
+  $findMatchingParent,
+  $getSelection,
+  $isElementNode,
+  $isRangeSelection,
+  $isSelectionCapturedInDecoratorInput,
+  COMMAND_PRIORITY_LOW,
+  isDOMNode,
+  mergeRegister,
+  PASTE_COMMAND,
+  PASTE_TAG,
+  SELECTION_INSERT_CLIPBOARD_NODES_COMMAND,
+  type BaseSelection,
+  type LexicalNode,
+  type RangeSelection,
+} from 'lexical';
+
+/** Clipboard types that carry more than plain text. */
+const RICH_TYPES = ['text/html', 'application/x-lexical-editor'];
+
+/** Whether content inserted at the selection lands in a code block. */
+function $startsInCodeBlock(
+  selection: BaseSelection | null,
+): selection is RangeSelection {
+  if (!$isRangeSelection(selection)) {
+    return false;
+  }
+  const start = selection.isBackward() ? selection.focus : selection.anchor;
+  const node = start.getNode();
+  // A link (an autolinked URL) can sit between the text and its code block.
+  return $findMatchingParent(node, $isCodeNode) !== null;
+}
+
+/**
+ * Clipboard nodes as plain lines: each block's text on a line of its own (a
+ * paragraph, a heading, a list item, a table cell), and inline content
+ * between blocks on one line.
+ */
+function $plainLinesOf(nodes: ReadonlyArray<LexicalNode>): string {
+  const lines: string[] = [];
+  let inline: string | null = null;
+  const endInline = () => {
+    if (inline != null) {
+      lines.push(inline);
+      inline = null;
+    }
+  };
+  const visit = (node: LexicalNode) => {
+    if (node.isInline()) {
+      inline = (inline ?? '') + node.getTextContent();
+      return;
+    }
+    endInline();
+    if (
+      $isElementNode(node) &&
+      node.getChildren().some(child => !child.isInline())
+    ) {
+      node.getChildren().forEach(visit);
+      endInline();
+    } else {
+      lines.push(node.getTextContent());
+    }
+  };
+  nodes.forEach(visit);
+  endInline();
+  return lines.join('\n');
+}
+
+export function CodePastePlugin(): null {
+  const [editor] = useLexicalComposerContext();
+  useEffect(
+    () =>
+      mergeRegister(
+        // Ahead of the rich-text paste, which inserts the clipboard's rich
+        // content when there is any.
+        editor.registerCommand(
+          PASTE_COMMAND,
+          event => {
+            // A paste into an input a decorator node renders is that input's.
+            if (
+              isDOMNode(event.target) &&
+              $isSelectionCapturedInDecoratorInput(event.target)
+            ) {
+              return false;
+            }
+            const data = 'clipboardData' in event ? event.clipboardData : null;
+            if (
+              !editor.isEditable() ||
+              data == null ||
+              !RICH_TYPES.some(type => data.types.includes(type))
+            ) {
+              return false;
+            }
+            const text = data.getData('text/plain');
+            const selection = $getSelection();
+            if (text === '' || !$startsInCodeBlock(selection)) {
+              return false;
+            }
+            event.preventDefault();
+            // Its own undo step, as every paste is.
+            $addUpdateTag(PASTE_TAG);
+            selection.insertRawText(text);
+            return true;
+          },
+          COMMAND_PRIORITY_LOW,
+        ),
+        // Every insertion of clipboard nodes, a paste with no plain text or a
+        // drop, comes through here; ahead of the table's own handler.
+        editor.registerCommand(
+          SELECTION_INSERT_CLIPBOARD_NODES_COMMAND,
+          ({nodes, selection}) => {
+            if (!$startsInCodeBlock(selection)) {
+              return false;
+            }
+            selection.insertRawText($plainLinesOf(nodes));
+            return true;
+          },
+          COMMAND_PRIORITY_LOW,
+        ),
+      ),
+    [editor],
+  );
+  return null;
+}

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/DisabledLinkGuardPlugin.tsx

@@ -0,0 +1,93 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file DisabledLinkGuardPlugin.tsx
+ * @input The composer's editor, and whether RichTextEditor is disabled
+ * @output DisabledLinkGuardPlugin (internal; not re-exported from index.ts):
+ *   while the editor is disabled, its links add no tab stop and never navigate
+ * @position Rendered by RichTextEditor inside its LexicalExtensionComposer
+ *
+ * A disabled editor is not editable, so the browser treats each link in it as
+ * a live link: a tab stop that navigates on a click or on Enter. A disabled
+ * control must not navigate, and it keeps the focus order it has when enabled,
+ * where its links are not tab stops.
+ */
+
+import {useEffect} from 'react';
+import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
+
+// Enter on a focused link and a screen reader's activation arrive as a click.
+// A middle click arrives as auxclick.
+function preventLinkActivation(event: MouseEvent) {
+  if (event.target instanceof Element && event.target.closest('a[href]')) {
+    event.preventDefault();
+  }
+}
+
+/**
+ * Guards the links under one root element. It records the links it changes,
+ * so it restores only those.
+ */
+function createLinkGuard(root: HTMLElement) {
+  const guarded = new Set<Element>();
+  const guard = () => {
+    for (const link of root.querySelectorAll('a[href]')) {
+      if (!guarded.has(link)) {
+        guarded.add(link);
+        link.setAttribute('tabindex', '-1');
+        // Assistive technology announces each link as disabled. Only the
+        // link ignores the pointer, so a wide table still scrolls.
+        link.setAttribute('aria-disabled', 'true');
+        if (link instanceof HTMLElement) {
+          link.style.pointerEvents = 'none';
+        }
+      }
+    }
+  };
+  guard();
+  root.addEventListener('click', preventLinkActivation, true);
+  root.addEventListener('auxclick', preventLinkActivation, true);
+  return {
+    guard,
+    release() {
+      for (const link of guarded) {
+        link.removeAttribute('tabindex');
+        link.removeAttribute('aria-disabled');
+        if (link instanceof HTMLElement) {
+          link.style.removeProperty('pointer-events');
+        }
+      }
+      guarded.clear();
+      root.removeEventListener('click', preventLinkActivation, true);
+      root.removeEventListener('auxclick', preventLinkActivation, true);
+    },
+  };
+}
+
+export function DisabledLinkGuardPlugin({isDisabled}: {isDisabled: boolean}) {
+  const [editor] = useLexicalComposerContext();
+  // Synchronizes the editor's link elements, which Lexical renders and owns,
+  // with the disabled state: guarded while disabled, restored when enabled.
+  useEffect(() => {
+    if (!isDisabled) {
+      return undefined;
+    }
+    let linkGuard: ReturnType<typeof createLinkGuard> | null = null;
+    const unregisterRoot = editor.registerRootListener(next => {
+      linkGuard?.release();
+      linkGuard = next == null ? null : createLinkGuard(next);
+    });
+    // A new or changed document renders new link elements.
+    const unregisterUpdate = editor.registerUpdateListener(() => {
+      linkGuard?.guard();
+    });
+    return () => {
+      unregisterUpdate();
+      unregisterRoot();
+      linkGuard?.release();
+    };
+  }, [editor, isDisabled]);
+  return null;
+}