Draft-js: Best approach to get last typing word or block

[ka13ar]

Hi I want to ask what is the best approach to get last word for example I want to create editor like this

1: I write "Abm7" in the editor and hit space
2: The editor looks in an array if "Abm7" exist
3: If true, "Abm7" is replaced with "Abminorseventh" and the font is changed

I am struggling to get the lastword from editor for hitspace i have found the way using keybinding

thanks

[1j01]

Perhaps you're looking for EditorState.getSelection (which returns a SelectionState)

You could then do something like:

var end = selectionState.getEndOffset();
var slicedText = myContentBlock.getText().slice(0, end);
var start = slicedText.lastIndexOf(" ");
if (start == -1) { start = 0; }
var word = slicedText.slice(start);

(There's probably a better way of doing that.)

[1j01]

Actually depending on what you're doing, decorators could be a lot easier.

[hellendag]

Do you want to find all instances of that string? Or just check whatever is right before the space you inserted?

[ka13ar]

Only one before space, I just want to change the single last word that user type before space and continue type new word

[hellendag]

Got it. My suggestion is to use handleBeforeInput to check for the insertion of the space character.

• When this character is about to be inserted, you can check the string before the cursor to determine whether it matches your target string.
• If there is no match, return false. (https://facebook.github.io/draft-js/docs/api-reference-editor.html#cancelable-handlers-optional)
• If there is a match, modify the ContentState and use EditorState methods to push your change, move the cursor, etc.
• Set the updated EditorState as your new state. return true to indicate that the event was handled by your code.

We do this on Facebook to replace emoticon text with their emoji replacements. E.g. if you type :), pressing the spacebar is what triggers the search to replace the smiley string with the emoji.

[ka13ar]

Thanks man for fast response, really appreciate it

[ka13ar]

@hellendag I have try this approach using handleBeforeInput, it seem this.setstate in handleBeforeInput doesnt change the editor state. But I console.log the editorStateModified , and the contentBlock was changed. Do you have any solution for it?

import React, {Component} from 'react';

import {Editor, EditorState,getDefaultKeyBinding,moveFocusToEnd, KeyBindingUtil,getContentStateFragment, SelectionState, Modifier, CompositeDecorator} from 'draft-js';

const storage = {
  "Abm7" : "Abminorseventh"
}
export default class MyEditor extends Component {

  constructor(props) {
    super(props);

    this.state = { editorState: EditorState.createEmpty(), lastOffset:0 };
    this.focus = () => this.refs.editor.focus();
    this.logState = () => console.log(this.state.editorState.toJS());
  }

  onChange(editorState) {
    this.setState({editorState});
  }

  handleBeforeInput(e) {
    if(e === ' ') {
      const { editorState } = this.state;
      const content = editorState.getCurrentContent();
      const selection = editorState.getSelection();
      const end = selection.getEndOffset();

      const block = content.getBlockForKey(selection.getAnchorKey());
      const word = block.getText();
      const result = word.slice(this.state.lastOffset, selection.getEndOffset());
      const newSelection = new SelectionState({
          anchorKey: block.getKey(),
          anchorOffset: 0,
          focusKey: block.getKey(),
          focusOffset: 2
      })
      const contentReplaced = Modifier.replaceText(
                content,
                newSelection,
                "**")
      const editorStateModified = EditorState.push(
         editorState,
         contentReplaced,
         'replace-text'
      );

      this.setState({lastOffset: selection.getEndOffset(), editorState:editorStateModified})
      return true;
    }else {
      return false;
    }
  }

  prompt(e) {
    e.preventDefault();
    const {editorState} = this.state;
    const content = editorState.getCurrentContent();
    const selection = editorState.getSelection();
    const block = editorState.getCurrentContent().getBlockForKey(selection.getAnchorKey());

    let text = block.getText().slice(selection.getStartOffset(), selection.getEndOffset());

    const contentReplaced = Modifier.replaceText(
              content,
              selection,
              storage[text])
    const editorStateModified = EditorState.push(
       editorState,
       contentReplaced,
       'replace-text'
    );
    console.log(editorStateModified.getCurrentContent())
    this.setState({editorState:editorStateModified})
  }

  render() {
    const styles = {
      root: {
        fontFamily: '\'Helvetica\', sans-serif',
        padding: 20,
        width: 600,
      },
      editor: {
        border: '1px solid #ccc',
        cursor: 'text',
        minHeight: 80,
        padding: 10,
      },
      button: {
        marginTop: 10,
        textAlign: 'center',
      },
      buttons: {
          marginBottom: 10,
      },
    };
    return (
      <div style={styles.root}>
        <div style={styles.buttons}>
                <button
                  onMouseDown={(e)=>{this.prompt(e)}}
                  style={{marginRight: 10}}>
                  Change word
                </button>
          </div>
        <div style={styles.editor} onClick={this.focus}>
          <Editor
            editorState={this.state.editorState}
            onChange={(e)=>{this.onChange(e)}}
            handleBeforeInput={(e)=>{this.handleBeforeInput(e)}}
            placeholder="Enter some text..."
            ref="editor"
            />
        </div>
        <input
          onClick={this.logState}
          style={styles.button}
          type="button"
          value="Log State"
          />
      </div>
    );
  }

}