How to use react-rte - 10 common examples

createValueFromString = props =>
    RichTextEditor.createValueFromString(
      // @todo This should not be needed after https://github.com/jsdrupal/drupal-admin-ui/issues/195
      (Array.isArray(props.value) &&
        props.value.length &&
        props.value[0].value) ||
        props.value.value ||
        '',
      'html',
    );

import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import projectData from 'fragments/projectData'; // eslint-disable-line
import { WithLoading, WithToast, Project, CommentFeed } from 'components';
import Box from 'grommet-udacity/components/Box';
import { graphql } from 'react-apollo';
import gql from 'graphql-tag';
import * as ProjectActionCreators from './actions';

let RichTextEditor;
if (typeof window !== 'undefined') {
  RichTextEditor = require('react-rte').default; // eslint-disable-line
}

class ProjectContainer extends Component {
  constructor() {
    super();
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleUpvote = this.handleUpvote.bind(this);
    this.checkAuthToken = this.checkAuthToken.bind(this);
    this.handleResettingComment = this.handleResettingComment.bind(this);
  }
  componentDidMount() {
    this.handleResettingComment();
  }
  handleResettingComment() {
    if (RichTextEditor) {
      this.props.actions.projectEditComment(RichTextEditor.createEmptyValue());

import { bindActionCreators } from 'redux';
import cssModules from 'react-css-modules';
import Box from 'grommet-udacity/components/Box';
import Section from 'grommet-udacity/components/Section';
import Headline from 'grommet-udacity/components/Headline';
import Paragraph from 'grommet-udacity/components/Paragraph';
import Markdown from 'grommet-udacity/components/Markdown';
import { compose, lifecycle, withHandlers } from 'recompose';
import { Divider, WithLoading, CommentFeed, WithToast } from 'components';
import withData from './gql';
import * as TutorialActionCreators from './actions';
import styles from './index.module.scss';

let RichTextEditor;
if (typeof window !== 'undefined') {
  RichTextEditor = require('react-rte').default; // eslint-disable-line
}

const TutorialContainer = ({
  isLoading,
  tutorial,
  commentInput,
  actions,
  commentError,
  message,
  user,
  handleSubmit,
  handleUpvote,
}) => (

import Section from 'grommet-udacity/components/Section';
import Article from 'grommet-udacity/components/Article';
import Button from 'grommet-udacity/components/Button';
import Footer from 'grommet-udacity/components/Footer';
import Columns from 'grommet-udacity/components/Columns';
import Heading from 'grommet-udacity/components/Heading';
import List from 'grommet-udacity/components/List';
import ListItem from 'grommet-udacity/components/ListItem';
import Label from 'grommet-udacity/components/Label';
import { Comment, Divider } from 'components';
import Status from 'grommet-udacity/components/icons/Status';
import { Link } from 'react-router';

let RichTextEditor;
if (typeof window !== 'undefined') {
  RichTextEditor = require('react-rte').default; // eslint-disable-line
}

const CommentFeed = ({
  value,
  onChange,
  onSubmit,
  comments,
  onUpvote,
  user,
}) => (
  <section align="center">
    {RichTextEditor != null &amp;&amp; // eslint-disable-line
      
        <article>
          
            Comments</article></section>

import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import cssModules from 'react-css-modules';
import { graphql } from 'react-apollo';
import gql from 'graphql-tag';
import Box from 'grommet-udacity/components/Box';
import { WithLoading, Post, CommentFeed, WithToast } from 'components';
import postFragment from './fragments';
import * as PostActionCreators from './actions';
import styles from './index.module.scss';

let RichTextEditor;
if (typeof window !== 'undefined') {
  RichTextEditor = require('react-rte').default; // eslint-disable-line
}

class PostContainer extends Component { // eslint-disable-line react/prefer-stateless-function
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleUpvote = this.handleUpvote.bind(this);
    this.checkAuthToken = this.checkAuthToken.bind(this);
    this.handleResettingComment = this.handleResettingComment.bind(this);
  }
  componentDidMount() {
    this.handleResettingComment();
  }
  handleResettingComment() {
    if (RichTextEditor) {
      this.props.actions.postEditComment(RichTextEditor.createEmptyValue());

stub: '',
        status: 0,
        sticky: false,
        language: 0,
        thumbnail: ''
      },
      postStatus: Object.keys(params.blog.status).map(
        k => params.blog.status[k]
      ),
      blogCategories: Object.keys(params.blog.categories).map(
        k => params.blog.categories[k]
      ),
      languages: Object.keys(params.global.languages).map(
        k => params.global.languages[k]
      ),
      mdeState: RichTextEditor.createEmptyValue()
    };
  }

constructor(props: RequestAppealStatementProps) {
    super(props);
    this.state = {
      summaryValue: "",
      detailsValue: RichTextEditor.createEmptyValue(),
    };
  }

buildValue(strValue, language) {
        return strValue ? RichTextEditor.createValueFromString(strValue, language) : RichTextEditor.createEmptyValue()
    }

function PostForm({ post, onSubmit }) {
  const [localPost, setLocalPost] = useState(post);
  const [mdeState, setMdeState] = useState(
    post.id > 0
      ? RichTextEditor.createValueFromString(post.content, 'markdown')
      : RichTextEditor.createEmptyValue()
  );
  const { formatMessage: f } = useIntl();

  const handleMdeChange = value => {
    let post = { ...localPost };
    post['content'] = value.toString('markdown');
    setLocalPost(post);
    setMdeState(value);
  };

  const handleOnChange = event => {
    let post = { ...localPost };
    post[event.target.name] = event.target.value;

    if (event.target.name === 'title') {
      post.stub = slugify(event.target.value);

constructor (props) {
    super(props)
    if (props.defaultValue) {
      const value = RichTextEditor.createValueFromString(props.defaultValue, 'html')
      this.state = { value }
    } else {
      const value = RichTextEditor.createEmptyValue()
      this.state = { value }
    }

    this.focus = () => this[props.name].focus()
    this.onChange = (value) => {
      this.setState({ value })
      this.props.onChange(value.toString('html'))
    }
  }