html input type component fix relax#29

assets/less/components/html-area.less

@@ -0,0 +1,14 @@
+.html-area {
+  .html-editor {
+    outline: 0px;
+    border: 0px;
+    border: 1px solid #cccccc;
+    color: #333333;
+    padding: 5px 20px;
+    .roundedCorners(2px);
+
+    &[data-medium-focused="true"] {
+      border-color: @adminPrimary;
+    }
+  }
+}

assets/less/components/index.less

@@ -35,6 +35,7 @@
 @import './form-state.less';
 @import './pagination.less';
 @import './section.less';
+@import './html-area.less';
 
 
 @import './page-builder/index.less';

assets/less/components/input.less

@@ -92,7 +92,7 @@ input.invalid {
 }
 
 // White areas
-.white-options  {
+.white-options {
   .input {
     input {
       border-color: #cccccc;

lib/components/html-area.jsx

@@ -0,0 +1,34 @@
+import {Component} from 'relax-framework';
+import React from 'react';
+import classNames from 'classnames';
+
+import Editor from './medium-editor';
+
+export default class HtmlArea extends Component {
+  render () {
+    return (
+      <div className={classNames('html-area', this.props.className)}>
+        <Editor
+          tag='div'
+          className='html-editor'
+          value={this.props.value}
+          onChange={this.props.onChange}
+          options={{
+            toolbar: {
+              buttons: ['bold', 'italic', 'underline', 'anchor']
+            },
+            placeholder: false,
+            buttonLabels: 'fontawesome',
+            imageDragging: false
+          }}
+        />
+      </div>
+    );
+  }
+}
+
+HtmlArea.propTypes = {
+  value: React.PropTypes.string.isRequired,
+  onChange: React.PropTypes.func.isRequired,
+  className: React.PropTypes.string
+};

lib/data-types/options-map.js

@@ -14,6 +14,7 @@ import ColorPalettePicker from '../components/color-palette-picker';
 import ColumnsManager from '../components/columns-manager';
 import Optional from '../components/optional';
 import Section from '../components/section';
+import HtmlArea from '../components/html-area';
 
 var TypesOptionsMap = {
   Color: ColorPalettePicker,
@@ -33,7 +34,8 @@ var TypesOptionsMap = {
   Columns: ColumnsManager,
   Border: BorderPicker,
   Optional,
-  Section
+  Section,
+  Html: HtmlArea
 };
 
 var TypesOptionsDefaultProps = {