Pass footerHeight as prop

src/RichTextEditor.js

@@ -21,7 +21,8 @@ export default class RichTextEditor extends Component {
     editorInitializedCallback: PropTypes.func,
     customCSS: PropTypes.string,
     hiddenTitle: PropTypes.bool,
-    enableOnChange: PropTypes.bool
+    enableOnChange: PropTypes.bool,
+    footerHeight: PropTypes.number
   };
 
   constructor(props) {
@@ -504,12 +505,19 @@ export default class RichTextEditor extends Component {
   init() {
     this._sendAction(actions.init);
     this.setPlatform();
+    if (this.props.footerHeight) {
+      this.setFooterHeight();
+    }
   }
 
   setEditorHeight(height) {
     this._sendAction(actions.setEditorHeight, height);
   }
 
+  setFooterHeight() {
+    this._sendAction(actions.setFooterHeight, this.props.footerHeight);
+  }
+
   setPlatform() {
     this._sendAction(actions.setPlatform, Platform.OS);
   }

src/WebviewMessageHandler.js

@@ -164,6 +164,9 @@ export const InjectedMessageHandler = `
         case '${actions.setEditorHeight}':
           zss_editor.setEditorHeight(action.data);
           break;
+        case '${actions.setFooterHeight}':
+          zss_editor.setFooterHeight(action.data);
+          break;
         case '${actions.setPlatform}':
           zss_editor.setPlatform(action.data);
           break;

src/const.js

@@ -51,6 +51,7 @@ export const actions = {
   setBackgroundColor: 'SET_BACKGROUND_COLOR',
   init: 'ZSSS_INIT',
   setEditorHeight: 'SET_EDITOR_HEIGHT',
+  setFooterHeight: 'SET_FOOTER_HEIGHT',
   setPlatform: 'SET_PLATFORM'
 };
 

src/editor.html

@@ -1710,10 +1710,6 @@
 				padding-left: 10px;
 				padding-right: 10px;
 			}
-
-			#zss_editor_footer {
-				height: 10px;
-			}
 		</style>
 
 		<style type="text/css">