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

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?

score 5 · Accepted Answer · answered Oct 17 '18 at 00:23

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

Can you show how can we go to the beginning of the line? – Devesh Kumar Feb 25 '21 at 17:16 — Devesh Kumar, Feb 25 '21 at 17:16

score 0 · Answer 2 · answered Jan 02 '23 at 11:41

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

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

2 Answers2