How to use megadraft - 10 common examples

handleSubmit() {
    const {
      action,
      editorTitle,
      editorState,
      modal,
    } = this.props;
    const json = editorStateToJSON(editorState);
    const blockArray = convertFromRaw(JSON.parse(json));
    const content = stateToMarkdown(blockArray);
    const article = inputToArticle({
      json,
      content,
      title: editorTitle,
      status: modal.status,
      spotlighted: modal.spotlighted,
      tags: modal.selectedTags,
      feature_image: modal.featureImage || '',
    });
    if (action && action === 'edit') {
      this.handleUpdateArticleSubmission(article);
    } else {
      this.handleNewArticleSubmission(article);
    }

render() {
    const {
      editorState,
      editorTitle,
      isValid,
      onChangeTitle,
      onSubmit,
      onChangeContent,
      onTapToPreview,
    } = this.props;
    const stateForEditor = editorState ? editorState : editorStateFromRaw(null);
    return (
      <div>
        <div>
          <input placeholder="Title" value="{editorTitle}" type="titleInput">
        </div>
        <div>
           onChangeContent(state)}</div></div>

import React, { Component } from 'react';
import { EditorState, convertToRaw, convertFromRaw } from 'draft-js';
import { MegadraftEditor, editorStateFromRaw } from 'megadraft';
import Button from '../Button/Button';
import LoadJSON from '../LoadJSON/LoadJSON';
import Preview from '../Preview/Preview';
import ForkRibbon from '../ForkRibbon/ForkRibbon';
import sample from '../sample';
import './App.css';
import '../../node_modules/megadraft/dist/css/megadraft.css';

const intialState = editorStateFromRaw(sample);

class App extends Component {
  state = {
    editorState: intialState,
    raw: convertToRaw(intialState.getCurrentContent()),
    paste: false,
  };

  handleUpdate = (editorState) => {
    this.setState({
      editorState,
      raw: convertToRaw(editorState.getCurrentContent()),
      paste: false,
    });
  };

import * as types from './constants';
import update from 'react-addons-update';
import { editorStateFromRaw } from 'megadraft';

export const initialState = {
  article: {
    id: null,
    action: null,
  },
  editorState: editorStateFromRaw(null),
  editorTitle: null,
  preview: {
    isPreviewing: false,
    content: null,
    title: null,
  },
  isValid: false,
  isLoading: false,
  error: null,
  message: null,
  modal: {
    isShowing: false,
    status: 0,
    spotlighted: false,
    selectedTags: [],
    featureImage: null,

$set: action.action,
            },
          },
        });
      case types.CMS_SET_FEATURE_IMAGE:
        return update(state, {
          modal: modalReducer(state.modal, action),
        });
      case types.CMS_SET_STATE_FROM_ARTICLE:
        const rawContent = JSON.parse(action.article.json);
        return update(state, {
          isValid: {
            $set: true,
          },
          editorState: {
            $set: editorStateFromRaw(rawContent),
          },
          editorTitle: {
            $set: action.article.title,
          },
          modal: {
            $set: modalReducer(state.modal, action),
          },
        });
      default:
        return state;
    }
  };

constructor(props) {
    super(props);

    this._handleEdit = ::this._handleEdit;
    this._onModalClose = ::this._onModalClose;
    this._onSave = ::this._onSave;

    this.state = {
      isEditing: false
    };

    this.actions = [
      {"key": "edit", "icon": MegadraftIcons.EditIcon, "action": this._handleEdit},
      {"key": "delete", "icon": MegadraftIcons.DeleteIcon, "action": this.props.container.remove}
    ];
  }

constructor(props) {
    super(props);

    this._handleAddAnotherClick = ::this._handleAddAnotherClick;
    this.updateArticle = ::this.updateArticle;
    this.removeArticle = ::this.removeArticle;

    this.actions = [
      {"key": "delete", "icon": MegadraftIcons.DeleteIcon, "action": this.props.container.remove}
    ];
  }

constructor(props) {
    super(props);

    this._handleCaptionChange = ::this._handleCaptionChange;
    this._handleEdit = ::this._handleEdit;

    this.actions = [
      { key: "edit", icon: MegadraftIcons.EditIcon, action: this._handleEdit },
      {
        key: "delete",
        icon: MegadraftIcons.DeleteIcon,
        action: this.props.container.remove,
      },
    ];
  }

onClick(e) {
    const data = {
      type: constants.PLUGIN_TYPE,
      caption: "Initial plugin text",
    };

    this.props.onChange(insertDataBlock(this.props.editorState, data));
  }

onSave(tableConfig) {
    this.setState({isEditing: false});
    const data = {
      type: constants.PLUGIN_TYPE,
      ...tableConfig
    };

    this.props.onChange(insertDataBlock(this.props.editorState, data));
  }