Merge branch 'simple-markdown-editor'

example/example.css

@@ -1,15 +1,21 @@
-html, body {
+html,
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+body {
-  font-size: 14px;
   color: #444;
+  font-size: 14px;
+  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
 }
+
 body {
   padding: 20px;
 }
 
 h1 {
-  font-weight: bold;
-  color: #666;
-  font-size: 32px;
   margin-top: 20px;
+  color: #666;
+  font-weight: bold;
+  font-size: 32px;
+}
+
+img {
+  max-width: 100%;
 }

package.json

@@ -93,6 +93,7 @@
     "@kadira/storybook": "^1.36.0",
     "autoprefixer": "^6.3.3",
     "bricks.js": "^1.7.0",
+    "textarea-caret-position": "^0.1.1",
     "dateformat": "^1.0.12",
     "fuzzy": "^0.1.1",
     "immutability-helper": "^2.0.0",

src/components/ControlPanel/ControlPane.css

@@ -20,6 +20,7 @@
   }
 }
 .label {
+  display: block;
   color: #AAB0AF;
   font-size: 12px;
   margin-bottom: 18px;

src/components/Widgets/MarkdownControl.js

@@ -30,7 +30,7 @@ class MarkdownControl extends React.Component {
   };
 
   render() {
-    const { editor, onChange, onAddMedia, getMedia, value } = this.props;
+    const { editor, onChange, onAddMedia, onRemoveMedia, getMedia, value } = this.props;
     if (editor.get('useVisualMode')) {
       return (
         <div className="cms-editor-visual">
@@ -51,6 +51,7 @@ class MarkdownControl extends React.Component {
           <RawEditor
             onChange={onChange}
             onAddMedia={onAddMedia}
+            onRemoveMedia={onRemoveMedia}
             getMedia={getMedia}
             value={value}
           />

src/components/Widgets/MarkdownControlElements/RawEditor/BlockMenu.css

@@ -0,0 +1,134 @@
+.root {
+  position: absolute;
+  left: -18px;
+  display: none;
+  width: 100%;
+}
+
+.visible {
+  display: block;
+}
+
+.button {
+  display: block;
+  width: 15px;
+  height: 15px;
+  border: 1px solid #444;
+  border-radius: 100%;
+  background: transparent;
+  line-height: 13px;
+}
+
+.expanded {
+  display: block;
+}
+
+.collapsed {
+  display: none;
+}
+
+.pluginForm,
+.menu {
+  margin-top: -20px;
+  margin-bottom: 30px;
+  margin-left: 20px;
+  border-radius: 4px;
+  background: #fff;
+  box-shadow: 1px 1px 20px;
+
+  & h3 {
+    padding: 5px 20px;
+    border-bottom: 1px solid;
+  }
+}
+
+.menu {
+  list-style: none;
+
+  & li button {
+    display: block;
+    padding: 5px 20px;
+    min-width: 30%;
+    width: 100%;
+    border: none;
+    border-bottom: 1px solid;
+    background: #fff;
+    -webkit-appearance: none;
+  }
+
+  & li:last-child button {
+    border-bottom: none;
+  }
+
+  & li:hover button {
+    background: #efefef;
+  }
+}
+
+.menu.expanded {
+  display: inline-block;
+}
+
+.control {
+  position: relative;
+  padding: 20px 20px;
+  color: #7c8382;
+
+  & input,
+  & textarea,
+  & select {
+    display: block;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    outline: 0;
+    border: none;
+    background: 0 0;
+    box-shadow: none;
+    color: #7c8382;
+    font-size: 18px;
+    font-family: monospace;
+  }
+}
+
+.label {
+  display: block;
+  margin-bottom: 18px;
+  color: #aab0af;
+  font-size: 12px;
+}
+
+.widget {
+  position: relative;
+  border-bottom: 1px solid #aaa;
+
+  &:after {
+    position: absolute;
+    bottom: -7px;
+    left: 42px;
+    z-index: 1;
+    width: 12px;
+    height: 12px;
+    border-right: 1px solid #aaa;
+    border-bottom: 1px solid #aaa;
+    background-color: #f2f5f4;
+    content: '';
+    -webkit-transform: rotate(45deg);
+    transform: rotate(45deg);
+  }
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  &:last-child:after {
+    display: none;
+  }
+}
+
+.footer {
+  padding: 10px 20px;
+  border-top: 1px solid #eee;
+  background: #fff;
+  text-align: right;
+}

src/components/Widgets/MarkdownControlElements/RawEditor/BlockMenu.js

@@ -0,0 +1,135 @@
+import React, { Component, PropTypes } from 'react';
+import { fromJS } from 'immutable';
+import { Button } from 'react-toolbox/lib/button';
+import { resolveWidget } from '../../../Widgets';
+import styles from './BlockMenu.css';
+
+export default class BlockMenu extends Component {
+  static propTypes = {
+    isOpen: PropTypes.bool,
+    selectionPosition: PropTypes.object,
+    plugins: PropTypes.object.isRequired,
+    onBlock: PropTypes.func.isRequired,
+    onAddMedia: PropTypes.func.isRequired,
+    onRemoveMedia: PropTypes.func.isRequired,
+    getMedia: PropTypes.func.isRequired,
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isExpanded: false,
+      openPlugin: null,
+      pluginData: fromJS({}),
+    };
+  }
+
+  componentDidUpdate() {
+    const { selectionPosition } = this.props;
+    if (selectionPosition) {
+      const style = this.element.style;
+      style.setProperty('top', `${ selectionPosition.top }px`);
+    }
+  }
+
+  handleToggle = (e) => {
+    e.preventDefault();
+    this.setState({ isExpanded: !this.state.isExpanded });
+  };
+
+  handleRef = (ref) => {
+    this.element = ref;
+  };
+
+  handlePlugin(plugin) {
+    return (e) => {
+      e.preventDefault();
+      this.setState({ openPlugin: plugin, pluginData: fromJS({}) });
+    };
+  }
+
+  buttonFor(plugin) {
+    return (<li key={plugin.get('id')}>
+      <button onClick={this.handlePlugin(plugin)}>{plugin.get('label')}</button>
+    </li>);
+  }
+
+  handleSubmit = (e) => {
+    e.preventDefault();
+    const { openPlugin, pluginData } = this.state;
+    const toBlock = openPlugin.get('toBlock');
+    this.props.onBlock(toBlock.call(toBlock, pluginData.toJS()));
+    this.setState({ openPlugin: null, isExpanded: false });
+  };
+
+  handleCancel = (e) => {
+    e.preventDefault();
+    this.setState({ openPlugin: null, isExpanded: false });
+  };
+
+  controlFor(field) {
+    const { onAddMedia, onRemoveMedia, getMedia } = this.props;
+    const { pluginData } = this.state;
+    const widget = resolveWidget(field.get('widget') || 'string');
+    const value = pluginData.get(field.get('name'));
+
+    return (
+      <div className={styles.control} key={field.get('name')}>
+        <label className={styles.label}>{field.get('label')}</label>
+        {
+          React.createElement(widget.control, {
+            field,
+            value,
+            onChange: (val) => {
+              this.setState({
+                pluginData: pluginData.set(field.get('name'), val),
+              });
+            },
+            onAddMedia,
+            onRemoveMedia,
+            getMedia,
+          })
+        }
+      </div>
+    );
+  }
+
+  pluginForm(plugin) {
+    return (<form className={styles.pluginForm} onSubmit={this.handleSubmit}>
+      <h3>Insert {plugin.get('label')}</h3>
+      {plugin.get('fields').map(field => this.controlFor(field))}
+      <div className={styles.footer}>
+        <Button
+          raised
+          onClick={this.handleSubmit}
+        >
+          Insert
+        </Button>
+        {' '}
+        <Button onClick={this.handleCancel}>
+          Cancel
+        </Button>
+      </div>
+    </form>);
+  }
+
+  render() {
+    const { isOpen, plugins } = this.props;
+    const { isExpanded, openPlugin } = this.state;
+    const classNames = [styles.root];
+    if (isOpen) {
+      classNames.push(styles.visible);
+    }
+    if (openPlugin) {
+      classNames.push(styles.openPlugin);
+    }
+
+    return (<div className={classNames.join(' ')} ref={this.handleRef}>
+      <button className={styles.button} onClick={this.handleToggle}>+</button>
+      <ul className={[styles.menu, isExpanded && !openPlugin ? styles.expanded : styles.collapsed].join(' ')}>
+        {plugins.map(plugin => this.buttonFor(plugin))}
+      </ul>
+      {openPlugin && this.pluginForm(openPlugin)}
+    </div>);
+  }
+}

src/components/Widgets/MarkdownControlElements/RawEditor/Toolbar.css

@@ -0,0 +1,16 @@
+.Toolbar {
+  position: absolute;
+  z-index: 1000;
+  display: none;  
+  margin: none;
+  padding: none;
+  list-style: none;
+}
+
+.Button {
+  display: inline-block;
+}
+
+.Visible {
+  display: block;
+}

src/components/Widgets/MarkdownControlElements/RawEditor/Toolbar.js

@@ -0,0 +1,54 @@
+import React, { Component, PropTypes } from 'react';
+import styles from './Toolbar.css';
+
+function button(label, action) {
+  return (<li className={styles.Button}>
+    <button className={styles[label]} onClick={action}>{label}</button>
+  </li>);
+}
+
+export default class Toolbar extends Component {
+  static propTypes = {
+    isOpen: PropTypes.bool,
+    selectionPosition: PropTypes.object,
+    onBold: PropTypes.func.isRequired,
+    onItalic: PropTypes.func.isRequired,
+    onLink: PropTypes.func.isRequired,
+  };
+
+  componentDidUpdate() {
+    const { selectionPosition } = this.props;
+    if (selectionPosition) {
+      const rect = this.element.getBoundingClientRect();
+      const parentRect = this.element.parentElement.getBoundingClientRect();
+      const style = this.element.style;
+      const pos = {
+        top: selectionPosition.top - rect.height - 5,
+        left: Math.min(selectionPosition.left, parentRect.width - rect.width),
+      };
+      style.setProperty('top', `${ pos.top }px`);
+      style.setProperty('left', `${ pos.left }px`);
+    }
+  }
+
+  handleRef = (ref) => {
+    this.element = ref;
+  };
+
+  render() {
+    const { isOpen, onBold, onItalic, onLink } = this.props;
+    const classNames = [styles.Toolbar];
+
+    if (isOpen) {
+      classNames.push(styles.Visible);
+    }
+
+    return (
+      <ul className={classNames.join(' ')} ref={this.handleRef}>
+        {button('Bold', onBold)}
+        {button('Italic', onItalic)}
+        {button('Link', onLink)}
+      </ul>
+    );
+  }
+}

src/components/Widgets/MarkdownControlElements/RawEditor/index.css

@@ -1,13 +1,3 @@
 .root {
-  font-family: monospace;
+  position: relative;
-  display: block;
-  width: 100%;
-  padding: 0;
-  margin: 0;
-  border: none;
-  outline: 0;
-  box-shadow: none;
-  background: 0 0;
-  font-size: 18px;
-  color: #7c8382;
 }

src/components/Widgets/MarkdownControlElements/RawEditor/index.js

@@ -1,133 +1,266 @@
 import React, { PropTypes } from 'react';
-import { Editor, Plain, Mark } from 'slate';
+import { fromJS } from 'immutable';
-import Prism from 'prismjs';
+import CaretPosition from 'textarea-caret-position';
-import PluginDropImages from 'slate-drop-or-paste-images';
+import registry from '../../../../lib/registry';
 import MediaProxy from '../../../../valueObjects/MediaProxy';
-import marks from './prismMarkdown';
+import Toolbar from './Toolbar';
+import BlockMenu from './BlockMenu';
 import styles from './index.css';
 
-Prism.languages.markdown = Prism.languages.extend('markup', {});
+const HAS_LINE_BREAK = /\n/m;
-Prism.languages.insertBefore('markdown', 'prolog', marks);
-Prism.languages.markdown.bold.inside.url = Prism.util.clone(Prism.languages.markdown.url);
-Prism.languages.markdown.italic.inside.url = Prism.util.clone(Prism.languages.markdown.url);
-Prism.languages.markdown.bold.inside.italic = Prism.util.clone(Prism.languages.markdown.italic);
-Prism.languages.markdown.italic.inside.bold = Prism.util.clone(Prism.languages.markdown.bold);
 
-function renderDecorations(text, block) {
+function processUrl(url) {
-  let characters = text.characters.asMutable();
+  if (url.match(/^(https?:\/\/|mailto:|\/)/)) {
-  const string = text.text;
+    return url;
-  const grammar = Prism.languages.markdown;
-  const tokens = Prism.tokenize(string, grammar);
-  let offset = 0;
-
-  for (const token of tokens) {
-    if (typeof token == 'string') {
-      offset += token.length;
-      continue;
-    }
-
-    const length = offset + token.matchedStr.length;
-    const name = token.alias || token.type;
-    const type = `highlight-${ name }`;
-
-    for (let i = offset; i < length; i++) {
-      let char = characters.get(i);
-      let { marks } = char;
-      marks = marks.add(Mark.create({ type }));
-      char = char.merge({ marks });
-      characters = characters.set(i, char);
-    }
-
-    offset = length;
   }
-
+  if (url.match(/^[^\/]+\.[^\/]+/)) {
-  return characters.asImmutable();
+    return `https://${ url }`;
+  }
+  return `/${ url }`;
 }
 
-const SCHEMA = {
+function preventDefault(e) {
-  rules: [
+  e.preventDefault();
-    {
+}
-      match: object => object.kind == 'block',
+
-      decorate: renderDecorations,
+const buildtInPlugins = fromJS([{
-    },
+  label: 'Image',
-  ],
+  id: 'image',
-  marks: {
+  fromBlock: (data) => {
-    'highlight-comment': {
+    const m = data.match(/^!\[([^\]]+)\]\(([^\)]+)\)$/);
-      opacity: '0.33',
+    return m && {
-    },
+      image: m[2],
-    'highlight-important': {
+      alt: m[1],
-      fontWeight: 'bold',
+    };
-      color: '#006',
-    },
-    'highlight-keyword': {
-      fontWeight: 'bold',
-      color: '#006',
-    },
-    'highlight-url': {
-      color: '#006',
-    },
-    'highlight-punctuation': {
-      color: '#006',
-    },
   },
-};
+  toBlock: data => `![${ data.alt }](${ data.image })`,
+  toPreview: data => `<img src="${ data.image }" alt="${ data.alt }" />`,
+  pattern: /^!\[([^\]]+)\]\(([^\)]+)\)$/,
+  fields: [{
+    label: 'Image',
+    name: 'image',
+    widget: 'image',
+  }, {
+    label: 'Alt Text',
+    name: 'alt',
+  }],
+}]);
 
 export default class RawEditor extends React.Component {
-
-  static propTypes = {
-    onAddMedia: PropTypes.func.isRequired,
-    getMedia: PropTypes.func.isRequired,
-    onChange: PropTypes.func.isRequired,
-    value: PropTypes.string,
-  };
-
   constructor(props) {
     super(props);
-    const content = props.value ? Plain.deserialize(props.value) : Plain.deserialize('');
+    const plugins = registry.getEditorComponents();
-
     this.state = {
-      state: content,
+      plugins: buildtInPlugins.concat(plugins),
     };
-
+    this.shortcuts = {
-    this.plugins = [
+      meta: {
-      PluginDropImages({
+        b: this.handleBold,
-        applyTransform: (transform, file) => {
+      },
-          const mediaProxy = new MediaProxy(file.name, file);
+    };
-          const state = Plain.deserialize(`\n\n![${ file.name }](${ mediaProxy.public_path })\n\n`);
+  }
-          props.onAddMedia(mediaProxy);
+  componentDidMount() {
-          return transform
+    this.updateHeight();
-            .insertFragment(state.get('document'));
+    this.element.addEventListener('dragenter', preventDefault, false);
-        },
+    this.element.addEventListener('dragover', preventDefault, false);
-      }),
+    this.element.addEventListener('drop', this.handleDrop, false);
-    ];
   }
 
-  /**
+  componentDidUpdate() {
-   * Slate keeps track of selections, scroll position etc.
+    if (this.newSelection) {
-   * So, onChange gets dispatched on every interaction (click, arrows, everything...)
+      this.element.selectionStart = this.newSelection.start;
-   * It also have an onDocumentChange, that get's dispatched only when the actual
+      this.element.selectionEnd = this.newSelection.end;
-   * content changes
+      this.newSelection = null;
-   */
+    }
-  handleChange = (state) => {
+  }
-    this.setState({ state });
+
+  componentWillUnmount() {
+    this.element.removeEventListener('dragenter', preventDefault);
+    this.element.removeEventListener('dragover', preventDefault);
+    this.element.removeEventListener('drop', this.handleDrop);
+  }
+
+  getSelection() {
+    const start = this.element.selectionStart;
+    const end = this.element.selectionEnd;
+    const selected = (this.props.value || '').substr(start, end - start);
+    return { start, end, selected };
+  }
+
+  surroundSelection(chars) {
+    const selection = this.getSelection();
+    const newSelection = Object.assign({}, selection);
+    const { value } = this.props;
+    const escapedChars = chars.replace(/\*/g, '\\*');
+    const regexp = new RegExp(`^${ escapedChars }.*${ escapedChars }$`);
+    let changed = chars + selection.selected + chars;
+
+    if (regexp.test(selection.selected)) {
+      changed = selection.selected.substr(chars.length, selection.selected.length - (chars.length * 2));
+      newSelection.end = selection.end - (chars.length * 2);
+    } else if (
+      value.substr(selection.start - chars.length, chars.length) === chars &&
+      value.substr(selection.end, chars.length) === chars
+    ) {
+      newSelection.start = selection.start - chars.length;
+      newSelection.end = selection.end + chars.length;
+      changed = selection.selected;
+    } else {
+      newSelection.end = selection.end + (chars.length * 2);
+    }
+
+    const beforeSelection = value.substr(0, selection.start);
+    const afterSelection = value.substr(selection.end);
+
+    this.newSelection = newSelection;
+    this.props.onChange(beforeSelection + changed + afterSelection);
+  }
+
+  replaceSelection(chars) {
+    const { value } = this.props;
+    const selection = this.getSelection();
+    const newSelection = Object.assign({}, selection);
+    const beforeSelection = value.substr(0, selection.start);
+    const afterSelection = value.substr(selection.end);
+    newSelection.end = selection.start + chars.length;
+    this.newSelection = newSelection;
+    this.props.onChange(beforeSelection + chars + afterSelection);
+  }
+
+  updateHeight() {
+    if (this.element.scrollHeight > this.element.clientHeight) {
+      this.element.style.height = `${ this.element.scrollHeight }px`;
+    }
+  }
+
+  handleRef = (ref) => {
+    this.element = ref;
+    if (ref) {
+      this.caretPosition = new CaretPosition(ref);
+    }
   };
 
-  handleDocumentChange = (document, state) => {
+  handleKey = (e) => {
-    const content = Plain.serialize(state, { terse: true });
+    if (e.metaKey) {
-    this.props.onChange(content);
+      const action = this.shortcuts.meta[e.key];
+      if (action) {
+        e.preventDefault();
+        action();
+      }
+    }
+  };
+
+  handleBold = () => {
+    this.surroundSelection('**');
+  };
+
+  handleItalic = () => {
+    this.surroundSelection('*');
+  };
+
+  handleLink = () => {
+    const url = prompt('URL:');
+    const selection = this.getSelection();
+    this.replaceSelection(`[${ selection.selected }](${ processUrl(url) })`);
+  };
+
+  handleSelection = () => {
+    const { value } = this.props;
+    const selection = this.getSelection();
+    if (selection.start !== selection.end && !HAS_LINE_BREAK.test(selection.selected)) {
+      try {
+        const position = this.caretPosition.get(selection.start, selection.end);
+        this.setState({ showToolbar: true, showBlockMenu: false, selectionPosition: position });
+      } catch (e) {
+        this.setState({ showToolbar: false, showBlockMenu: false });
+      }
+    } else if (selection.start === selection.end) {
+      const newBlock =
+        (
+          (selection.start === 0 && value.substr(0,1).match(/^\n?$/)) ||
+          value.substr(selection.start - 2, 2) === '\n\n') &&
+        (
+          selection.end === (value.length - 1) ||
+          value.substr(selection.end, 2) === '\n\n' ||
+          value.substr(selection.end).match(/\n*$/m)
+        );
+
+      if (newBlock) {
+        const position = this.caretPosition.get(selection.start, selection.end);
+        this.setState({ showToolbar: false, showBlockMenu: true, selectionPosition: position });
+      } else {
+        this.setState({ showToolbar: false, showBlockMenu: false });
+      }
+    } else {
+      this.setState({ showToolbar: false, showBlockMenu: false });
+    }
+  };
+
+  handleChange = (e) => {
+    this.props.onChange(e.target.value);
+    this.updateHeight();
+  };
+
+  handleBlock = (chars) => {
+    this.replaceSelection(chars);
+    this.setState({ showBlockMenu: false });
+  };
+
+  handleDrop = (e) => {
+    e.preventDefault();
+    let data;
+
+    if (e.dataTransfer.files && e.dataTransfer.files.length) {
+      data = Array.from(e.dataTransfer.files).map((file) => {
+        const mediaProxy = new MediaProxy(file.name, file);
+        this.props.onAddMedia(mediaProxy);
+        const link = `[${ file.name }](${ mediaProxy.public_path })`;
+        if (file.type.split('/')[0] === 'image') {
+          return `!${ link }`;
+        }
+        return link;
+      }).join('\n\n');
+    } else {
+      data = e.dataTransfer.getData('text/plain');
+    }
+    this.replaceSelection(data);
   };
 
   render() {
-    return (
+    const { onAddMedia, onRemoveMedia, getMedia } = this.props;
-      <Editor
+    const { showToolbar, showBlockMenu, plugins, selectionPosition } = this.state;
-        className={styles.root}
+    return (<div className={styles.root}>
-        placeholder={'Enter some rich text...'}
+      <Toolbar
-        state={this.state.state}
+        isOpen={showToolbar}
-        schema={SCHEMA}
+        selectionPosition={selectionPosition}
-        onChange={this.handleChange}
+        onBold={this.handleBold}
-        onDocumentChange={this.handleDocumentChange}
+        onItalic={this.handleItalic}
-        plugins={this.plugins}
+        onLink={this.handleLink}
       />
-    );
+      <BlockMenu
+        isOpen={showBlockMenu}
+        selectionPosition={selectionPosition}
+        plugins={plugins}
+        onBlock={this.handleBlock}
+        onAddMedia={onAddMedia}
+        onRemoveMedia={onRemoveMedia}
+        getMedia={getMedia}
+      />
+      <textarea
+        ref={this.handleRef}
+        value={this.props.value || ''}
+        onKeyDown={this.handleKey}
+        onChange={this.handleChange}
+        onSelect={this.handleSelection}
+      />
+    </div>);
   }
 }
+
+RawEditor.propTypes = {
+  onAddMedia: PropTypes.func.isRequired,
+  onRemoveMedia: PropTypes.func.isRequired,
+  getMedia: PropTypes.func.isRequired,
+  onChange: PropTypes.func.isRequired,
+  value: PropTypes.node,
+};

src/components/Widgets/MarkdownControlElements/plugins.js

@@ -1,5 +1,5 @@
 import { Component, PropTypes, Children } from 'react';
-import { List, Record } from 'immutable';
+import { List, Record, fromJS } from 'immutable';
 import _ from 'lodash';
 
 const plugins = { editor: List() };
@@ -11,23 +11,23 @@ const EditorComponent = Record({
   icon: 'exclamation-triangle',
   fields: [],
   pattern: catchesNothing,
-  fromBlock: function(match) { return {}; },
+  fromBlock(match) { return {}; },
-  toBlock: function(attributes) { return 'Plugin'; },
+  toBlock(attributes) { return 'Plugin'; },
-  toPreview: function(attributes) { return 'Plugin'; }
+  toPreview(attributes) { return 'Plugin'; },
 });
 
 
 class Plugin extends Component { // eslint-disable-line
   static propTypes = {
-    children: PropTypes.element.isRequired
+    children: PropTypes.element.isRequired,
   };
 
   static childContextTypes = {
-    plugins: PropTypes.object
+    plugins: PropTypes.object,
   };
 
   getChildContext() {
-    return { plugins: plugins };
+    return { plugins };
   }
 
   render() {
@@ -40,11 +40,11 @@ export function newEditorPlugin(config) {
     id: config.id || config.label.replace(/[^A-Z0-9]+/ig, '_'),
     label: config.label,
     icon: config.icon,
-    fields: config.fields,
+    fields: fromJS(config.fields),
     pattern: config.pattern,
     fromBlock: _.isFunction(config.fromBlock) ? config.fromBlock.bind(null) : null,
     toBlock: _.isFunction(config.toBlock) ? config.toBlock.bind(null) : null,
-    toPreview: _.isFunction(config.toPreview) ? config.toPreview.bind(null) : config.toBlock.bind(null)
+    toPreview: _.isFunction(config.toPreview) ? config.toPreview.bind(null) : config.toBlock.bind(null),
   });