Hide some icons on mobile to avoid fullscreen mobile icon wrapping in rich text editor

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>

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>

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}

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,
     })
 

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>