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

@@ -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,

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.
    *

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();
+  }
+}

framework/core/less/forum/Composer.less

@@ -353,6 +353,11 @@
     margin-right: 10px;
   }
 }
+.TextEditor-toolbar {
+  .Button--icon {
+    width: 28px;
+  }
+}
 
 @media @tablet-up {
   .TextEditor-controls {