fix(controls): block elements are not editable in the editor

resolves #161

Author: kevinchappell

docs/controls/README.md

@@ -0,0 +1,61 @@
+# Controls
+
+![formeo-controls](https://user-images.githubusercontent.com/1457540/56075239-26cbf100-5d74-11e9-8cd0-d4400705365f.png)
+
+A Control refers to inputs and elements that can be dragged to the stage when editing a form. In their most basic form, they can be a javascript literal object that defines basic information about the element eg.
+
+```javascript
+const inputElement = {
+  tag: 'input',
+  attrs: {
+    required: false, // will render a checkbox in the editor to toggle required attribute
+    type: 'text',
+    className: '' // accepts string or array of class names
+  },
+  config: {
+    label: 'Input', // label that appears in the control side bar
+    editorLabel: 'My Custom Input' // label that appears in the editor
+  },
+  meta: {
+    group: 'common', // group id
+    icon: 'text-input-icon', // needs to be an svg or font icon id
+    id: 'text-input' // unique that can be used to reference the control
+  },
+}
+```
+
+## Control Groups
+
+Formeo comes with a 3 groups of basic controls. These groups can be disabled, extended, ordered, and more. The default control groups are `form`, `html`, and `layout`.
+
+### Form Controls
+
+Form controls are considered controls that users can interact with and at the time of writing Formeo ships with the following `form` controls:
+
+- button
+- checkbox-group
+- input
+  - date
+  - file
+  - hidden
+  - number
+  - text
+- radio-group
+- select
+- textarea
+
+### HTML Controls
+
+HTML Controls are used to render html elements like `<p/>`, `<h1/>` and `<hr/>`. To make a Control's rendered html editable in the editor, set the `editableContent` to `true` when defining your control's `config`. Example:
+
+```javascript
+const paragraph = {
+  tag: 'p',
+  config: {
+    label: 'Paragraph',
+    editableContent: true
+  },
+  content:
+    'This content can be edited in the editor'
+}
+```

docs/options/controls/README.md

@@ -0,0 +1,38 @@
+# Controls Options
+
+Control options can be used to disable, extend and modify the Formeo's control panel.
+
+| Option                    | Type   | Description                             | Example              | Default                        |
+| ------------------------- | ------ | --------------------------------------- | -------------------- | ------------------------------ |
+| [sortable](#sortable)     | String | allow controls to be reordered by users | `true`               | `false`                        |
+| [groupOrder](#groupOrder) | Array  | allow controls to be reordered by users | `['html', 'layout']` | `['common', 'html', 'layout']` |
+
+## sortable
+
+```javascript
+const controlOptions = {
+  sortable: true,
+}
+
+const formeoOptions = {
+  controls: controlOptions,
+}
+
+const formeo = new FormeoEditor(formeoOptions)
+```
+
+## groupOrder
+
+Set the group panel order with `groupOrder`
+
+```javascript
+const controlOptions = {
+  groupOrder: ['common', 'html'],
+}
+
+const formeoOptions = {
+  controls: controlOptions,
+}
+
+const formeo = new FormeoEditor(formeoOptions)
+```

src/js/components/controls/html/header.js

@@ -22,6 +22,7 @@ class HeaderControl extends Control {
       config: {
         label: i18n.get(headerKey),
         hideLabel: true,
+        editableContent: true,
       },
       meta: {
         group: 'html',

src/js/components/controls/html/paragraph.js

@@ -11,7 +11,7 @@ class ParagraphControl extends Control {
       config: {
         label: i18n.get('controls.html.paragraph'),
         hideLabel: true,
-        editable: true,
+        editableContent: true,
       },
       meta: {
         group: 'html',

src/js/components/fields/__snapshots__/field.spec.js.snap

@@ -23,6 +23,7 @@ Object {
       ],
     },
   ],
+  "config": Object {},
   "id": "test-id",
 }
 `;

src/js/components/fields/field.js

@@ -67,7 +67,7 @@ export default class Field extends Component {
       return
     }
 
-    const labelVal = this.get('config.label')
+    const labelVal = this.get('config.editorLabel') || this.get('config.label')
     const required = this.get('attrs.required')
     const disableHTML = this.config.label.disableHTML
 
@@ -251,6 +251,10 @@ export default class Field extends Component {
     const prevData = clone(this.data)
     prevData.id = `prev-${this.id}`
 
+    if (this.data.config.editableContent) {
+      prevData.attrs = Object.assign({}, prevData.attrs, {contenteditable: true})
+    }
+
     const fieldPreview = {
       attrs: {
         className: 'field-preview',
@@ -279,11 +283,13 @@ export default class Field extends Component {
           }
         },
         input: evt => {
-          if (evt.target.contentEditable === 'true') {
-            super.set('attrs.value', evt.target.innerHTML)
-          } else {
+          if (['input', 'meter', 'progress', 'button'].includes(this.data.tag)) {
             super.set('attrs.value', evt.target.value)
           }
+
+          if (evt.target.contentEditable) {
+            super.set('content', evt.target.innerHTML)
+          }
         },
       },
     }

src/js/components/fields/field.spec.js

@@ -1,5 +1,5 @@
 import Field from './field'
-const fieldConfig = { id: 'test-id' }
+const fieldConfig = { id: 'test-id', config: {} }
 
 describe('Field', () => {
   it('should have data property matching snapshot', () => {