PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Overide default draft-js handling of pasting text/html

Browse source 
This is surprisingly needed to avoid an issue with draft-js that causes multi-line madness when pasting code and then applying format-as-code to it - https://github.com/vector-im/riot-web/issues/2120#issuecomment-271735729.

The issue sounds like it is https://github.com/facebook/draft-js/issues/170#issuecomment-195026203 and the suggstion is to override the text pasting handler https://github.com/facebook/draft-js/issues/170#issuecomment-215983216. Meanwhile they haven't modified the default pasting behaviour afaics.

I've discovered a separate issue that is apparent even after this suggested fix. (https://github.com/vector-im/riot-web/issues/4446)
This commit is contained in:
Luke Barnard 2017-06-27 17:10:28 +01:00
parent 4645ba1bba
commit 5307731dfd
1 changed files with 25 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
src/components/views/rooms/MessageComposerInput.js
View file

@ -121,6 +121,7 @@ export default class MessageComposerInput extends React.Component {
this.onEscape = this.onEscape.bind(this);
this.setDisplayedCompletion = this.setDisplayedCompletion.bind(this);
this.onMarkdownToggleClicked = this.onMarkdownToggleClicked.bind(this);
this.onTextPasted = this.onTextPasted.bind(this);
const isRichtextEnabled = UserSettingsStore.getSyncedSetting('MessageComposerInput.isRichTextEnabled', false);
@ -432,6 +433,29 @@ export default class MessageComposerInput extends React.Component {
return false;
}
onTextPasted(text: string, html?: string) {
const currentSelection = this.state.editorState.getSelection();
const currentContent = this.state.editorState.getCurrentContent();
let contentState = null;
if (html) {
contentState = Modifier.replaceWithFragment(
currentContent,
currentSelection,
RichText.htmlToContentState(html).getBlockMap(),
);
} else {
contentState = Modifier.replaceText(currentContent, currentSelection, text);
}
let newEditorState = EditorState.push(this.state.editorState, contentState, 'insert-characters');
newEditorState = EditorState.forceSelection(newEditorState, contentState.getSelectionAfter());
this.onEditorContentChanged(newEditorState);
return true;
}
handleReturn(ev) {
if (ev.shiftKey) {
this.onEditorContentChanged(RichUtils.insertSoftNewline(this.state.editorState));
@ -713,6 +737,7 @@ export default class MessageComposerInput extends React.Component {
keyBindingFn={MessageComposerInput.getKeyBinding}
handleKeyCommand={this.handleKeyCommand}
handleReturn={this.handleReturn}
handlePastedText={this.onTextPasted}
handlePastedFiles={this.props.onFilesPasted}
stripPastedStyles={!this.state.isRichtextEnabled}
onTab={this.onTab}