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 {
{listItems(this.controlItems().toArray())}
+ -
+ {this.toolbarItems().toArray()}
+
);
@@ -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 {