Как переместить курсор в конец текущей строки с помощью Slate.js?

Question

Я хочу имитировать поведение ярлыка конца строки в macOS. У меня есть это:

onKeyDown (event, change, next) {

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

    return next();
}

Проблема в том, что теперь индекс смещения является фиксированным 5 на change.moveTo(5),

Как мне найти индекс последнего символа текущей строки?

Answer 1

Slate на самом деле не знает о линиях и тому подобном, поэтому решение состоит в том, чтобы получить собственный диапазон и проверить координаты его ограничительной рамки.

Я сделал функцию, которая возвращает индекс последней возможной позиции в строке или последнюю позицию в текущем текстовом блоке, которая произошла бы, если бы курсор был в последней строке.

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;
}

Answer 2

Это возможно с помощью slate.js. Посмотрите на следующий код.

Сначала я сопоставляю ближайший блок. Затем я получаю конечный путь текущего блока. Затем я использую Transform, чтобы переместить курсор в конец строки.

Посмотрите на пример кода ниже:

      import { Transforms, Editor } from 'slate';

export function moveToEnd(editor: Editor) {
  const block = Editor.above(editor, {
    match: n => Editor.isBlock(editor, n),
  });

  if(!block) return;

  const [, blockPath] = block;

  const endBlockPath = Editor.end(editor, blockPath);
  Transforms.select(editor, endBlockPath);
}