如何用Slate.js将光标移动到当前行的末尾？

Question

我想模仿 macOS 中的行尾快捷方式行为。我有这个：

onKeyDown (event, change, next) {

    if (event.key === 'ArrowRight') {
        if (event.metaKey) {
            event.preventDefault();
            change.moveTo(5);
            return true;
        }
    }

    return next();
}

问题是现在偏移索引在 change.moveTo(5) 上是固定的 5。

如何找到当前行最后一个字符的索引？

Answer 1

Slate 并不真正了解线条等信息，因此解决方案是获取原生范围并检查其边界框的坐标。

我创建了一个函数，returns 一行中最后一个可能位置的索引，或者当前文本块中最后一个位置的索引，如果插入符号位于最后一行，则会发生这种情况。

getIndexLastCharOfLine () {
    const selection = window.getSelection()
    const range = selection.getRangeAt(0);
    const caretIndex = range.startOffset;
    const rect = range.getBoundingClientRect();
    const container = range.startContainer;
    const lastIndex = container.length;

    for (let i = caretIndex; i < lastIndex; i++) {
        const rangeTest = document.createRange();
        rangeTest.setStart(container, i);
        const rectTest = rangeTest.getBoundingClientRect();
        // if the y is different it means the test range is in a different line
        if (rectTest.y !== rect.y) return i - 1;
    }

    return lastIndex;
}

如何用Slate.js将光标移动到当前行的末尾？

How to move the cursor to the end of the current line with Slate.js?

javascript

slatejs