Changed editor bottom padding technique

- Ensures padding works across FF & Chrome, was only working on FF
  before.
- Fixes sketchy editor positioning focus on FF, since tinyMCE would
  add a hidden element to the bottom of the body which would remove/add
  our body padding causing unstable positioning.

resources/js/wysiwyg/common-events.js

@@ -27,6 +27,8 @@ export function listen(editor) {
 
     // Focus on the editor
     window.$events.listen('editor::focus', () => {
-        editor.focus();
+        if (editor.initialized) {
+            editor.focus();
+        }
     });
 }

resources/js/wysiwyg/config.js

@@ -189,6 +189,25 @@ function getSetupCallback(options) {
     }
 }
 
+/**
+ * @param {WysiwygConfigOptions} options
+ */
+function getContentStyle(options) {
+    return `
+html, body, html.dark-mode {
+    background: ${options.darkMode ? '#222' : '#fff'};
+} 
+body {
+    padding-left: 15px !important;
+    padding-right: 15px !important; 
+    height: initial !important;
+    margin:0!important; 
+    margin-left: auto! important;
+    margin-right: auto !important;
+    overflow-y: hidden !important;
+}`.trim().replace('\n', '');
+}
+
 /**
  * @param {WysiwygConfigOptions} options
  * @return {Object}
@@ -228,7 +247,7 @@ export function build(options) {
         imagetools_toolbar: 'imageoptions',
         contextmenu: false,
         toolbar: toolbar,
-        content_style: `html, body, html.dark-mode {background: ${options.darkMode ? '#222' : '#fff'};} body {padding-left: 15px !important; padding-right: 15px !important; margin:0!important; margin-left:auto!important;margin-right:auto!important;}`,
+        content_style: getContentStyle(options),
         style_formats,
         style_formats_merge: false,
         media_alt_source: false,

resources/sass/_tinymce.scss

@@ -23,8 +23,8 @@
 }
 
 // Pad out bottom of editor
-.page-content.mce-content-body > :last-child {
+body.page-content.mce-content-body  {
-  margin-bottom: 5rem;
+  padding-bottom: 5rem;
 }
 
 // Center toolbar items