如何在 draft-js 中使用 replaceWithFragment？

Question

我需要替换 "prefix" 自动完成文本的用户类型。在文档中我发现了，但我真的不知道如何使用它。

replaceWithFragment(
  contentState: ContentState,
  targetRange: SelectionState,
  fragment: BlockMap
): ContentState

我试着输入这个解决方案，但是在我从用户那里得到一些 "prefix" 选择之前我是如何解释的。

Eg.when I type "SEL" my autocomplete find for me "SELECT" I will click on that suggestion and in editor I got "SELSELECT".

suggestionSelected(value){
        const { editorState } = this.state;
        const pastedBlocks = ContentState.createFromText(value).blockMap; //get blockMap
        const newState = Modifier.replaceWithFragment( //replaceWithFragment -> set new state editor
            editorState.getCurrentContent(),
            editorState.getSelection(),
            pastedBlocks
          );
            this.setState(() => ({
                suggestion: [],
                 editorState: EditorState.push(editorState, newState, 'insert-fragment')//Insert suggestion with "prefix"



            }));

        }//End of suggestionSelected

Eg.when 我输入 "SEL" 我的自动完成查找 "SELECT" 我将点击该建议，然后在编辑器中我得到了 "SELSELECT"。

Answer 1

我为它创建了一个方法.... 不知道如何使用草稿....

 gettingSuggestion = (str, str2) =>{

            let remain ="";

            str = str.toUpperCase();//for compare
            for( let i = 0 ; i<str2.length ; i++){
                if(str2[i]!==str[i]){ //if not equal -> we are searching for remaining characters
                  remain= remain.concat(str2[i]);//remain + suggestion
                }
            }
            return(remain);
        }
suggestionSelected(value){
        const { editorState } = this.state;

        const values =this.value.split(" ");//for up to date values
        const remainer = this.gettingSuggestion(values[this.index], value);//remaining values

        const pastedBlocks = ContentState.createFromText(remainer).blockMap; //get blockMap
        const newState = Modifier.replaceWithFragment( //replaceWithFragment -> set new state editor
            editorState.getCurrentContent(),//ContentState
            editorState.getSelection(),//SelectionState
            pastedBlocks//BlockMap

          );        

            this.setState(() => ({
                suggestion: [],
                 editorState: EditorState.push(editorState, newState, 'insert-fragment')//Inserting values 

            }));

        }//End of suggestionSelected

如何在 draft-js 中使用 replaceWithFragment？

How to use replaceWithFragment in draft-js?

javascript

autocomplete

editor

reactjs

draftjs