Support a customisable offset for fullscreen mode for rich text editors

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
+/>

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>

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,

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>
 
+<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>

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>