From d3b12b6ab83f47153b3ad419c7ae39eb047af01a Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 2 Feb 2022 15:17:59 +0000
Subject: [PATCH 01/20] Add new rich text component to BBUI

---
 packages/bbui/package.json                    |  1 +
 .../bbui/src/Form/Core/RichTextField.svelte   | 11 +++
 packages/bbui/src/Form/Core/index.js          |  1 +
 packages/bbui/src/Form/RichTextField.svelte   | 30 ++++++
 .../bbui/src/Markdown/MarkdownEditor.svelte   | 38 ++++++++
 .../bbui/src/Markdown/MarkdownViewer.svelte   | 60 ++++++++++++
 packages/bbui/src/Markdown/SpectrumMDE.svelte | 94 +++++++++++++++++++
 packages/bbui/src/index.js                    |  3 +
 packages/bbui/yarn.lock                       | 52 ++++++++++
 9 files changed, 290 insertions(+)
 create mode 100644 packages/bbui/src/Form/Core/RichTextField.svelte
 create mode 100644 packages/bbui/src/Form/RichTextField.svelte
 create mode 100644 packages/bbui/src/Markdown/MarkdownEditor.svelte
 create mode 100644 packages/bbui/src/Markdown/MarkdownViewer.svelte
 create mode 100644 packages/bbui/src/Markdown/SpectrumMDE.svelte

diff --git a/packages/bbui/package.json b/packages/bbui/package.json
index 5cc3ccebeb..91a2a17880 100644
--- a/packages/bbui/package.json
+++ b/packages/bbui/package.json
@@ -79,6 +79,7 @@
     "@spectrum-css/underlay": "^2.0.9",
     "@spectrum-css/vars": "^3.0.1",
     "dayjs": "^1.10.4",
+    "easymde": "^2.16.1",
     "svelte-flatpickr": "^3.2.3",
     "svelte-portal": "^1.0.0"
   },
diff --git a/packages/bbui/src/Form/Core/RichTextField.svelte b/packages/bbui/src/Form/Core/RichTextField.svelte
new file mode 100644
index 0000000000..33534485d2
--- /dev/null
+++ b/packages/bbui/src/Form/Core/RichTextField.svelte
@@ -0,0 +1,11 @@
+<script>
+  import MarkdownEditor from "../../Markdown/MarkdownEditor.svelte"
+
+  export let value = ""
+  export let placeholder = null
+  export let disabled = false
+  export let error = null
+  export let height = null
+</script>
+
+<MarkdownEditor {value} {placeholder} {height} on:change />
diff --git a/packages/bbui/src/Form/Core/index.js b/packages/bbui/src/Form/Core/index.js
index 440c4a1b15..3c3f9acb4d 100644
--- a/packages/bbui/src/Form/Core/index.js
+++ b/packages/bbui/src/Form/Core/index.js
@@ -10,3 +10,4 @@ export { default as CoreSearch } from "./Search.svelte"
 export { default as CoreDatePicker } from "./DatePicker.svelte"
 export { default as CoreDropzone } from "./Dropzone.svelte"
 export { default as CoreStepper } from "./Stepper.svelte"
+export { default as CoreRichTextField } from "./RichTextField.svelte"
diff --git a/packages/bbui/src/Form/RichTextField.svelte b/packages/bbui/src/Form/RichTextField.svelte
new file mode 100644
index 0000000000..10c9d96139
--- /dev/null
+++ b/packages/bbui/src/Form/RichTextField.svelte
@@ -0,0 +1,30 @@
+<script>
+  import Field from "./Field.svelte"
+  import RichTextField from "./Core/RichTextField.svelte"
+  import { createEventDispatcher } from "svelte"
+
+  export let value = null
+  export let label = null
+  export let labelPosition = "above"
+  export let placeholder = null
+  export let disabled = false
+  export let error = null
+  export let height = null
+
+  const dispatch = createEventDispatcher()
+  const onChange = e => {
+    value = e.detail
+    dispatch("change", e.detail)
+  }
+</script>
+
+<Field {label} {labelPosition} {error}>
+  <RichTextField
+    {error}
+    {disabled}
+    {value}
+    {placeholder}
+    {height}
+    on:change={onChange}
+  />
+</Field>
diff --git a/packages/bbui/src/Markdown/MarkdownEditor.svelte b/packages/bbui/src/Markdown/MarkdownEditor.svelte
new file mode 100644
index 0000000000..0b57a6e844
--- /dev/null
+++ b/packages/bbui/src/Markdown/MarkdownEditor.svelte
@@ -0,0 +1,38 @@
+<script>
+  import SpectrumMDE from "./SpectrumMDE.svelte"
+  import { createEventDispatcher, onMount } from "svelte"
+
+  export let value
+  export let height = "300px"
+  export let placeholder
+
+  const dispatch = createEventDispatcher()
+
+  let latestValue
+  let mde
+
+  $: checkValue(value)
+
+  const checkValue = val => {
+    if (mde && val !== latestValue) {
+      mde.value(val)
+    }
+  }
+
+  onMount(() => {
+    mde.codemirror.on("change", () => {
+      latestValue = mde.value()
+      dispatch("change", latestValue)
+    })
+  })
+</script>
+
+<SpectrumMDE
+  bind:mde
+  scroll={true}
+  {height}
+  easyMDEOptions={{
+    initialValue: value,
+    placeholder,
+  }}
+/>
diff --git a/packages/bbui/src/Markdown/MarkdownViewer.svelte b/packages/bbui/src/Markdown/MarkdownViewer.svelte
new file mode 100644
index 0000000000..89865346ee
--- /dev/null
+++ b/packages/bbui/src/Markdown/MarkdownViewer.svelte
@@ -0,0 +1,60 @@
+<script>
+  import SpectrumMDE from "./SpectrumMDE.svelte"
+  import { onMount } from "svelte"
+
+  export let value
+
+  let mde
+
+  // Keep the value up to date
+  $: mde && mde.value(value || "")
+
+  onMount(() => {
+    // Turn on preview mode
+    mde.togglePreview()
+  })
+</script>
+
+<div class="markdown-viewer">
+  <SpectrumMDE
+    bind:mde
+    scroll={false}
+    easyMDEOptions={{
+      initialValue: value,
+      toolbar: false,
+    }}
+  />
+</div>
+
+<style>
+  /* Remove padding, borders and background colors */
+  .markdown-viewer :global(.editor-preview) {
+    padding: 0;
+    border: none;
+    background: transparent;
+  }
+  .markdown-viewer :global(.CodeMirror) {
+    border: none;
+    background: transparent;
+    padding: 0;
+  }
+  .markdown-viewer :global(.EasyMDEContainer) {
+    background: transparent;
+  }
+  /* Hide the actual code editor */
+  .markdown-viewer :global(.CodeMirror-scroll) {
+    display: none;
+  }
+  /*Hide the scrollbar*/
+  .markdown-viewer :global(.CodeMirror-vscrollbar) {
+    display: none !important;
+  }
+  /*Position relatively so we only consume whatever space we need */
+  .markdown-viewer :global(.editor-preview-full) {
+    position: relative;
+  }
+  /* Remove margin on the final component to fully trim the preview */
+  .markdown-viewer :global(.editor-preview-full > :last-child) {
+    margin-bottom: 0;
+  }
+</style>
diff --git a/packages/bbui/src/Markdown/SpectrumMDE.svelte b/packages/bbui/src/Markdown/SpectrumMDE.svelte
new file mode 100644
index 0000000000..e7ca40e557
--- /dev/null
+++ b/packages/bbui/src/Markdown/SpectrumMDE.svelte
@@ -0,0 +1,94 @@
+<script>
+  import EasyMDE from "easymde"
+  import "easymde/dist/easymde.min.css"
+  import { onMount } from "svelte"
+
+  export let height = "300px"
+  export let scroll = false
+  export let easyMDEOptions = null
+  export let mde
+
+  let element
+
+  onMount(() => {
+    height = height || "300px"
+    mde = new EasyMDE({
+      element,
+      spellChecker: false,
+      status: false,
+      unorderedListStyle: "-",
+      maxHeight: scroll ? height : undefined,
+      minHeight: scroll ? undefined : height,
+      ...easyMDEOptions,
+    })
+
+    // Revert the editor when we unmount
+    return () => {
+      mde.toTextArea()
+    }
+  })
+</script>
+
+<textarea bind:this={element} />
+
+<style>
+  /* Toolbar container */
+  :global(.EasyMDEContainer .editor-toolbar) {
+    background: var(--background);
+    border-top: var(--border-light);
+    border-left: var(--border-light);
+    border-right: var(--border-light);
+  }
+  /* Main code mirror instance and default color */
+  :global(.EasyMDEContainer .CodeMirror) {
+    border: var(--border-light);
+    background: var(--background);
+    color: var(--ink);
+  }
+  /* Toolbar button active state */
+  :global(.EasyMDEContainer .editor-toolbar button.active) {
+    background: var(--spectrum-global-color-gray-200);
+    border-color: var(--spectrum-global-color-gray-400);
+  }
+  /* Toolbar button hover state */
+  :global(.EasyMDEContainer .editor-toolbar button:hover) {
+    background: var(--spectrum-global-color-gray-200);
+    border-color: var(--spectrum-global-color-gray-400);
+  }
+  /* Toolbar button color */
+  :global(.EasyMDEContainer .editor-toolbar button i) {
+    color: var(--spectrum-global-color-gray-800);
+  }
+  /* Separator between toolbar buttons*/
+  :global(.EasyMDEContainer .editor-toolbar i.separator) {
+    border-color: var(--spectrum-global-color-gray-300);
+  }
+  /* Cursor */
+  :global(.EasyMDEContainer .CodeMirror-cursor) {
+    border-color: var(--ink);
+  }
+  /* Text selections */
+  :global(.EasyMDEContainer .CodeMirror-selectedtext) {
+    background: var(--spectrum-global-color-gray-400);
+  }
+  /* Background of lines containing selected text */
+  :global(.EasyMDEContainer .CodeMirror-selected) {
+    background: var(--spectrum-global-color-gray-400) !important;
+  }
+  /* Color of text for images and links */
+  :global(.EasyMDEContainer .cm-s-easymde .cm-link) {
+    color: var(--spectrum-global-color-gray-600);
+  }
+  /* Color of URL for images and links */
+  :global(.EasyMDEContainer .cm-s-easymde .cm-url) {
+    color: var(--spectrum-global-color-gray-500);
+  }
+  /* Full preview window */
+  :global(.EasyMDEContainer .editor-preview) {
+    background: var(--background);
+  }
+  /* Side by side preview window */
+  :global(.EasyMDEContainer .editor-preview) {
+    border: var(--border-light);
+  }
+</style>
diff --git a/packages/bbui/src/index.js b/packages/bbui/src/index.js
index 16f069f4e7..ea5486aadc 100644
--- a/packages/bbui/src/index.js
+++ b/packages/bbui/src/index.js
@@ -60,6 +60,9 @@ export { default as StatusLight } from "./StatusLight/StatusLight.svelte"
 export { default as ColorPicker } from "./ColorPicker/ColorPicker.svelte"
 export { default as InlineAlert } from "./InlineAlert/InlineAlert.svelte"
 export { default as Banner } from "./Banner/Banner.svelte"
+export { default as MarkdownEditor } from "./Markdown/MarkdownEditor.svelte"
+export { default as MarkdownViewer } from "./Markdown/MarkdownViewer.svelte"
+export { default as RichTextField } from "./Form/RichTextField.svelte"
 
 // Renderers
 export { default as BoldRenderer } from "./Table/BoldRenderer.svelte"
diff --git a/packages/bbui/yarn.lock b/packages/bbui/yarn.lock
index 42c88af5a4..1a4f5e4417 100644
--- a/packages/bbui/yarn.lock
+++ b/packages/bbui/yarn.lock
@@ -271,6 +271,13 @@
   resolved "https://registry.yarnpkg.com/@spectrum-css/vars/-/vars-3.0.2.tgz#ea9062c3c98dfc6ba59e5df14a03025ad8969999"
   integrity sha512-vzS9KqYXot4J3AEER/u618MXWAS+IoMvYMNrOoscKiLLKYQWenaueakUWulFonToPd/9vIpqtdbwxznqrK5qDw==
 
+"@types/codemirror@^5.60.4":
+  version "5.60.5"
+  resolved "https://registry.yarnpkg.com/@types/codemirror/-/codemirror-5.60.5.tgz#5b989a3b4bbe657458cf372c92b6bfda6061a2b7"
+  integrity sha512-TiECZmm8St5YxjFUp64LK0c8WU5bxMDt9YaAek1UqUb9swrSCoJhh92fWu1p3mTEqlHjhB5sY7OFBhWroJXZVg==
+  dependencies:
+    "@types/tern" "*"
+
 "@types/estree@*":
   version "0.0.47"
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.47.tgz#d7a51db20f0650efec24cd04994f523d93172ed4"
@@ -281,6 +288,11 @@
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f"
   integrity sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==
 
+"@types/marked@^4.0.1":
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/@types/marked/-/marked-4.0.2.tgz#cb2dbf10da2f41cf20bd91fb5f89b67540c282f7"
+  integrity sha512-auNrZ/c0w6wsM9DccwVxWHssrMDezHUAXNesdp2RQrCVCyrQbOiSq7yqdJKrUQQpw9VTm7CGYJH2A/YG7jjrjQ==
+
 "@types/node@*":
   version "14.14.41"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-14.14.41.tgz#d0b939d94c1d7bd53d04824af45f1139b8c45615"
@@ -303,6 +315,13 @@
   dependencies:
     "@types/node" "*"
 
+"@types/tern@*":
+  version "0.23.4"
+  resolved "https://registry.yarnpkg.com/@types/tern/-/tern-0.23.4.tgz#03926eb13dbeaf3ae0d390caf706b2643a0127fb"
+  integrity sha512-JAUw1iXGO1qaWwEOzxTKJZ/5JxVeON9kvGZ/osgZaJImBnyjyn0cjovPsf6FNLmyGY8Vw9DoXZCMlfMkMwHRWg==
+  dependencies:
+    "@types/estree" "*"
+
 accepts@~1.3.7:
   version "1.3.7"
   resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.7.tgz#531bc726517a3b2b41f850021c6cc15eaab507cd"
@@ -525,6 +544,18 @@ coa@^2.0.2:
     chalk "^2.4.1"
     q "^1.1.2"
 
+codemirror-spell-checker@1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/codemirror-spell-checker/-/codemirror-spell-checker-1.1.2.tgz#1c660f9089483ccb5113b9ba9ca19c3f4993371e"
+  integrity sha1-HGYPkIlIPMtRE7m6nKGcP0mTNx4=
+  dependencies:
+    typo-js "*"
+
+codemirror@^5.63.1:
+  version "5.65.1"
+  resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.65.1.tgz#5988a812c974c467f964bcc1a00c944e373de502"
+  integrity sha512-s6aac+DD+4O2u1aBmdxhB7yz2XU7tG3snOyQ05Kxifahz7hoxnfxIRHxiCSEv3TUC38dIVH8G+lZH9UWSfGQxA==
+
 color-convert@^1.9.0, color-convert@^1.9.1:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
@@ -861,6 +892,17 @@ dot-prop@^5.2.0:
   dependencies:
     is-obj "^2.0.0"
 
+easymde@^2.16.1:
+  version "2.16.1"
+  resolved "https://registry.yarnpkg.com/easymde/-/easymde-2.16.1.tgz#f4c2380312615cb33826f1a1fecfaa4022ff551a"
+  integrity sha512-FihYgjRsKfhGNk89SHSqxKLC4aJ1kfybPWW6iAmtb5GnXu+tnFPSzSaGBmk1RRlCuhFSjhF0SnIMGVPjEzkr6g==
+  dependencies:
+    "@types/codemirror" "^5.60.4"
+    "@types/marked" "^4.0.1"
+    codemirror "^5.63.1"
+    codemirror-spell-checker "1.1.2"
+    marked "^4.0.10"
+
 ee-first@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
@@ -1472,6 +1514,11 @@ magic-string@^0.25.7:
   dependencies:
     sourcemap-codec "^1.4.4"
 
+marked@^4.0.10:
+  version "4.0.12"
+  resolved "https://registry.yarnpkg.com/marked/-/marked-4.0.12.tgz#2262a4e6fd1afd2f13557726238b69a48b982f7d"
+  integrity sha512-hgibXWrEDNBWgGiK18j/4lkS6ihTe9sxtV4Q1OQppb/0zzyPSzoFANBa5MfsG/zgsWklmNnhm0XACZOH/0HBiQ==
+
 mdn-data@2.0.14:
   version "2.0.14"
   resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50"
@@ -2490,6 +2537,11 @@ type-is@~1.6.17, type-is@~1.6.18:
     media-typer "0.3.0"
     mime-types "~2.1.24"
 
+typo-js@*:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/typo-js/-/typo-js-1.2.1.tgz#334a0d8c3f6c56f2f1e15fdf6c31677793cbbe9b"
+  integrity sha512-bTGLjbD3WqZDR3CgEFkyi9Q/SS2oM29ipXrWfDb4M74ea69QwKAECVceYpaBu0GfdnASMg9Qfl67ttB23nePHg==
+
 unbox-primitive@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.1.tgz#085e215625ec3162574dc8859abee78a59b14471"

From 7a3683a462c77c01d0ffe2e4f1f8fceb09aca8da Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 2 Feb 2022 15:18:46 +0000
Subject: [PATCH 02/20] Use new rich text field in build backend UI

---
 .../src/components/backend/DataTable/RowFieldControl.svelte   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/components/backend/DataTable/RowFieldControl.svelte b/packages/builder/src/components/backend/DataTable/RowFieldControl.svelte
index 0d9ca3644b..a8fb05c2c5 100644
--- a/packages/builder/src/components/backend/DataTable/RowFieldControl.svelte
+++ b/packages/builder/src/components/backend/DataTable/RowFieldControl.svelte
@@ -4,9 +4,9 @@
     Select,
     DatePicker,
     Toggle,
-    TextArea,
     Multiselect,
     Label,
+    RichTextField,
   } from "@budibase/bbui"
   import Dropzone from "components/common/Dropzone.svelte"
   import { capitalise } from "helpers"
@@ -43,7 +43,7 @@
 {:else if type === "link"}
   <LinkedRowSelector bind:linkedRows={value} schema={meta} />
 {:else if type === "longform"}
-  <TextArea {label} bind:value />
+  <RichTextField {label} height="200px" bind:value />
 {:else if type === "json"}
   <Label>{label}</Label>
   <Editor

From 283b59d5fe7e02f29d2c61ac6fafb10670db7910 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 2 Feb 2022 21:22:49 +0000
Subject: [PATCH 03/20] Update markdown viewer and editor BBUI components

---
 .../bbui/src/Form/Core/RichTextField.svelte   |  3 +-
 packages/bbui/src/Form/RichTextField.svelte   |  2 ++
 .../bbui/src/Markdown/MarkdownEditor.svelte   | 29 +++++++++++++++----
 .../bbui/src/Markdown/MarkdownViewer.svelte   |  6 +++-
 packages/bbui/src/Markdown/SpectrumMDE.svelte | 28 +++++++++---------
 5 files changed, 47 insertions(+), 21 deletions(-)

diff --git a/packages/bbui/src/Form/Core/RichTextField.svelte b/packages/bbui/src/Form/Core/RichTextField.svelte
index 33534485d2..7d2c87fde9 100644
--- a/packages/bbui/src/Form/Core/RichTextField.svelte
+++ b/packages/bbui/src/Form/Core/RichTextField.svelte
@@ -6,6 +6,7 @@
   export let disabled = false
   export let error = null
   export let height = null
+  export let id = null
 </script>
 
-<MarkdownEditor {value} {placeholder} {height} on:change />
+<MarkdownEditor {value} {placeholder} {height} {id} on:change />
diff --git a/packages/bbui/src/Form/RichTextField.svelte b/packages/bbui/src/Form/RichTextField.svelte
index 10c9d96139..8dfc70fa26 100644
--- a/packages/bbui/src/Form/RichTextField.svelte
+++ b/packages/bbui/src/Form/RichTextField.svelte
@@ -10,6 +10,7 @@
   export let disabled = false
   export let error = null
   export let height = null
+  export let id = null
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -25,6 +26,7 @@
     {value}
     {placeholder}
     {height}
+    {id}
     on:change={onChange}
   />
 </Field>
diff --git a/packages/bbui/src/Markdown/MarkdownEditor.svelte b/packages/bbui/src/Markdown/MarkdownEditor.svelte
index 0b57a6e844..0b5811db0d 100644
--- a/packages/bbui/src/Markdown/MarkdownEditor.svelte
+++ b/packages/bbui/src/Markdown/MarkdownEditor.svelte
@@ -2,15 +2,18 @@
   import SpectrumMDE from "./SpectrumMDE.svelte"
   import { createEventDispatcher, onMount } from "svelte"
 
-  export let value
+  export let value = null
   export let height = "300px"
-  export let placeholder
+  export let placeholder = null
+  export let id = null
 
   const dispatch = createEventDispatcher()
 
   let latestValue
   let mde
 
+  // Ensure the value is updated if the value prop changes outside the editor's
+  // control
   $: checkValue(value)
 
   const checkValue = val => {
@@ -19,11 +22,24 @@
     }
   }
 
+  const debounce = (fn, interval) => {
+    let timeout
+    return () => {
+      clearTimeout(timeout)
+      timeout = setTimeout(fn, interval)
+    }
+  }
+
+  const update = () => {
+    latestValue = mde.value()
+    dispatch("change", latestValue)
+  }
+
+  // Debounce the update function to avoid spamming it constantly
+  const debouncedUpdate = debounce(update, 250)
+
   onMount(() => {
-    mde.codemirror.on("change", () => {
-      latestValue = mde.value()
-      dispatch("change", latestValue)
-    })
+    mde.codemirror.on("change", debouncedUpdate)
   })
 </script>
 
@@ -31,6 +47,7 @@
   bind:mde
   scroll={true}
   {height}
+  {id}
   easyMDEOptions={{
     initialValue: value,
     placeholder,
diff --git a/packages/bbui/src/Markdown/MarkdownViewer.svelte b/packages/bbui/src/Markdown/MarkdownViewer.svelte
index 89865346ee..b601bbf027 100644
--- a/packages/bbui/src/Markdown/MarkdownViewer.svelte
+++ b/packages/bbui/src/Markdown/MarkdownViewer.svelte
@@ -3,6 +3,7 @@
   import { onMount } from "svelte"
 
   export let value
+  export let height
 
   let mde
 
@@ -15,7 +16,7 @@
   })
 </script>
 
-<div class="markdown-viewer">
+<div class="markdown-viewer" style="height:{height};">
   <SpectrumMDE
     bind:mde
     scroll={false}
@@ -27,6 +28,9 @@
 </div>
 
 <style>
+  .markdown-viewer {
+    overflow: auto;
+  }
   /* Remove padding, borders and background colors */
   .markdown-viewer :global(.editor-preview) {
     padding: 0;
diff --git a/packages/bbui/src/Markdown/SpectrumMDE.svelte b/packages/bbui/src/Markdown/SpectrumMDE.svelte
index e7ca40e557..2e80a7d198 100644
--- a/packages/bbui/src/Markdown/SpectrumMDE.svelte
+++ b/packages/bbui/src/Markdown/SpectrumMDE.svelte
@@ -4,9 +4,10 @@
   import { onMount } from "svelte"
 
   export let height = "300px"
-  export let scroll = false
+  export let scroll = true
   export let easyMDEOptions = null
-  export let mde
+  export let mde = null
+  export let id = null
 
   let element
 
@@ -19,6 +20,7 @@
       unorderedListStyle: "-",
       maxHeight: scroll ? height : undefined,
       minHeight: scroll ? undefined : height,
+      hideIcons: ["fullscreen", "side-by-side"],
       ...easyMDEOptions,
     })
 
@@ -29,21 +31,21 @@
   })
 </script>
 
-<textarea bind:this={element} />
+<textarea {id} bind:this={element} />
 
 <style>
   /* Toolbar container */
   :global(.EasyMDEContainer .editor-toolbar) {
-    background: var(--background);
-    border-top: var(--border-light);
-    border-left: var(--border-light);
-    border-right: var(--border-light);
+    background: var(--spectrum-global-color-gray-50);
+    border-top: 1px solid var(--spectrum-alias-border-color);
+    border-left: 1px solid var(--spectrum-alias-border-color);
+    border-right: 1px solid var(--spectrum-alias-border-color);
   }
   /* Main code mirror instance and default color */
   :global(.EasyMDEContainer .CodeMirror) {
-    border: var(--border-light);
-    background: var(--background);
-    color: var(--ink);
+    border: 1px solid var(--spectrum-alias-border-color);
+    background: var(--spectrum-global-color-gray-50);
+    color: var(--spectrum-alias-text-color);
   }
   /* Toolbar button active state */
   :global(.EasyMDEContainer .editor-toolbar button.active) {
@@ -65,7 +67,7 @@
   }
   /* Cursor */
   :global(.EasyMDEContainer .CodeMirror-cursor) {
-    border-color: var(--ink);
+    border-color: var(--spectrum-alias-text-color);
   }
   /* Text selections */
   :global(.EasyMDEContainer .CodeMirror-selectedtext) {
@@ -85,10 +87,10 @@
   }
   /* Full preview window */
   :global(.EasyMDEContainer .editor-preview) {
-    background: var(--background);
+    background: var(--spectrum-global-color-gray-50);
   }
   /* Side by side preview window */
   :global(.EasyMDEContainer .editor-preview) {
-    border: var(--border-light);
+    border: 1px solid var(--spectrum-alias-border-color);
   }
 </style>

From 7f064598a69db58f7fe81a27a35108d972d5282b Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 2 Feb 2022 21:23:28 +0000
Subject: [PATCH 04/20] Update client app long form text component to be rich
 text and add new markdown viewer component

---
 packages/client/manifest.json                 | 14 +++++++-
 .../src/components/app/MarkdownViewer.svelte  | 19 ++++++++++
 .../components/app/forms/LongFormField.svelte | 35 +++++--------------
 packages/client/src/components/app/index.js   |  1 +
 4 files changed, 42 insertions(+), 27 deletions(-)
 create mode 100644 packages/client/src/components/app/MarkdownViewer.svelte

diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 5cb93031bd..75366ee96a 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -2340,7 +2340,6 @@
     "icon": "TextParagraph",
     "styles": ["size"],
     "editable": true,
-    "illegalChildren": ["section"],
     "settings": [
       {
         "type": "field/longform",
@@ -3385,5 +3384,18 @@
         "key": "validation"
       }
     ]
+  },
+  "markdownviewer": {
+    "name": "Markdown Viewer",
+    "icon": "TaskList",
+    "styles": ["size"],
+    "editable": true,
+    "settings": [
+      {
+        "type": "text",
+        "label": "Value",
+        "key": "value"
+      }
+    ]
   }
 }
diff --git a/packages/client/src/components/app/MarkdownViewer.svelte b/packages/client/src/components/app/MarkdownViewer.svelte
new file mode 100644
index 0000000000..23866e20e9
--- /dev/null
+++ b/packages/client/src/components/app/MarkdownViewer.svelte
@@ -0,0 +1,19 @@
+<script>
+  import { MarkdownViewer } from "@budibase/bbui"
+  import { getContext } from "svelte"
+  import Placeholder from "./Placeholder.svelte"
+
+  export let value
+
+  const component = getContext("component")
+  const { builderStore, styleable } = getContext("sdk")
+  const height = $component.styles?.normal?.height
+</script>
+
+<div use:styleable={$component.styles}>
+  {#if value}
+    <MarkdownViewer {value} {height} />
+  {:else if $builderStore.inBuilder}
+    <Placeholder />
+  {/if}
+</div>
diff --git a/packages/client/src/components/app/forms/LongFormField.svelte b/packages/client/src/components/app/forms/LongFormField.svelte
index a58e1fe76c..78f0d7c805 100644
--- a/packages/client/src/components/app/forms/LongFormField.svelte
+++ b/packages/client/src/components/app/forms/LongFormField.svelte
@@ -1,7 +1,6 @@
 <script>
-  import { CoreTextArea } from "@budibase/bbui"
+  import { CoreRichTextField } from "@budibase/bbui"
   import Field from "./Field.svelte"
-  import { getContext } from "svelte"
 
   export let field
   export let label
@@ -12,9 +11,6 @@
 
   let fieldState
   let fieldApi
-
-  const component = getContext("component")
-  $: height = $component.styles?.normal?.height || "124px"
 </script>
 
 <Field
@@ -28,26 +24,13 @@
   bind:fieldApi
 >
   {#if fieldState}
-    <div style="--height: {height};">
-      <CoreTextArea
-        value={fieldState.value}
-        on:change={e => fieldApi.setValue(e.detail)}
-        disabled={fieldState.disabled}
-        error={fieldState.error}
-        id={fieldState.fieldId}
-        {placeholder}
-      />
-    </div>
+    <CoreRichTextField
+      value={fieldState.value}
+      on:change={e => fieldApi.setValue(e.detail)}
+      disabled={fieldState.disabled}
+      error={fieldState.error}
+      id={fieldState.fieldId}
+      {placeholder}
+    />
   {/if}
 </Field>
-
-<style>
-  :global(.spectrum-Form-itemField .spectrum-Textfield--multiline) {
-    min-height: calc(var(--height) - 24px);
-  }
-  :global(.spectrum-Form--labelsAbove
-      .spectrum-Form-itemField
-      .spectrum-Textfield--multiline) {
-    min-height: calc(var(--height) - 24px);
-  }
-</style>
diff --git a/packages/client/src/components/app/index.js b/packages/client/src/components/app/index.js
index ef0f96ce59..5af62201e5 100644
--- a/packages/client/src/components/app/index.js
+++ b/packages/client/src/components/app/index.js
@@ -30,6 +30,7 @@ export { default as daterangepicker } from "./DateRangePicker.svelte"
 export { default as cardstat } from "./CardStat.svelte"
 export { default as spectrumcard } from "./SpectrumCard.svelte"
 export { default as tag } from "./Tag.svelte"
+export { default as markdownviewer } from "./MarkdownViewer.svelte"
 export * from "./charts"
 export * from "./forms"
 export * from "./table"

From bd6ae0686d56f9e39badc0dc4e550777a9fb9643 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 2 Feb 2022 21:23:39 +0000
Subject: [PATCH 05/20] Add markdown viewer component to builder

---
 .../src/components/design/AppPreview/componentStructure.json   | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/components/design/AppPreview/componentStructure.json b/packages/builder/src/components/design/AppPreview/componentStructure.json
index 0b888ba10b..cacd70a89b 100644
--- a/packages/builder/src/components/design/AppPreview/componentStructure.json
+++ b/packages/builder/src/components/design/AppPreview/componentStructure.json
@@ -81,7 +81,8 @@
       "backgroundimage",
       "link",
       "icon",
-      "embed"
+      "embed",
+      "markdownviewer"
     ]
   }
 ]

From 27b3d19771957a6297fd1f0e0a30d64cafc6aada Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 3 Feb 2022 09:06:52 +0000
Subject: [PATCH 06/20] Properly trim markdown viewer component

---
 packages/bbui/src/Markdown/MarkdownViewer.svelte | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/bbui/src/Markdown/MarkdownViewer.svelte b/packages/bbui/src/Markdown/MarkdownViewer.svelte
index b601bbf027..26a716690c 100644
--- a/packages/bbui/src/Markdown/MarkdownViewer.svelte
+++ b/packages/bbui/src/Markdown/MarkdownViewer.svelte
@@ -57,7 +57,10 @@
   .markdown-viewer :global(.editor-preview-full) {
     position: relative;
   }
-  /* Remove margin on the final component to fully trim the preview */
+  /* Remove margin on the first and last components to fully trim the preview */
+  .markdown-viewer :global(.editor-preview-full > :first-child) {
+    margin-top: 0;
+  }
   .markdown-viewer :global(.editor-preview-full > :last-child) {
     margin-bottom: 0;
   }

From 953fa94e2bc0db43ffdf9e3287b7a12b7a4b815d Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 3 Feb 2022 09:32:01 +0000
Subject: [PATCH 07/20] Add custom styles for code blocks and block quotes in
 rich text editor and preview

---
 .../bbui/src/Markdown/MarkdownViewer.svelte   |  4 +++
 packages/bbui/src/Markdown/SpectrumMDE.svelte | 25 ++++++++++++++++++-
 2 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/packages/bbui/src/Markdown/MarkdownViewer.svelte b/packages/bbui/src/Markdown/MarkdownViewer.svelte
index 26a716690c..ae9213cca7 100644
--- a/packages/bbui/src/Markdown/MarkdownViewer.svelte
+++ b/packages/bbui/src/Markdown/MarkdownViewer.svelte
@@ -64,4 +64,8 @@
   .markdown-viewer :global(.editor-preview-full > :last-child) {
     margin-bottom: 0;
   }
+  /* Code blocks in preview */
+  .markdown-viewer :global(.editor-preview-full pre) {
+    background: var(--spectrum-global-color-gray-200);
+  }
 </style>
diff --git a/packages/bbui/src/Markdown/SpectrumMDE.svelte b/packages/bbui/src/Markdown/SpectrumMDE.svelte
index 2e80a7d198..1331210341 100644
--- a/packages/bbui/src/Markdown/SpectrumMDE.svelte
+++ b/packages/bbui/src/Markdown/SpectrumMDE.svelte
@@ -71,7 +71,7 @@
   }
   /* Text selections */
   :global(.EasyMDEContainer .CodeMirror-selectedtext) {
-    background: var(--spectrum-global-color-gray-400);
+    background: var(--spectrum-global-color-gray-400) !important;
   }
   /* Background of lines containing selected text */
   :global(.EasyMDEContainer .CodeMirror-selected) {
@@ -93,4 +93,27 @@
   :global(.EasyMDEContainer .editor-preview) {
     border: 1px solid var(--spectrum-alias-border-color);
   }
+  /* Code blocks in editor */
+  :global(.EasyMDEContainer .cm-s-easymde .cm-comment) {
+    background: var(--spectrum-global-color-gray-100);
+  }
+  /* Code blocks in preview */
+  :global(.EasyMDEContainer .editor-preview pre) {
+    background: var(--spectrum-global-color-gray-100);
+    padding: 4px;
+    border-radius: 4px;
+  }
+  :global(.EasyMDEContainer .editor-preview code) {
+    color: #e83e8c;
+  }
+  :global(.EasyMDEContainer .editor-preview pre code) {
+    color: var(--spectrum-alias-text-color);
+  }
+  /* Block quotes */
+  :global(.EasyMDEContainer .editor-preview blockquote) {
+    border-left: 4px solid var(--spectrum-global-color-gray-400);
+    color: var(--spectrum-global-color-gray-700);
+    margin-left: 0;
+    padding-left: 20px;
+  }
 </style>

From 1ec51d256234e24a2f0df4f3789e4de184891830 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 3 Feb 2022 09:46:30 +0000
Subject: [PATCH 08/20] Add custom styles for HRs, tables and link colors in
 rich text editor and preview

---
 packages/bbui/src/Markdown/SpectrumMDE.svelte | 25 ++++++++++++++++---
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/packages/bbui/src/Markdown/SpectrumMDE.svelte b/packages/bbui/src/Markdown/SpectrumMDE.svelte
index 1331210341..3dc8c9e28a 100644
--- a/packages/bbui/src/Markdown/SpectrumMDE.svelte
+++ b/packages/bbui/src/Markdown/SpectrumMDE.svelte
@@ -98,22 +98,39 @@
     background: var(--spectrum-global-color-gray-100);
   }
   /* Code blocks in preview */
-  :global(.EasyMDEContainer .editor-preview pre) {
+  :global(.EasyMDEContainer pre) {
     background: var(--spectrum-global-color-gray-100);
     padding: 4px;
     border-radius: 4px;
   }
-  :global(.EasyMDEContainer .editor-preview code) {
+  :global(.EasyMDEContainer code) {
     color: #e83e8c;
   }
-  :global(.EasyMDEContainer .editor-preview pre code) {
+  :global(.EasyMDEContainer pre code) {
     color: var(--spectrum-alias-text-color);
   }
   /* Block quotes */
-  :global(.EasyMDEContainer .editor-preview blockquote) {
+  :global(.EasyMDEContainer blockquote) {
     border-left: 4px solid var(--spectrum-global-color-gray-400);
     color: var(--spectrum-global-color-gray-700);
     margin-left: 0;
     padding-left: 20px;
   }
+  /* HR's */
+  :global(.EasyMDEContainer hr) {
+    background-color: var(--spectrum-global-color-gray-300);
+    border: none;
+    height: 2px;
+  }
+  /*  Tables */
+  :global(.EasyMDEContainer td, .EasyMDEContainer th) {
+    border-color: var(--spectrum-alias-border-color) !important;
+  }
+  /*  Links */
+  :global(.EasyMDEContainer a) {
+    color: var(--primaryColor);
+  }
+  :global(.EasyMDEContainer a:hover) {
+    color: var(--primaryColorHover);
+  }
 </style>

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 09/20] 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>

From fc009cc9b4932647cbf61a4e214b70b95b865042 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 3 Feb 2022 11:53:51 +0000
Subject: [PATCH 10/20] Support a customisable offset for fullscreen mode for
 rich text editors

---
 .../bbui/src/Form/Core/RichTextField.svelte     | 10 +++++++++-
 packages/bbui/src/Form/RichTextField.svelte     |  2 ++
 .../bbui/src/Markdown/MarkdownEditor.svelte     |  2 ++
 packages/bbui/src/Markdown/SpectrumMDE.svelte   | 17 +++++++++++++++--
 .../components/app/forms/LongFormField.svelte   |  5 +++++
 5 files changed, 33 insertions(+), 3 deletions(-)

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
 </script>
 
-<MarkdownEditor {value} {placeholder} {height} {id} on:change />
+<MarkdownEditor
+  {value}
+  {placeholder}
+  {height}
+  {id}
+  {fullScreenOffset}
+  on:change
+/>
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}
   />
 </Field>
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 @@
   })
 </script>
 
-<textarea {id} bind:this={element} />
+<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>
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}
 </Field>

From 51801bf2d03621ff15d97361042fd52f187614e5 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 3 Feb 2022 11:54:07 +0000
Subject: [PATCH 11/20] Update setting label of markdown viewer component

---
 packages/client/manifest.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 75366ee96a..6396deed4c 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -3393,7 +3393,7 @@
     "settings": [
       {
         "type": "text",
-        "label": "Value",
+        "label": "Markdown",
         "key": "value"
       }
     ]

From 46ad1dc2c43db48eb1765353296d6d0c0881c3a7 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 3 Feb 2022 14:08:30 +0000
Subject: [PATCH 12/20] Add error border when rich text field fails validation

---
 .../bbui/src/Form/Core/RichTextField.svelte   | 35 ++++++++++++++-----
 1 file changed, 27 insertions(+), 8 deletions(-)

diff --git a/packages/bbui/src/Form/Core/RichTextField.svelte b/packages/bbui/src/Form/Core/RichTextField.svelte
index 3f7ab60014..f14c778471 100644
--- a/packages/bbui/src/Form/Core/RichTextField.svelte
+++ b/packages/bbui/src/Form/Core/RichTextField.svelte
@@ -10,11 +10,30 @@
   export let fullScreenOffset = 0
 </script>
 
-<MarkdownEditor
-  {value}
-  {placeholder}
-  {height}
-  {id}
-  {fullScreenOffset}
-  on:change
-/>
+<div class:error>
+  <MarkdownEditor
+    {value}
+    {placeholder}
+    {height}
+    {id}
+    {fullScreenOffset}
+    on:change
+  />
+</div>
+
+<style>
+  .error :global(.EasyMDEContainer .editor-toolbar) {
+    border-top-color: var(--spectrum-semantic-negative-color-default);
+    border-left-color: var(--spectrum-semantic-negative-color-default);
+    border-right-color: var(--spectrum-semantic-negative-color-default);
+  }
+  .error :global(.EasyMDEContainer .CodeMirror) {
+    border-bottom-color: var(--spectrum-semantic-negative-color-default);
+    border-left-color: var(--spectrum-semantic-negative-color-default);
+    border-right-color: var(--spectrum-semantic-negative-color-default);
+  }
+  .error :global(.EasyMDEContainer .editor-preview-side) {
+    border-bottom-color: var(--spectrum-semantic-negative-color-default);
+    border-right-color: var(--spectrum-semantic-negative-color-default);
+  }
+</style>

From 920d2a4bbfd958dae727cdd369c52835cbb67691 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 3 Feb 2022 14:28:15 +0000
Subject: [PATCH 13/20] Add support for disabling rich text fields

---
 .../bbui/src/Form/Core/RichTextField.svelte   |  1 +
 .../bbui/src/Markdown/MarkdownEditor.svelte   |  2 ++
 packages/bbui/src/Markdown/SpectrumMDE.svelte | 22 +++++++++++++++++--
 3 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/packages/bbui/src/Form/Core/RichTextField.svelte b/packages/bbui/src/Form/Core/RichTextField.svelte
index f14c778471..4520f1bf28 100644
--- a/packages/bbui/src/Form/Core/RichTextField.svelte
+++ b/packages/bbui/src/Form/Core/RichTextField.svelte
@@ -17,6 +17,7 @@
     {height}
     {id}
     {fullScreenOffset}
+    {disabled}
     on:change
   />
 </div>
diff --git a/packages/bbui/src/Markdown/MarkdownEditor.svelte b/packages/bbui/src/Markdown/MarkdownEditor.svelte
index 370436f578..4ab961d646 100644
--- a/packages/bbui/src/Markdown/MarkdownEditor.svelte
+++ b/packages/bbui/src/Markdown/MarkdownEditor.svelte
@@ -7,6 +7,7 @@
   export let placeholder = null
   export let id = null
   export let fullScreenOffset = 0
+  export let disabled = false
 
   const dispatch = createEventDispatcher()
 
@@ -48,6 +49,7 @@
     {height}
     {id}
     {fullScreenOffset}
+    {disabled}
     easyMDEOptions={{
       initialValue: value,
       placeholder,
diff --git a/packages/bbui/src/Markdown/SpectrumMDE.svelte b/packages/bbui/src/Markdown/SpectrumMDE.svelte
index 3048697c15..0e3a7c75cc 100644
--- a/packages/bbui/src/Markdown/SpectrumMDE.svelte
+++ b/packages/bbui/src/Markdown/SpectrumMDE.svelte
@@ -9,6 +9,7 @@
   export let mde = null
   export let id = null
   export let fullScreenOffset = 0
+  export let disabled = false
 
   let element
 
@@ -32,11 +33,28 @@
   })
 </script>
 
-<div style={`--fullscreen-offset:${fullScreenOffset || "0px"}`}>
-  <textarea {id} bind:this={element} />
+<div class:disabled style={`--fullscreen-offset:${fullScreenOffset || "0px"}`}>
+  <textarea disabled {id} bind:this={element} />
 </div>
 
 <style>
+  /* Disabled styles */
+  .disabled :global(textarea) {
+    display: none;
+  }
+  .disabled :global(.CodeMirror-cursor) {
+    display: none;
+  }
+  .disabled :global(.EasyMDEContainer) {
+    pointer-events: none;
+  }
+  .disabled :global(.editor-toolbar button i) {
+    color: var(--spectrum-global-color-gray-400);
+  }
+  .disabled :global(.CodeMirror) {
+    color: var(--spectrum-global-color-gray-600);
+  }
+
   /* Toolbar container */
   :global(.EasyMDEContainer .editor-toolbar) {
     background: var(--spectrum-global-color-gray-50);

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 14/20] 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>

From 9aa1e5cf43f8d075a52d145d9ba232db089e9e00 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 7 Feb 2022 12:04:21 +0000
Subject: [PATCH 15/20] Improve text area and long form height settings

---
 packages/bbui/src/Form/Core/TextArea.svelte      | 16 ++++++++++++++--
 packages/bbui/src/Markdown/MarkdownEditor.svelte |  2 +-
 packages/bbui/src/Markdown/SpectrumMDE.svelte    |  4 ++--
 3 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/packages/bbui/src/Form/Core/TextArea.svelte b/packages/bbui/src/Form/Core/TextArea.svelte
index b615e97bff..465212cd44 100644
--- a/packages/bbui/src/Form/Core/TextArea.svelte
+++ b/packages/bbui/src/Form/Core/TextArea.svelte
@@ -22,11 +22,23 @@
     dispatch("change", event.target.value)
     focus = false
   }
+
+  const getStyleString = (attribute, value) => {
+    if (!attribute || value == null) {
+      return ""
+    }
+    if (isNaN(value)) {
+      return `${attribute}:${value};`
+    }
+    return `${attribute}:${value}px;`
+  }
+
+  $: heightString = getStyleString("height", height)
+  $: minHeightString = getStyleString("min-height", minHeight)
 </script>
 
 <div
-  style={(height ? `height: ${height}px;` : "") +
-    (minHeight ? `min-height: ${minHeight}px` : "")}
+  style={`${heightString}${minHeightString}`}
   class="spectrum-Textfield spectrum-Textfield--multiline"
   class:is-invalid={!!error}
   class:is-disabled={disabled}
diff --git a/packages/bbui/src/Markdown/MarkdownEditor.svelte b/packages/bbui/src/Markdown/MarkdownEditor.svelte
index 9265d14f46..7fb6414ad8 100644
--- a/packages/bbui/src/Markdown/MarkdownEditor.svelte
+++ b/packages/bbui/src/Markdown/MarkdownEditor.svelte
@@ -3,7 +3,7 @@
   import { createEventDispatcher } from "svelte"
 
   export let value = null
-  export let height = "300px"
+  export let height = null
   export let placeholder = null
   export let id = null
   export let fullScreenOffset = 0
diff --git a/packages/bbui/src/Markdown/SpectrumMDE.svelte b/packages/bbui/src/Markdown/SpectrumMDE.svelte
index fd7e0840e9..eb7198bf5b 100644
--- a/packages/bbui/src/Markdown/SpectrumMDE.svelte
+++ b/packages/bbui/src/Markdown/SpectrumMDE.svelte
@@ -3,7 +3,7 @@
   import "easymde/dist/easymde.min.css"
   import { onMount } from "svelte"
 
-  export let height = "300px"
+  export let height = null
   export let scroll = true
   export let easyMDEOptions = null
   export let mde = null
@@ -14,7 +14,7 @@
   let element
 
   onMount(() => {
-    height = height || "300px"
+    height = height || "200px"
     mde = new EasyMDE({
       element,
       spellChecker: false,

From a96ef98e3990d73ec32d7f15f95b71c93c4d01b8 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 7 Feb 2022 12:04:43 +0000
Subject: [PATCH 16/20] Add rich text option to long form data type

---
 .../backend/DataTable/RowFieldControl.svelte      |  7 ++++++-
 .../DataTable/modals/CreateEditColumn.svelte      | 15 ++++++++++++++-
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/components/backend/DataTable/RowFieldControl.svelte b/packages/builder/src/components/backend/DataTable/RowFieldControl.svelte
index a8fb05c2c5..8ab6d75c5d 100644
--- a/packages/builder/src/components/backend/DataTable/RowFieldControl.svelte
+++ b/packages/builder/src/components/backend/DataTable/RowFieldControl.svelte
@@ -7,6 +7,7 @@
     Multiselect,
     Label,
     RichTextField,
+    TextArea,
   } from "@budibase/bbui"
   import Dropzone from "components/common/Dropzone.svelte"
   import { capitalise } from "helpers"
@@ -43,7 +44,11 @@
 {:else if type === "link"}
   <LinkedRowSelector bind:linkedRows={value} schema={meta} />
 {:else if type === "longform"}
-  <RichTextField {label} height="200px" bind:value />
+  {#if meta.useRichText}
+    <RichTextField {label} height="150px" bind:value />
+  {:else}
+    <TextArea {label} height="150px" bind:value />
+  {/if}
 {:else if type === "json"}
   <Label>{label}</Label>
   <Editor
diff --git a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
index 0d73f3d36d..edac352f8a 100644
--- a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
@@ -367,7 +367,7 @@
 
   {#if canBeSearched && !external}
     <div>
-      <Label grey small>Search Indexes</Label>
+      <Label>Search Indexes</Label>
       <Toggle
         value={indexes[0] === field.name}
         disabled={indexes[1] === field.name}
@@ -394,6 +394,19 @@
       label="Options (one per line)"
       bind:values={field.constraints.inclusion}
     />
+  {:else if field.type === "longform"}
+    <div>
+      <Label
+        size="M"
+        tooltip="Rich text includes support for images, links, tables, lists and more"
+      >
+        Formatting
+      </Label>
+      <Toggle
+        bind:value={field.useRichText}
+        text="Enable rich text support (markdown)"
+      />
+    </div>
   {:else if field.type === "array"}
     <ValuesList
       label="Options (one per line)"

From a575763bf633c7508a10adcda7ffd20a01fe9c4f Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 7 Feb 2022 12:11:20 +0000
Subject: [PATCH 17/20] Use automatic formatting for generated longform fields

---
 .../store/screenTemplates/utils/commonComponents.js          | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js b/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js
index ae45b4f25d..9fe8cc9563 100644
--- a/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js
+++ b/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js
@@ -169,6 +169,11 @@ export function makeDatasourceFormComponents(datasource) {
           optionsSource: "schema",
         })
       }
+      if (fieldType === "longform") {
+        component.customProps({
+          format: "auto",
+        })
+      }
       if (fieldType === "array") {
         component.customProps({
           placeholder: "Choose an option",

From 750b266e90bbe5bc925a7403737159308092dbdc Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 7 Feb 2022 12:12:02 +0000
Subject: [PATCH 18/20] Add format setting on long form fields to allow choice
 between rich text and plain text, and default to automatically determining
 from the schema

---
 packages/client/manifest.json                 | 21 ++++++++
 .../components/app/forms/LongFormField.svelte | 50 +++++++++++++------
 2 files changed, 56 insertions(+), 15 deletions(-)

diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 00a9ae36f8..38d29cb081 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -2391,6 +2391,27 @@
         "label": "Default value",
         "key": "defaultValue"
       },
+      {
+        "type": "select",
+        "label": "Formatting",
+        "key": "format",
+        "placeholder": null,
+        "options": [
+          {
+            "label": "Auto",
+            "value": "auto"
+          },
+          {
+            "label": "Plain text",
+            "value": "plain"
+          },
+          {
+            "label": "Rich text (markdown)",
+            "value": "rich"
+          }
+        ],
+        "defaultValue": "auto"
+      },
       {
         "type": "boolean",
         "label": "Disabled",
diff --git a/packages/client/src/components/app/forms/LongFormField.svelte b/packages/client/src/components/app/forms/LongFormField.svelte
index 3a63799e58..e156eef52a 100644
--- a/packages/client/src/components/app/forms/LongFormField.svelte
+++ b/packages/client/src/components/app/forms/LongFormField.svelte
@@ -1,7 +1,7 @@
 <script>
   import { getContext, setContext } from "svelte"
   import { writable } from "svelte/store"
-  import { CoreRichTextField } from "@budibase/bbui"
+  import { CoreRichTextField, CoreTextArea } from "@budibase/bbui"
   import Field from "./Field.svelte"
 
   export let field
@@ -10,15 +10,22 @@
   export let disabled = false
   export let validation
   export let defaultValue = ""
+  export let format = "auto"
 
   let fieldState
   let fieldApi
+  let fieldSchema
 
   const context = getContext("context")
   const component = getContext("component")
   const newContext = writable($component)
   setContext("component", newContext)
 
+  // Determine whether we should use a rich or plain text component.
+  // We treat undefined as "auto".
+  $: useRichText =
+    format === "rich" || (format !== "plain" && fieldSchema?.useRichText)
+
   // Determine the offset needed for full screen mode
   $: offset = $context.device.mobile ? "61px" : "137px"
 
@@ -27,7 +34,7 @@
   // itself based on the height of the rich text field.
   let height
   $: {
-    height = $component.styles?.normal?.height
+    height = $component.styles?.normal?.height || "150px"
     newContext.set({
       ...$component,
       styles: {
@@ -50,20 +57,33 @@
   type="longform"
   bind:fieldState
   bind:fieldApi
+  bind:fieldSchema
 >
   {#if fieldState}
-    <CoreRichTextField
-      value={fieldState.value}
-      on:change={e => fieldApi.setValue(e.detail)}
-      disabled={fieldState.disabled}
-      error={fieldState.error}
-      id={fieldState.fieldId}
-      {placeholder}
-      {height}
-      fullScreenOffset={offset}
-      easyMDEOptions={{
-        hideIcons: $context.device.mobile ? ["side-by-side", "guide"] : [],
-      }}
-    />
+    {#if useRichText}
+      <CoreRichTextField
+        value={fieldState.value}
+        on:change={e => fieldApi.setValue(e.detail)}
+        disabled={fieldState.disabled}
+        error={fieldState.error}
+        id={fieldState.fieldId}
+        {placeholder}
+        {height}
+        fullScreenOffset={offset}
+        easyMDEOptions={{
+          hideIcons: $context.device.mobile ? ["side-by-side", "guide"] : [],
+        }}
+      />
+    {:else}
+      <CoreTextArea
+        value={fieldState.value}
+        on:change={e => fieldApi.setValue(e.detail)}
+        disabled={fieldState.disabled}
+        error={fieldState.error}
+        id={fieldState.fieldId}
+        {placeholder}
+        minHeight={height}
+      />
+    {/if}
   {/if}
 </Field>

From 2bb893108d97fdd39452789f3de12c2b7e320b7e Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 7 Feb 2022 12:13:11 +0000
Subject: [PATCH 19/20] Revert rich text field name to long form field

---
 packages/client/manifest.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 38d29cb081..ab48142ad5 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -2365,7 +2365,7 @@
     ]
   },
   "longformfield": {
-    "name": "Rich Text",
+    "name": "Long Form Field",
     "icon": "TextParagraph",
     "styles": ["size"],
     "editable": true,

From 4239bb2cb573f97ede3c298a8919f3bd4177bc45 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 7 Feb 2022 12:49:33 +0000
Subject: [PATCH 20/20] Update rich text editor fullscreen and side-by-side
 modes to work on desktop and mobile properly with any type of layout
 navigation

---
 .../bbui/src/Form/Core/RichTextField.svelte   |  2 +-
 packages/bbui/src/Form/RichTextField.svelte   |  2 +-
 packages/bbui/src/Markdown/SpectrumMDE.svelte | 28 ++++++++++++++---
 .../client/src/components/app/Layout.svelte   | 31 +++++++++++++++++--
 .../components/app/forms/LongFormField.svelte |  9 +++---
 5 files changed, 58 insertions(+), 14 deletions(-)

diff --git a/packages/bbui/src/Form/Core/RichTextField.svelte b/packages/bbui/src/Form/Core/RichTextField.svelte
index df39fc1a0a..f964405f0d 100644
--- a/packages/bbui/src/Form/Core/RichTextField.svelte
+++ b/packages/bbui/src/Form/Core/RichTextField.svelte
@@ -7,7 +7,7 @@
   export let error = null
   export let height = null
   export let id = null
-  export let fullScreenOffset = 0
+  export let fullScreenOffset = null
   export let easyMDEOptions = null
 </script>
 
diff --git a/packages/bbui/src/Form/RichTextField.svelte b/packages/bbui/src/Form/RichTextField.svelte
index d357a13ae2..275242df49 100644
--- a/packages/bbui/src/Form/RichTextField.svelte
+++ b/packages/bbui/src/Form/RichTextField.svelte
@@ -11,7 +11,7 @@
   export let error = null
   export let height = null
   export let id = null
-  export let fullScreenOffset = 0
+  export let fullScreenOffset = null
   export let easyMDEOptions = null
 
   const dispatch = createEventDispatcher()
diff --git a/packages/bbui/src/Markdown/SpectrumMDE.svelte b/packages/bbui/src/Markdown/SpectrumMDE.svelte
index eb7198bf5b..9b0832c91f 100644
--- a/packages/bbui/src/Markdown/SpectrumMDE.svelte
+++ b/packages/bbui/src/Markdown/SpectrumMDE.svelte
@@ -8,7 +8,7 @@
   export let easyMDEOptions = null
   export let mde = null
   export let id = null
-  export let fullScreenOffset = 0
+  export let fullScreenOffset = null
   export let disabled = false
 
   let element
@@ -30,9 +30,18 @@
       mde.toTextArea()
     }
   })
+
+  $: styleString = getStyleString(fullScreenOffset)
+
+  const getStyleString = offset => {
+    let string = ""
+    string += `--fullscreen-offset-x:${offset?.x || "0px"};`
+    string += `--fullscreen-offset-y:${offset?.y || "0px"};`
+    return string
+  }
 </script>
 
-<div class:disabled style={`--fullscreen-offset:${fullScreenOffset || "0px"}`}>
+<div class:disabled style={styleString}>
   <textarea disabled {id} bind:this={element} />
 </div>
 
@@ -155,12 +164,21 @@
   }
   /* Allow full screen offset */
   :global(.EasyMDEContainer .editor-toolbar.fullscreen) {
-    top: var(--fullscreen-offset);
+    left: var(--fullscreen-offset-x);
+    top: var(--fullscreen-offset-y);
   }
   :global(.EasyMDEContainer .CodeMirror-fullscreen) {
-    top: calc(50px + var(--fullscreen-offset));
+    left: var(--fullscreen-offset-x);
+    top: calc(50px + var(--fullscreen-offset-y));
   }
+
+  :global(.EasyMDEContainer .CodeMirror-fullscreen.CodeMirror-sided) {
+    width: calc((100% - var(--fullscreen-offset-x)) / 2) !important;
+  }
+
   :global(.EasyMDEContainer .editor-preview-side) {
-    top: calc(50px + var(--fullscreen-offset));
+    left: calc(50% + (var(--fullscreen-offset-x) / 2));
+    top: calc(50px + var(--fullscreen-offset-y));
+    width: calc((100% - var(--fullscreen-offset-x)) / 2) !important;
   }
 </style>
diff --git a/packages/client/src/components/app/Layout.svelte b/packages/client/src/components/app/Layout.svelte
index 59765f9305..600d295cba 100644
--- a/packages/client/src/components/app/Layout.svelte
+++ b/packages/client/src/components/app/Layout.svelte
@@ -1,5 +1,6 @@
 <script>
-  import { getContext } from "svelte"
+  import { getContext, setContext } from "svelte"
+  import { writable } from "svelte/store"
   import { Heading, Icon } from "@budibase/bbui"
   import { FieldTypes } from "../../constants"
   import active from "svelte-spa-router/active"
@@ -29,6 +30,16 @@
     Small: "s",
   }
 
+  // Set some layout context. This isn't used in bindings but can be used
+  // determine things about the current app layout.
+  $: mobile = $context.device.mobile
+  const store = writable({ headerHeight: 0 })
+  $: store.set({
+    screenXOffset: getScreenXOffset(navigation, mobile),
+    screenYOffset: getScreenYOffset(navigation, mobile),
+  })
+  setContext("layout", store)
+
   // Permanently go into peek mode if we ever get the peek flag
   let isPeeking = false
   $: {
@@ -58,13 +69,27 @@
     if ($builderStore.inBuilder) return
     window.location.href = "/builder/apps"
   }
+
+  const getScreenXOffset = (navigation, mobile) => {
+    if (navigation !== "Left") {
+      return 0
+    }
+    return mobile ? "0px" : "250px"
+  }
+  const getScreenYOffset = (navigation, mobile) => {
+    if (mobile) {
+      return !navigation || navigation === "None" ? 0 : "61px"
+    } else {
+      return navigation === "Top" ? "137px" : "0px"
+    }
+  }
 </script>
 
 <div
   class="layout layout--{typeClass}"
   use:styleable={$component.styles}
-  class:desktop={!$context.device.mobile}
-  class:mobile={!!$context.device.mobile}
+  class:desktop={!mobile}
+  class:mobile={!!mobile}
 >
   {#if typeClass !== "none"}
     <div
diff --git a/packages/client/src/components/app/forms/LongFormField.svelte b/packages/client/src/components/app/forms/LongFormField.svelte
index e156eef52a..15a10827b2 100644
--- a/packages/client/src/components/app/forms/LongFormField.svelte
+++ b/packages/client/src/components/app/forms/LongFormField.svelte
@@ -18,6 +18,7 @@
 
   const context = getContext("context")
   const component = getContext("component")
+  const layout = getContext("layout")
   const newContext = writable($component)
   setContext("component", newContext)
 
@@ -26,9 +27,6 @@
   $: useRichText =
     format === "rich" || (format !== "plain" && fieldSchema?.useRichText)
 
-  // 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.
@@ -69,7 +67,10 @@
         id={fieldState.fieldId}
         {placeholder}
         {height}
-        fullScreenOffset={offset}
+        fullScreenOffset={{
+          x: $layout.screenXOffset,
+          y: $layout.screenYOffset,
+        }}
         easyMDEOptions={{
           hideIcons: $context.device.mobile ? ["side-by-side", "guide"] : [],
         }}