Skip to content
This repository has been archived by the owner on Feb 6, 2023. It is now read-only.

Commit

Permalink
use pasted block type if pasting to empty unstyled block
Browse files Browse the repository at this point in the history
Summary:
DraftJS's paste handling is a little bit weird right now.

Suppose you have some arbitrary HTML that looks like this
```
<div>
  <h1>Some h1 content</h1>
  <span>Some other content</span>
</div>
```
or a DraftJS editor with an H1 block and an unstyled block with the same contents.

In either case, if you select both blocks of this content and paste into an empty editor, you get two blocks: one H1 and one unstyled.

But if you select *only the first block* and paste into an empty editor, you get a single unstyled block.

When you are inserting multiple blocks, `insertFragmentIntoContentState` checks whether to use the type of the target block or the pasted block based on whether the target block is empty:
```
return block.merge({
  text: headText + appendToHead.getText(),
  characterList: headCharacters.concat(appendToHead.getCharacterList()),
  type: headText ? block.getType() : appendToHead.getType(),
  data: appendToHead.getData(),
});
```
https://our.intern.facebook.com/intern/diffusion/WWW/browse/master/html/shared/draft-js/model/transaction/insertFragmentIntoContentState.js?commit=1001924671&lines=105

But when inserting a single block, this logic is not used.

This diff adds a similar check in `updateExistingBlock`, which handles the single block case. The difference is that the single block case **only** uses the inserted text's block type if the target block is **unstyled**. I did this because I thought it would be weird if you tried to paste text into a bulleted list or a block quote and it removed the styling.

Reviewed By: mrkev

Differential Revision: D20774564

fbshipit-source-id: c1490e17e5ecacea7891f9c7a5880f7eab8831e7
  • Loading branch information
Frank Thompson authored and facebook-github-bot committed Apr 2, 2020
1 parent 8576432 commit 7d3d3c8
Showing 1 changed file with 6 additions and 0 deletions.
6 changes: 6 additions & 0 deletions src/model/transaction/insertFragmentIntoContentState.js
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,11 @@ const updateExistingBlock = (
break;
}

let type = targetBlock.getType();
if (text && type === 'unstyled') {

This comment has been minimized.

Copy link
@hejtmii

hejtmii Jun 1, 2022

This applies the new block type in case of NONempty block, but it seems that the you wanted to apply it in case of empty block (based on commit message), which also makes more sense ...

type = fragmentBlock.getType();
}

const newBlock = targetBlock.merge({
text:
text.slice(0, targetOffset) +
Expand All @@ -66,6 +71,7 @@ const updateExistingBlock = (
fragmentBlock.getCharacterList(),
targetOffset,
),
type,
data,
});

Expand Down

0 comments on commit 7d3d3c8

Please sign in to comment.