如何找到 contenteditable=true <p> 标签的当前插入符号/光标索引

Question

我真的很难找到适合我的用例的答案。我需要知道光标/插入符号在 contentEditable

标签中的位置。

我尝试了各种解决方案，但总是遇到同样的问题，插入符解决方案等于 0.

这是一个沙箱示例。如果我能让它在这里工作，我就能让它在我的实际应用程序中工作。

任何需要的帮助：

import { Component, h } from '@stencil/core'

@Component({
  tag: 'my-editable-component',
  styleUrl: 'my-editable-component.css',
  shadow: true,
})
export class MyEditableComponent {
  editableRef: HTMLParagraphElement

  getCaretPosition() {
    const selection = window.getSelection()
    if (selection.rangeCount > 0) {
      const range = selection.getRangeAt(0)
      const preCaretRange = range.cloneRange()
      preCaretRange.selectNodeContents(this.editableRef)
      preCaretRange.setEnd(range.endContainer, range.endOffset)
      return preCaretRange.toString().length
    }
    return 0
  }

  handleInput = () => {
    console.log('Caret position:', this.getCaretPosition())
  }

  render() {
    return (
      <div>
        <p ref={el => (this.editableRef = el as HTMLParagraphElement)} contentEditable onInput={this.handleInput}>
          Click to edit text and log caret position
        </p>
      </div>
    )
  }
}