@astryxdesign/richtext 0.7.12-canary.ccb4a6d → 0.7.12-canary.da3dbdc

package/README.md

@@ -74,6 +74,9 @@ if your app has its own reset) loads first.
 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/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":"AAIA;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,OAAO,EAOL,KAAK,SAAS,EACd,KAAK,GAAG,EACT,MAAM,OAAO,CAAC;AASf,OAAO,EAML,KAAK,kBAAkB,EACxB,MAAM,0BAA0B,CAAC;AAClC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAIlD,OAAO,EAIL,KAAK,SAAS,EACf,MAAM,0BAA0B,CAAC;AAuBlC,OAAO,KAAK,EAAC,yBAAyB,EAAC,MAAM,sBAAsB,CAAC;AACpE,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,8BAA8B,CAAC;AAK/D,OAAO,EAAC,KAAK,WAAW,EAAC,MAAM,mBAAmB,CAAC;AAKnD,OAAO,EASL,KAAK,WAAW,EAChB,KAAK,KAAK,EACV,KAAK,aAAa,EAClB,KAAK,WAAW,EAEjB,MAAM,SAAS,CAAC;AAyJjB,MAAM,MAAM,wBAAwB,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;AAEvE,MAAM,MAAM,kBAAkB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEpD,MAAM,WAAW,oBAAoB;IACnC,qCAAqC;IACrC,IAAI,EAAE,wBAAwB,CAAC;IAC/B,oDAAoD;IACpD,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;GAGG;AACH,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB;;;OAGG;IACH,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,6EAA6E;IAC7E,cAAc,EAAE,MAAM,WAAW,CAAC;IAClC;;;;;;;OAOG;IACH,WAAW,EAAE,MAAM,MAAM,CAAC;IAC1B;;;;OAIG;IACH,OAAO,EAAE,MAAM,MAAM,CAAC;IACtB;;;OAGG;IACH,SAAS,EAAE,MAAM,aAAa,CAAC;CAChC;AAED,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAC/C,SAAS,EACT,UAAU,GAAG,cAAc,CAC5B;IACC;;;;OAIG;IACH,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAC7B,qEAAqE;IACrE,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,+DAA+D;IAC/D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,WAAW,EAAE,WAAW,EAAE,MAAM,EAAE,aAAa,KAAK,IAAI,CAAC;IACrE,uDAAuD;IACvD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,oBAAoB,CAAC;IAC9B;;;;;;;;OAQG;IACH,aAAa,CAAC,EAAE,kBAAkB,GAAG,SAAS,CAAC;IAC/C;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,uEAAuE;IACvE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,IAAI,CAAC,EAAE,kBAAkB,CAAC;IAC1B;;;;OAIG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC;IAC1C;;;;;OAKG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;;;OAKG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;;;;;;;;;;;;;;;OAiBG;IACH,YAAY,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IAC1C;;;;;;;OAOG;IACH,kBAAkB,CAAC,EAAE,aAAa,CAAC,yBAAyB,CAAC,CAAC;IAC9D;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;IAC5C,yEAAyE;IACzE,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;;;OAOG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,cAAc;2ZAiCxB,mBAAmB;;CA6PrB,CAAC"}

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,11 @@ 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 { 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 +63,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 +298,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 +336,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 +356,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,7 +367,7 @@ 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, {
@@ -621,7 +627,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, {

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.ccb4a6d",
+  "version": "0.7.12-canary.da3dbdc",
   "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.ccb4a6d",
+    "@astryxdesign/core": "0.7.12-canary.da3dbdc",
     "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.ccb4a6d",
-    "@astryxdesign/cli": "0.7.12-canary.ccb4a6d",
+    "@astryxdesign/a11y-spec": "0.7.12-canary.da3dbdc",
+    "@astryxdesign/cli": "0.7.12-canary.da3dbdc",
     "@babel/cli": "^7.29.7",
     "@babel/core": "^7.29.7",
     "@babel/preset-react": "^7.29.7",

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

package/src/RichTextEditor.doc.mjs

@@ -85,7 +85,7 @@ export const docs = {
       name: 'isDisabled',
       type: 'boolean',
       description:
-        'Whether the editor is disabled: non-editable, dimmed, out of the tab order, and announced as disabled. Wins when isReadOnly is also set. Takes effect when changed after mount.',
+        'Whether the editor is disabled: non-editable, dimmed, out of the tab 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',
     },
     {
@@ -243,6 +243,11 @@ export const docs = {
         description:
           'Backspace at the very start of a code block turns it into a paragraph holding its lines, each on its own line, with the caret at its start. The code never merges into the block above, so a heading above keeps its own text. Backspace anywhere else in a code block deletes as usual.',
       },
+      {
+        guidance: true,
+        description:
+          'Pasting into a code block inserts plain code. Rich content, such as a web page, a word processor document, or blocks copied from another editor, goes in as the plain text on the clipboard; when the clipboard has no plain text, each pasted block goes in as one line of its text. Headings, lists, tables, and formatting never land inside a code block.',
+      },
       {
         guidance: true,
         description:
@@ -283,6 +288,11 @@ export const docs = {
         description:
           "The toolbar's glyphs are themeable. Each control resolves its icon from the core icon registry under a stable richtext:* key (see RICHTEXT_ICON_KEYS), falling back to a bundled inline SVG. A theme restyles any glyph without forking the toolbar by naming its key: defineTheme({icons: {'richtext:bold': <MyBoldIcon />}}). Undo and redo mirror under right-to-left direction, whichever glyph draws them.",
       },
+      {
+        guidance: true,
+        description:
+          "To switch between reading (Markdown or RichTextView) and editing the same document in place, give the editor's field its inset and border outside the reading width, so every paragraph keeps its line count across the switch. Define the frame with stylex.create, for example const inPlace = stylex.create({editorFrame: {marginInline: `calc(-1 * (${spacingVars['--spacing-2']} + ${borderVars['--border-width']}))`}}), with spacingVars and borderVars from @astryxdesign/core/theme/tokens.stylex, and pass xstyle={inPlace.editorFrame} to the RichTextEditor. The recipe assumes no status: a status icon reserves another spacing-6 at the inline end. The field then extends past the column on both sides; leave room for it in the surrounding padding. A standalone editor in a form keeps its default width, so its border lines up with the fields around it.",
+      },
       {
         guidance: false,
         description:

package/src/RichTextEditor.tsx

@@ -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
@@ -79,11 +79,13 @@ import {TextSemanticsExtension} from './textSemantics';
 import {TableColumnFloorPlugin} from './TableColumnFloorPlugin';
 import {CodeBackspacePlugin} from './CodeBackspacePlugin';
 import {CodeBlockHeaderPlugin} from './CodeBlockHeaderPlugin';
+import {CodePastePlugin} from './CodePastePlugin';
 import {CodeSyntaxPlugin} from './CodeSyntaxPlugin';
 import {MarkdownExtensionsPlugin} from './MarkdownExtensionsPlugin';
 import type {RichTextMarkdownExtension} from './markdownExtensions';
 import type {CodeLanguage} from '@astryxdesign/core/CodeBlock';
 import {TaskCheckboxPlugin} from './TaskCheckboxPlugin';
+import {DisabledLinkGuardPlugin} from './DisabledLinkGuardPlugin';
 import {SelectAllScopePlugin} from './SelectAllScopePlugin';
 import {ImageSourceCaretPlugin} from './ImageSourceCaretPlugin';
 import {type Transformer} from '@lexical/markdown';
@@ -106,6 +108,7 @@ import {
   type LexicalNode,
   type EditorThemeClasses,
 } from 'lexical';
+import {rendererManagedRootProps} from './privateAttributes/layerPortalBoundary.stylex';
 
 /**
  * Serialized state for an empty editor: a root containing a single empty
@@ -359,7 +362,8 @@ export interface RichTextEditorProps extends Omit<
   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
    */
@@ -660,6 +664,7 @@ export const RichTextEditor = function RichTextEditor({
           }),
           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.
@@ -687,7 +692,7 @@ export const RichTextEditor = function RichTextEditor({
               !!statusIcon && styles.editorBodyWithStatus,
               size === 'lg' && editorBodySizeStyles.lg,
             )}>
-            <div {...stylex.props(styles.editorRoot)}>
+            <div {...stylex.props(styles.editorRoot)} dir={rest.dir}>
               <RichTextPlugin
                 contentEditable={
                   <EditorContentEditable
@@ -712,6 +717,7 @@ export const RichTextEditor = function RichTextEditor({
               <ListPlugin />
               <TaskCheckboxPlugin isReadOnly={isReadOnly || isDisabled} />
               <LinkPlugin />
+              <DisabledLinkGuardPlugin isDisabled={isDisabled} />
               {/* Tab keeps its editor meaning inside a table (indent, and
                   Escape then Tab to leave the editor); arrow keys move
                   between cells. GFM tables have no merged cells or cell
@@ -728,6 +734,7 @@ export const RichTextEditor = function RichTextEditor({
               {/* Backspace at the very start of a code block makes it a
                   paragraph, instead of merging it into the block above. */}
               <CodeBackspacePlugin />
+              <CodePastePlugin />
               {markdownExtensions != null && markdownExtensions.length > 0 ? (
                 <MarkdownExtensionsPlugin
                   extensions={markdownExtensions}
@@ -1065,6 +1072,8 @@ function EditorContentEditable({
       dynamicStyles.contentEditableMinHeight(minHeight),
     ),
     ...rest,
+    // Lexical reconciles this DOM, so Layer keeps corrective portals out.
+    ...rendererManagedRootProps,
   };
   if (placeholderText) {
     return (

package/src/RichTextEditorAutoLinkPlugin.doc.mjs

@@ -26,7 +26,7 @@ export const docs = {
   ],
   usage: {
     description:
-      "Turns typed and pasted URLs and email addresses into links. Render it in RichTextEditor's plugins slot; it reaches the editor through the editor's Lexical composer and uses AutoLinkNode, which the editor registers by default.",
+      "Turns typed and pasted URLs and email addresses into links. Text inside a code block stays code and is never linked. Render it in RichTextEditor's plugins slot; it reaches the editor through the editor's Lexical composer and uses AutoLinkNode, which the editor registers by default.",
     bestPractices: [
       {
         guidance: true,

package/src/RichTextEditorAutoLinkPlugin.tsx

@@ -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,9 +29,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 {
@@ -38,6 +38,8 @@ import {
   createLinkMatcherWithRegExp,
   type LinkMatcher,
 } from '@lexical/react/LexicalAutoLinkPlugin';
+import {$isCodeNode} from '@lexical/code';
+import type {ElementNode} from 'lexical';
 import {URL_MATCHER, EMAIL_MATCHER, sanitizeUrl} from './linkUtils';
 
 /**
@@ -72,6 +74,10 @@ export const DEFAULT_LINK_MATCHERS: LinkMatcher[] = [
   },
 ];
 
+// 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: ((parent: ElementNode) => boolean)[] = [$isCodeNode];
+
 export interface RichTextEditorAutoLinkPluginProps {
   /**
    * Link matchers to use. Defaults to {@link DEFAULT_LINK_MATCHERS} (URLs +
@@ -108,7 +114,13 @@ export function RichTextEditorAutoLinkPlugin({
   matchers = DEFAULT_LINK_MATCHERS,
   onChange,
 }: RichTextEditorAutoLinkPluginProps) {
-  return <AutoLinkPlugin matchers={matchers} onChange={onChange} />;
+  return (
+    <AutoLinkPlugin
+      matchers={matchers}
+      onChange={onChange}
+      excludeParents={EXCLUDE_PARENTS}
+    />
+  );
 }
 
 RichTextEditorAutoLinkPlugin.displayName = 'RichTextEditorAutoLinkPlugin';

package/src/privateAttributes/layerPortalBoundary.stylex.ts

@@ -0,0 +1,18 @@
+// 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: Readonly<
+  Record<`data-${string}`, string>
+> = {
+  'data-astryx-layer-portal-boundary': 'external',
+};