I had added this to make it so that a user would break out of a list upon hitting enter twice in a row. In other words, the intent was just to return back to root level, after list, in a new paragraph, in the case that a user had hit enter, 1st creating a new list-item, and then, w/o typing anything else, hits enter again - deleting empty LI and escaping out of list (like Confluence RTE).
However, my current code doesn't know if we're at the last LI. It just always will escape-out of the list and goto a new paragraph, after the list. I'm tasked with splitting a list if the user takes the same action, but is not in the last LI.
- How do I know if the current LI is the last?
- This is the big hanger all over SlateJS for me: Can anybody please tell me how I would split a UL/OL into two? Basically, how do I know what comes after and then grab all that and put it in its own UL with like an empty paragraph between? Knowing this would likely help on decreasing indent in a list as well!
Current code - always will delete the LI created by first Enter, upon second Enter, and cause a new paragraph after list that gets focus:
editor.insertBreak = () => {
const { selection } = editor;
// when a user has hit enter twice escape out of list to new paragraph at root level.
if (selection) {
const [li] = Editor.nodes(editor, {
match: (n) => !Editor.isEditor(n)
&& Element.isElement(n)
&& n.type === 'list-item',
}) as any;
if (li) {
const { offset, path } = selection.anchor;
if (offset === 0 && li[0]?.children[0].text.length === 0) {
deleteBackward('block');
Transforms.insertNodes(
editor,
{ type: 'paragraph', children: [{ text: '' }] },
{ at: Path.next([path[0]]), select: true },
);
return;
}
}
}
insertBreak();
};