0

I have set everything up so that my external keyboard is successfully inputting data into draftjs no matter the language coming from the keyboard with exception of being able to go to the next line or delete stuff. I'm unsure how to set this up. I've pulled my inspiration from other stackoverflow posts but not sure if there is an option other than 'insert-characters' I'm supposed to be using or some other process to go about.

onKeyPress = (button) => {
// inspiration from https://stackoverflow.com/questions/40168161/draftjs-modifier-inserttext-insert-unicode
console.log("Button pressed", button);
const editorState = this.state.editorState;
const selection = editorState.getSelection();
const contentState = editorState.getCurrentContent();
let txt = '' + button + '';
let nextEditorState = EditorState.createEmpty();

if (button === "{shift}" || button === "{lock}") {
  console.log("previous: ", this.state.layout)
  this.setState({layout: this.state.layout == "default" ? "shift" : "default"})
  console.log("after: ", this.state.layout);
  return;
} else if(button === "{enter}") {
  console.log("clicked enter")
  txt = "{enter}"
} else if (button === "{tab}") {
  console.log("clicked tab")
  txt = "     "
} else if (button === "{bksp}") {
  console.log("clicked backspace");
  txt = "{bksp}"
} else if (button === "{space}") {
  console.log("clicked space");
  txt = " ";
}

//I do not understand why section being collapsed mattered in other persons solution so it's been repeated until I can figure out if it's needed or not
if (selection.isCollapsed()) {
  //this appears to simply be adding to content
  if(txt != "{bksp}" && txt != "{enter}") {
    const nextContentState = Modifier.replaceText(contentState, selection, txt);
    nextEditorState = EditorState.push(
      editorState,
      nextContentState,
      'insert-characters'
    );

    this.onChange(nextEditorState);
  } else if(txt == "{bksp}") {
    //supposed to delete
  } else if(txt == "{enter}") {
    //supposed to go to new line
  }
} else {
  //this appears to be editing a section you've highlighted
  if(txt != "{bksp}" && txt != "{enter}") {
    const nextContentState = Modifier.replaceText(contentState, selection, txt);
    nextEditorState = EditorState.push(
      editorState,
      nextContentState,
      'insert-characters'
    );

    this.onChange(nextEditorState);
  } else if(txt == "{bksp}") {
    //supposed to delete
  } else if(txt == "{enter}") {
    //supposed to go to new line
  }
}

};

Xavier
  • 11
  • 4

0 Answers0