Update rich text editor fullscreen and side-by-side modes to work on desktop and mobile properly with any type of layout navigation

packages/bbui/src/Form/Core/RichTextField.svelte

@@ -7,7 +7,7 @@
   export let error = null
   export let height = null
   export let id = null
-  export let fullScreenOffset = 0
+  export let fullScreenOffset = null
   export let easyMDEOptions = null
 </script>
 

packages/bbui/src/Form/RichTextField.svelte

@@ -11,7 +11,7 @@
   export let error = null
   export let height = null
   export let id = null
-  export let fullScreenOffset = 0
+  export let fullScreenOffset = null
   export let easyMDEOptions = null
 
   const dispatch = createEventDispatcher()

packages/bbui/src/Markdown/SpectrumMDE.svelte

@@ -8,7 +8,7 @@
   export let easyMDEOptions = null
   export let mde = null
   export let id = null
-  export let fullScreenOffset = 0
+  export let fullScreenOffset = null
   export let disabled = false
 
   let element
@@ -30,9 +30,18 @@
       mde.toTextArea()
     }
   })
+
+  $: styleString = getStyleString(fullScreenOffset)
+
+  const getStyleString = offset => {
+    let string = ""
+    string += `--fullscreen-offset-x:${offset?.x || "0px"};`
+    string += `--fullscreen-offset-y:${offset?.y || "0px"};`
+    return string
+  }
 </script>
 
-<div class:disabled style={`--fullscreen-offset:${fullScreenOffset || "0px"}`}>
+<div class:disabled style={styleString}>
   <textarea disabled {id} bind:this={element} />
 </div>
 
@@ -155,12 +164,21 @@
   }
   /* Allow full screen offset */
   :global(.EasyMDEContainer .editor-toolbar.fullscreen) {
-    top: var(--fullscreen-offset);
+    left: var(--fullscreen-offset-x);
+    top: var(--fullscreen-offset-y);
   }
   :global(.EasyMDEContainer .CodeMirror-fullscreen) {
-    top: calc(50px + var(--fullscreen-offset));
+    left: var(--fullscreen-offset-x);
+    top: calc(50px + var(--fullscreen-offset-y));
   }
+
+  :global(.EasyMDEContainer .CodeMirror-fullscreen.CodeMirror-sided) {
+    width: calc((100% - var(--fullscreen-offset-x)) / 2) !important;
+  }
+
   :global(.EasyMDEContainer .editor-preview-side) {
-    top: calc(50px + var(--fullscreen-offset));
+    left: calc(50% + (var(--fullscreen-offset-x) / 2));
+    top: calc(50px + var(--fullscreen-offset-y));
+    width: calc((100% - var(--fullscreen-offset-x)) / 2) !important;
   }
 </style>

packages/client/src/components/app/Layout.svelte

@@ -1,5 +1,6 @@
 <script>
-  import { getContext } from "svelte"
+  import { getContext, setContext } from "svelte"
+  import { writable } from "svelte/store"
   import { Heading, Icon } from "@budibase/bbui"
   import { FieldTypes } from "../../constants"
   import active from "svelte-spa-router/active"
@@ -29,6 +30,16 @@
     Small: "s",
   }
 
+  // Set some layout context. This isn't used in bindings but can be used
+  // determine things about the current app layout.
+  $: mobile = $context.device.mobile
+  const store = writable({ headerHeight: 0 })
+  $: store.set({
+    screenXOffset: getScreenXOffset(navigation, mobile),
+    screenYOffset: getScreenYOffset(navigation, mobile),
+  })
+  setContext("layout", store)
+
   // Permanently go into peek mode if we ever get the peek flag
   let isPeeking = false
   $: {
@@ -58,13 +69,27 @@
     if ($builderStore.inBuilder) return
     window.location.href = "/builder/apps"
   }
+
+  const getScreenXOffset = (navigation, mobile) => {
+    if (navigation !== "Left") {
+      return 0
+    }
+    return mobile ? "0px" : "250px"
+  }
+  const getScreenYOffset = (navigation, mobile) => {
+    if (mobile) {
+      return !navigation || navigation === "None" ? 0 : "61px"
+    } else {
+      return navigation === "Top" ? "137px" : "0px"
+    }
+  }
 </script>
 
 <div
   class="layout layout--{typeClass}"
   use:styleable={$component.styles}
-  class:desktop={!$context.device.mobile}
+  class:desktop={!mobile}
-  class:mobile={!!$context.device.mobile}
+  class:mobile={!!mobile}
 >
   {#if typeClass !== "none"}
     <div

packages/client/src/components/app/forms/LongFormField.svelte

@@ -18,6 +18,7 @@
 
   const context = getContext("context")
   const component = getContext("component")
+  const layout = getContext("layout")
   const newContext = writable($component)
   setContext("component", newContext)
 
@@ -26,9 +27,6 @@
   $: useRichText =
     format === "rich" || (format !== "plain" && fieldSchema?.useRichText)
 
-  // Determine the offset needed for full screen mode
-  $: offset = $context.device.mobile ? "61px" : "137px"
-
   // Extract the settings height so we can pass it on to the rich text field.
   // We then wipe the height style so that the field will automatically size
   // itself based on the height of the rich text field.
@@ -69,7 +67,10 @@
         id={fieldState.fieldId}
         {placeholder}
         {height}
-        fullScreenOffset={offset}
+        fullScreenOffset={{
+          x: $layout.screenXOffset,
+          y: $layout.screenYOffset,
+        }}
         easyMDEOptions={{
           hideIcons: $context.device.mobile ? ["side-by-side", "guide"] : [],
         }}