From 26970971db7e157cea6ec4d7b7c99c706e502ed2 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 4 Feb 2022 14:25:20 +0000
Subject: [PATCH] Hide some icons on mobile to avoid fullscreen mobile icon
 wrapping in rich text editor

---
 packages/bbui/src/Form/Core/RichTextField.svelte              | 2 ++
 packages/bbui/src/Form/RichTextField.svelte                   | 2 ++
 packages/bbui/src/Markdown/MarkdownEditor.svelte              | 2 ++
 packages/bbui/src/Markdown/SpectrumMDE.svelte                 | 1 -
 packages/client/src/components/app/forms/LongFormField.svelte | 3 +++
 5 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/bbui/src/Form/Core/RichTextField.svelte b/packages/bbui/src/Form/Core/RichTextField.svelte
index 4520f1bf28..df39fc1a0a 100644
--- a/packages/bbui/src/Form/Core/RichTextField.svelte
+++ b/packages/bbui/src/Form/Core/RichTextField.svelte
@@ -8,6 +8,7 @@
   export let height = null
   export let id = null
   export let fullScreenOffset = 0
+  export let easyMDEOptions = null
 </script>
 
 <div class:error>
@@ -18,6 +19,7 @@
     {id}
     {fullScreenOffset}
     {disabled}
+    {easyMDEOptions}
     on:change
   />
 </div>
diff --git a/packages/bbui/src/Form/RichTextField.svelte b/packages/bbui/src/Form/RichTextField.svelte
index 91c130bf74..d357a13ae2 100644
--- a/packages/bbui/src/Form/RichTextField.svelte
+++ b/packages/bbui/src/Form/RichTextField.svelte
@@ -12,6 +12,7 @@
   export let height = null
   export let id = null
   export let fullScreenOffset = 0
+  export let easyMDEOptions = null
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -29,6 +30,7 @@
     {height}
     {id}
     {fullScreenOffset}
+    {easyMDEOptions}
     on:change={onChange}
   />
 </Field>
diff --git a/packages/bbui/src/Markdown/MarkdownEditor.svelte b/packages/bbui/src/Markdown/MarkdownEditor.svelte
index 4ab961d646..9265d14f46 100644
--- a/packages/bbui/src/Markdown/MarkdownEditor.svelte
+++ b/packages/bbui/src/Markdown/MarkdownEditor.svelte
@@ -8,6 +8,7 @@
   export let id = null
   export let fullScreenOffset = 0
   export let disabled = false
+  export let easyMDEOptions
 
   const dispatch = createEventDispatcher()
 
@@ -53,6 +54,7 @@
     easyMDEOptions={{
       initialValue: value,
       placeholder,
+      ...easyMDEOptions,
     }}
   />
 {/key}
diff --git a/packages/bbui/src/Markdown/SpectrumMDE.svelte b/packages/bbui/src/Markdown/SpectrumMDE.svelte
index 0e3a7c75cc..fd7e0840e9 100644
--- a/packages/bbui/src/Markdown/SpectrumMDE.svelte
+++ b/packages/bbui/src/Markdown/SpectrumMDE.svelte
@@ -22,7 +22,6 @@
       unorderedListStyle: "-",
       maxHeight: scroll ? height : undefined,
       minHeight: scroll ? undefined : height,
-      // hideIcons: ["fullscreen", "side-by-side"],
       ...easyMDEOptions,
     })
 
diff --git a/packages/client/src/components/app/forms/LongFormField.svelte b/packages/client/src/components/app/forms/LongFormField.svelte
index 443469566f..3a63799e58 100644
--- a/packages/client/src/components/app/forms/LongFormField.svelte
+++ b/packages/client/src/components/app/forms/LongFormField.svelte
@@ -61,6 +61,9 @@
       {placeholder}
       {height}
       fullScreenOffset={offset}
+      easyMDEOptions={{
+        hideIcons: $context.device.mobile ? ["side-by-side", "guide"] : [],
+      }}
     />
   {/if}
 </Field>