Interpret whitespace after entity as the end of the entity
The easiest way to stop the user from inserting whitespace onto the end of an entity is to toggle the entity state of the whitespace that was just entered. This allows the user to continue drafting a message without editing the link content. This is for pasted `<a>` tags that have been copied from a website. We probably also want to be storing entities for substrings of content that are determined to be URLs.
This commit is contained in:
parent
4b96963408
commit
be045a6dc0
1 changed files with 28 additions and 0 deletions
|
@ -329,6 +329,34 @@ export default class MessageComposerInput extends React.Component {
|
|||
onEditorContentChanged = (editorState: EditorState) => {
|
||||
editorState = RichText.attachImmutableEntitiesToEmoji(editorState);
|
||||
|
||||
const currentBlock = editorState.getSelection().getStartKey();
|
||||
const currentSelection = editorState.getSelection();
|
||||
const currentStartOffset = editorState.getSelection().getStartOffset();
|
||||
|
||||
const block = editorState.getCurrentContent().getBlockForKey(currentBlock);
|
||||
const text = block.getText();
|
||||
|
||||
const entityBeforeCurrentOffset = block.getEntityAt(currentStartOffset - 1);
|
||||
const entityAtCurrentOffset = block.getEntityAt(currentStartOffset);
|
||||
|
||||
// If the cursor is on the boundary between an entity and a non-entity and the
|
||||
// text before the cursor has whitespace at the end, set the entity state of the
|
||||
// character before the cursor (the whitespace) to null. This allows the user to
|
||||
// stop editing the link.
|
||||
if (entityBeforeCurrentOffset && !entityAtCurrentOffset &&
|
||||
/\s$/.test(text.slice(0, currentStartOffset))) {
|
||||
editorState = RichUtils.toggleLink(
|
||||
editorState,
|
||||
currentSelection.merge({
|
||||
anchorOffset: currentStartOffset - 1,
|
||||
focusOffset: currentStartOffset,
|
||||
}),
|
||||
null,
|
||||
);
|
||||
// Reset selection
|
||||
editorState = EditorState.forceSelection(editorState, currentSelection);
|
||||
}
|
||||
|
||||
/* Since a modification was made, set originalEditorState to null, since newState is now our original */
|
||||
this.setState({
|
||||
editorState,
|
||||
|
|
Loading…
Reference in a new issue