Coder Social home page Coder Social logo

How to append text to the end about draft-js HOT 5 CLOSED

facebook avatar facebook commented on April 16, 2024 2
How to append text to the end

from draft-js.

Comments (5)

ufo22940268 avatar ufo22940268 commented on April 16, 2024 14

I found the solution.

My init method is

  getInitialState() {
    return {
      editorState: EditorState.createEmpty()
    };
  },

So when i want to update editorState i need to call this.setState({editorState: es}), not this.setState(es). Really love this framework, thank you.

from draft-js.

jawblet avatar jawblet commented on April 16, 2024 7

For folks who found this thread from Google but are not having the state issue above—how to append text to the end:

   // get current editor state 
    const currentContent = editorState.getCurrentContent();

 // create new selection state where focus is at the end
    const blockMap = currentContent.getBlockMap();
    const key = blockMap.last().getKey();
    const length = blockMap.last().getLength();
    const selection = new SelectionState({
        anchorKey: key,
        anchorOffset: length,
        focusKey: key,
        focusOffset: length,
      });

   //insert text at the selection created above 
    const textWithInsert = Modifier.insertText(currentContent, selection, 'text to be inserted', null);
    const editorWithInsert = EditorState.push(editorState, textWithInsert, 'insert-characters');

    //also focuses cursor at the end of the editor 
    const newEditorState = EditorState.moveSelectionToEnd(editorWithInsert, textWithInsert.getSelectionAfter());
    setEditorState(newEditorState);

from draft-js.

ufo22940268 avatar ufo22940268 commented on April 16, 2024

It's not a bug.

from draft-js.

sibelius avatar sibelius commented on April 16, 2024

how to append to the end?

from draft-js.

chenjiashrimp avatar chenjiashrimp commented on April 16, 2024
  _insertText() {
    const editorState = this.state.editorState;
    const selection = editorState.getSelection();
    const contentState = editorState.getCurrentContent();
    const ncs = Modifier.insertText(contentState, selection, "wefoiwjoefjwoiefjoiwjefio");
    const es = EditorState.push(editorState, ncs, 'insert-fragment');
    this.setState(es);
  }

With above codes, i can't get the wef.... to be append to the end. I have work on this problem for hours, but still can't found the solution. The above code is written according to Tex sample.

my code is the same as yours, but only can insert the text once, i don't know why

from draft-js.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.