I'm trying to implement a collaborative text editor using Slate.js, with React and Typescript. For applying text styling and broadcasting to other clients, I need the exact selection of the text that the user wants to change style, in the following format:
type Cursor = {
line: number;
column: number;
};
type Selection = {
start: Cursor;
end: Cursor;
};
With this approach, the current styles of the text affect the output, because it is dependent on the tree structure of the slate document. What I would like to get is the current selection no matter the document structure, but the returning columns are incorrect, in the following way:
function getSelection(editor: Editor): Selection {
const { selection } = editor;
if (!selection) {
return {
start: { line: 0, column: 0 },
end: { line: 0, column: 0 },
};
}
const [start, end] = Range.edges(selection);
return {
start: pointToCursor(start),
end: pointToCursor(end),
};
}
function pointToCursor(point: Point): Cursor {
return {
line: point.path[0],
column: point.offset, // wrong
};
}
For example, with the text abcdef, if I select def it returns the columns as [0, 3], instead of [3, 6], but if abc is in a different style (in a another node of the document tree) it returns [3, 6].
Thanks for the help in advance.