Update client app long form text component to be rich text and add new markdown viewer component

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

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>

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};">
+    <CoreRichTextField
-      <CoreTextArea
+      value={fieldState.value}
-        value={fieldState.value}
+      on:change={e => fieldApi.setValue(e.detail)}
-        on:change={e => fieldApi.setValue(e.detail)}
+      disabled={fieldState.disabled}
-        disabled={fieldState.disabled}
+      error={fieldState.error}
-        error={fieldState.error}
+      id={fieldState.fieldId}
-        id={fieldState.fieldId}
+      {placeholder}
-        {placeholder}
+    />
-      />
-    </div>
   {/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>

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"