@lexical/rich-text 0.44.1-nightly.20260519.0 → 0.45.1-dev.0

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

@@ -9,11 +9,12 @@
 'use strict';
 
 var clipboard = require('@lexical/clipboard');
-var dragon = require('@lexical/dragon');
 var extension = require('@lexical/extension');
 var selection = require('@lexical/selection');
 var utils = require('@lexical/utils');
 var lexical = require('lexical');
+var dragon = require('@lexical/dragon');
+var html = require('@lexical/html');
 
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
@@ -23,32 +24,82 @@ var lexical = require('lexical');
  *
  */
 
-function caretFromPoint(x, y) {
-  if (typeof document.caretRangeFromPoint !== 'undefined') {
-    const range = document.caretRangeFromPoint(x, y);
-    if (range === null) {
-      return null;
-    }
-    return {
-      node: range.startContainer,
-      offset: range.startOffset
-    };
-    // @ts-ignore
-  } else if (document.caretPositionFromPoint !== 'undefined') {
-    // @ts-ignore FF - no types
-    const range = document.caretPositionFromPoint(x, y);
-    if (range === null) {
-      return null;
+
+/**
+ * Configuration for {@link RichTextExtension}.
+ *
+ * @property escapeFormatTriggers - Per-format trigger configuration that
+ *   controls which text formats are automatically cleared from the selection
+ *   on specific user interactions.
+ *
+ *   Defaults to:
+ *   ```ts
+ *   {
+ *     capitalize: {enter: true, space: true, tab: true},
+ *     lowercase: {enter: true, space: true, tab: true},
+ *     uppercase: {enter: true, space: true, tab: true},
+ *   }
+ *   ```
+ *
+ *   To opt in to escaping `code` formatting at text node boundaries:
+ *   ```ts
+ *   configExtension(RichTextExtension, {
+ *     escapeFormatTriggers: {
+ *       code: {onlyAtBoundary: true, enter: true, click: true, arrow: true},
+ *     },
+ *   })
+ *   ```
+ */
+
+const DEFAULT_RICH_TEXT_CONFIG = {
+  escapeFormatTriggers: {
+    capitalize: {
+      enter: true,
+      space: true,
+      tab: true
+    },
+    lowercase: {
+      enter: true,
+      space: true,
+      tab: true
+    },
+    uppercase: {
+      enter: true,
+      space: true,
+      tab: true
     }
-    return {
-      node: range.offsetNode,
-      offset: range.offset
-    };
-  } else {
-    // Gracefully handle IE
-    return null;
   }
+};
+function mergeTriggerConfig(config, override) {
+  if (!config || override === null) {
+    return override;
+  }
+  return lexical.shallowMergeConfig(config, override);
 }
+function mergeEscapeFormatTriggers(config, overrides) {
+  const merged = lexical.shallowMergeConfig(config, overrides);
+  for (const k of Object.keys(overrides)) {
+    merged[k] = mergeTriggerConfig(config[k], overrides[k]);
+  }
+  return merged;
+}
+function mergeRichTextConfig(config, overrides) {
+  const merged = lexical.shallowMergeConfig(config, overrides);
+  if (overrides.escapeFormatTriggers) {
+    merged.escapeFormatTriggers = mergeEscapeFormatTriggers(config.escapeFormatTriggers, overrides.escapeFormatTriggers);
+  }
+  return merged;
+}
+const RichTextExtension = lexical.defineExtension({
+  build: (_editor, config) => extension.namedSignals(config),
+  config: lexical.safeCast(DEFAULT_RICH_TEXT_CONFIG),
+  conflictsWith: ['@lexical/plain-text'],
+  dependencies: [dragon.DragonExtension, extension.NormalizeInlineElementsExtension, extension.NormalizeTripleClickSelectionExtension],
+  mergeConfig: mergeRichTextConfig,
+  name: '@lexical/rich-text',
+  nodes: () => [HeadingNode, QuoteNode],
+  register: (editor, _config, state) => extension.effect(() => registerRichText(editor, state.getOutput().escapeFormatTriggers))
+});
 
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
@@ -58,30 +109,90 @@ function caretFromPoint(x, y) {
  *
  */
 
-const CAN_USE_DOM = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined';
 
 /**
- * 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.
- *
+ * Heuristic copied (in spirit) from the legacy `isGoogleDocsTitle`:
+ * Google Docs serializes the document title as a `<span style="font-size:
+ * 26pt">` (sometimes wrapped in a `<p>`). The presence of a 26pt span at
+ * the start of a `<p>` is treated as a heading-1 marker.
  */
+function isGoogleDocsTitleSpan(node) {
+  return lexical.isHTMLElement(node) && node.nodeName === 'SPAN' && node.style.fontSize === '26pt';
+}
+const HeadingRule = html.defineImportRule({
+  $import: (ctx, el) => {
+    const tag = el.nodeName.toLowerCase();
+    const node = $createHeadingNode(tag);
+    lexical.setNodeIndentFromDOM(el, node);
+    lexical.$setFormatFromDOM(node, el);
+    lexical.$setDirectionFromDOM(node, el);
+    return [node.splice(0, 0, ctx.$importChildren(el))];
+  },
+  match: html.sel.tag('h1', 'h2', 'h3', 'h4', 'h5', 'h6'),
+  name: '@lexical/rich-text/heading'
+});
+const QuoteRule = html.defineImportRule({
+  $import: (ctx, el) => {
+    const node = $createQuoteNode();
+    lexical.$setFormatFromDOM(node, el);
+    lexical.setNodeIndentFromDOM(el, node);
+    lexical.$setDirectionFromDOM(node, el);
+    return [node.splice(0, 0, ctx.$importChildren(el))];
+  },
+  match: html.sel.tag('blockquote'),
+  name: '@lexical/rich-text/blockquote'
+});
 
-const documentMode = CAN_USE_DOM && 'documentMode' in document ? document.documentMode : null;
-const IS_APPLE = CAN_USE_DOM && /Mac|iPod|iPhone|iPad/.test(navigator.platform);
-const CAN_USE_BEFORE_INPUT = CAN_USE_DOM && 'InputEvent' in window && !documentMode ? 'getTargetRanges' in new window.InputEvent('input') : false;
-const IS_IOS = CAN_USE_DOM && /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
-const IS_ANDROID = CAN_USE_DOM && /Android/.test(navigator.userAgent);
+/**
+ * Google-Docs paragraph wrapper around a title span: drop the paragraph,
+ * let the span rule below promote to a heading. The body deliberately
+ * returns the children unwrapped (no schema, no own node) so the
+ * descendant rules — including {@link GoogleDocsTitleSpanRule} — fire and
+ * produce the heading at this level.
+ */
+const GoogleDocsTitleParagraphRule = html.defineImportRule({
+  $import: (ctx, el, $next) => {
+    const first = el.firstChild;
+    if (first && isGoogleDocsTitleSpan(first)) {
+      return ctx.$importChildren(el);
+    }
+    return $next();
+  },
+  match: html.sel.tag('p'),
+  name: '@lexical/rich-text/google-docs-title-p'
+});
+const GoogleDocsTitleSpanRule = html.defineImportRule({
+  $import: (ctx, el, $next) => el.style.fontSize !== '26pt' ? $next() : [$createHeadingNode('h1').splice(0, 0, ctx.$importChildren(el))],
+  match: html.sel.tag('span'),
+  name: '@lexical/rich-text/google-docs-title-span'
+});
 
-// Exclude Android — Android WebView's UA contains "Version/X.X ... Safari/537.36"
-// which falsely matches the Safari regex, activating wrong composition code paths.
-const IS_SAFARI = CAN_USE_DOM && /Version\/[\d.]+.*Safari/.test(navigator.userAgent) && !IS_ANDROID;
+/**
+ * Import rules for {@link HeadingNode} and {@link QuoteNode}, including
+ * the Google Docs title heuristic that the legacy `HeadingNode.importDOM`
+ * declared. The Google-Docs rules are registered last (highest priority)
+ * so they precede the generic `<p>` and `<span>` rules from
+ * {@link CoreImportRules}.
+ *
+ * @experimental
+ */
+const RichTextImportRules = [HeadingRule, QuoteRule, GoogleDocsTitleParagraphRule, GoogleDocsTitleSpanRule];
 
-// Keep these in case we need to use them in the future.
-// export const IS_WINDOWS: boolean = CAN_USE_DOM && /Win/.test(navigator.platform);
-const IS_CHROME = CAN_USE_DOM && /^(?=.*Chrome).*/i.test(navigator.userAgent);
-const IS_APPLE_WEBKIT = CAN_USE_DOM && /AppleWebKit\/[\d.]+/.test(navigator.userAgent) && IS_APPLE && !IS_CHROME;
+/**
+ * Bundles {@link RichTextImportRules} together with the runtime
+ * {@link RichTextExtension}. The application is expected to already
+ * have `CoreImportExtension` (or some equivalent) in its dependency
+ * graph — the core/text/paragraph/inline-format rules are a shared
+ * baseline, not something this leaf importer should re-declare.
+ *
+ * @experimental
+ */
+const RichTextImportExtension = lexical.defineExtension({
+  dependencies: [RichTextExtension, lexical.configExtension(html.DOMImportExtension, {
+    rules: RichTextImportRules
+  })],
+  name: '@lexical/rich-text/Import'
+});
 
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
@@ -459,59 +570,6 @@ function $isSelectionCollapsedAtFrontOfIndentedBlock(selection) {
  * (useful when overriding defaults via `configExtension`).
  */
 
-/**
- * Configuration for {@link RichTextExtension}.
- *
- * @property escapeFormatTriggers - Per-format trigger configuration that
- *   controls which text formats are automatically cleared from the selection
- *   on specific user interactions.
- *
- *   Defaults to:
- *   ```ts
- *   {
- *     capitalize: {enter: true, space: true, tab: true},
- *     lowercase: {enter: true, space: true, tab: true},
- *     uppercase: {enter: true, space: true, tab: true},
- *   }
- *   ```
- *
- *   To opt in to escaping `code` formatting at text node boundaries:
- *   ```ts
- *   configExtension(RichTextExtension, {
- *     escapeFormatTriggers: {
- *       code: {onlyAtBoundary: true, enter: true, click: true, arrow: true},
- *     },
- *   })
- *   ```
- *
- * @property normalizeInlineElements - Adds normalization for each
- * subclass of ElementNode, which removes empty inline elements.
- * This option is intended to facilitate a smooth migration
- * from the plugin API and may be removed in the future
- *
- * Default: true
- *
- */
-
-const DEFAULT_RICH_TEXT_CONFIG = {
-  escapeFormatTriggers: {
-    capitalize: {
-      enter: true,
-      space: true,
-      tab: true
-    },
-    lowercase: {
-      enter: true,
-      space: true,
-      tab: true
-    },
-    uppercase: {
-      enter: true,
-      space: true,
-      tab: true
-    }
-  }
-};
 function $escapeFormatsForTrigger(selection, trigger, direction, config) {
   let isBoundary = false;
   let anchorNode = null;
@@ -545,27 +603,24 @@ function $escapeFormatsForTrigger(selection, trigger, direction, config) {
     selection.setStyle('');
   }
 }
-function mergeEscapeFormatTriggers(config, overrides) {
-  const merged = lexical.shallowMergeConfig(config, overrides);
-  for (const k of Object.keys(overrides)) {
-    merged[k] = mergeTriggerConfig(config[k], overrides[k]);
+const DEFAULT_ESCAPE_FORMAT_TRIGGERS = {
+  capitalize: {
+    enter: true,
+    space: true,
+    tab: true
+  },
+  lowercase: {
+    enter: true,
+    space: true,
+    tab: true
+  },
+  uppercase: {
+    enter: true,
+    space: true,
+    tab: true
   }
-  return merged;
-}
-function mergeTriggerConfig(config, override) {
-  if (!config || override === null) {
-    return override;
-  }
-  return lexical.shallowMergeConfig(config, override);
-}
-function mergeRichTextConfig(config, overrides) {
-  const merged = lexical.shallowMergeConfig(config, overrides);
-  if (overrides.escapeFormatTriggers) {
-    merged.escapeFormatTriggers = mergeEscapeFormatTriggers(config.escapeFormatTriggers, overrides.escapeFormatTriggers);
-  }
-  return merged;
-}
-function registerRichText(editor, escapeFormatTriggers = extension.signal(DEFAULT_RICH_TEXT_CONFIG.escapeFormatTriggers)) {
+};
+function registerRichText(editor, escapeFormatTriggers = extension.signal(DEFAULT_ESCAPE_FORMAT_TRIGGERS)) {
   const removeListener = utils.mergeRegister(editor.registerCommand(lexical.CLICK_COMMAND, () => {
     const selection = lexical.$getSelection();
     if (lexical.$isNodeSelection(selection)) {
@@ -798,7 +853,7 @@ function registerRichText(editor, escapeFormatTriggers = extension.signal(DEFAUL
       }
       // Exception handling for iOS native behavior instead of Lexical's behavior when using Korean on iOS devices.
       // more details - https://github.com/facebook/lexical/issues/5841
-      if (IS_IOS && navigator.language === 'ko-KR') {
+      if (lexical.IS_IOS && navigator.language === 'ko-KR') {
         return false;
       }
     } else if (!lexical.$isNodeSelection(selection)) {
@@ -817,7 +872,20 @@ function registerRichText(editor, escapeFormatTriggers = extension.signal(DEFAUL
     event.preventDefault();
     return editor.dispatchCommand(lexical.DELETE_CHARACTER_COMMAND, false);
   }, lexical.COMMAND_PRIORITY_EDITOR), editor.registerCommand(lexical.KEY_ENTER_COMMAND, event => {
-    const selection = lexical.$getSelection();
+    let selection = lexical.$getSelection();
+    // When a block-level DecoratorNode is selected as a NodeSelection
+    // (e.g. it is the only root child after the user removed all
+    // surrounding paragraphs), Enter has no RangeSelection to act on
+    // and the default handler bails out, leaving the editor stuck.
+    // Convert to a RangeSelection past the decorator so the default
+    // RangeSelection handler below inserts a paragraph and places
+    // the caret.
+    if (lexical.$isNodeSelection(selection)) {
+      const nodes = selection.getNodes();
+      if (nodes.length === 1 && lexical.$isDecoratorNode(nodes[0]) && !nodes[0].isInline()) {
+        selection = nodes[0].selectNext();
+      }
+    }
     if (!lexical.$isRangeSelection(selection)) {
       return false;
     }
@@ -830,7 +898,7 @@ function registerRichText(editor, escapeFormatTriggers = extension.signal(DEFAUL
       // This can also cause a strange performance issue in
       // Safari, where there is a noticeable pause due to
       // preventing the key down of enter.
-      if ((IS_IOS || IS_SAFARI || IS_APPLE_WEBKIT) && CAN_USE_BEFORE_INPUT) {
+      if ((lexical.IS_IOS || lexical.IS_SAFARI || lexical.IS_APPLE_WEBKIT) && lexical.CAN_USE_BEFORE_INPUT) {
         return false;
       }
       event.preventDefault();
@@ -851,7 +919,7 @@ function registerRichText(editor, escapeFormatTriggers = extension.signal(DEFAUL
     if (files.length > 0) {
       const x = event.clientX;
       const y = event.clientY;
-      const eventRange = caretFromPoint(x, y);
+      const eventRange = clipboard.caretFromPoint(x, y);
       if (eventRange !== null) {
         const {
           offset: domOffset,
@@ -902,7 +970,7 @@ function registerRichText(editor, escapeFormatTriggers = extension.signal(DEFAUL
     }
     const x = event.clientX;
     const y = event.clientY;
-    const eventRange = caretFromPoint(x, y);
+    const eventRange = clipboard.caretFromPoint(x, y);
     if (eventRange !== null) {
       const node = lexical.$getNearestNodeFromDOMNode(eventRange.node);
       if (lexical.$isDecoratorNode(node)) {
@@ -950,37 +1018,88 @@ function registerRichText(editor, escapeFormatTriggers = extension.signal(DEFAUL
       $escapeFormatsForTrigger(selection, 'tab', 'both', escapeFormatTriggers.peek());
     }
     return false;
+  }, lexical.COMMAND_PRIORITY_EDITOR), editor.registerCommand(lexical.MOVE_TO_END, event => {
+    const selection = lexical.$getSelection();
+    if (!lexical.$isRangeSelection(selection)) {
+      return false;
+    }
+    const {
+      anchor
+    } = selection;
+    if (anchor.type !== 'element' || anchor.offset !== 0) {
+      return false;
+    }
+    const element = anchor.getNode();
+    if (!lexical.$isElementNode(element)) {
+      return false;
+    }
+    const firstChild = element.getFirstChild();
+    if (!lexical.$isDecoratorNode(firstChild) || !firstChild.isInline()) {
+      return false;
+    }
+    const lastDescendant = element.getLastDescendant();
+    if (lastDescendant == null || lexical.$isDecoratorNode(lastDescendant)) {
+      // No selectable text — fall through to native browser behavior.
+      return false;
+    }
+    // Native browser cursor traversal stops at the inline decorator's
+    // contenteditable=false boundary when the caret starts at element
+    // offset 0, so MOVE_TO_END leaves the caret stuck. Move it ourselves.
+    const elementKey = element.getKey();
+    const ending = element.selectEnd();
+    if (event.shiftKey) {
+      ending.anchor.set(elementKey, 0, 'element');
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    return true;
+  }, lexical.COMMAND_PRIORITY_EDITOR), editor.registerCommand(lexical.MOVE_TO_START, event => {
+    const selection = lexical.$getSelection();
+    if (!lexical.$isRangeSelection(selection)) {
+      return false;
+    }
+    const {
+      anchor,
+      focus
+    } = selection;
+    const focusBlock = utils.$findMatchingParent(focus.getNode(), node => lexical.$isElementNode(node) && !node.isInline());
+    if (focusBlock === null) {
+      return false;
+    }
+    const firstChild = focusBlock.getFirstChild();
+    if (!lexical.$isDecoratorNode(firstChild) || !firstChild.isInline()) {
+      return false;
+    }
+    const lastDescendant = focusBlock.getLastDescendant();
+    if (lastDescendant == null || lexical.$isDecoratorNode(lastDescendant)) {
+      // No selectable text — fall through to native browser behavior.
+      return false;
+    }
+    // Cross-block selections fall through to native handling. The
+    // Chromium boundary bug only matters when both endpoints sit
+    // inside the block whose first child is the inline decorator.
+    const anchorBlock = utils.$findMatchingParent(anchor.getNode(), node => lexical.$isElementNode(node) && !node.isInline());
+    if (anchorBlock !== focusBlock) {
+      return false;
+    }
+    const blockKey = focusBlock.getKey();
+    if (focus.type === 'element' && focus.key === blockKey && focus.offset === 0) {
+      return false;
+    }
+    // Symmetric to the MOVE_TO_END case: Chromium stops the native
+    // caret at the inline decorator's contenteditable=false boundary
+    // when moving backwards, so element offset 0 is unreachable.
+    selection.focus.set(blockKey, 0, 'element');
+    if (!event.shiftKey) {
+      selection.anchor.set(blockKey, 0, 'element');
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    return true;
   }, lexical.COMMAND_PRIORITY_EDITOR));
   return removeListener;
 }
 
-/**
- * An extension to register \@lexical/rich-text behavior and nodes
- * ({@link HeadingNode}, {@link QuoteNode}).
- *
- * Includes configurable format escape via `escapeFormatTriggers`.
- * Use `configExtension` to customize which formats escape on which triggers.
- *
- * @example
- * ```ts
- * configExtension(RichTextExtension, {
- *   escapeFormatTriggers: {
- *     code: {click: true, arrow: true},
- *   },
- * })
- * ```
- */
-const RichTextExtension = lexical.defineExtension({
-  build: (_editor, config) => extension.namedSignals(config),
-  config: lexical.safeCast(DEFAULT_RICH_TEXT_CONFIG),
-  conflictsWith: ['@lexical/plain-text'],
-  dependencies: [dragon.DragonExtension, extension.NormalizeInlineElementsExtension],
-  mergeConfig: mergeRichTextConfig,
-  name: '@lexical/rich-text',
-  nodes: () => [HeadingNode, QuoteNode],
-  register: (editor, _config, state) => extension.effect(() => registerRichText(editor, state.getOutput().escapeFormatTriggers))
-});
-
 exports.$createHeadingNode = $createHeadingNode;
 exports.$createQuoteNode = $createQuoteNode;
 exports.$isHeadingNode = $isHeadingNode;
@@ -989,5 +1108,7 @@ exports.DRAG_DROP_PASTE = DRAG_DROP_PASTE;
 exports.HeadingNode = HeadingNode;
 exports.QuoteNode = QuoteNode;
 exports.RichTextExtension = RichTextExtension;
+exports.RichTextImportExtension = RichTextImportExtension;
+exports.RichTextImportRules = RichTextImportRules;
 exports.eventFiles = eventFiles;
 exports.registerRichText = registerRichText;