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.

diff --git a/resources/js/wysiwyg/common-events.js b/resources/js/wysiwyg/common-events.js
index 7d3f1113e16ebf2318a47db4dfec9abb26031116..a25debac123d75c515814400f75ee44144600f40 100644 (file)
--- a/resources/js/wysiwyg/common-events.js
+++ b/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();
+        }
     });
 }
\ No newline at end of file

diff --git a/resources/js/wysiwyg/config.js b/resources/js/wysiwyg/config.js
index 1a38c1f597591e72674d260fec06a93b4906cc3e..8e7669acc9720ca16a2230232db450f1a7718c39 100644 (file)
--- a/resources/js/wysiwyg/config.js
+++ b/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,

diff --git a/resources/sass/_tinymce.scss b/resources/sass/_tinymce.scss
index 642598496bd36bbcbd2aa48e62e5720cac99ae19..e846b138f2d81780b1174b095f333f751e90f58c 100644 (file)
--- a/resources/sass/_tinymce.scss
+++ b/resources/sass/_tinymce.scss
@@ -23,8 +23,8 @@
 }
 
 // Pad out bottom of editor
-.page-content.mce-content-body > :last-child {
-  margin-bottom: 5rem;
+body.page-content.mce-content-body  {
+  padding-bottom: 5rem;
 }
 
 // Center toolbar items