fix: scrolling when using fullscreen (#24)

package.json

@@ -19,6 +19,7 @@
         "vue-loader": "^16.8.3"
     },
     "dependencies": {
+        "body-scroll-lock": "^4.0.0-beta.0",
         "toastedjs": "^0.0.2"
     }
 }

resources/js/components/FormField.vue

@@ -4,6 +4,7 @@ require("@/../../node_modules/codemirror/mode/markdown/markdown.js");
 import MarkdownField from "@/fields/Form/MarkdownField.vue";
 import { FormField } from "@/mixins";
 import Toasted from "toastedjs";
+import { enableBodyScroll, disableBodyScroll } from "body-scroll-lock";
 import IconUpload from "./IconUpload.vue";
 
 const tools = MarkdownField.computed.tools();
@@ -84,6 +85,16 @@ export default {
             },
         }),
     },
+    watch: {
+        fullScreen(isFullScreen) {
+            const scrollable = this.$el.querySelector(".CodeMirror-scroll");
+            if (isFullScreen) {
+                disableBodyScroll(scrollable);
+            } else {
+                enableBodyScroll(scrollable);
+            }
+        },
+    },
     methods: {
         fill(formData) {
             this.fillIfVisible(
@@ -230,3 +241,20 @@ function uuidv4() {
     );
 }
 </script>
+
+<style>
+.markdown-fullscreen {
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+.markdown-fullscreen > div {
+    flex: 1;
+    overflow: hidden;
+    padding: 0;
+}
+.markdown-fullscreen .CodeMirror-wrap {
+    padding: 1rem;
+}
+</style>

yarn.lock

@@ -1692,6 +1692,11 @@ [email protected]:
     type-is "~1.6.18"
     unpipe "1.0.0"
 
+body-scroll-lock@^4.0.0-beta.0:
+  version "4.0.0-beta.0"
+  resolved "https://registry.yarnpkg.com/body-scroll-lock/-/body-scroll-lock-4.0.0-beta.0.tgz#4f78789d10e6388115c0460cd6d7d4dd2bbc4f7e"
+  integrity sha512-a7tP5+0Mw3YlUJcGAKUqIBkYYGlYxk2fnCasq/FUph1hadxlTRjF+gAcZksxANnaMnALjxEddmSi/H3OR8ugcQ==
+
 bonjour-service@^1.0.11:
   version "1.0.13"
   resolved "https://registry.npmjs.org/bonjour-service/-/bonjour-service-1.0.13.tgz#4ac003dc1626023252d58adf2946f57e5da450c1"