From 1adb9ca553072a694396e7b96aeaafe628a613a7 Mon Sep 17 00:00:00 2001
From: David Wheatley <hi@davwheat.dev>
Date: Mon, 25 Oct 2021 19:58:28 +0200
Subject: [PATCH] Revert "feat: encapsulate markdown buttons in itemlist"

This reverts commit d4aecfc9e3f6af078fc0c0eb157179f2e1b363f3.
---
 extensions/markdown/js/src/forum/index.js | 95 +++++++++--------------
 1 file changed, 38 insertions(+), 57 deletions(-)

diff --git a/extensions/markdown/js/src/forum/index.js b/extensions/markdown/js/src/forum/index.js
index 87acd4844..ce32a7906 100644
--- a/extensions/markdown/js/src/forum/index.js
+++ b/extensions/markdown/js/src/forum/index.js
@@ -11,7 +11,6 @@ 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';
@@ -19,33 +18,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) {
@@ -55,46 +54,28 @@ app.initializers.add('flarum-markdown', function (app) {
   });
 
   extend(TextEditor.prototype, 'toolbarItems', function (items) {
-    items.add(
-      'markdown',
-      <MarkdownToolbar for={this.textareaId} setShortcutHandler={(handler) => (shortcutHandler = handler)}>
-        {markdownToolbarItems().toArray()}
-      </MarkdownToolbar>,
-      100
-    );
+    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);
   });
 });
-
-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;
-}