How to use the draft-js.EditorState.createEmpty 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 LessWrong2 / Lesswrong2 / packages / lesswrong / components / async / AsyncCommentEditor.jsx View on Github external
constructor(props, context) {
    super(props,context);
    const document = this.props.document;
    let state = {};
    if (document && document.content) {
      try {
        state = EditorState.createWithContent(convertFromRaw(document.content));
      } catch(e) {
        // eslint-disable-next-line no-console
        console.warn("Invalid comment content, restoring from HTML instead", document);
        state = document && document.htmlBody && EditorState.createWithContent(htmlToDraft(document.htmlBody, {flat: true}))
      }
    } else if (document && document.htmlBody) {
      state = EditorState.createWithContent(htmlToDraft(document.htmlBody, {flat: true}));
    } else {
      state = EditorState.createEmpty();
    }

    // Check whether we have a state from a previous session saved (in localstorage)
    const savedState = this.getSavedState();
    if (savedState) {
      try {
        // eslint-disable-next-line no-console
        console.log("Restoring saved comment state: ", savedState);
        state = EditorState.createWithContent(convertFromRaw(savedState))
      } catch(e) {
        // eslint-disable-next-line no-console
        console.error(e)
      }
    }

    this.state = {
github LessWrong2 / Lesswrong2 / .draft-js-plugins / docs / client / components / pages / Mention / CustomComponentMentionEditor / index.js View on Github external
<span> alert('Clicked on the Mention!')}
    &gt;
      {props.decoratedText}
    </span>
  ),
});
const { MentionSuggestions } = mentionPlugin;
const plugins = [mentionPlugin];

export default class CustomMentionEditor extends Component {

  state = {
    editorState: EditorState.createEmpty(),
    suggestions: mentions,
  };

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

  onSearchChange = ({ value }) =&gt; {
    this.setState({
      suggestions: defaultSuggestionsFilter(value, mentions),
    });
  };

  focus = () =&gt; {
github assembl / assembl / assembl / static2 / js / app / components / common / formControlWithLabel.jsx View on Github external
renderRichTextEditor = () =&gt; {
    const { onChange, value } = this.props;
    if (typeof value !== 'string') {
      const editorState = value || EditorState.createEmpty();
      return (
        
      );
    }

    // don't render a RichTextEditor if value is a string
    return null;
  };
github 54sword / xiaoduyu.com / src / app / components / editor / index_backup.js View on Github external
const { syncContent, content, readOnly, placeholder, expandControl } = this.props


    const decorator = new CompositeDecorator([
      {
        strategy: findLinkEntities,
        component: Link,
      },
    ]);

    this.state = {
      syncContent: syncContent, // 编辑器改变的时候,调给外部组件使用
      readOnly: readOnly,
      editorState: content
        ? EditorState.createWithContent(convertFromRaw(JSON.parse(content)), decorator)
        : EditorState.createEmpty(decorator),
      rendered: null,
      placeholder: placeholder,
      // 展开控制栏
      expandControl: expandControl || false
    }

    this.onChange = this._onChange.bind(this)
    this.toggleBlockType = (type) => this._toggleBlockType(type)
    this.toggleInlineStyle = (style) => this._toggleInlineStyle(style)
    this.addVideo = this._addVideo.bind(this)
    this.addImage = this._addImage.bind(this)
    this.addLink = this._addLink.bind(this)
    this.addMusic = this._addMusic.bind(this)
    this.handleKeyCommand = this._handleKeyCommand.bind(this);
    this.mapKeyToEditorCommand = this._mapKeyToEditorCommand.bind(this);
github alexnorton / transcript-editor / src / components / TranscriptEditor.js View on Github external
);
  }
}

TranscriptEditor.propTypes = {
  editorState: PropTypes.instanceOf(EditorState),
  speakers: PropTypes.instanceOf(Immutable.List),
  onChange: PropTypes.func.isRequired,
  onSelectionChange: PropTypes.func,
  onKeyboardEvent: PropTypes.func,
  disabled: PropTypes.bool,
  showSpeakers: PropTypes.bool,
};

TranscriptEditor.defaultProps = {
  editorState: EditorState.createEmpty(),
  speakers: new Immutable.List(),
  onSelectionChange: null,
  onKeyboardEvent: null,
  disabled: false,
  showSpeakers: false,
};

export default TranscriptEditor;
github web-pal / DBGlass / app / components / Main / Content / Modals / EditorModal / EditorModal.js View on Github external
constructor(props) {
    super(props);
    this.state = {
      editorState: EditorState.createEmpty(),
      markdownDisabled: true
    };
  }
github bkniffler / draft-wysiwyg / src / editor.js View on Github external
constructor(props) {
    super(props);
    this.batch = batch(200);
    this.plugins = createPlugins(props);
    this.editorState = props.value
      ? EditorState.push(EditorState.createEmpty(), convertFromRaw(props.value))
      : EditorState.createEmpty();

    this.blockRenderMap = DefaultDraftBlockRenderMap.merge(
      this.customBlockRendering(props)
    );

    this.state = {};
  }
github OpenNeuroOrg / openneuro / packages / openneuro-app / src / scripts / common / partials / rich-editor.jsx View on Github external
constructor(props) {
    super(props)

    let decorator = new PrismDecorator({
      prism: Prism,
      defaultSyntax: 'python',
    })

    this.state = {
      defaultSyntax: 'python',
      editorState: EditorState.createEmpty(decorator),
      decorator: decorator,
      placeholderText: this.props.placeholderText,
    }

    this.focus = () => this.editor.focus()
    this.onChange = this._onChange.bind(this)

    this.handleKeyCommand = this._handleKeyCommand.bind(this)
    this.onTab = this._onTab.bind(this)
    this.toggleBlockType = this._toggleBlockType.bind(this)
    this.toggleInlineStyle = this._toggleInlineStyle.bind(this)
    this.changeLanguage = this._changeLanguage.bind(this)
  }
github MoveOnOrg / Spoke / src / components / ScriptEditor.jsx View on Github external
getEditorState() {
    const { scriptFields, scriptText } = this.props

    const decorator = this.getCompositeDecorator(scriptFields)
    let editorState
    if (scriptText) {
      editorState = EditorState.createWithContent(ContentState.createFromText(scriptText), decorator)
    } else {
      editorState = EditorState.createEmpty(decorator)
    }

    return editorState
  }
github ahrbil / TDI-Exchange / packages / web / src / components / create-question / index.js View on Github external
.then(({ data }) => {
          this.setState({ header: "", editorState: EditorState.createEmpty() });
          isEditing && this.props.setIsEditing(false);
          navigate(
            `/questions/${
              isEditing ? data.updateQuestion.id : data.createQuestion.id
            }`
          );
        })
        .catch(err => {