Deleting list items

[mattparlane]

Hi all...

I am happy with Slate's native handling of lists, except for one behaviour. Other editors (Google Docs, Word I think) delete the current list item when your cursor at a list item, and it's empty, and you press Enter.

I've had a crack at this myself, and I believe I've figured out how to identify this condition, but I can't make it delete the current list item.

I believe it will have to break the <ul> / <ol> object into two if this happens in the middle of the list, I haven't looked into that yet.

<Editable
  onKeyDown={(e) => {
    const [aboveNode] = Editor.above(editor);
    const { selection: { focus } } = editor;
    const [node] = Editor.node(editor, focus);
    if (aboveNode?.type === 'list-item' && node?.text === '') {
      Editor.deleteBackward(editor, { unit: 'block' });
    }
  }}
/>

Any ideas? Thanks!

[govindsonibacancy]

const { selection } = editor;

if (selection && selection.focus.offset === 0) {
  const [currentItem] = Editor.nodes(editor, {
    match: n => n.type === 'li',
  });

  if (currentItem && currentItem[1] !== 0) {
    const [prevItem] = Editor.node(editor, [
      currentItem[1] - 1,
      currentItem[1] - 1,
    ]);

    if (
      Text.string(prevItem.children[0]) === '' &&
      Editor.string(editor, prevItem) === ''
    ) {
      Transforms.removeNodes(editor, { at: [currentItem[1], 0] });
      return;
    }
  }
}