Use custom JSX implementation of GitHub's markdown toolbar that works in IE 11

extensions/markdown/js/src/forum/components/MarkdownButton.js

@@ -0,0 +1,47 @@
+import Component from 'flarum/Component';
+import icon from 'flarum/helpers/icon';
+import apply from '../util/apply';
+
+const modifierKey = navigator.userAgent.match(/Macintosh/) ? '⌘' : 'ctrl';
+
+export default class MarkdownButton extends Component {
+  config(isInitialized) {
+    if (isInitialized) return;
+
+    this.$().tooltip();
+  }
+
+  view() {
+    return <button className="Button Button--icon Button--link" title={this.title()} data-hotkey={this.props.hotkey}
+                   onclick={this.click.bind(this)} onkeydown={this.keydown.bind(this)}>
+      {icon(this.icon())}
+    </button>;
+  }
+
+  keydown(event) {
+    if (event.key === ' ' || event.key === 'Enter') {
+      event.preventDefault();
+      this.click();
+    }
+  }
+
+  click() {
+    return apply(this.element, this.styles());
+  }
+
+  title() {
+    let tooltip = this.props.title;
+
+    if (this.props.hotkey) tooltip += ` <${modifierKey}-${this.props.hotkey}>`;
+
+    return tooltip;
+  }
+
+  icon() {
+    return this.props.icon;
+  }
+
+  styles() {
+    return this.props.style;
+  }
+}

extensions/markdown/js/src/forum/components/MarkdownToolbar.js

@@ -0,0 +1,30 @@
+import Component from 'flarum/Component';
+
+const modifierKey = navigator.userAgent.match(/Macintosh/) ? 'Meta' : 'Control';
+
+export default class MarkdownToolbar extends Component {
+  config(isInitialized) {
+    if (isInitialized) return;
+
+    const field = document.getElementById(this.props.for);
+
+    field.addEventListener('keydown', this.shortcut.bind(this));
+  }
+
+  view() {
+    return <div id="MarkdownToolbar" data-for={this.props.for} style={{ display: 'inline-block' }}>
+      {this.props.children}
+    </div>;
+  }
+
+  shortcut(event) {
+    if ((event.metaKey && modifierKey === 'Meta') || (event.ctrlKey && modifierKey === 'Control')) {
+      const button = this.element.querySelector(`[data-hotkey="${event.key}"]`);
+
+      if (button) {
+        button.click();
+        event.preventDefault()
+      }
+    }
+  }
+}