Slate: cross-browser differences when selecting a paragraph and trying to type

[takhtamysh]

Do you want to request a _feature_ or report a _bug_?

A bug

What's the current behavior?

Currently, when selecting a paragraph using triple-click and trying to type, the text will be moved to the next paragraph. This behaviour can be reproduced on Safari and Chrome.

Slate: 0.57.1
Browser: Chrome / Safari
OS: Mac

What's the expected behavior?

The typed text should be written in the same paragraph that was selected. As works in Firefox:

[Dundercover]

Is this really a bug? The problem revolves around if the line break is included or not in the selection which it is in chrome and safari when triple-clicking but not in firefox. Most RTEs have this behaviour I think. The comment field here on github which I'm writing this comment in shows the same behaviour.

[eshavrov]

I agree with your statement, but the selected fragment should be deleted

[Dundercover]

Ah, yeah, you don't want that lingering empty block above :)

[anges244]

This is a more general problem with triple-click selection on Chrome. You can replicate it while trying to select the whole first paragraph in the images example by clicking 3 times in a word. In Safari, it seems to work as expected.

Any ideas on how to handle that? Tried with the onDoubleClick but had no success.

[eshavrov]

This is a hack, not a solution))
Since it was critical for me. I had to fix it like this.

const selectOneAllElement = ({ anchor, focus }) => {
  if (anchor.offset !== 0 || focus.offset !== 0) {
    return false;
  }

  const anchorPath = anchor.path.slice();
  const focusPath = focus.path.slice();

  if (anchorPath.length === 0 || focusPath.length === 0) {
    return false;
  }

  while (anchorPath.length > 0 && anchorPath[0] === focusPath[0]) {
    anchorPath.shift();
    focusPath.shift();
  }

  if (anchorPath.length > 0 || focusPath.length > 0) {
    return anchorPath[0] + 1 === focusPath[0];
  }

  return false;
};

const fixAt = editor => {
  const { selection } = editor;

  if (Range.isRange(selection)) {
    const { anchor } = selection;

    if (selectOneAllElement(selection)) {
      const end = Editor.end(editor, anchor);

      return { anchor, focus: end };
    }
  }

  return selection;
};

const hackSelection = editor => {
  const fixSelection = fixAt(editor);

  if (fixSelection) {
    Transforms.select(editor, fixSelection);
  }
};

This is a temporary solution that is planned to be removed when it is fixed in the slate

[anges244]

@eshavrov thank you! Definitely a hack but much appreciated. Combined it with an isChrome detection and it should work until fixed by default.