Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- 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');
- }
Add Comment
Please, Sign In to add comment