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] 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"