Slate.js - How to get Absolute Text Selection

31 views Asked by At

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.

0

There are 0 answers