DraftJSでハイパーリンクの後に空白文字を追加するには？

Question

DraftJS APIを使用して以下のシナリオを実装する際に問題があります。ここで

はシナリオです： this

内のリンクの例に続いて、私は、ユーザーがハイパーリンクのURLを確認するとした後、ハイパーリンクに選択したテキストを変換するには、次のコードを使用しています：

今

_confirmLink(urlValue) { 
    const {editorState} = this.state; 
    const entityKey = Entity.create('LINK', 'MUTABLE', {url: urlValue}); 

    this.setState({ 
     showURLInput: false, 
     editorState: RichUtils.toggleLink(
     editorState, 
     editorState.getSelection(), 
     entityKey 
    ) 
    },() => 
     setTimeout(() => this.refs.editor.focus(), 100); 
    }); 
} 

ユーザーがテキストabcを入力した後、プロンプトでURLを入力したとします。例：http://yahoo.com テキストabcは、ハイパーリンクに変換されます。

しかし、その後、テキストエディタのカーソルが行の先頭にすぐに伝えられます。ユーザーが手作業でカーソルを行末に移動して何かを入力しようとすると、テキストエディタはその行の先頭にタイプされたテキストを表示します。これは非常に奇妙です。

私の意見では、生成されたハイパーリンクの後に空白文字を挿入して、その後にユーザーが何か入力できるようにする必要があります。また、カーソルは、行の先頭ではなく、ハイパーリンクの最後にとどまる必要があります。

どうすれば実現できますか？

Answer 1

OK、私は長い間プレイした後に答えを見つけました。

基本的に最初に、自分の変換されたリンクの最後まで選択を崩壊させなければなりません。その後、モディファイアを使用して、その後に空白文字を挿入しました。ここで

はコードです：

_confirmLink(urlValue) { 

    const {editorState} = this.state; 

    const entityKey = Entity.create(
     'LINK', 
     'MUTABLE', 
     {url: urlValue} 
    ); 

    let selection = editorState.getSelection(); 

    const contentState = Modifier.applyEntity(
     editorState.getCurrentContent(), 
     selection, 
     entityKey 
    ); 

    let linked = EditorState.push(
     editorState, 
     contentState, 
     'apply-entity' 
    ); 

    let collapsed = selection.merge({ 
         anchorOffset: selection.getEndOffset(), 
         focusOffset: selection.getEndOffset() 
         }); 

    let newEditorState = EditorState.forceSelection(linked, collapsed); 

    this.setState({ 
     showURLInput: false, 
     editorState: newEditorState 
    },() => { 
     setTimeout(() => { 

     this.refs.editor.focus(); 

     const {editorState} = this.state; 
     let selection = editorState.getSelection(); 

     let cs = Modifier.insertText(
      editorState.getCurrentContent(), 
      selection, 
      ' ' 
     ); 

     const newEditorState = EditorState.push(
      editorState, 
      cs, 
      'insert-text' 
     ); 

     this.setState({editorState: newEditorState}); 
     }, 10); 
    }); 
}