Can't backspace a list if it's the only element in the editor

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

Bug

What’s the current behavior?

List elements cannot be removed with backspacing when they’re the only element in the editor. This list elements can only be removed when by clicking the numbered list icon

The error is currently active in the rich text demo: https://www.slatejs.org/#/rich-text

macOS Mojave 10.14.6 - Google Chrome Google Chrome | 77.0.3865.90 (Official Build) (64-bit)

What’s the expected behavior?

Expected behavior is for backspacing to also remove the list

[jonocairns]

I also wrote a plugin to do the same thing.

note toggleBlock is taken from https://github.com/ianstormtaylor/slate/blob/main/site/examples/richtext.tsx#L63

import {CustomElement, SlateEditor} from './Slate';
import {Range} from 'slate';
import {toggleBlock} from './helpers/blockHelpers';

export const withDeleteEmptyBlock = (editor: SlateEditor) => {
  const {deleteBackward} = editor;

  editor.deleteBackward = (unit) => {
    const {selection} = editor;

    if (selection && selection.focus.offset === 0 && selection.anchor.offset === 0 && Range.isCollapsed(selection)) {
      const node = editor.children[selection.anchor.path[0]] as CustomElement | undefined;
      if (node?.type === 'list' && node.children.length === 1) {
        toggleBlock(editor, 'list');
      }
      deleteBackward(unit);
    } else {
      deleteBackward(unit);
    }
  };

  return editor;
};

usage

  const [editor] = useState(withDeleteEmptyBlock(withHistory(withReact(createEditor()))));

[cameracker]

Hey @11, this rich text editor example is not meant to be fully featured and usable as a RTE out of the box. It is meant to provide enough of the basics for how to interact with slate for you to be successful in implementing your own editor with your own custom behaviors.

One could also make the argument that this example should do things like handle pasting, or like-list merging, or anything of that nature that are also idiomatic with modern RTEs. The problem then is that the examples become harder to maintain, more subject to bugs, and also conversations like this where people disagree with the behaviors of the example.

On those grounds, I don’t think we need a PR that adds this clean up functionality.

To your specific question on how you would detect this condition yourself, my recommendation would be to boil this down to the interactions you’re having with the editor and what you expect it to do.

The preconditions are:

1. You are hitting the backspace key while
2. Your selection is collapsed at the start of
3. A list item

And your output is:

You want the list item to become a paragraph block

This sounds like an onKeyDown event to me that runs toggleBlock when the above conditions are true.

You might also look for a plugin that provides list editing behaviors.