@astryxdesign/richtext 0.7.12-canary.f543ec7 → 0.7.12

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @astryxdesign/richtext
 
+# 0.7.12
+
+#### New Features
+
+- In `RichTextEditor`, Tab and Shift+Tab in a code block 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). The selection stays on the same characters and each press is one undo step. Tab used to put a tab character in place of the selection, and Shift+Tab did the same. Escape then Tab still moves focus out of the editor. (#8579)
+
+#### Fixes
+
+- Declare renderer-owned DOM boundaries so decorator overlays mount outside managed content without changing safe inline hosting. RichTextEditor also mirrors its `dir` prop onto the wrapper around the editable surface, so the editing surface and its content blocks, the placeholder, UI rendered through `plugins`, and relocated overlays follow `dir`; the editing surface previously kept the surrounding direction. (#7633)
+- `RichTextEditorAutoLinkPlugin` no longer turns a URL inside a code block into a link. A URL typed or pasted into a code block, or one in an imported fence, now stays code. Before, the link nested inside the code block, and the exported Markdown fence lost it. (#10664)
+- In `RichTextEditor`, pasting rich content into a code block inserts plain text: the plain text on the clipboard, or, when there is none, each pasted block as one line of its text. Headings, lists, tables, and formatting used to land inside the code block, where the Markdown export wrote them as plain lines of the fence, so the document read back differently from what the editor showed. (#8580)
+- A link inside a disabled `RichTextEditor` no longer navigates, shows no pointer cursor, and is not a tab stop. Before, a disabled editor's links acted as live links: a click or Enter opened them, and Tab stopped on each one. (#10679)
+- TextInput, TextArea, NumberInput, DateInput, DateRangeInput, DateTimeInput, TimeInput, Tokenizer, Typeahead, PowerSearch, ChatComposer and RichTextEditor: when the primary pointer is coarse (a phone or tablet), the focus look shows at once, with no fade, so a tapped field repaints once while the keyboard rises. With a fine primary pointer, such as a mouse, a click and the Tab key keep the fade. ChatComposer's focus depth also shows at once under reduced motion, as the other fields' focus look already does. (#10611)
+
+#### Documentation
+
+- `RichTextView`, `RichTextEditorToolbar` and `RichTextEditorAutoLinkPlugin` each ship a doc file, so `astryx component`, `astryx discover` and the docs list their props, defaults and usage. (#10407)
+- A source comment in the editor theme now says that core `Markdown` gives each block the direction of its own text, while the editor keeps blocks in the surface's direction. (#10293)
+- RichTextEditor documents how to switch between reading and editing in place without reflow: set the field's inset and border outside the reading width with `xstyle`, so every paragraph keeps its line count across the switch. A standalone editor keeps its form width. (#10429)
+
+#### Contributors
+
+Thanks to everyone who contributed to this release:
+
+- @cixzhang
+- @emilyhorsman
+- @ernestt
+- @freddymeta
+- @vjeux
+
+---
+
 # 0.7.11
 
 #### Fixes

package/README.md

@@ -71,9 +71,18 @@ 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.
 
+Pasting rich content into a code block inserts its plain text, one line per
+block: headings, lists, tables, and formatting never land inside the code.
+
 ## Examples
 
 Interactive examples live in Storybook under **RichText/RichTextEditor**

package/dist/CodePastePlugin.d.ts

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

package/dist/CodePastePlugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodePastePlugin.d.ts","sourceRoot":"","sources":["../src/CodePastePlugin.tsx"],"names":[],"mappings":"AAuFA,wBAAgB,eAAe,IAAI,IAAI,CAuDtC"}

package/dist/CodePastePlugin.js

@@ -0,0 +1,103 @@
+// 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 } 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) {
+  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) {
+  const lines = [];
+  let inline = null;
+  const endInline = () => {
+    if (inline != null) {
+      lines.push(inline);
+      inline = null;
+    }
+  };
+  const visit = node => {
+    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() {
+  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/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/DisabledLinkGuardPlugin.d.ts

@@ -0,0 +1,4 @@
+export declare function DisabledLinkGuardPlugin({ isDisabled }: {
+    isDisabled: boolean;
+}): null;
+//# sourceMappingURL=DisabledLinkGuardPlugin.d.ts.map

package/dist/DisabledLinkGuardPlugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DisabledLinkGuardPlugin.d.ts","sourceRoot":"","sources":["../src/DisabledLinkGuardPlugin.tsx"],"names":[],"mappings":"AAoEA,wBAAgB,uBAAuB,CAAC,EAAC,UAAU,EAAC,EAAE;IAAC,UAAU,EAAE,OAAO,CAAA;CAAC,QAwB1E"}

package/dist/DisabledLinkGuardPlugin.js

@@ -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) {
+  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) {
+  const guarded = new Set();
+  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
+}) {
+  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 = 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;
+}

package/dist/RichTextEditor.d.ts

@@ -1,6 +1,6 @@
 /**
  * @file RichTextEditor.tsx
- * @input Uses React, useId, Lexical (lexical + @lexical/react, composed through
+ * @input Uses React, useId, a declared DOM boundary, Lexical (lexical + @lexical/react, composed through
  *   LexicalExtensionComposer), Field, VisuallyHidden, useInputStatusIcon,
  *   mergeProps, design tokens
  * @output Exports an accessibly labelled RichTextEditor component with a flush
@@ -122,7 +122,8 @@ export interface RichTextEditorProps extends Omit<BaseProps, 'onChange' | 'defau
     isReadOnly?: boolean;
     /**
      * Whether the editor is disabled: non-editable, dimmed, out of the tab
-     * order, and announced as disabled. Wins when `isReadOnly` is also set.
+     * order, and announced as disabled. Its links do not navigate and are not
+     * tab stops. Wins when `isReadOnly` is also set.
      * Takes effect when changed after mount.
      * @default false
      */

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

@@ -4,7 +4,7 @@
 
 /**
  * @file RichTextEditor.tsx
- * @input Uses React, useId, Lexical (lexical + @lexical/react, composed through
+ * @input Uses React, useId, a declared DOM boundary, Lexical (lexical + @lexical/react, composed through
  *   LexicalExtensionComposer), Field, VisuallyHidden, useInputStatusIcon,
  *   mergeProps, design tokens
  * @output Exports an accessibly labelled RichTextEditor component with a flush
@@ -51,9 +51,12 @@ import { TextSemanticsExtension } from "./textSemantics.js";
 import { TableColumnFloorPlugin } from "./TableColumnFloorPlugin.js";
 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";
 import { SelectAllScopePlugin } from "./SelectAllScopePlugin.js";
 import { ImageSourceCaretPlugin } from "./ImageSourceCaretPlugin.js";
 import { $generateHtmlFromNodes } from '@lexical/html';
@@ -61,6 +64,7 @@ import { DEFAULT_NODES } from "./editorNodes.js";
 import { $exportMarkdownKeepingSource } from "./markdownSource.js";
 import { DEFAULT_TRANSFORMERS } from "./markdownTable.js";
 import { BLUR_COMMAND, COMMAND_PRIORITY_LOW, defineExtension, KEY_DOWN_COMMAND, KEY_ESCAPE_COMMAND, KEY_TAB_COMMAND, mergeRegister } from 'lexical';
+import { rendererManagedRootProps } from "./privateAttributes/layerPortalBoundary.stylex.js";
 
 /**
  * Serialized state for an empty editor: a root containing a single empty
@@ -295,7 +299,7 @@ export const RichTextEditor = function RichTextEditor({
       ...mergeProps(themeProps('rich-text-editor', {
         size,
         status: status?.type ?? null
-      }), stylex.props(inputWrapperStyles.base, styles.wrapper,
+      }), stylex.props(inputWrapperStyles.base, inputWrapperStyles.textField, styles.wrapper,
       // Only disabled is dimmed, matching TextArea: a read-only editor
       // keeps full-opacity text and stays keyboard-reachable.
       isDisabled && inputWrapperStyles.disabled, isDisabled && styles.disabled, status && inputStatusBorderStyles[status.type], status && !isDisabled && !isReadOnly && inputStatusHoverShadowStyles[status.type], status && inputStatusFocusWithinStyles[status.type], xstyle), className, style),
@@ -333,6 +337,7 @@ export const RichTextEditor = function RichTextEditor({
             ...{
               className: "x1n2onr6 xh8yej3 x9ynric xjm74w1 xf9zqsd xw6l6zx"
             },
+            dir: rest.dir,
             children: [/*#__PURE__*/_jsx(RichTextPlugin, {
               contentEditable: /*#__PURE__*/_jsx(EditorContentEditable, {
                 id: inputID,
@@ -352,7 +357,9 @@ export const RichTextEditor = function RichTextEditor({
               ErrorBoundary: LexicalErrorBoundary
             }), /*#__PURE__*/_jsx(HistoryPlugin, {}), /*#__PURE__*/_jsx(ListPlugin, {}), /*#__PURE__*/_jsx(TaskCheckboxPlugin, {
               isReadOnly: isReadOnly || isDisabled
-            }), /*#__PURE__*/_jsx(LinkPlugin, {}), /*#__PURE__*/_jsx(TablePlugin, {
+            }), /*#__PURE__*/_jsx(LinkPlugin, {}), /*#__PURE__*/_jsx(DisabledLinkGuardPlugin, {
+              isDisabled: isDisabled
+            }), /*#__PURE__*/_jsx(TablePlugin, {
               hasCellMerge: false,
               hasCellBackgroundColor: false,
               hasTabHandler: false,
@@ -361,10 +368,10 @@ export const RichTextEditor = function RichTextEditor({
               codeLanguages: codeLanguages
             }), /*#__PURE__*/_jsx(CodeSyntaxPlugin, {
               codeLanguages: codeLanguages
-            }), /*#__PURE__*/_jsx(CodeBackspacePlugin, {}), markdownExtensions != null && markdownExtensions.length > 0 ? /*#__PURE__*/_jsx(MarkdownExtensionsPlugin, {
+            }), /*#__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,
@@ -437,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() {
@@ -621,7 +629,9 @@ function EditorContentEditable({
       'aria-readonly': 'true'
     } : null),
     ...stylex.props(styles.contentEditable, dynamicStyles.contentEditableMinHeight(minHeight)),
-    ...rest
+    ...rest,
+    // Lexical reconciles this DOM, so Layer keeps corrective portals out.
+    ...rendererManagedRootProps
   };
   if (placeholderText) {
     return /*#__PURE__*/_jsx(ContentEditable, {