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
-
+
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}
/>
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 @@
})
-
+
+
+
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}