Moving cursor in react slate-editor

Question

I'm trying to move the cursor in react slate-editor.

I tried to do it in 2 ways.

First:

// This code saving key in offset in variables
const nativeSelection = this.getSelectedText();
const nativeRange = nativeSelection.getRangeAt(0);
    const range = findRange(nativeRange, this.editor);
const offset = nativeRange.endOffset;
const key = range.anchor.key;

// OnChange is triggered by running the next line and cursor moves back
this.editor.blur();

// Trying to move to the cursor
this.editor.moveTo(key, offset);

Second:

const nativeSelection = this.getSelectedText();
const nativeRange = nativeSelection.getRangeAt(0);
const range = findRange(nativeRange, this.editor);
const clonedRange = _.cloneDeep(range);

// OnChange is triggered by running the next line and cursor moves back
this.editor.blur();

// Trying to move the cursor
this.editor.select(clonedRange);

Unfortunately, select and moveTo doesn't seem to affect the cursor position. Can someone assist ?

Answer 1

尝试使用Transform.select结合位置点的方法

将光标置于第三个字母之后

Transforms.select(editor, {path: [0, 0], offset: 3});

移动到最后

Transforms.select(editor, Editor.end(editor, []));

你也可以尝试一下方法Transforms.move。将光标移动到第 5 个单词之后：

Transforms.move(editor, {distance: 5, unit: 'word'});

或者结束该行：

Transforms.move(editor, {distance: 1, unit: 'line'});

还值得注意的是，在我的例子中，我必须在设置编辑器值后在 setTimeout 中运行转换。例子：

setValue(content);
setTimeout(() => {
   Transforms.move(editor, {distance: 1, unit: 'line'});
}, 20);