fix: Option component in plugin settings API (#627)

app/plugins/core/plugins/Preview/FormItem.js

@@ -9,15 +9,26 @@ const components = {
   option: Select,
 }
 
-function FormItem({ type, ...props }) {
+function FormItem({
+  type, value, options, ...props
+}) {
   const Component = components[type] || Text
 
-  return <Component type={type} {...props} />
+  let actualValue = value
+  if (Component === Select) {
+    // when the value is a string, we need to find the option that matches it
+    if (typeof value === 'string' && options) {
+      actualValue = options.find((option) => option.value === value)
+    }
+  }
+
+  return <Component type={type} value={actualValue} options={options} {...props} />
 }
 
 FormItem.propTypes = {
   value: PropTypes.any,
   type: PropTypes.string.isRequired,
+  options: PropTypes.array
 }
 
 export default FormItem

app/plugins/core/plugins/Preview/Settings.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import PropTypes from 'prop-types'
 import config from 'lib/config'
 import FormItem from './FormItem'
@@ -7,13 +7,18 @@ import styles from './styles.module.css'
 function Settings({ settings, name }) {
   const [values, setValues] = useState(() => config.get('plugins')[name] || {})
 
-  const changeSetting = (label, value) => {
-    setValues((prev) => ({ ...prev, [label]: value }))
-
+  useEffect(() => {
     config.set('plugins', {
       ...config.get('plugins'),
       [name]: values,
     })
+  }, [values])
+
+  const changeSetting = async (label, value) => {
+    setValues((prev) => ({
+      ...prev,
+      [label]: value
+    }))
   }
 
   const renderSetting = (key) => {