Javascript React草稿js块插入

工作原理： 当用户点击空格键时，将查询特定单词的草稿JS文本内容。然后，该单词的所有实例都被包装在标记中。包装文本后，HTML将转换回原处，并更新草稿JS编辑器状态：

      const convertedFromHTML= convertFromHTML(newHTML);
      const editorState = this.state.editorState;

      // Set Editor and Content States
      const newContentState = ContentState.createFromBlockArray(
        convertedFromHTML.contentBlocks,
        convertedFromHTML.entityMap
      );

      const nextEditorState = EditorState.push(
        editorState,
        newContentState,
        'insert-text'
      );

      this.setState({ 
        editorState: nextEditorState
      });

块渲染贴图：

const blockRenderMap = Immutable.Map({
  'Atomic': {
    element: 'Atomic' ,
    wrapper: <GoogleCustomBlock />
  }
});

const myBlockStyleFn = (contentBlock) => {
   const type = contentBlock.getType();
   switch (type) {
     case 'atomic': {
      return 'GoogleCustomBlock';
   }
}

// React Components
import React, { Component } from 'react';

class GoogleCustomBlock extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div className='GoogleCustomBlock'>
        {this.props.children}
      </div>
    );
  }
}

const blockRenderMap=Immutable.Map({
“原子的”：{
元素：'原子'，
包装器：
}
});
const myBlockStyleFn=（contentBlock）=>{
const type=contentBlock.getType（）；
开关（类型）{
“原子”一案：{
返回“GoogleCustomBlock”；
}
}

自定义块组件：

const blockRenderMap = Immutable.Map({
  'Atomic': {
    element: 'Atomic' ,
    wrapper: <GoogleCustomBlock />
  }
});

const myBlockStyleFn = (contentBlock) => {
   const type = contentBlock.getType();
   switch (type) {
     case 'atomic': {
      return 'GoogleCustomBlock';
   }
}

// React Components
import React, { Component } from 'react';

class GoogleCustomBlock extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div className='GoogleCustomBlock'>
        {this.props.children}
      </div>
    );
  }
}

//React组件
从“React”导入React，{Component}；
类GoogleCustomBlock扩展组件{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
{this.props.children}
);
}
}

导出默认GoogleCustomBlock

问题： 当用户点击空格键时，就会出现此功能。文本被包装，正确的块被添加到DOM中。我遇到以下两个困难：

• 我需要在文本结尾后插入一个空格
• 光标跳回文档的开头，但也停留在通过元素创建的新块内。我需要它在新块外和文本末尾恢复编辑

我已经在网上搜索过了，但到目前为止运气不好，非常感谢您的帮助

---

谢谢！

解决方案：突出显示文本并在空格键上插入空格键命令：

   insertInlineStyles = (editorState, indexes, googleSearchTerm) => {
      const contentState = editorState.getCurrentContent()
      const selectionState = editorState.getSelection();

      // Loop Through indexes //
      const newSelection = selectionState.merge({
        anchorOffset: index[i],
        focusOffset: googleSearchTerm.length
      })

      // Create new Editor State with Selection on Targeted Word //
      const editorStateWithNewSelection = EditorState.forceSelection(editorState, newSelection);

      // Toggle Inline Style //
      const editorStateWithStyles = RichUtils.toggleInlineStyle(editorStateWithNewSelection,'GoogleStyle');

      // Set Selection Back to Previous //
      const editorStateWithStylesAndPreviousSelection = EditorState.forceSelection(
        editorStateWithStyles,
        selectionState
      )

      // Return Editor //
      return editorStateWithStylesAndPreviousSelection;
   }

    /// INSIDE OF ANOTHER FUNCTION

    /// GET INDEX OF WORD TO HIGHLIGHT
    var indexes = [INDEX OF WORD];

    /// INSERT INLINE STYLES
    var newEditorState = this.insertInlineStyles(this.state.editorState, indexes, googleSearchTerm);

    /// ADD SPACE to TEXT
    let newContentState = Modifier.replaceText(
      newEditorState.getCurrentContent(), // New content
      currentState.getSelection(), // End of old content selection
      " " // Text to add
    );
    let finalEditorState = EditorState.push(
      newEditorState, 
      newContentState, 
      'insert-characters'
    );

    this.setState({ 
      editorState: finalEditorState 
    });

---

过于宽泛，请编辑问题，将其限制在特定问题上，并提供足够的详细信息，以确定适当的答案。避免同时提出多个不同的问题。此外，请修改标题，使其能够描述问题或问题