import React from 'react';
import {classToDOMCard} from '../src';

const Image = React.createClass({
  render() {
    const {isInEditor, payload, saveCard, editCard, isEditing} = this.props;
    if (isEditing) {
      return (
        <div>
          <input type="text" ref="src" defaultValue={payload.src} /><br />
          <input type="text" ref="caption" defaultValue={payload.caption} /><br/>
          <button onClick={() => saveCard({ src: this.refs.src.value, caption: this.refs.caption.value })}>Save</button>
        </div>
      );
    } else {
      const onClick = isInEditor ? editCard : null;
      return (
        <div>
          <img src={payload.src} onClick={onClick} /><br/>
          <small>{payload.caption}</small><br/>
          {isInEditor && <button onClick={onClick}>Edit</button>}
        </div>
      );
    }
  }
});

const ImageCard = classToDOMCard(Image);

export default ImageCard;

@@ -60,16 +60,1248 @@
 /src';%0A%0A
+/**%0A * Component-based cards are rendered with these props:%0A *%0A * - %60payload%60 The payload for this card. Note: the payload object is%0A *    disconnected from the card's payload in the serialized mobiledoc.%0A *    To update the mobiledoc payload, use the %60saveCard%60 callback.%0A * - %60editCard%60 A callback for toggling this card into edit mode (no-op%0A *    if the card is already in edit mode).%0A * - %60removeCard%60 A callback for removing this card.%0A * - %60saveCard%60 A callback accepting new payload for the card, then%0A *    saving that payload and toggling this card into display mode.%0A *    Can optionally be passed an extra %60false%60 argument to avoid%0A *    toggling to display mode.%0A * - %60cancelCard%60 A callback for toggling this card to display mode%0A *    without saving (a no-op if the card is already in display mode).%0A * - %60cardName%60 The name of this card.%0A * - %60editor%60 A reference to the mobiledoc-kit editor instance.%0A * - %60postModel%60 A reference to this card's model in the editor's%0A *    abstract tree. This may be necessary to do programmatic editing.%0A * - %60isEditing%60 A bool indicating if the card is in Edit mode or not.%0A * - %60isInEditor%60 A bool indicating if the card is displayed inside an%0A *    editor interface or not.%0A */%0A
 const Im

Document card props