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 { ); @@ -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 {