Skip to content

[lexical-clipboard] Inherit style when typing after pasting rich text#7657

Merged
etrepum merged 5 commits intofacebook:mainfrom
achaljhawar:paste-style-inheritance
Jul 3, 2025
Merged

[lexical-clipboard] Inherit style when typing after pasting rich text#7657
etrepum merged 5 commits intofacebook:mainfrom
achaljhawar:paste-style-inheritance

Conversation

@achaljhawar
Copy link
Copy Markdown
Contributor

Description

When pasting rich text content, the editor selection's active format and style are now updated to match the style of the last character of the pasted content.

This ensures that continuing to type after a paste operation will correctly inherit the formatting (e.g., bold, italics, background-color, font-size) from the pasted material.

Closes #7490

Test plan

Before

Lexical.Playground.5.mp4

/automated-tests*

After

Lexical.Playground.4.mp4

@vercel
Copy link
Copy Markdown

vercel bot commented Jun 28, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
lexical ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jul 3, 2025 2:13pm
lexical-playground ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jul 3, 2025 2:13pm

@facebook-github-bot facebook-github-bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Jun 28, 2025
Copy link
Copy Markdown
Collaborator

@etrepum etrepum left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It probably makes sense to move this code into its own function (called by $insertGeneratedNodes) and write some tests for it.

The NodeCaret APIs could be used to iterate through the nodes in the 'previous' direction until a TextNode or block element is found

@achaljhawar
Copy link
Copy Markdown
Contributor Author

@etrepum how exactly should I use the the node caret api here?

@etrepum
Copy link
Copy Markdown
Collaborator

etrepum commented Jul 1, 2025

Probably something like this (untested):

// usage: nodeToInspect = $getClosestTextNodeInBlock($caretFromPoint(selection.anchor, 'previous'));
function $getClosestTextNodeInBlock<D extends CaretDirection>(anchorCaret: PointCaret<D>): null | TextNode {
  if ($isTextPointCaret(anchorCaret)) {
    return anchorCaret.origin;
  }
  const range = $getCaretRange(anchorCaret, $getChildCaret($getRoot(), 'next').getFlipped());
  for (const caret of range) {
    if ($isTextNode(caret.origin)) {
      return caret.origin;
    } else if ($isBlockElementNode(caret.origin)) {
      break;
    }
  }
  return null;
}

@achaljhawar
Copy link
Copy Markdown
Contributor Author

@etrepum I have implemented nodecaret apis update the logic as you said.

Copy link
Copy Markdown
Collaborator

@etrepum etrepum left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The code all looks good and I confirmed that it works as expected in the playground, the only thing missing here is a unit or e2e test to show that it works (and to prevent future regressions)

Copy link
Copy Markdown
Collaborator

@etrepum etrepum left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks right other than the nested editor.update

Copy link
Copy Markdown
Collaborator

@etrepum etrepum left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good! Nice work

@etrepum etrepum added this pull request to the merge queue Jul 3, 2025
Merged via the queue into facebook:main with commit 23f6862 Jul 3, 2025
39 checks passed
@etrepum etrepum mentioned this pull request Jul 3, 2025
fantactuka pushed a commit that referenced this pull request Aug 11, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. extended-tests Run extended e2e tests on a PR

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Bug: Selection changes when typing after pasting

3 participants