delete in list deletes list-item if empty

package.json

@@ -53,11 +53,11 @@
 		"svelte-check": "2",
 		"svelte-icons": "2",
 		"svelte-portal": "2",
-		"svelte-preprocess": "4",
+		"svelte-preprocess": "5",
 		"svelte2tsx": "0",
 		"tslib": "2",
 		"typescript": "4",
-		"vite": "3"
+		"vite": "4"
 	},
 	"peerDependencies": {
 		"katex": "0",

src/lib/plugins/BulletedListElement.svelte

@@ -15,13 +15,43 @@
 	): element is IBulletedListItemElement {
 		return element.type === BULLETED_LIST_TYPE;
 	}
+
+	export function withBulletedListItem<T extends ISvelteEditor = ISvelteEditor>(editor: T): T {
+		const { deleteBackward } = editor;
+
+		editor.deleteBackward = (unit) => {
+			if (editor.selection && Range.isCollapsed(editor.selection)) {
+				const [match] = Array.from(
+					Editor.nodes(editor, {
+						match: (n) => isBulletedListItemElement(n as any) && Editor.isEmpty(editor, n as any),
+						at: editor.selection
+					})
+				);
+				if (match) {
+					const [_node, path] = match;
+					Transforms.setNodes<SlateElement>(
+						editor,
+						{
+							type: PARAGRAPH_TYPE
+						} as any,
+						{ at: path }
+					);
+					return;
+				}
+			}
+			deleteBackward(unit);
+		};
+
+		return editor;
+	}
 </script>
 
 <script lang="ts">
-	import { Editor, Transforms } from 'slate';
+	import { Editor, Range, Transforms, type Element as SlateElement } from 'slate';
 	import { addEventListener, getEditor } from '$lib/components/Slate.svelte';
 	import type { IListItemElement } from './ListItemElement.svelte';
 	import { PARAGRAPH_TYPE } from './ParagraphElement.svelte';
+	import type { ISvelteEditor } from '$lib/withSvelte';
 
 	// svelte-ignore unused-export-let
 	export let element: IBulletedListItemElement;

src/lib/plugins/CheckListItemElement.svelte

@@ -14,15 +14,41 @@
 		return element.type === CHECK_LIST_ITEM_TYPE;
 	}
 
+	export function withCheckListItem<T extends ISvelteEditor = ISvelteEditor>(editor: T): T {
+		const { deleteBackward } = editor;
+
+		editor.deleteBackward = (unit) => {
+			if (editor.selection && Range.isCollapsed(editor.selection)) {
+				const [match] = Array.from(
+					Editor.nodes(editor, {
+						match: (n) => isCheckListItemElement(n as any) && Editor.isEmpty(editor, n as any),
+						at: editor.selection
+					})
+				);
+				if (match) {
+					const [_node, path] = match;
+					Transforms.setNodes<SlateElement>(
+						editor,
+						{
+							type: PARAGRAPH_TYPE
+						} as any,
+						{ at: path }
+					);
+					return;
+				}
+			}
+			deleteBackward(unit);
+		};
+
+		return editor;
+	}
+
 	export function insertCheckListItem(editor: Editor) {
 		const isActive = isBlockActive(editor, CHECK_LIST_ITEM_TYPE);
 
 		if (isActive) {
 			Transforms.unwrapNodes(editor, {
-				match: (n) =>
-					!Editor.isEditor(n) &&
-					SlateElement.isElement(n) &&
-					(n as IElement).type === CHECK_LIST_ITEM_TYPE,
+				match: isCheckListItemElement as any,
 				split: true
 			});
 		} else {
@@ -33,10 +59,12 @@
 </script>
 
 <script lang="ts">
-	import { getEditor, getReadOnlyContext } from '../components/Slate.svelte';
+	import { getEditor } from '../components/Slate.svelte';
 	import { findPath } from '../utils';
-	import { Editor, Transforms, Element as SlateElement } from 'slate';
+	import { Editor, Transforms, Element as SlateElement, Range } from 'slate';
 	import { isBlockActive } from './utils';
+	import type { ISvelteEditor } from '$lib/withSvelte';
+	import { PARAGRAPH_TYPE } from './ParagraphElement.svelte';
 
 	export let element: ICheckListItemElement;
 	export let isInline: boolean;

src/lib/plugins/CodeElement.svelte

@@ -89,12 +89,7 @@
 	import CodeEditorElement from './CodeEditorElement.svelte';
 	import CodeEditorLeaf from './CodeEditorLeaf.svelte';
 	import { ELEMENT_CONTEXT_KEY, LEAF_CONTEXT_KEY } from '../components/Editable.svelte';
-	import {
-		addEventListener,
-		DECORATE_CONTEXT_KEY,
-		getEditor,
-		getReadOnlyContext
-	} from '../components/Slate.svelte';
+	import { addEventListener, DECORATE_CONTEXT_KEY, getEditor } from '../components/Slate.svelte';
 	import { PARAGRAPH_TYPE } from './ParagraphElement.svelte';
 
 	export let element: ICodeElement;

src/lib/plugins/DEFAULT_PLUGINS.ts

@@ -7,9 +7,18 @@ import Heading4Element, { HEADING4_TYPE } from './Heading4Element.svelte';
 import Heading5Element, { HEADING5_TYPE } from './Heading5Element.svelte';
 import Heading6Element, { HEADING6_TYPE } from './Heading6Element.svelte';
 import ListItemElement, { LIST_ITEM_TYPE } from './ListItemElement.svelte';
-import NumberedListElement, { NUMBERED_LIST_TYPE } from './NumberedListElement.svelte';
-import CheckListItemElement, { CHECK_LIST_ITEM_TYPE } from './CheckListItemElement.svelte';
-import BulletedListElement, { BULLETED_LIST_TYPE } from './BulletedListElement.svelte';
+import NumberedListElement, {
+	NUMBERED_LIST_TYPE,
+	withNumberedListItem
+} from './NumberedListElement.svelte';
+import CheckListItemElement, {
+	CHECK_LIST_ITEM_TYPE,
+	withCheckListItem
+} from './CheckListItemElement.svelte';
+import BulletedListElement, {
+	BULLETED_LIST_TYPE,
+	withBulletedListItem
+} from './BulletedListElement.svelte';
 import TableElement, { TABLE_TYPE, withTable } from './TableElement.svelte';
 
 export const DEFAULT_PLUGINS = {
@@ -22,8 +31,8 @@ export const DEFAULT_PLUGINS = {
 	[HEADING5_TYPE]: Heading5Element,
 	[HEADING6_TYPE]: Heading6Element,
 	[LIST_ITEM_TYPE]: ListItemElement,
-	[NUMBERED_LIST_TYPE]: NumberedListElement,
-	[BULLETED_LIST_TYPE]: BulletedListElement,
-	[CHECK_LIST_ITEM_TYPE]: CheckListItemElement,
+	[NUMBERED_LIST_TYPE]: { component: NumberedListElement, withFn: withNumberedListItem },
+	[BULLETED_LIST_TYPE]: { component: BulletedListElement, withFn: withBulletedListItem },
+	[CHECK_LIST_ITEM_TYPE]: { component: CheckListItemElement, withFn: withCheckListItem },
 	[TABLE_TYPE]: { component: TableElement, withFn: withTable }
 };

src/lib/plugins/NumberedListElement.svelte

@@ -15,13 +15,43 @@
 	): element is INumberedListItemElement {
 		return element.type === NUMBERED_LIST_TYPE;
 	}
+
+	export function withNumberedListItem<T extends ISvelteEditor = ISvelteEditor>(editor: T): T {
+		const { deleteBackward } = editor;
+
+		editor.deleteBackward = (unit) => {
+			if (editor.selection && Range.isCollapsed(editor.selection)) {
+				const [match] = Array.from(
+					Editor.nodes(editor, {
+						match: (n) => isNumberedListItemElement(n as any) && Editor.isEmpty(editor, n as any),
+						at: editor.selection
+					})
+				);
+				if (match) {
+					const [_node, path] = match;
+					Transforms.setNodes<SlateElement>(
+						editor,
+						{
+							type: PARAGRAPH_TYPE
+						} as any,
+						{ at: path }
+					);
+					return;
+				}
+			}
+			deleteBackward(unit);
+		};
+
+		return editor;
+	}
 </script>
 
 <script lang="ts">
-	import { Editor, Transforms } from 'slate';
+	import { Editor, Range, Transforms, type Element as SlateElement } from 'slate';
 	import { addEventListener, getEditor } from '$lib/components/Slate.svelte';
 	import type { IListItemElement } from './ListItemElement.svelte';
 	import { PARAGRAPH_TYPE } from './ParagraphElement.svelte';
+	import type { ISvelteEditor } from '$lib/withSvelte';
 
 	// svelte-ignore unused-export-let
 	export let element: INumberedListItemElement;

src/lib/plugins/utils.ts

@@ -1,7 +1,9 @@
 import { Editor, Transforms, Element as SlateElement } from 'slate';
 import { BULLETED_LIST_TYPE } from './BulletedListElement.svelte';
 import type { IElement } from './Element.svelte';
+import { LIST_ITEM_TYPE } from './ListItemElement.svelte';
 import { NUMBERED_LIST_TYPE } from './NumberedListElement.svelte';
+import { PARAGRAPH_TYPE } from './ParagraphElement.svelte';
 
 export function isMarkActive(editor: Editor, format: string): boolean {
 	if (!editor.selection) {
@@ -52,7 +54,7 @@ export function toggleBlock(editor: Editor, format: string) {
 		split: true
 	});
 	const newProperties = {
-		type: isActive ? 'paragraph' : isList ? 'list-item' : format
+		type: isActive ? PARAGRAPH_TYPE : isList ? LIST_ITEM_TYPE : format
 	};
 	Transforms.setNodes<SlateElement>(editor, newProperties as any);
 

src/lib/withSvelte.ts

@@ -25,7 +25,6 @@ export function withSvelte<T extends Editor>(editor: T): T & ISvelteEditor {
 		if (unit !== 'line') {
 			return deleteBackward(unit);
 		}
-
 		if (editor.selection && Range.isCollapsed(editor.selection)) {
 			const parentBlockEntry = Editor.above(editor, {
 				match: (n) => Editor.isBlock(editor, n),