From 160849d0f513632e4e95343917b3e6e81df3b88d Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 3 Feb 2022 11:53:51 +0000
Subject: [PATCH] Support a customisable offset for fullscreen mode for rich
 text editors

---
 .../bbui/src/Form/Core/RichTextField.svelte     | 10 +++++++++-
 packages/bbui/src/Form/RichTextField.svelte     |  2 ++
 .../bbui/src/Markdown/MarkdownEditor.svelte     |  2 ++
 packages/bbui/src/Markdown/SpectrumMDE.svelte   | 17 +++++++++++++++--
 .../components/app/forms/LongFormField.svelte   |  5 +++++
 5 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/packages/bbui/src/Form/Core/RichTextField.svelte b/packages/bbui/src/Form/Core/RichTextField.svelte
index 7d2c87fde9..3f7ab60014 100644
--- a/packages/bbui/src/Form/Core/RichTextField.svelte
+++ b/packages/bbui/src/Form/Core/RichTextField.svelte
@@ -7,6 +7,14 @@
   export let error = null
   export let height = null
   export let id = null
+  export let fullScreenOffset = 0
 </script>
 
-<MarkdownEditor {value} {placeholder} {height} {id} on:change />
+<MarkdownEditor
+  {value}
+  {placeholder}
+  {height}
+  {id}
+  {fullScreenOffset}
+  on:change
+/>
diff --git a/packages/bbui/src/Form/RichTextField.svelte b/packages/bbui/src/Form/RichTextField.svelte
index 8dfc70fa26..91c130bf74 100644
--- a/packages/bbui/src/Form/RichTextField.svelte
+++ b/packages/bbui/src/Form/RichTextField.svelte
@@ -11,6 +11,7 @@
   export let error = null
   export let height = null
   export let id = null
+  export let fullScreenOffset = 0
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -27,6 +28,7 @@
     {placeholder}
     {height}
     {id}
+    {fullScreenOffset}
     on:change={onChange}
   />
 </Field>
diff --git a/packages/bbui/src/Markdown/MarkdownEditor.svelte b/packages/bbui/src/Markdown/MarkdownEditor.svelte
index 498fce614e..370436f578 100644
--- a/packages/bbui/src/Markdown/MarkdownEditor.svelte
+++ b/packages/bbui/src/Markdown/MarkdownEditor.svelte
@@ -6,6 +6,7 @@
   export let height = "300px"
   export let placeholder = null
   export let id = null
+  export let fullScreenOffset = 0
 
   const dispatch = createEventDispatcher()
 
@@ -46,6 +47,7 @@
     scroll={true}
     {height}
     {id}
+    {fullScreenOffset}
     easyMDEOptions={{
       initialValue: value,
       placeholder,
diff --git a/packages/bbui/src/Markdown/SpectrumMDE.svelte b/packages/bbui/src/Markdown/SpectrumMDE.svelte
index 3dc8c9e28a..3048697c15 100644
--- a/packages/bbui/src/Markdown/SpectrumMDE.svelte
+++ b/packages/bbui/src/Markdown/SpectrumMDE.svelte
@@ -8,6 +8,7 @@
   export let easyMDEOptions = null
   export let mde = null
   export let id = null
+  export let fullScreenOffset = 0
 
   let element
 
@@ -20,7 +21,7 @@
       unorderedListStyle: "-",
       maxHeight: scroll ? height : undefined,
       minHeight: scroll ? undefined : height,
-      hideIcons: ["fullscreen", "side-by-side"],
+      // hideIcons: ["fullscreen", "side-by-side"],
       ...easyMDEOptions,
     })
 
@@ -31,7 +32,9 @@
   })
 </script>
 
-<textarea {id} bind:this={element} />
+<div style={`--fullscreen-offset:${fullScreenOffset || "0px"}`}>
+  <textarea {id} bind:this={element} />
+</div>
 
 <style>
   /* Toolbar container */
@@ -133,4 +136,14 @@
   :global(.EasyMDEContainer a:hover) {
     color: var(--primaryColorHover);
   }
+  /* Allow full screen offset */
+  :global(.EasyMDEContainer .editor-toolbar.fullscreen) {
+    top: var(--fullscreen-offset);
+  }
+  :global(.EasyMDEContainer .CodeMirror-fullscreen) {
+    top: calc(50px + var(--fullscreen-offset));
+  }
+  :global(.EasyMDEContainer .editor-preview-side) {
+    top: calc(50px + var(--fullscreen-offset));
+  }
 </style>
diff --git a/packages/client/src/components/app/forms/LongFormField.svelte b/packages/client/src/components/app/forms/LongFormField.svelte
index 645ec0a581..443469566f 100644
--- a/packages/client/src/components/app/forms/LongFormField.svelte
+++ b/packages/client/src/components/app/forms/LongFormField.svelte
@@ -14,10 +14,14 @@
   let fieldState
   let fieldApi
 
+  const context = getContext("context")
   const component = getContext("component")
   const newContext = writable($component)
   setContext("component", newContext)
 
+  // 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.
@@ -56,6 +60,7 @@
       id={fieldState.fieldId}
       {placeholder}
       {height}
+      fullScreenOffset={offset}
     />
   {/if}
 </Field>