From: Dan Brown <redacted>
Date: Tue, 8 Feb 2022 17:05:38 +0000 (+0000)
Subject: Changed editor bottom padding technique
X-Git-Tag: v22.02~1^2~13
X-Git-Url: http://source.bookstackapp.com/bookstack/commitdiff_plain/7c692ec588b02eb044f2b3fc75a091d4c0f69c73?ds=inline

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 7d3f1113e..a25debac1 100644
--- 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 1a38c1f59..8e7669acc 100644
--- 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 642598496..e846b138f 100644
--- 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