fix: textarea value not saved/rendered

resolves #388

Author: kevinchappell

src/lib/js/components/controls/form/textarea.js

@@ -8,26 +8,12 @@ class TextAreaControl extends Control {
       config: {
         label: i18n.get('controls.form.textarea'),
       },
-      // This is the beginning of actions being supported for render
-      // editor field actions should be in config.action
-      // action: {
-      //   mousedown: function(evt) {
-      //     let {target} = evt;
-      //     let startHeight = target.style.height;
-      //     const onMouseup = evt => {
-      //       let {target} = evt;
-      //       let endHeight = target.style.height;
-      //       if (startHeight !== endHeight) {
-      //         //eslint-disable-next-line
-      //         let fieldId = closest(target, '.stage-field').id;
-      //         const field = d.fields.get(fieldId).instance;
-      //         field.addAttribute('style', `height: ${endHeight}`);
-      //       }
-      //       target.removeEventListener('mouseup', onMouseup);
-      //     };
-      //     target.addEventListener('mouseup', onMouseup);
-      //   }
-      // },
+      // actions here will be applied to the preview in the editor
+      action: {
+        input: function ({ target: { value } }) {
+          this.setData?.('value', value)
+        },
+      },
       meta: {
         group: 'common',
         icon: 'textarea',

src/lib/js/components/controls/index.js

@@ -12,14 +12,10 @@ import { CONTROL_GROUP_CLASSNAME } from '../../constants.js'
 import Components, { Stages, Rows } from '../index.js'
 
 // control configs
-import layoutControls from './layout/index.js'
-import formControls from './form/index.js'
-import htmlControls from './html/index.js'
+
 import defaultOptions from './options.js'
 import { get, set } from '../../common/utils/object.mjs'
 
-const defaultElements = [...formControls, ...htmlControls, ...layoutControls]
-
 /**
  *
  */
@@ -379,7 +375,14 @@ export class Controls {
     this.container = container
     this.groupOrder = unique(groupOrder.concat(['common', 'html', 'layout']))
     this.options = options
-    return Promise.all(this.registerControls([...defaultElements, ...elements]))
+
+    const layoutControls = await import('./layout/index.js')
+    const formControls = await import('./form/index.js')
+    const htmlControls = await import('./html/index.js')
+
+    const allControls = [layoutControls.default, formControls.default, htmlControls.default].flat()
+
+    return Promise.all(this.registerControls([...allControls, ...elements]))
   }
 }
 

src/lib/js/components/fields/field.js

@@ -130,13 +130,15 @@ export default class Field extends Component {
     }
   }
 
+  setData = (path, value) => {
+    return super.set(path, value)
+  }
+
   /**
    * wrapper for Data.set
    */
-  set(...args) {
-    const [path, value] = args
-
-    const data = super.set(path, value)
+  set(path, value) {
+    const data = this.setData(path, value)
     this.updatePreview()
 
     return data
@@ -310,7 +312,10 @@ export default class Field extends Component {
     const prevData = clone(this.data)
     const { action = {} } = controls.get(prevData.config.controlId)
     prevData.id = `prev-${this.id}`
-    prevData.action = action
+    prevData.action = Object.entries(action).reduce((acc, [key, value]) => {
+      acc[key] = value.bind(this)
+      return acc
+    }, {})
 
     if (this.data?.config.editableContent) {
       prevData.attrs = { ...prevData.attrs, contenteditable: true }