diff --git a/extensions/markdown/js/src/forum/index.js b/extensions/markdown/js/src/forum/index.js
index ce32a7906..87acd4844 100644
--- a/extensions/markdown/js/src/forum/index.js
+++ b/extensions/markdown/js/src/forum/index.js
@@ -11,6 +11,7 @@ import { extend } from 'flarum/extend';
 import TextEditor from 'flarum/common/components/TextEditor';
 import BasicEditorDriver from 'flarum/common/utils/BasicEditorDriver';
 import styleSelectedText from 'flarum/common/utils/styleSelectedText';
+import ItemList from 'flarum/common/utils/ItemList';
 
 import MarkdownToolbar from './components/MarkdownToolbar';
 import MarkdownButton from './components/MarkdownButton';
@@ -18,33 +19,33 @@ import MarkdownButton from './components/MarkdownButton';
 const modifierKey = navigator.userAgent.match(/Macintosh/) ? '⌘' : 'ctrl';
 
 const styles = {
-  'header': { prefix: '### ' },
-  'bold': { prefix: '**', suffix: '**', trimFirst: true },
-  'italic': { prefix: '_', suffix: '_', trimFirst: true },
-  'strikethrough': { prefix: '~~', suffix: '~~', trimFirst: true },
-  'quote': { prefix: '> ', multiline: true, surroundWithNewlines: true },
-  'code': { prefix: '`', suffix: '`', blockPrefix: '```', blockSuffix: '```' },
-  'link': { prefix: '[', suffix: '](https://)', replaceNext: 'https://', scanFor: 'https?://' },
-  'image': { prefix: '![', suffix: '](https://)', replaceNext: 'https://', scanFor: 'https?://' },
-  'unordered_list': { prefix: '- ', multiline: true, surroundWithNewlines: true },
-  'ordered_list': { prefix: '1. ', multiline: true, orderedList: true },
-  'spoiler': { prefix: '>!', suffix: '!<', blockPrefix: '>! ', multiline: true, trimFirst: true }
-}
+  header: { prefix: '### ' },
+  bold: { prefix: '**', suffix: '**', trimFirst: true },
+  italic: { prefix: '_', suffix: '_', trimFirst: true },
+  strikethrough: { prefix: '~~', suffix: '~~', trimFirst: true },
+  quote: { prefix: '> ', multiline: true, surroundWithNewlines: true },
+  code: { prefix: '`', suffix: '`', blockPrefix: '```', blockSuffix: '```' },
+  link: { prefix: '[', suffix: '](https://)', replaceNext: 'https://', scanFor: 'https?://' },
+  image: { prefix: '![', suffix: '](https://)', replaceNext: 'https://', scanFor: 'https?://' },
+  unordered_list: { prefix: '- ', multiline: true, surroundWithNewlines: true },
+  ordered_list: { prefix: '1. ', multiline: true, orderedList: true },
+  spoiler: { prefix: '>!', suffix: '!<', blockPrefix: '>! ', multiline: true, trimFirst: true },
+};
 
 const applyStyle = (id) => {
   // This is a nasty hack that breaks encapsulation of the editor.
   // In future releases, we'll need to tweak the editor driver interface
   // to support triggering events like this.
   styleSelectedText(app.composer.editor.el, styles[id]);
-}
+};
 
 function makeShortcut(id, key) {
   return function (e) {
-    if (e.key === key && (e.metaKey && modifierKey === '⌘' || e.ctrlKey && modifierKey === 'ctrl')) {
+    if (e.key === key && ((e.metaKey && modifierKey === '⌘') || (e.ctrlKey && modifierKey === 'ctrl'))) {
       e.preventDefault();
       applyStyle(id);
     }
-  }
+  };
 }
 
 app.initializers.add('flarum-markdown', function (app) {
@@ -54,28 +55,46 @@ app.initializers.add('flarum-markdown', function (app) {
   });
 
   extend(TextEditor.prototype, 'toolbarItems', function (items) {
-    const tooltip = (name, hotkey) => {
-      return app.translator.trans(`flarum-markdown.forum.composer.${name}_tooltip`) + (hotkey ? ` <${modifierKey}-${hotkey}>` : '');
-    };
-
-    const makeApplyStyle = (id) => {
-      return () => applyStyle(id);
-    }
-
-    items.add('markdown', (
-      <MarkdownToolbar for={this.textareaId} setShortcutHandler={handler => shortcutHandler = handler}>
-        <MarkdownButton title={tooltip('header')} icon="fas fa-heading" onclick={makeApplyStyle('header')} />
-        <MarkdownButton title={tooltip('bold', 'b')} icon="fas fa-bold" onclick={makeApplyStyle('bold')}  />
-        <MarkdownButton title={tooltip('italic', 'i')} icon="fas fa-italic" onclick={makeApplyStyle('italic')}  />
-        <MarkdownButton title={tooltip('strikethrough')} icon="fas fa-strikethrough" onclick={makeApplyStyle('strikethrough')}  />
-        <MarkdownButton title={tooltip('quote')} icon="fas fa-quote-left" onclick={makeApplyStyle('quote')} />
-        <MarkdownButton title={tooltip('spoiler')} icon="fas fa-exclamation-triangle" onclick={makeApplyStyle('spoiler')} />
-        <MarkdownButton title={tooltip('code')} icon="fas fa-code" onclick={makeApplyStyle('code')} />
-        <MarkdownButton title={tooltip('link')} icon="fas fa-link" onclick={makeApplyStyle('link')} />
-        <MarkdownButton title={tooltip('image')} icon="fas fa-image" onclick={makeApplyStyle('image')} />
-        <MarkdownButton title={tooltip('unordered_list')} icon="fas fa-list-ul" onclick={makeApplyStyle('unordered_list')} />
-        <MarkdownButton title={tooltip('ordered_list')} icon="fas fa-list-ol" onclick={makeApplyStyle('ordered_list')} />
-      </MarkdownToolbar>
-    ), 100);
+    items.add(
+      'markdown',
+      <MarkdownToolbar for={this.textareaId} setShortcutHandler={(handler) => (shortcutHandler = handler)}>
+        {markdownToolbarItems().toArray()}
+      </MarkdownToolbar>,
+      100
+    );
   });
 });
+
+export function markdownToolbarItems() {
+  const items = new ItemList();
+
+  const tooltip = (name, hotkey) => {
+    return app.translator.trans(`flarum-markdown.forum.composer.${name}_tooltip`) + (hotkey ? ` <${modifierKey}-${hotkey}>` : '');
+  };
+
+  const makeApplyStyle = (id) => {
+    return () => applyStyle(id);
+  };
+
+  items.add('header', <MarkdownButton title={tooltip('header')} icon="fas fa-heading" onclick={makeApplyStyle('header')} />, 1000);
+  items.add('bold', <MarkdownButton title={tooltip('bold', 'b')} icon="fas fa-bold" onclick={makeApplyStyle('bold')} />, 900);
+  items.add('italic', <MarkdownButton title={tooltip('italic', 'i')} icon="fas fa-italic" onclick={makeApplyStyle('italic')} />, 800);
+  items.add(
+    'strikethrough',
+    <MarkdownButton title={tooltip('strikethrough')} icon="fas fa-strikethrough" onclick={makeApplyStyle('strikethrough')} />,
+    700
+  );
+  items.add('quote', <MarkdownButton title={tooltip('quote')} icon="fas fa-quote-left" onclick={makeApplyStyle('quote')} />, 600);
+  items.add('spoiler', <MarkdownButton title={tooltip('spoiler')} icon="fas fa-exclamation-triangle" onclick={makeApplyStyle('spoiler')} />, 500);
+  items.add('code', <MarkdownButton title={tooltip('code')} icon="fas fa-code" onclick={makeApplyStyle('code')} />, 400);
+  items.add('link', <MarkdownButton title={tooltip('link')} icon="fas fa-link" onclick={makeApplyStyle('link')} />, 300);
+  items.add('image', <MarkdownButton title={tooltip('image')} icon="fas fa-image" onclick={makeApplyStyle('image')} />, 200);
+  items.add(
+    'unordered_list',
+    <MarkdownButton title={tooltip('unordered_list')} icon="fas fa-list-ul" onclick={makeApplyStyle('unordered_list')} />,
+    100
+  );
+  items.add('ordered_list', <MarkdownButton title={tooltip('ordered_list')} icon="fas fa-list-ol" onclick={makeApplyStyle('ordered_list')} />, 0);
+
+  return items;
+}