Editor.js

// create the single note view where the user can edit it
import React, { Component } from 'react';
import render from 'react-dom';
import { Link } from 'react-router';
import { connect } from 'react-redux';
import { Editor } from 'slate-react'
import SlateHtml from 'slate-html-serializer';
import { State } from 'slate';
import * as parse5 from 'parse5';
import NotesContainer from '../../containers/NotesContainer';
import notesActions from '../../actions/notesActions';

const schema = {
  nodes: {
    image: (props) => {
      const { node, isSelected } = props
      const src = node.data.get('src')
      const className = isSelected ? 'active' : null
      const style = { display: 'block' }
      return (
        <img src={src} className={className} style={style} {...props.attributes} />
      )
    }
  }
}

const RULES = [
  {
    // Special case for images, to grab their attributes.
    deserialize(el, next) {
      if (el.tagName.toLowerCase() != 'img') return
      return {
        kind: 'inline',
        type: 'image',
        nodes: next(el.childNodes),
        data: el.attrs.reduce((obj, item) => (obj[item.name] = item.value, obj) ,{})
      }
    }
  },
  {
    // Special case for links, to grab their href.
    serialize(object, children) {
      if (object.kind == 'block' && object.type == 'image') {
        return <img src={object.src} />
      }
    }
  },
];

class NoteEditor extends Component {
  constructor() {
    super();
    this.serializer = new SlateHtml({
      rules: RULES,
      defaultBlock: 'paragraph',
      parseHtml: parse5.parseFragment
    });
  }

  render() {
    const selectedNote = this.props.notesReducer.selectedNote;
    const fullNoteObject = this.props.notesReducer.notes.byId[selectedNote];
    const initialState = fullNoteObject.note_editor ?
      fullNoteObject.note_editor :
      this.serializer.deserialize(fullNoteObject.note_body);

    return (
      <div className="note-editor">
        <Editor
          autoFocus={true}
          schema={schema}
          state={initialState}
        />
      </div>
    );
  }
}

export default connect(NotesContainer, notesActions)(NoteEditor);