From 510997543307d8ffe37b0cb49223f47b9ecfc261 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 3 Feb 2022 10:46:41 +0000
Subject: [PATCH] Update rich text field height to be set dynamically

---
 .../bbui/src/Markdown/MarkdownEditor.svelte   | 29 +++++++++----------
 .../bbui/src/Markdown/MarkdownViewer.svelte   | 11 ++++---
 .../components/app/forms/LongFormField.svelte | 25 ++++++++++++++++
 3 files changed, 44 insertions(+), 21 deletions(-)

diff --git a/packages/bbui/src/Markdown/MarkdownEditor.svelte b/packages/bbui/src/Markdown/MarkdownEditor.svelte
index 0b5811db0d..498fce614e 100644
--- a/packages/bbui/src/Markdown/MarkdownEditor.svelte
+++ b/packages/bbui/src/Markdown/MarkdownEditor.svelte
@@ -1,6 +1,6 @@
 <script>
   import SpectrumMDE from "./SpectrumMDE.svelte"
-  import { createEventDispatcher, onMount } from "svelte"
+  import { createEventDispatcher } from "svelte"
 
   export let value = null
   export let height = "300px"
@@ -15,6 +15,7 @@
   // Ensure the value is updated if the value prop changes outside the editor's
   // control
   $: checkValue(value)
+  $: mde?.codemirror.on("change", debouncedUpdate)
 
   const checkValue = val => {
     if (mde && val !== latestValue) {
@@ -37,19 +38,17 @@
 
   // Debounce the update function to avoid spamming it constantly
   const debouncedUpdate = debounce(update, 250)
-
-  onMount(() => {
-    mde.codemirror.on("change", debouncedUpdate)
-  })
 </script>
 
-<SpectrumMDE
-  bind:mde
-  scroll={true}
-  {height}
-  {id}
-  easyMDEOptions={{
-    initialValue: value,
-    placeholder,
-  }}
-/>
+{#key height}
+  <SpectrumMDE
+    bind:mde
+    scroll={true}
+    {height}
+    {id}
+    easyMDEOptions={{
+      initialValue: value,
+      placeholder,
+    }}
+  />
+{/key}
diff --git a/packages/bbui/src/Markdown/MarkdownViewer.svelte b/packages/bbui/src/Markdown/MarkdownViewer.svelte
index ae9213cca7..5705020f45 100644
--- a/packages/bbui/src/Markdown/MarkdownViewer.svelte
+++ b/packages/bbui/src/Markdown/MarkdownViewer.svelte
@@ -1,6 +1,5 @@
 <script>
   import SpectrumMDE from "./SpectrumMDE.svelte"
-  import { onMount } from "svelte"
 
   export let value
   export let height
@@ -9,11 +8,11 @@
 
   // Keep the value up to date
   $: mde && mde.value(value || "")
-
-  onMount(() => {
-    // Turn on preview mode
-    mde.togglePreview()
-  })
+  $: {
+    if (mde && !mde.isPreviewActive()) {
+      mde.togglePreview()
+    }
+  }
 </script>
 
 <div class="markdown-viewer" style="height:{height};">
diff --git a/packages/client/src/components/app/forms/LongFormField.svelte b/packages/client/src/components/app/forms/LongFormField.svelte
index 78f0d7c805..645ec0a581 100644
--- a/packages/client/src/components/app/forms/LongFormField.svelte
+++ b/packages/client/src/components/app/forms/LongFormField.svelte
@@ -1,4 +1,6 @@
 <script>
+  import { getContext, setContext } from "svelte"
+  import { writable } from "svelte/store"
   import { CoreRichTextField } from "@budibase/bbui"
   import Field from "./Field.svelte"
 
@@ -11,6 +13,28 @@
 
   let fieldState
   let fieldApi
+
+  const component = getContext("component")
+  const newContext = writable($component)
+  setContext("component", newContext)
+
+  // 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.
+  let height
+  $: {
+    height = $component.styles?.normal?.height
+    newContext.set({
+      ...$component,
+      styles: {
+        ...$component.styles,
+        normal: {
+          ...$component.styles.normal,
+          height: undefined,
+        },
+      },
+    })
+  }
 </script>
 
 <Field
@@ -31,6 +55,7 @@
       error={fieldState.error}
       id={fieldState.fieldId}
       {placeholder}
+      {height}
     />
   {/if}
 </Field>