在 Rangy 包中的 onKeyPress 事件时，专注于插入的节点而不是前一个元素

问题描述

我需要将光标位置放在新创建的段落的开头，同时在内容可编辑的 div 元素中触发 key down 事件。我使用 Rangy Library 获取范围并将其插入到文档片段中。我需要专注于下一个起始元素。插入符号位置应放置在插入的节点上。但它放在一个包含 div 的 break 标签上。

export const paraSplit = (Sel,Range) => {
    var clone_range = Range.cloneRange();

    var p = clone_range.commonAncestorContainer;

  while (p && p.nodeType !== 1) {
      p = p.parentNode;
   }

  if (p) {
// Place the end of the range after the paragraph
clone_range.setEndAfter(p);

// Extract the contents of the paragraph after the caret into a fragment
   var contentAfterRangeStart = clone_range.extractContents();

// Collapse the range immediately after the paragraph
  clone_range.collapseAfter(p);

// Insert the content
 clone_range.insertNode(contentAfterRangeStart);

// Move the caret to the insertion point
 clone_range.collapseAfter(p);



     Sel.setSingleRange(clone_range);
    Sel.setStart(Range.startContainer,Range.startOffset);
    
    return true;
 }
};




const ParaSplitHandler = (event) => {
    if (event.key === 'Enter') {
      rangy.init();
      //Initializing range selections
      let Sel = rangy.getSelection();
      let Range = Sel.getRangeAt(0);

      //ParaSplit function call on Enter event
      paraSplit(Sel,Range);

     
    }
  };



<div
      id='main'
      onKeyPress={(event) => ParaSplitHandler(event)}
      ref={createId}
    >
      <div
        contentEditable='true'
        id='para1'
        className={styles.para}
        spellCheck='false'
        ref={focusNode}
        suppressContentEditableWarning={true}
      >
        As your React application scales and requirements change,you need a
        framework that you can depend on. Next.js allows you to seamlessly merge static sites,pre-rendered pages,and serverless functions. As your
        React application scales and requirements change,you need a framework that you can depend on. Next.js allows you to seamlessly merge static sites,and serverless functions. As your React application scales and requirements change,and serverless functions.
      </div>
    </div>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）