Inline void elements cannot be deleted when selected

Do you want to request a feature or report a bug?

This is a bug report

What’s the current behavior?

You can reproduce this easily on the Slate mentions example. Go here: https://www.slatejs.org/examples/mentions

Click one of the mentions so that it’s highlighted with the custom rounded blue border. Now press backspace or delete. You can’t delete it when it is selected. If you press right arrow and then backspace it will work fine.

It seems that block voids work, since examples/images works fine.

Slate: 0.57.1 Browser: Version 79.0.3945.117 (Official Build) (64-bit) OS: macOS 10.15.1 (19B88)

What’s the expected behavior?

I would expect that pressing delete would delete the mention.

[abhishekbhardwaj]

@laverdet @skogsmaskin I was able to fix this last image issue by doing the following in my withImages plugin:

editor.deleteFragment = () => {
    const { selection } = editor;

    if (selection && Range.isExpanded(selection)) {
      const images = Array.from(
        Editor.nodes(editor, {
          match: n => n.type === TYPES.IMAGE
        })
      );

      if (!!images.length) {
        // We're only deleting the last image as that's what is always left behind.
        // Slate is handling the rest easily.
        const [, cellPath] = images[images.length - 1];
        Transforms.delete(editor, {
          at: cellPath,
          voids: true
        });
      }
    }

    deleteFragment();
  };

We just delete the last image in the selection and leave the rest to Slate

[vmaark]

seems to be a browser specific issue, it’s working in Firefox for Mac.