如何获取当前光标在draft.js中的位置？

Question

对于我的 draftjs 项目，我想让用户插入一个 link。为此，我在按下快捷键 cmk + k.

后创建了一个弹出窗口

为了更好的用户体验，我目前正在尝试智能对齐弹出窗口。

见上图，我可以将弹出窗口定位在当前焦点线下方。 Editor-container 的 bounding rect 对象和当前选择的 bounding rect 将包含足够的信息让我完成计算。

然而，在其他情况下，当只有一个空行时：（光标在弹出窗口之前的位置在编辑器的末尾） window.getSelection().getRangeAt(0).getBoundingClientRect() 会 return 每个值为 0 的 DOMRect 对象。在 dom 或 draftjs 中有什么方法可以让我获得足够的信息来智能对齐弹出？所以弹出窗口可以在当前光标位置周围弹出。

Answer 1

为了解决这个问题，我使用光标的块索引乘以行高+一些偏移量来实现在选择空行时从顶部开始的正确放置。

这是我的“计算弹出窗口位置”函数的代码。 I've excluded parts for getting the top/left positions when a line with text is selected and just included when I need to account for lines with no text when getBoundingClientRect() returns null.

const singleLineHeightOffset = 28;
const topBlankLineOffset = 15;
let position = getVisibleSelectionRect(window);
// If there is a visible selection area
if (position) {
    // Get ref of editor via prop and location of div if exists
    let editorRef = forwardedRef;
    element = ReactDOM.findDOMNode(editorRef.current) as HTMLElement;
    if (element) {
        // Code here to calculate when a line with text is selected
    } else {
        // Else if no text selected on line
        // Get current block position of cursor
        const currentBlockKey = editorState.getSelection().getStartKey();
        const currentBlockIndex = editorState
          .getCurrentContent()
          .getBlockMap()
          .keySeq()
          .findIndex((k) => k === currentBlockKey);
        let emptyLineTopHeight =
          singleLineHeightOffset * (currentBlockIndex + 1) - 5;

        // If first line of editor, add offset for toolbar/padding
        if (currentBlockIndex === 0) emptyLineTopHeight += topBlankLineOffset;
        setTopPosition(emptyLineTopHeight);
      }

这将检测空光标所在的行，然后通过乘以您的行高来创建顶部偏移。您可能需要像我一样尝试处理偏移量和边缘情况，例如初始行。

如何获取当前光标在draft.js中的位置？

How to get current cursor's position in draft.js?

html

javascript

reactjs

draftjs

next.js