From 4239bb2cb573f97ede3c298a8919f3bd4177bc45 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 7 Feb 2022 12:49:33 +0000
Subject: [PATCH] Update rich text editor fullscreen and side-by-side modes to
 work on desktop and mobile properly with any type of layout navigation

---
 .../bbui/src/Form/Core/RichTextField.svelte   |  2 +-
 packages/bbui/src/Form/RichTextField.svelte   |  2 +-
 packages/bbui/src/Markdown/SpectrumMDE.svelte | 28 ++++++++++++++---
 .../client/src/components/app/Layout.svelte   | 31 +++++++++++++++++--
 .../components/app/forms/LongFormField.svelte |  9 +++---
 5 files changed, 58 insertions(+), 14 deletions(-)

diff --git a/packages/bbui/src/Form/Core/RichTextField.svelte b/packages/bbui/src/Form/Core/RichTextField.svelte
index df39fc1a0a..f964405f0d 100644
--- a/packages/bbui/src/Form/Core/RichTextField.svelte
+++ b/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>
 
diff --git a/packages/bbui/src/Form/RichTextField.svelte b/packages/bbui/src/Form/RichTextField.svelte
index d357a13ae2..275242df49 100644
--- a/packages/bbui/src/Form/RichTextField.svelte
+++ b/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()
diff --git a/packages/bbui/src/Markdown/SpectrumMDE.svelte b/packages/bbui/src/Markdown/SpectrumMDE.svelte
index eb7198bf5b..9b0832c91f 100644
--- a/packages/bbui/src/Markdown/SpectrumMDE.svelte
+++ b/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>
diff --git a/packages/client/src/components/app/Layout.svelte b/packages/client/src/components/app/Layout.svelte
index 59765f9305..600d295cba 100644
--- a/packages/client/src/components/app/Layout.svelte
+++ b/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:mobile={!!$context.device.mobile}
+  class:desktop={!mobile}
+  class:mobile={!!mobile}
 >
   {#if typeClass !== "none"}
     <div
diff --git a/packages/client/src/components/app/forms/LongFormField.svelte b/packages/client/src/components/app/forms/LongFormField.svelte
index e156eef52a..15a10827b2 100644
--- a/packages/client/src/components/app/forms/LongFormField.svelte
+++ b/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"] : [],
         }}