Draftail atomic block state change

text-block.js

import { Component } from 'react';
const { AtomicBlockUtils, EditorState, SelectionState, Modifier } = window.DraftJS


// The source gathers data for new entities that are being added in the Draftail editor
// It is invoked only when an new embed is inserted by the user
export class TextSource extends Component {

    componentDidMount() {
        const { editorState, entityType, onComplete } = this.props;

        const content = editorState.getCurrentContent();
        const contentWithEntity = content.createEntity(entityType.type, 'MUTABLE', {
          text: '',
        });
        const entityKey = contentWithEntity.getLastCreatedEntityKey();
        const nextState = AtomicBlockUtils.insertAtomicBlock(editorState, entityKey, ' ');
        onComplete(nextState);
    }

    render() {
        return null;
    }
}


// The block is used to render the entity in the editor
// It may receive props:
// *  from the source component when first created
// *  from the server side when reloaded from the database
export class TextBlock extends Component {
  constructor(props) {
    super(props)
    const data = props.blockProps.entity.getData()
    this.state = {
      text: data.text,
    }
  }

  handleTextChange = e => {
    const { text } = this.state
    this.setState({
        text: e.target.value
    })
  }

  saveText = e => {
    // Update editor ContentState
    const { block, blockProps } = this.props
    const { editorState, onChange } = blockProps
    onChange(updateBlockEntity(editorState, block, {
      text: this.state.text,
    }))
  }

  render() {
    const data = this.props.blockProps.entity.getData()
    const { text } = this.state
    return (
      <div>
        <p>Saved text is "{ data.text }"</p>
        <input
          name="title"
          type="text"
          onChange={this.handleTextChange}
          value={text}
        />
        <button onClick={this.saveText}>Submit</button>
      </div>
    )
  }
}


// Update a block's data in the WYSIWYG editor, nicked from DraftUtils source code
const updateBlockEntity = (editorState, block, data) => {
    const content = editorState.getCurrentContent();
    let nextContent = content.mergeEntityData(block.getEntityAt(0), data);
    nextContent = Modifier.mergeBlockData(
        nextContent,
        new SelectionState({
            anchorKey: block.getKey(),
            anchorOffset: 0,
            focusKey: block.getKey(),
            focusOffset: block.getLength(),
        }),
        {},
    );
    return EditorState.push(editorState, nextContent, 'apply-entity');
}

import { Component } from 'react';

This likely means you're loading React from your own build instead of from the version loaded with Wagtail – this could cause issues.

---

For updateBlockEntity, if I were you I'd copy the full source with the relevant comment:

        // To remove in Draft.js 0.11.
        // This is necessary because entity data is still using a mutable, global store.
        nextContent = Modifier.mergeBlockData(
            nextContent,
            new SelectionState({
                anchorKey: block.getKey(),
                anchorOffset: 0,
                focusKey: block.getKey(),
                focusOffset: block.getLength(),
            }),
            {},
        );

All of this code will be completely useless in the next version of Draft.js.

Also – in Wagtail 2.1 you'll be able to get this directly (wagtail/wagtail#4467) as window.Draftail.DraftUtils.updateBlockEntity.