Add rich text field to form components

packages/builder/src/components/design/AppPreview/componentStructure.json

@@ -13,7 +13,7 @@
       "numberfield",
       "optionsfield",
       "booleanfield",
-      "richtext",
+      "longformfield",
       "datepicker"
     ]
   },

packages/builder/src/components/design/PropertiesPanel/PropertyControls/LongFormFieldSelect.svelte

@@ -0,0 +1,5 @@
+<script>
+  import FormFieldSelect from "./FormFieldSelect.svelte"
+</script>
+
+<FormFieldSelect {...$$props} type="longform" />

packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte

@@ -21,6 +21,7 @@
   import NumberFieldSelect from "./PropertyControls/NumberFieldSelect.svelte"
   import OptionsFieldSelect from "./PropertyControls/OptionsFieldSelect.svelte"
   import BooleanFieldSelect from "./PropertyControls/BooleanFieldSelect.svelte"
+  import LongFormFieldSelect from "./PropertyControls/LongFormFieldSelect.svelte"
 
   export let componentDefinition = {}
   export let componentInstance = {}
@@ -66,6 +67,7 @@
     "field/number": NumberFieldSelect,
     "field/options": OptionsFieldSelect,
     "field/boolean": BooleanFieldSelect,
+    "field/longform": LongFormFieldSelect,
   }
 
   const getControl = type => {

packages/standard-components/manifest.json

@@ -114,13 +114,6 @@
       }
     ]
   },
-  "richtext": {
-    "name": "Rich Text",
-    "description": "A component that allows the user to enter long form text.",
-    "icon": "ri-edit-box-line",
-    "styleable": true,
-    "bindable": true
-  },
   "datepicker": {
     "name": "Date Picker",
     "description": "A basic date picker component",
@@ -1241,5 +1234,28 @@
         "key": "text"
       }
     ]
+  },
+  "longformfield": {
+    "name": "Rich Text",
+    "icon": "ri-edit-box-line",
+    "styleable": true,
+    "settings": [
+      {
+        "type": "field/longform",
+        "label": "Field",
+        "key": "field"
+      },
+      {
+        "type": "text",
+        "label": "Label",
+        "key": "label"
+      },
+      {
+        "type": "text",
+        "label": "Placeholder",
+        "key": "placeholder",
+        "placeholder": "Type something..."
+      }
+    ]
   }
 }

packages/standard-components/src/RichText.svelte

@@ -1,29 +0,0 @@
-<script>
-  import { getContext } from "svelte"
-  import { RichText } from "@budibase/bbui"
-
-  const { styleable } = getContext("sdk")
-  const component = getContext("component")
-
-  export let value = ""
-
-  // Need to determine what options we want to expose.
-  let options = {
-    modules: {
-      toolbar: [
-        [
-          {
-            header: [1, 2, 3, false],
-          },
-        ],
-        ["bold", "italic", "underline", "strike"],
-      ],
-    },
-    placeholder: "Type something...",
-    theme: "snow",
-  }
-</script>
-
-<div use:styleable={$component.styles}>
-  <RichText bind:value {options} />
-</div>

packages/standard-components/src/forms/Form.svelte

@@ -49,7 +49,7 @@
   setContext("form", { formApi, formState })
 
   // Creates an API for a specific field
-  const makeFieldApi = (field, componentId, validate) => {
+  const makeFieldApi = (field, validate) => {
     return {
       setValue: value => {
         const { fieldState } = fieldMap[field]

packages/standard-components/src/forms/LongFormField.svelte

@@ -0,0 +1,51 @@
+<script>
+  import { RichText } from "@budibase/bbui"
+  import "@spectrum-css/checkbox/dist/index-vars.css"
+  import SpectrumField from "./SpectrumField.svelte"
+
+  export let field
+  export let label
+  export let placeholder
+
+  let fieldState
+  let fieldApi
+
+  let value
+  $: fieldApi?.setValue(value)
+
+  // Options for rich text component
+  const options = {
+    modules: {
+      toolbar: [
+        [
+          {
+            header: [1, 2, 3, false],
+          },
+        ],
+        ["bold", "italic", "underline", "strike"],
+      ],
+    },
+    placeholder: placeholder || "Type something...",
+    theme: "snow",
+  }
+</script>
+
+<SpectrumField {label} {field} bind:fieldState bind:fieldApi>
+  {#if fieldState}
+    <div>
+      <RichText bind:value {options} />
+    </div>
+  {/if}
+</SpectrumField>
+
+<style>
+  div {
+    background-color: white;
+  }
+  div :global(.ql-snow.ql-toolbar:after, .ql-snow .ql-toolbar:after) {
+    display: none;
+  }
+  div :global(.ql-snow .ql-formats:after) {
+    display: none;
+  }
+</style>

packages/standard-components/src/forms/index.js

@@ -4,3 +4,4 @@ export { default as stringfield } from "./StringField.svelte"
 export { default as numberfield } from "./NumberField.svelte"
 export { default as optionsfield } from "./OptionsField.svelte"
 export { default as booleanfield } from "./BooleanField.svelte"
+export { default as longformfield } from "./LongFormField.svelte"

packages/standard-components/src/index.js

@@ -16,7 +16,6 @@ export { default as container } from "./Container.svelte"
 export { default as datagrid } from "./grid/Component.svelte"
 export { default as screenslot } from "./ScreenSlot.svelte"
 export { default as button } from "./Button.svelte"
-export { default as richtext } from "./RichText.svelte"
 export { default as list } from "./List.svelte"
 export { default as stackedlist } from "./StackedList.svelte"
 export { default as card } from "./Card.svelte"