@lexical/code-core 0.44.1-nightly.20260518.0 → 0.45.0

package/dist/CodeImportExtension.d.ts

@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import type { DOMPreprocessFn } from '@lexical/html';
+/**
+ * VS Code → browser code-block pastes ship the block as either:
+ *
+ *  - **Chrome**: one outer
+ *    `<div style="font-family: …monospace…; white-space: pre">…</div>`
+ *    wrapping per-line `<div>`s and `<br>`s.
+ *  - **Safari**: a flat run of sibling
+ *    `<div style="…monospace…; white-space: pre">…</div>` and
+ *    `<br style="…monospace…; …">` elements with no wrapping
+ *    monospace ancestor (the styles are duplicated onto every
+ *    element).
+ *
+ * The legacy `<div>` rule (and {@link DivRule}) produces one CodeNode
+ * per `<div>` on Safari and concatenates inner divs without
+ * separating `\n`s on Chrome. This preprocess scans once for the
+ * structural signature and, only when it matches, pushes
+ * {@link VscodeCodePasteOverlay} onto {@link ImportOverlays} so the
+ * VS Code-specific rules participate in the walk. Pastes from other
+ * sources pay only the detection cost.
+ *
+ * @experimental
+ */
+export declare const $installVscodeCodePasteOverlay: DOMPreprocessFn;
+/**
+ * Import rules for {@link CodeNode}.
+ *
+ * Specific class-restricted rules (GitHub raw-file-view detectors) are
+ * registered before the generic `<table>` / `<tr>` / `<td>` rules so
+ * they win dispatch.
+ *
+ * @experimental
+ */
+export declare const CodeImportRules: import("@lexical/html").DOMImportRule<import("@lexical/html").ElementSelectorBuilder<HTMLElement, Record<string, never>>>[];
+/**
+ * Bundles {@link CodeImportRules} (plus {@link CoreImportExtension}) into
+ * a single dependency. The legacy {@link CodeNode.importDOM} continues to
+ * work in parallel; depend on this extension to opt into the new
+ * pipeline.
+ *
+ * @experimental
+ */
+export declare const CodeImportExtension: import("lexical").LexicalExtension<import("lexical").ExtensionConfigBase, "@lexical/code/Import", unknown, unknown>;

package/{CodeNode.d.ts → dist/CodeNode.d.ts}

@@ -13,6 +13,7 @@ export type SerializedCodeNode = Spread<{
     theme?: string | undefined;
 }, SerializedElementNode>;
 export declare const DEFAULT_CODE_LANGUAGE = "javascript";
+/** @internal Configurable through the extensions. */
 export declare const getDefaultCodeLanguage: () => string;
 /** @noInheritDoc */
 export declare class CodeNode extends ElementNode {

package/{FlatStructureUtils.d.ts → dist/FlatStructureUtils.d.ts}

@@ -6,7 +6,7 @@
  *
  */
 import type { CodeHighlightNode } from './CodeHighlightNode';
-import type { LineBreakNode, RangeSelection, TabNode } from 'lexical';
+import type { LexicalNode, LineBreakNode, RangeSelection, TabNode } from 'lexical';
 export declare function $getFirstCodeNodeOfLine(anchor: CodeHighlightNode | TabNode | LineBreakNode): CodeHighlightNode | TabNode | LineBreakNode;
 export declare function $getLastCodeNodeOfLine(anchor: CodeHighlightNode | TabNode | LineBreakNode): CodeHighlightNode | TabNode | LineBreakNode;
 /**
@@ -23,6 +23,15 @@ export declare function $getStartOfCodeInLine(anchor: CodeHighlightNode | TabNod
     offset: number;
 };
 export declare function $getEndOfCodeInLine(anchor: CodeHighlightNode | TabNode): CodeHighlightNode | TabNode;
+/**
+ * Plain split of code text into CodeHighlightNodes (with no highlight
+ * type) + LineBreakNodes + TabNodes. Used when the tokenizer opts out
+ * of a default language so a previously highlighted block still
+ * renders its `\n` / `\t` as real line breaks / tabs, while staying
+ * compatible with the indent / shift-lines handlers that only accept
+ * CodeHighlightNode + TabNode + LineBreakNode inside a CodeNode.
+ */
+export declare function $plainifyCodeContent(text: string): LexicalNode[];
 /**
  * Strip up to `tabSize` leading spaces from a {@link CodeHighlightNode} that
  * starts a code line, to support outdenting space-indented code lines (e.g.

package/{LexicalCodeCore.dev.js → dist/LexicalCodeCore.dev.js}

@@ -10,6 +10,7 @@
 
 var lexical = require('lexical');
 var extension = require('@lexical/extension');
+var html = require('@lexical/html');
 
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
@@ -19,6 +20,7 @@ var extension = require('@lexical/extension');
  *
  */
 
+
 /*@__INLINE__*/
 function warnOnlyOnce(message) {
   {
@@ -192,6 +194,34 @@ function $getEndOfCodeInLine(anchor) {
   return lastNode;
 }
 
+/**
+ * Plain split of code text into CodeHighlightNodes (with no highlight
+ * type) + LineBreakNodes + TabNodes. Used when the tokenizer opts out
+ * of a default language so a previously highlighted block still
+ * renders its `\n` / `\t` as real line breaks / tabs, while staying
+ * compatible with the indent / shift-lines handlers that only accept
+ * CodeHighlightNode + TabNode + LineBreakNode inside a CodeNode.
+ */
+function $plainifyCodeContent(text) {
+  const out = [];
+  const lines = text.split('\n');
+  lines.forEach((line, lineIdx) => {
+    if (lineIdx > 0) {
+      out.push(lexical.$createLineBreakNode());
+    }
+    const tabParts = line.split('\t');
+    tabParts.forEach((part, partIdx) => {
+      if (partIdx > 0) {
+        out.push(lexical.$createTabNode());
+      }
+      if (part.length > 0) {
+        out.push($createCodeHighlightNode(part));
+      }
+    });
+  });
+  return out;
+}
+
 /**
  * Strip up to `tabSize` leading spaces from a {@link CodeHighlightNode} that
  * starts a code line, to support outdenting space-indented code lines (e.g.
@@ -238,6 +268,7 @@ function $outdentLeadingSpaces(node, tabSize, selection) {
  */
 
 const DEFAULT_CODE_LANGUAGE = 'javascript';
+/** @internal Configurable through the extensions. */
 const getDefaultCodeLanguage = () => DEFAULT_CODE_LANGUAGE;
 function hasChildDOMNodeTag(node, tagName) {
   for (const child of node.childNodes) {
@@ -250,7 +281,7 @@ function hasChildDOMNodeTag(node, tagName) {
   }
   return false;
 }
-const LANGUAGE_DATA_ATTRIBUTE = 'data-language';
+const LANGUAGE_DATA_ATTRIBUTE$1 = 'data-language';
 const HIGHLIGHT_LANGUAGE_DATA_ATTRIBUTE = 'data-highlight-language';
 const THEME_DATA_ATTRIBUTE = 'data-theme';
 const noExtensionDeprecation = warnOnlyOnce('Using CodeNode without CodeExtension is deprecated');
@@ -289,7 +320,7 @@ class CodeNode extends lexical.ElementNode {
     element.setAttribute('spellcheck', 'false');
     const language = this.getLanguage();
     if (language) {
-      element.setAttribute(LANGUAGE_DATA_ATTRIBUTE, language);
+      element.setAttribute(LANGUAGE_DATA_ATTRIBUTE$1, language);
       if (this.getIsSyntaxHighlightSupported()) {
         element.setAttribute(HIGHLIGHT_LANGUAGE_DATA_ATTRIBUTE, language);
       }
@@ -309,10 +340,10 @@ class CodeNode extends lexical.ElementNode {
     const prevLanguage = prevNode.__language;
     if (language) {
       if (language !== prevLanguage) {
-        dom.setAttribute(LANGUAGE_DATA_ATTRIBUTE, language);
+        dom.setAttribute(LANGUAGE_DATA_ATTRIBUTE$1, language);
       }
     } else if (prevLanguage) {
-      dom.removeAttribute(LANGUAGE_DATA_ATTRIBUTE);
+      dom.removeAttribute(LANGUAGE_DATA_ATTRIBUTE$1);
     }
     const isSyntaxHighlightSupported = this.__isSyntaxHighlightSupported;
     const prevIsSyntaxHighlightSupported = prevNode.__isSyntaxHighlightSupported;
@@ -349,7 +380,7 @@ class CodeNode extends lexical.ElementNode {
     element.setAttribute('spellcheck', 'false');
     const language = this.getLanguage();
     if (language) {
-      element.setAttribute(LANGUAGE_DATA_ATTRIBUTE, language);
+      element.setAttribute(LANGUAGE_DATA_ATTRIBUTE$1, language);
       if (this.getIsSyntaxHighlightSupported()) {
         element.setAttribute(HIGHLIGHT_LANGUAGE_DATA_ATTRIBUTE, language);
       }
@@ -548,7 +579,7 @@ function $isCodeNode(node) {
   return node instanceof CodeNode;
 }
 function $convertPreElement(domNode) {
-  const language = domNode.getAttribute(LANGUAGE_DATA_ATTRIBUTE);
+  const language = domNode.getAttribute(LANGUAGE_DATA_ATTRIBUTE$1);
   return {
     node: $createCodeNode(language)
   };
@@ -736,6 +767,331 @@ const CodeExtension = lexical.defineExtension({
   }
 });
 
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+const LANGUAGE_DATA_ATTRIBUTE = 'data-language';
+
+/**
+ * True for elements whose `font-family` mentions `monospace` — the
+ * heuristic the legacy `<div>` rule uses to spot copy-pasted code blocks
+ * (e.g. Google Docs serializes a code block as a styled `<div>`).
+ */
+function isMonospaceElement(el) {
+  return el.style.fontFamily.match('monospace') !== null;
+}
+function isMonospaceDescendant(node) {
+  let parent = node.parentElement;
+  while (parent !== null) {
+    if (isMonospaceElement(parent)) {
+      return true;
+    }
+    parent = parent.parentElement;
+  }
+  return false;
+}
+
+/**
+ * Overlay rules active only while {@link GitHubCodeTableRule} is
+ * processing its children. Inside the code-table subtree, every `<tr>`
+ * and `<td>` unwraps unconditionally — they never become table-row /
+ * table-cell nodes (even when `@lexical/table` registers its rules for
+ * those tags). Outside the subtree, this overlay isn't installed, so
+ * the cost of these rules is never paid against unrelated `<tr>` /
+ * `<td>` pastes.
+ */
+const GitHubCodeTableOverlayRules = html.defineOverlayRules([html.defineImportRule({
+  $import: (ctx, el) => ctx.$importChildren(el),
+  match: html.sel.tag('tr', 'td'),
+  name: '@lexical/code/github-code-table/unwrap'
+})]);
+const PreRule = html.defineImportRule({
+  $import: (ctx, el) => [$createCodeNode(el.getAttribute(LANGUAGE_DATA_ATTRIBUTE)).splice(0, 0, ctx.$importChildren(el))],
+  match: html.sel.tag('pre'),
+  name: '@lexical/code/pre'
+});
+
+/**
+ * Multi-line `<code>` (containing newlines or `<br>`) is treated as a
+ * block code element — mirrors the legacy behavior. Single-line `<code>`
+ * defers to the inline-format rule from `CoreImportExtension` so it
+ * becomes a TextNode with IS_CODE.
+ */
+const MultilineCodeRule = html.defineImportRule({
+  $import: (ctx, el, $next) => {
+    const text = el.textContent || '';
+    const isMultiLine = /\r?\n/.test(text) || el.querySelector('br') !== null;
+    if (!isMultiLine) {
+      return $next();
+    }
+    return [$createCodeNode(el.getAttribute(LANGUAGE_DATA_ATTRIBUTE)).splice(0, 0, ctx.$importChildren(el))];
+  },
+  match: html.sel.tag('code'),
+  name: '@lexical/code/code-multiline'
+});
+
+/**
+ * True for elements carrying BOTH `font-family: …monospace…` and
+ * `white-space: pre*` inline — the shape VS Code uses for every line
+ * of a copied code block (on every per-line `<div>` on Safari, on
+ * the single outer wrapper on Chrome).
+ */
+function isMonospacePreElement(el) {
+  if (!lexical.isHTMLElement(el)) {
+    return false;
+  }
+  const ff = el.style.fontFamily;
+  const ws = el.style.whiteSpace;
+  return typeof ff === 'string' && /monospace/i.test(ff) && typeof ws === 'string' && ws.startsWith('pre');
+}
+
+/**
+ * Split a monospace-pre wrapper element into logical code lines:
+ * `<div>` children contribute their text content as one line,
+ * `<br>` children contribute an empty line, inline children (spans
+ * and bare text) accumulate into the current line until the next
+ * block child.
+ *
+ * Returns `null` if `el` has no block children (i.e. it's a leaf
+ * line, not a wrapper) so the caller can leave it to the
+ * sibling-run pass.
+ */
+function splitMonospaceWrapperLines(el) {
+  let hasBlockChild = false;
+  const lines = [];
+  let acc = '';
+  let hasAcc = false;
+  const flush = () => {
+    if (hasAcc) {
+      lines.push(acc);
+      acc = '';
+      hasAcc = false;
+    }
+  };
+  for (const child of Array.from(el.childNodes)) {
+    if (lexical.isHTMLElement(child)) {
+      if (child.tagName === 'DIV') {
+        flush();
+        lines.push(child.textContent || '');
+        hasBlockChild = true;
+      } else if (child.tagName === 'BR') {
+        flush();
+        lines.push('');
+        hasBlockChild = true;
+      } else {
+        acc += child.textContent || '';
+        hasAcc = true;
+      }
+    } else if (lexical.isDOMTextNode(child)) {
+      const t = child.textContent || '';
+      if (t.length > 0) {
+        acc += t;
+        hasAcc = true;
+      }
+    }
+  }
+  flush();
+  return hasBlockChild ? lines : null;
+}
+
+/**
+ * Returns `true` if `root` contains the structural signature of a
+ * VS Code code-block paste:
+ *
+ *  - a monospace+pre `<div>` wrapper with at least one block (`<div>` /
+ *    `<br>`) child — the Chrome shape, or
+ *  - two or more consecutive monospace+pre siblings — the Safari shape.
+ *
+ * Walked once in preprocess; the matching overlay is only installed
+ * when this returns `true` so an unrelated paste doesn't pay for the
+ * detection or rule cost.
+ */
+function looksLikeVscodePaste(root) {
+  for (const child of Array.from(root.children)) {
+    if (lexical.isHTMLElement(child) && isMonospacePreElement(child)) {
+      const lines = splitMonospaceWrapperLines(child);
+      if (lines !== null) {
+        return true;
+      }
+      const next = child.nextElementSibling;
+      if (next && isMonospacePreElement(next)) {
+        return true;
+      }
+      continue;
+    }
+    if (looksLikeVscodePaste(child)) {
+      return true;
+    }
+  }
+  return false;
+}
+
+/**
+ * Match a monospace+pre `<div>` whose direct children include block
+ * (`<div>` / `<br>`) elements — the Chrome shape, one outer wrapper
+ * around per-line `<div>`s and `<br>`s. Emits a single CodeNode whose
+ * text is the wrapper's lines joined by `\n`.
+ */
+const VscodeWrapperRule = html.defineImportRule({
+  $import: (_ctx, el, $next) => {
+    if (!isMonospacePreElement(el) || isMonospaceDescendant(el)) {
+      return $next();
+    }
+    const lines = splitMonospaceWrapperLines(el);
+    if (lines === null || lines.length === 0) {
+      return $next();
+    }
+    return [$createCodeNode().splice(0, 0, lexical.$generateNodesFromRawText(lines.join('\n')))];
+  },
+  match: html.sel.tag('div'),
+  name: '@lexical/code/vscode-wrapper'
+});
+
+/**
+ * Match the first of a run of consecutive monospace+pre `<div>` /
+ * `<br>` siblings (the Safari shape) and emit one CodeNode for the
+ * whole run. When the framework's per-child dispatch lands on a
+ * subsequent sibling in the same run, the prev-sibling check below
+ * returns `[]` so the run is only emitted once.
+ */
+const VscodeLineRunRule = html.defineImportRule({
+  $import: (_ctx, el, $next) => {
+    if (!isMonospacePreElement(el) || isMonospaceDescendant(el)) {
+      return $next();
+    }
+    const prev = el.previousElementSibling;
+    if (prev && isMonospacePreElement(prev)) {
+      // An earlier sibling's walk already absorbed `el` into its run.
+      return [];
+    }
+    const lines = [];
+    let cur = el;
+    while (cur && isMonospacePreElement(cur)) {
+      lines.push(cur.tagName === 'BR' ? '' : cur.textContent || '');
+      cur = cur.nextElementSibling;
+    }
+    if (lines.length < 2) {
+      return $next();
+    }
+    return [$createCodeNode().splice(0, 0, lexical.$generateNodesFromRawText(lines.join('\n')))];
+  },
+  match: html.sel.tag('div', 'br'),
+  name: '@lexical/code/vscode-line-run'
+});
+const VscodeCodePasteOverlay = html.defineOverlayRules([VscodeWrapperRule, VscodeLineRunRule]);
+
+/**
+ * VS Code → browser code-block pastes ship the block as either:
+ *
+ *  - **Chrome**: one outer
+ *    `<div style="font-family: …monospace…; white-space: pre">…</div>`
+ *    wrapping per-line `<div>`s and `<br>`s.
+ *  - **Safari**: a flat run of sibling
+ *    `<div style="…monospace…; white-space: pre">…</div>` and
+ *    `<br style="…monospace…; …">` elements with no wrapping
+ *    monospace ancestor (the styles are duplicated onto every
+ *    element).
+ *
+ * The legacy `<div>` rule (and {@link DivRule}) produces one CodeNode
+ * per `<div>` on Safari and concatenates inner divs without
+ * separating `\n`s on Chrome. This preprocess scans once for the
+ * structural signature and, only when it matches, pushes
+ * {@link VscodeCodePasteOverlay} onto {@link ImportOverlays} so the
+ * VS Code-specific rules participate in the walk. Pastes from other
+ * sources pay only the detection cost.
+ *
+ * @experimental
+ */
+const $installVscodeCodePasteOverlay = (dom, ctx, $next) => {
+  const root = lexical.isDOMDocumentNode(dom) ? dom.body : dom;
+  if (looksLikeVscodePaste(root)) {
+    ctx.session.update(html.ImportOverlays, prev => [...prev, VscodeCodePasteOverlay]);
+  }
+  $next();
+};
+
+/**
+ * A `<div style="font-family: …monospace…">` (Google-Docs-style code
+ * block) creates a CodeNode. Descendant elements inside a monospace
+ * wrapper just unwrap so their text content flows into the surrounding
+ * CodeNode.
+ */
+const DivRule = html.defineImportRule({
+  $import: (ctx, el, $next) => {
+    if (isMonospaceElement(el)) {
+      return [$createCodeNode().splice(0, 0, ctx.$importChildren(el))];
+    }
+    if (isMonospaceDescendant(el)) {
+      // Unwrap so children flow into the enclosing CodeNode.
+      return ctx.$importChildren(el);
+    }
+    return $next();
+  },
+  match: html.sel.tag('div'),
+  name: '@lexical/code/div'
+});
+
+/**
+ * GitHub raw-file-view `<table class="js-file-line-container">` becomes
+ * a CodeNode. Walking the table's children pushes an overlay (see
+ * {@link GitHubCodeTableOverlayRules}) so `<tr>` / `<td>` inside this
+ * subtree unwrap unconditionally — without paying the predicate cost
+ * on every other `<tr>` / `<td>` paste elsewhere.
+ */
+const GitHubCodeTableRule = html.defineImportRule({
+  $import: (ctx, el) => [$createCodeNode().splice(0, 0, ctx.$importChildren(el, {
+    rules: GitHubCodeTableOverlayRules
+  }))],
+  match: html.sel.tag('table').classAll('js-file-line-container'),
+  name: '@lexical/code/github-code-table'
+});
+
+/**
+ * Stray `<td class="js-file-line">` (cell with the explicit GitHub code-
+ * line class but no surrounding code-table wrapper) — unwrap so the
+ * descendant text flows up into whatever context the cell is in. The
+ * class is part of the selector itself, so no runtime guard.
+ */
+const GitHubCodeCellByClassRule = html.defineImportRule({
+  $import: (ctx, el) => ctx.$importChildren(el),
+  match: html.sel.tag('td').classAll('js-file-line'),
+  name: '@lexical/code/github-code-cell-by-class'
+});
+
+/**
+ * Import rules for {@link CodeNode}.
+ *
+ * Specific class-restricted rules (GitHub raw-file-view detectors) are
+ * registered before the generic `<table>` / `<tr>` / `<td>` rules so
+ * they win dispatch.
+ *
+ * @experimental
+ */
+const CodeImportRules = [
+// Higher-priority (more-specific) rules first:
+GitHubCodeTableRule, GitHubCodeCellByClassRule, MultilineCodeRule, PreRule, DivRule];
+
+/**
+ * Bundles {@link CodeImportRules} (plus {@link CoreImportExtension}) into
+ * a single dependency. The legacy {@link CodeNode.importDOM} continues to
+ * work in parallel; depend on this extension to opt into the new
+ * pipeline.
+ *
+ * @experimental
+ */
+const CodeImportExtension = lexical.defineExtension({
+  dependencies: [html.CoreImportExtension, CodeExtension, lexical.configExtension(html.DOMImportExtension, {
+    preprocess: [$installVscodeCodePasteOverlay],
+    rules: CodeImportRules
+  })],
+  name: '@lexical/code/Import'
+});
+
 function $isSelectionInCode(selection) {
   if (!lexical.$isRangeSelection(selection)) {
     return false;
@@ -1029,6 +1385,15 @@ function $handleMoveTo(type, event) {
   const focusLineNode = focusNode;
   const direction = $getCodeLineDirection(focusLineNode);
   const moveToStart = direction === 'rtl' ? !isMoveToStart : isMoveToStart;
+
+  // Shift variant: let the non-shift branches resolve the target via
+  // framework helpers (`selectNext` / `selectStart` / `setTextNodeRange` /
+  // `node.select`), then restore the original anchor so we end up with an
+  // extended selection rather than a collapsed caret. This keeps point
+  // shapes (text vs. element) consistent between shift and non-shift.
+  const originalAnchorKey = anchor.key;
+  const originalAnchorOffset = anchor.offset;
+  const originalAnchorType = anchor.type;
   if (moveToStart) {
     const start = $getStartOfCodeInLine(focusLineNode, focus.offset);
     if (start !== null) {
@@ -1048,6 +1413,9 @@ function $handleMoveTo(type, event) {
     const node = $getEndOfCodeInLine(focusLineNode);
     node.select();
   }
+  if (event.shiftKey) {
+    selection.anchor.set(originalAnchorKey, originalAnchorOffset, originalAnchorType);
+  }
   event.preventDefault();
   event.stopPropagation();
   return true;
@@ -1162,8 +1530,11 @@ exports.$getStartOfCodeInLine = $getStartOfCodeInLine;
 exports.$isCodeHighlightNode = $isCodeHighlightNode;
 exports.$isCodeNode = $isCodeNode;
 exports.$outdentLeadingSpaces = $outdentLeadingSpaces;
+exports.$plainifyCodeContent = $plainifyCodeContent;
 exports.CodeExtension = CodeExtension;
 exports.CodeHighlightNode = CodeHighlightNode;
+exports.CodeImportExtension = CodeImportExtension;
+exports.CodeImportRules = CodeImportRules;
 exports.CodeIndentExtension = CodeIndentExtension;
 exports.CodeNode = CodeNode;
 exports.DEFAULT_CODE_LANGUAGE = DEFAULT_CODE_LANGUAGE;