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

Question

I want to mimic the end of line shortcut behavior in macOS. I have this:

onKeyDown (event, change, next) {

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

    return next();
}

The problem is that now the offset index is a fixed 5 on change.moveTo(5) .

How do I find the index of the last character of the current line?

Answer 1

Slate does not really know about lines and such, so the solution is to get a native range and check the coordinates of its bounding box.

I made a function that returns the index of the last possible position in a line, or the last position in the current text block which would happen if the caret is in the last line.

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

This is possible with slate.js. Look at the following code.

First I'm matching the closest block. Then I'm getting the end path of the current block. Then I'm using Transform to move the cursor to the end of the line.

Look at the code example below:

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