Merge pull request #858 from Budibase/feature/adds-rich-text-component

Feature/adds rich text component

packages/builder/src/components/userInterface/temporaryPanelStructure.js

@@ -196,15 +196,7 @@ export default {
         //   icon: "ri-edit-box-line",
         //   properties: {
         //     design: { ...all },
-        //     settings: [
-        //       { label: "Label", key: "label", control: Input },
-        //       {
-        //         label: "Type",
-        //         key: "type",
-        //         control: OptionSelect,
-        //         options: ["text", "password"],
-        //       },
-        //     ],
+        //     settings: [],
         //   },
         // },
         {

packages/standard-components/components.json

@@ -178,8 +178,6 @@
 		"name": "Rich Text",
 		"description": "A component that allows the user to enter long form text.",
 		"props": {
-			"label": "string",
-			"type": "string",
 			"value": "string"
 		}
 	},

packages/standard-components/src/RichText.svelte

@@ -1,34 +1,44 @@
 <script>
-    import { RichText } from '@budibase/bbui'
+  import { RichText } from '@budibase/bbui'
 
-    export let _bb
-  
-    export let label = ""
-    export let value = ""
-    let options = {
-  "modules": {
-    "toolbar": [
-      [
-        {
-          "header": [
-            1,
-            2,
-            3,
-            false
-          ]
-        }
-      ],
-      [
-        "bold",
-        "italic",
-        "underline",
-        "strike"
+  export let _bb
+
+  export let content = ""
+
+  const updateValue = content => {
+    if (_bb) {
+      _bb.setBinding("value", content)
+    }
+  }
+
+  $: updateValue(content)
+
+  // 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>
+    },
+    "placeholder": "Type something...",
+    "theme": "snow"
+  }
+</script>
   
-  <RichText {options} />
+  <RichText bind:content {options} />