Merge pull request #3389 from matrix-org/bwindels/cider-format-shortcuts

New composer: formatting keyboard shortcuts

res/css/views/rooms/_MessageComposerFormatBar.scss

@@ -81,6 +81,13 @@ limitations under the License.
 
 .mx_MessageComposerFormatBar_buttonTooltip {
     white-space: nowrap;
-    font-size: 12px;
+    font-size: 13px;
     font-weight: 600;
+    min-width: 54px;
+    text-align: center;
+
+    .mx_MessageComposerFormatBar_tooltipShortcut {
+        font-size: 9px;
+        opacity: 0.7;
+    }
 }

src/components/views/rooms/BasicMessageComposer.js

@@ -41,6 +41,10 @@ const REGEX_EMOTICON_WHITESPACE = new RegExp('(?:^|\\s)(' + EMOTICON_REGEX.sourc
 
 const IS_MAC = navigator.platform.indexOf("Mac") !== -1;
 
+function ctrlShortcutLabel(key) {
+    return (IS_MAC ? "⌘" : "Ctrl") + "+" + key;
+}
+
 function cloneSelection(selection) {
     return {
         anchorNode: selection.anchorNode,
@@ -266,8 +270,20 @@ export default class BasicMessageEditor extends React.Component {
         const model = this.props.model;
         const modKey = IS_MAC ? event.metaKey : event.ctrlKey;
         let handled = false;
+        // format bold
+        if (modKey && event.key === "b") {
+            this._onFormatAction("bold");
+            handled = true;
+        // format italics
+        } else if (modKey && event.key === "i") {
+            this._onFormatAction("italics");
+            handled = true;
+        // format quote
+        } else if (modKey && event.key === ">") {
+            this._onFormatAction("quote");
+            handled = true;
         // undo
-        if (modKey && event.key === "z") {
+        } else if (modKey && event.key === "z") {
             if (this.historyManager.canUndo()) {
                 const {parts, caret} = this.historyManager.undo(this.props.model);
                 // pass matching inputType so historyManager doesn't push echo
@@ -418,6 +434,9 @@ export default class BasicMessageEditor extends React.Component {
             this._editorRef,
             this.props.model,
             document.getSelection());
+        if (range.length === 0) {
+            return;
+        }
         switch (action) {
             case "bold":
                 formatInline(range, "**");
@@ -458,10 +477,15 @@ export default class BasicMessageEditor extends React.Component {
         });
 
         const MessageComposerFormatBar = sdk.getComponent('rooms.MessageComposerFormatBar');
+        const shortcuts = {
+            bold: ctrlShortcutLabel("B"),
+            italics: ctrlShortcutLabel("I"),
+            quote: ctrlShortcutLabel(">"),
+        };
 
         return (<div className={classes}>
             { autoComplete }
-            <MessageComposerFormatBar ref={ref => this._formatBarRef = ref} onAction={this._onFormatAction} />
+            <MessageComposerFormatBar ref={ref => this._formatBarRef = ref} onAction={this._onFormatAction} shortcuts={shortcuts} />
             <div
                 className="mx_BasicMessageComposer_input"
                 contentEditable="true"

src/components/views/rooms/MessageComposerFormatBar.js

@@ -23,15 +23,16 @@ import sdk from '../../../index';
 export default class MessageComposerFormatBar extends React.PureComponent {
     static propTypes = {
         onAction: PropTypes.func.isRequired,
+        shortcuts: PropTypes.object.isRequired,
     }
 
     render() {
         return (<div className="mx_MessageComposerFormatBar" ref={ref => this._formatBarRef = ref}>
-            <FormatButton label={_t("Bold")} onClick={() => this.props.onAction("bold")} icon="Bold" />
+            <FormatButton shortcut={this.props.shortcuts.bold} label={_t("Bold")} onClick={() => this.props.onAction("bold")} icon="Bold" />
-            <FormatButton label={_t("Italics")} onClick={() => this.props.onAction("italics")} icon="Italic" />
+            <FormatButton shortcut={this.props.shortcuts.italics} label={_t("Italics")} onClick={() => this.props.onAction("italics")} icon="Italic" />
             <FormatButton label={_t("Strikethrough")} onClick={() => this.props.onAction("strikethrough")} icon="Strikethrough" />
             <FormatButton label={_t("Code block")} onClick={() => this.props.onAction("code")} icon="Code" />
-            <FormatButton label={_t("Quote")} onClick={() => this.props.onAction("quote")} icon="Quote" />
+            <FormatButton shortcut={this.props.shortcuts.quote} label={_t("Quote")} onClick={() => this.props.onAction("quote")} icon="Quote" />
         </div>);
     }
 
@@ -66,13 +67,21 @@ class FormatButton extends React.PureComponent {
         label: PropTypes.string.isRequired,
         onClick: PropTypes.func.isRequired,
         icon: PropTypes.string.isRequired,
+        shortcut: PropTypes.string,
     }
 
     render() {
         const InteractiveTooltip = sdk.getComponent('elements.InteractiveTooltip');
         const className = `mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIcon${this.props.icon}`;
+        let shortcut;
+        if (this.props.shortcut) {
+            shortcut = <div className="mx_MessageComposerFormatBar_tooltipShortcut">{this.props.shortcut}</div>;
+        }
         const tooltipContent = (
-            <div className="mx_MessageComposerFormatBar_buttonTooltip">{this.props.label}</div>
+            <div className="mx_MessageComposerFormatBar_buttonTooltip">
+                <div>{this.props.label}</div>
+                {shortcut}
+            </div>
         );
 
         return (