Added option to render the toolbar on the bottom of the editor (#318)

* Added option to render the toolbar on the bottom of the editor * Fixed toolbar on bottom styling for the borders
sstur · Mar 21, 2019 · f18543f · f18543f
1 parent f10c0e5
commit f18543f
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 3 deletions.
diff --git a/src/RichTextEditor.js b/src/RichTextEditor.js
@@ -56,6 +56,7 @@ type Props = {
   readOnly?: boolean;
   disabled?: boolean; // Alias of readOnly
   toolbarConfig?: ToolbarConfig;
+  toolbarOnBottom?: boolean;
   blockStyleFn?: (block: ContentBlock) => ?string;
   autoFocus?: boolean;
   keyBindingFn?: (event: Object) => ?string;
@@ -96,6 +97,7 @@ export default class RichTextEditor extends Component {
       readOnly,
       disabled,
       toolbarConfig,
+      toolbarOnBottom,
       blockStyleFn,
       customControls,
       keyBindingFn,
@@ -121,6 +123,7 @@ export default class RichTextEditor extends Component {
       editorToolbar = (
         <EditorToolbar
           rootStyle={toolbarStyle}
+          isOnBottom={toolbarOnBottom}
           className={toolbarClassName}
           keyEmitter={this._keyEmitter}
           editorState={editorState}
@@ -133,7 +136,7 @@ export default class RichTextEditor extends Component {
     }
     return (
       <div className={cx(styles.root, className)} style={rootStyle}>
-        {editorToolbar}
+        { !toolbarOnBottom && editorToolbar }
         <div className={combinedEditorClassName} style={editorStyle}>
           <Editor
             {...otherProps}
@@ -153,6 +156,7 @@ export default class RichTextEditor extends Component {
             readOnly={readOnly}
           />
         </div>
+        { toolbarOnBottom && editorToolbar }
       </div>
     );
   }

diff --git a/src/lib/EditorToolbar.css b/src/lib/EditorToolbar.css
@@ -9,3 +9,8 @@
   -ms-user-select: none;
   user-select: none;
 }
+
+.onBottom {
+  border-top: 1px solid #ddd;
+  border-bottom: none;
+}
diff --git a/src/lib/EditorToolbar.js b/src/lib/EditorToolbar.js
@@ -32,6 +32,7 @@ type Props = {
   toolbarConfig: ToolbarConfig;
   customControls: Array<CustomControl>;
   rootStyle?: Object;
+  isOnBottom?: boolean;
 };
 
 type State = {
@@ -66,7 +67,7 @@ export default class EditorToolbar extends Component {
   }
 
   render() {
-    let {className, toolbarConfig, rootStyle} = this.props;
+    let {className, toolbarConfig, rootStyle, isOnBottom} = this.props;
     if (toolbarConfig == null) {
       toolbarConfig = DefaultToolbarConfig;
     }
@@ -94,7 +95,7 @@ export default class EditorToolbar extends Component {
       }
     });
     return (
-      <div className={cx(styles.root, className)} style={rootStyle}>
+      <div className={cx(styles.root, (isOnBottom && styles.onBottom), className)} style={rootStyle}>
         {buttonGroups}
         {this._renderCustomControls()}
       </div>