From 98ca937fef26a9650b81f16a2cd6f80f601ec6d2 Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Tue, 18 Jul 2017 17:52:04 +0100 Subject: [PATCH] Interpret backspace at start of style block as block style toggle Part of fixing https://github.com/vector-im/riot-web/issues/4580 --- .../views/rooms/MessageComposerInput.js | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js index d4ae55f03a..2f0901018d 100644 --- a/src/components/views/rooms/MessageComposerInput.js +++ b/src/components/views/rooms/MessageComposerInput.js @@ -528,16 +528,19 @@ export default class MessageComposerInput extends React.Component { if (this.state.isRichtextEnabled) { // These are block types, not handled by RichUtils by default. const blockCommands = ['code-block', 'blockquote', 'unordered-list-item', 'ordered-list-item']; + const currentBlockType = RichUtils.getCurrentBlockType(this.state.editorState); if (blockCommands.includes(command)) { - this.setState({ - editorState: RichUtils.toggleBlockType(this.state.editorState, command), - }); + newState = RichUtils.toggleBlockType(this.state.editorState, command); } else if (command === 'strike') { // this is the only inline style not handled by Draft by default - this.setState({ - editorState: RichUtils.toggleInlineStyle(this.state.editorState, 'STRIKETHROUGH'), - }); + newState = RichUtils.toggleInlineStyle(this.state.editorState, 'STRIKETHROUGH'); + } else if (command === 'backspace' && currentBlockType !== 'unstyled') { + const currentStartOffset = this.state.editorState.getSelection().getStartOffset(); + if (currentStartOffset === 0) { + // Toggle current block type (setting it to 'unstyled') + newState = RichUtils.toggleBlockType(this.state.editorState, currentBlockType); + } } } else { let contentState = this.state.editorState.getCurrentContent(); @@ -644,6 +647,7 @@ export default class MessageComposerInput extends React.Component { // By returning false, we allow the default draft-js key binding to occur, // which in this case invokes "split-block". This creates a new block of the // same type, allowing the user to delete it with backspace. + // See handleKeyCommand (when command === 'backspace') return false; }