From b49774d0e278006635e37da8e0f81cde8ea44d5a Mon Sep 17 00:00:00 2001
From: Toby Zerner <toby.zerner@gmail.com>
Date: Mon, 12 Nov 2018 17:21:15 +1030
Subject: [PATCH] Add a toolbar area to the TextEditor component

This is to be used for formatting buttons and the like. Although it is
displayed in the controls area at the moment, it is conceptually
different and may be relocated to the top of the text editor in the
future.
---
 framework/core/js/src/forum/compat.js         |  2 ++
 .../js/src/forum/components/TextEditor.js     | 12 +++++++++++
 .../src/forum/components/TextEditorButton.js  | 21 +++++++++++++++++++
 framework/core/less/forum/Composer.less       |  5 +++++
 4 files changed, 40 insertions(+)
 create mode 100644 framework/core/js/src/forum/components/TextEditorButton.js

diff --git a/framework/core/js/src/forum/compat.js b/framework/core/js/src/forum/compat.js
index 60a1b713f..aea232275 100644
--- a/framework/core/js/src/forum/compat.js
+++ b/framework/core/js/src/forum/compat.js
@@ -31,6 +31,7 @@ import ComposerButton from './components/ComposerButton';
 import DiscussionList from './components/DiscussionList';
 import ReplyPlaceholder from './components/ReplyPlaceholder';
 import TextEditor from './components/TextEditor';
+import TextEditorButton from './components/TextEditorButton';
 import AvatarEditor from './components/AvatarEditor';
 import Post from './components/Post';
 import SettingsPage from './components/SettingsPage';
@@ -99,6 +100,7 @@ export default Object.assign(compat, {
   'components/DiscussionList': DiscussionList,
   'components/ReplyPlaceholder': ReplyPlaceholder,
   'components/TextEditor': TextEditor,
+  'components/TextEditorButton': TextEditorButton,
   'components/AvatarEditor': AvatarEditor,
   'components/Post': Post,
   'components/SettingsPage': SettingsPage,
diff --git a/framework/core/js/src/forum/components/TextEditor.js b/framework/core/js/src/forum/components/TextEditor.js
index eedd480ea..04a421daf 100644
--- a/framework/core/js/src/forum/components/TextEditor.js
+++ b/framework/core/js/src/forum/components/TextEditor.js
@@ -36,6 +36,9 @@ export default class TextEditor extends Component {
 
         <ul className="TextEditor-controls Composer-footer">
           {listItems(this.controlItems().toArray())}
+          <li className="TextEditor-toolbar">
+            {this.toolbarItems().toArray()}
+          </li>
         </ul>
       </div>
     );
@@ -92,6 +95,15 @@ export default class TextEditor extends Component {
     return items;
   }
 
+  /**
+   * Build an item list for the toolbar controls.
+   *
+   * @return {ItemList}
+   */
+  toolbarItems() {
+    return new ItemList();
+  }
+
   /**
    * Set the value of the text editor.
    *
diff --git a/framework/core/js/src/forum/components/TextEditorButton.js b/framework/core/js/src/forum/components/TextEditorButton.js
new file mode 100644
index 000000000..4baf8050b
--- /dev/null
+++ b/framework/core/js/src/forum/components/TextEditorButton.js
@@ -0,0 +1,21 @@
+import Button from '../../common/components/Button';
+
+/**
+ * The `TextEditorButton` component displays a button suitable for the text
+ * editor toolbar.
+ */
+export default class TextEditorButton extends Button {
+  static initProps(props) {
+    super.initProps(props);
+
+    props.className = props.className || 'Button Button--icon Button--link';
+  }
+
+  config(isInitialized, context) {
+    super.config(isInitialized, context);
+
+    if (isInitialized) return;
+
+    this.$().tooltip();
+  }
+}
diff --git a/framework/core/less/forum/Composer.less b/framework/core/less/forum/Composer.less
index 6a2ba93ca..1e830bdf1 100644
--- a/framework/core/less/forum/Composer.less
+++ b/framework/core/less/forum/Composer.less
@@ -353,6 +353,11 @@
     margin-right: 10px;
   }
 }
+.TextEditor-toolbar {
+  .Button--icon {
+    width: 28px;
+  }
+}
 
 @media @tablet-up {
   .TextEditor-controls {