How to use the draft-js.ContentState.createFromText function in draft-js

To help you get started, we’ve selected a few draft-js examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github humanmade / Workflows / admin / src / Editor / index.js View on Github external
constructor( props ) {
		super( props );

		if ( props.content ) {
			this.state = {
				editorState: EditorState.createWithContent( ContentState.createFromText( props.content ) )
			}
		} else {
			this.state = { editorState: EditorState.createEmpty() }
		}

		// Move default selection to end of text.
		this.state.editorState = EditorState.moveSelectionToEnd( this.state.editorState );

		this.focus = () => this.refs.editor.focus();

		this.onChange = editorState => {
			this.setState( { editorState } )

			// Update outer item.
			if ( props.onChange ) {
				props.onChange( editorState.getCurrentContent().getPlainText() )
github idyll-lang / idyll-studio / src / components / editor / edit-area.js View on Github external
constructor(props) {
    super(props);

    // Create content state based on passed initial content
    const content = ContentState.createFromText(this.props.initialContent);
    this.state = {
      editorState: EditorState.createWithContent(content),
      shouldRenderEditor: false
    };
  }
github assembl / assembl / assembl / static2 / workspaces / assembl-editor-utils / src / __test__ / entities.spec.js View on Github external
it('should get the range (start/end offsets) of this entity', () => {
    let contentState = ContentState.createFromText('we need to connect the bluetooth SSL capacitor!').createEntity(
      ENTITY_TYPES.link,
      ENTITY_MUTABILITY.mutable,
      {}
    );
    const block = contentState.getFirstBlock();
    const entityKey = contentState.getLastCreatedEntityKey();
    const selection = createSelectionState(block.getKey(), 2, 8);
    contentState = Modifier.applyEntity(contentState, selection, entityKey);
    const editorState = EditorState.createWithContent(contentState);

    const actual = getEntityRange(editorState, entityKey);
    expect(actual).not.toBeNull();
    if (actual !== null) {
      expect(actual.start).toEqual(2);
      expect(actual.end).toEqual(8);
    }
github LessWrong2 / Lesswrong2 / packages / lesswrong / testing / utils.js View on Github external
export const createDummyMessage = async (user, data) => {
  let defaultData = {
    content: convertToRaw(ContentState.createFromText('Dummy Message Content')),
    userId: user._id,
  }
  const messageData = {...defaultData, ...data};
  const newMessageResponse = await newMutation({
    collection: Messages,
    document: messageData,
    currentUser: user,
    validate: false,
    context: {},
  });
  return newMessageResponse.data
}
github draft-js-plugins / draft-js-plugins / draft-js-counter-plugin / src / CharCounter / __test__ / index.js View on Github external
const createEditorStateFromText = text => {
    const contentState = ContentState.createFromText(text);
    return EditorState.createWithContent(contentState);
  };
github getguesstimate / guesstimate-app / src / components / calculators / show / input.js View on Github external
import React, {Component} from 'react'

import Icon from 'react-fa'

import {Guesstimator} from 'lib/guesstimator/index'

import {EditorState, Editor, ContentState} from 'draft-js'

export class Input extends Component{
  static defaultProps = {
    errors: []
  }

  state = {editorState: EditorState.createWithContent(ContentState.createFromText(''))}

  componentDidMount() {
    if (this.props.isFirst) {
      setTimeout(() => {this.refs.editor.focus()}, 1)
    }
  }

  onChange(editorState) {
    this.props.onChange(editorState.getCurrentContent().getPlainText(''))
    return this.setState({editorState})
  }

  hasValidContent() {
    const content = this.state.editorState.getCurrentContent().getPlainText('')
    return !_.isEmpty(content) && _.isEmpty(Guesstimator.parse({input: content})[0])
  }
github NDLANO / learningpath-frontend / src / components / editors / TagsEditor.js View on Github external
this.updateEditorContentStateFromText = (value) => {
      if (value.length == 0)
        return;

      let text = value.reduce(function (prev, curr) {
        return prev + curr.tag + ' ';
      }, '');
      let editorState = EditorState.createWithContent( ContentState.createFromText(text) );
      let newContentState = editorState.getCurrentContent();
      this.setState({ editorState });


      let currIdx = 0;
      value.forEach((entry) => {
        newContentState = this.applyTag(currIdx, currIdx + entry.tag.length, newContentState);
        currIdx += entry.tag.length + 1;
      });

      editorState = EditorState.push(editorState, newContentState, editorState.lastChangeType);
      this.setState({ editorState });
    };
  }
github LinesApp / draftToMD / lib / draftToMD.js View on Github external
createFromMarkdown(markdown) {
        markdown = markdown.replace(/(^|\n)\n?(# |## |### |#### |> |\d+\. |(\s*-|\*) |(\s*\d+\.) )(.*)\n?(\n|$)/gm, '$1$2$5$6');
        markdown = markdown.replace(/  \n/gm, '\n');
        return ContentState.createFromText(markdown);
    }
github draft-js-plugins / draft-js-plugins / stories / mentions-with-whitespace / src / App.js View on Github external
<div>
            {mention.title}
          </div>
        
      
    
  );
};

export default class CustomMentionEditor extends Component {
  state = {
    open: false,
    editorState: EditorState.createWithContent(
      ContentState.createFromText(
        'Type a "@first last" name, mispelling the last name will drop the match'
      )
    ),
    suggestions: mentions,
  };

  onChange = editorState =&gt; {
    this.setState({
      editorState,
    });
  };

  onOpenChange = newOpen =&gt; {
    this.setState({
      open: newOpen,
    });
github withspectrum / spectrum / src / components / draftjs-editor / index.js View on Github external
const fromPlainText = text =>
  EditorState.createWithContent(ContentState.createFromText(text));