diff --git a/src/RichText.js b/src/RichText.js
index aebd6f5765..31d82ee349 100644
--- a/src/RichText.js
+++ b/src/RichText.js
@@ -22,6 +22,7 @@ const MARKDOWN_REGEX = {
BOLD: /([\*_])\1([\w\s]+?)\1\1/g,
HR: /(\n|^)((-|\*|_) *){3,}(\n|$)/g,
CODE: /`[^`]*`/g,
+ STRIKETHROUGH: /~{2}[^~]*~{2}/g,
};
const USERNAME_REGEX = /@\S+:\S+/g;
@@ -121,7 +122,7 @@ export function getScopedRTDecorators(scope: any): CompositeDecorator {
}
export function getScopedMDDecorators(scope: any): CompositeDecorator {
- let markdownDecorators = ['HR', 'BOLD', 'ITALIC', 'CODE'].map(
+ let markdownDecorators = ['HR', 'BOLD', 'ITALIC', 'CODE', 'STRIKETHROUGH'].map(
(style) => ({
strategy: (contentBlock, callback) => {
return findWithRegex(MARKDOWN_REGEX[style], contentBlock, callback);
diff --git a/src/components/views/rooms/MessageComposer.js b/src/components/views/rooms/MessageComposer.js
index fdb6e4e169..fc80bf8a90 100644
--- a/src/components/views/rooms/MessageComposer.js
+++ b/src/components/views/rooms/MessageComposer.js
@@ -178,12 +178,11 @@ export default class MessageComposer extends React.Component {
onToggleFormattingClicked() {
UserSettingsStore.setSyncedSetting('MessageComposer.showFormatting', !this.state.showFormatting);
this.setState({showFormatting: !this.state.showFormatting});
- this.messageComposerInput.focus();
}
- onToggleMarkdownClicked() {
+ onToggleMarkdownClicked(e) {
+ e.preventDefault(); // don't steal focus from the editor!
this.messageComposerInput.enableRichtext(!this.state.inputState.isRichtextEnabled);
- this.messageComposerInput.focus();
}
render() {
@@ -292,13 +291,13 @@ export default class MessageComposer extends React.Component {
const active = style.includes(name) || blockType === name;
const suffix = active ? '-o-n' : '';
const onFormatButtonClicked = this.onFormatButtonClicked.bind(this, name);
- const disabled = !this.state.inputState.isRichtextEnabled && ['strike', 'underline'].includes(name);
+ const disabled = !this.state.inputState.isRichtextEnabled && 'underline' === name;
const className = classNames("mx_MessageComposer_format_button", {
mx_MessageComposer_format_button_disabled: disabled,
});
return ;
@@ -319,7 +318,7 @@ export default class MessageComposer extends React.Component {
{formatButtons}