@contember/react-slate-editor-base 2.0.0-alpha.1

package/src/plugins/element/horizonalRules/withHorizontalRules.ts

@@ -0,0 +1,87 @@
+import { Editor, Element as SlateElement, Node as SlateNode, NodeEntry, Range as SlateRange, Text, Transforms } from 'slate'
+import { HorizontalRuleElement, horizontalRuleElementPlugin, horizontalRuleElementType } from './HorizontalRuleElement'
+import { ElementRenderer } from '../../../types'
+
+export const withHorizontalRules = ({ render }: { render: ElementRenderer<HorizontalRuleElement> }) => <E extends Editor>(editor: E): E => {
+	const { insertText } = editor
+
+	editor.registerElement(horizontalRuleElementPlugin({ render }))
+
+	editor.insertText = text => {
+		insertText(text)
+		if (text !== '-') {
+			return
+		}
+		const selection = editor.selection
+		if (!selection || !SlateRange.isCollapsed(selection)) {
+			return
+		}
+		const focusPoint = selection.focus
+
+		if (focusPoint.offset < 3) {
+			return
+		}
+		const [targetTextNode, targetPath] = Editor.node(editor, focusPoint)
+		if (!Text.isText(targetTextNode)) {
+			return
+		}
+		const slice = targetTextNode.text.slice(focusPoint.offset - 3, focusPoint.offset)
+		if (slice !== '---') {
+			return
+		}
+
+		Editor.withoutNormalizing(editor, () => {
+			let closestBlockEntry: NodeEntry | undefined = Editor.above(editor, {
+				at: focusPoint,
+				mode: 'lowest',
+				match: matchedNode =>
+					SlateElement.isElement(matchedNode) && !editor.isInline(matchedNode) && editor.isDefaultElement(matchedNode),
+			})
+			if (!closestBlockEntry) {
+				return
+			}
+			const [closestBlock, closestBlockPath] = closestBlockEntry
+			if (closestBlockPath.length !== 1 || SlateNode.string(closestBlock) !== '---') {
+				return // We only support horizontal rules at the very top level.
+			}
+
+			// First insert the rule after the closest block
+			const horizontalRule: HorizontalRuleElement = {
+				type: horizontalRuleElementType,
+				children: [{ text: '' }],
+			}
+			const newHrPath = [...closestBlockPath.slice(0, -1), closestBlockPath[closestBlockPath.length - 1] + 1]
+			Transforms.insertNodes(editor, horizontalRule, {
+				at: newHrPath,
+			})
+
+			// Remove the '---'
+			editor.deleteBackward('character')
+			editor.deleteBackward('character')
+			editor.deleteBackward('character')
+
+			const pointAfter = Editor.after(editor, newHrPath)
+			if (pointAfter) {
+				Transforms.select(editor, pointAfter)
+			} else {
+				// There's nothing to select so we're likely at the end. Insert a new default element then.
+				const targetPath = [...newHrPath.slice(0, -1), newHrPath[newHrPath.length - 1] + 1]
+				Transforms.insertNodes(editor, editor.createDefaultElement([{ text: '' }]), {
+					at: targetPath,
+					select: true,
+				})
+			}
+
+			// Lastly, if remove the closest block. Need to update the entry though.
+			closestBlockEntry = Editor.node(editor, closestBlockPath)
+			if (!closestBlockEntry) {
+				return
+			}
+			Transforms.removeNodes(editor, {
+				at: closestBlockEntry[1],
+			})
+		})
+	}
+
+	return editor
+}

package/src/plugins/element/index.ts

@@ -0,0 +1,7 @@
+export * from './anchors'
+export * from './headings'
+export * from './horizonalRules'
+export * from './lists'
+export * from './paragraphs'
+export * from './scrollTargets'
+export * from './tables'

package/src/plugins/element/lists/ListElement.ts

@@ -0,0 +1,26 @@
+import { Editor, Element, Element as SlateElement, Node, Path as SlatePath } from 'slate'
+import { isUnorderedListElement, UnorderedListElement } from './UnorderedListElement'
+import { isOrderedListElement, OrderedListElement } from './OrderedListElement'
+import { ContemberEditor } from '../../../editor'
+import { isListItemElement } from './ListItemElement'
+
+export const isListElement = <T extends UnorderedListElement | OrderedListElement>(
+	element: Node,
+	suchThat?: Partial<T>,
+): element is T => isOrderedListElement(element, suchThat as Partial<OrderedListElement>) || isUnorderedListElement(element, suchThat as Partial<UnorderedListElement>)
+
+export const getParentListElement = (editor: Editor): Element | undefined => {
+	const closestNonDefaultEntry = ContemberEditor.closest(editor, {
+		match: node => SlateElement.isElement(node) && Editor.isBlock(editor, node) && !editor.isDefaultElement(node),
+	})
+	if (!closestNonDefaultEntry) {
+		return undefined
+	}
+	const [closestNonDefaultElement, closestNonDefaultPath] = closestNonDefaultEntry
+	if (isListItemElement(closestNonDefaultElement)) {
+		return Editor.node(editor, SlatePath.parent(closestNonDefaultPath))[0] as SlateElement
+	} else if (isListElement(closestNonDefaultElement)) {
+		return closestNonDefaultElement
+	}
+	return undefined
+}

package/src/plugins/element/lists/ListHtmlDeserializer.ts

@@ -0,0 +1,113 @@
+import { unorderedListElementType } from './UnorderedListElement'
+import { orderedListElementType } from './OrderedListElement'
+import { listItemElementType } from './ListItemElement'
+import { Element as SlateElement } from 'slate'
+import { HtmlDeserializerPlugin } from '../../../types'
+import { NodesWithType } from '../../behaviour/paste/HtmlDeserializer'
+import { EditorPasteUtils } from '../../../internal/utils/EditorPasteUtils'
+
+export interface ListElementProperties {
+	ordered: boolean
+	properties: Record<string, unknown>
+}
+
+export interface ListHtmlDeserializerOptions {
+	getListElementProperties?: (text: string) => ListElementProperties
+}
+
+const defaultGetListElementProperties = (text: string): ListElementProperties => {
+	const firstChar = text[0]
+	return {
+		ordered: firstChar === 'o' ? false : firstChar.match(/^\w$/) !== null,
+		properties: {},
+	}
+}
+
+export const listHtmlDeserializerFactory = ({ getListElementProperties = defaultGetListElementProperties }: ListHtmlDeserializerOptions = {}): HtmlDeserializerPlugin => ({
+	processBlockPaste: ({ element, next, cumulativeTextAttrs }) => {
+		if (element.tagName === 'UL') {
+			return [{ type: unorderedListElementType, children: next(element.childNodes, cumulativeTextAttrs) }]
+		}
+		if (element.tagName === 'OL') {
+			return [{ type: orderedListElementType, children: next(element.childNodes, cumulativeTextAttrs) }]
+		}
+		if (element.tagName === 'LI') {
+			return [{ type: listItemElementType, children: next(element.childNodes, cumulativeTextAttrs) }]
+		}
+		return null
+	},
+	processNodeListPaste: ({ nodeList, cumulativeTextAttrs, deserializer }) => {
+		const result: NodesWithType[] = []
+		let group: Node[] = []
+		let groupWasList = false
+		let isOrdered: boolean = false
+		let currentListProperties: Record<string, unknown> = {}
+		let includesList = false
+		let lastListId: string | null = null
+
+		const processGroup = (): NodesWithType => {
+			if (groupWasList) {
+				return {
+					elements: [
+						{
+							type: isOrdered ? orderedListElementType : unorderedListElementType,
+							...currentListProperties,
+							children: group.map(item => {
+								return {
+									type: listItemElementType,
+									children: deserializer.deserializeBlocks(
+										EditorPasteUtils.wordPasteListItemContent(item.childNodes),
+										cumulativeTextAttrs,
+									),
+								}
+							}),
+						} as SlateElement,
+					],
+				}
+			} else {
+				return deserializer.processNodeListPaste(group, cumulativeTextAttrs)
+			}
+		}
+
+		for (let i = 0; i < nodeList.length; i++) {
+			const curr = nodeList[i]
+			const isWhiteSpace = curr.nodeType === Node.TEXT_NODE && curr.textContent?.match(/^\s*$/) !== null
+			if (groupWasList && isWhiteSpace) {
+				continue
+			}
+			let isList = false
+			let listId: string | null = null
+			if (curr instanceof HTMLElement && curr.nodeName === 'P') {
+				const match = curr.getAttribute('style')?.match(/mso-list:(\w+ level\d+ \w+)/) ?? null
+				if (match !== null) {
+					isList = true
+					listId = match[1]
+
+					if (!groupWasList || lastListId === listId) {
+						const textContent = (curr as HTMLElement).textContent!
+						const specifics: ListElementProperties = getListElementProperties(textContent)
+						isOrdered = specifics.ordered
+						currentListProperties = specifics.properties
+					}
+				}
+			}
+
+			if (isList !== groupWasList || listId !== lastListId) {
+				includesList = true
+				if (group.length > 0) {
+					result.push(processGroup())
+					group = []
+				}
+			}
+			groupWasList = isList
+			lastListId = listId
+			group.push(curr)
+		}
+
+		if (includesList) {
+			result.push(processGroup())
+			return EditorPasteUtils.flattenNodesWithType(result, deserializer.createDefaultElement)
+		}
+		return null
+	},
+})

package/src/plugins/element/lists/ListItemElement.ts

@@ -0,0 +1,60 @@
+import { Editor as SlateEditor, Editor, Element as SlateElement, Node as SlateNode, Transforms } from 'slate'
+import { ContemberEditor } from '../../../editor'
+import { isListElement } from './ListElement'
+import { EditorElementPlugin, ElementRenderer } from '../../../types'
+
+export const listItemElementType = 'listItem' as const
+
+export interface ListItemElement extends SlateElement {
+	type: typeof listItemElementType
+	children: SlateEditor['children']
+}
+
+export const isListItemElement = (
+	element: SlateNode,
+	suchThat?: Partial<ListItemElement>,
+): element is ListItemElement => ContemberEditor.isElementType(element, listItemElementType, suchThat)
+
+
+export const listItemElementPlugin = ({ render }: { render: ElementRenderer<ListItemElement> }): EditorElementPlugin<ListItemElement> => ({
+	type: listItemElementType,
+	render,
+	canContainAnyBlocks: true,
+	normalizeNode: ({ editor, path, element, preventDefault }) => {
+		const parentEntry = Editor.above(editor, { at: path })
+		if (parentEntry === undefined || !isListElement(parentEntry[0])) {
+			Editor.withoutNormalizing(editor, () => {
+				const defaultElement = editor.createDefaultElement([{ text: '' }])
+				Transforms.wrapNodes(editor, defaultElement, {
+					at: path,
+				})
+				Transforms.unwrapNodes(editor, {
+					at: [...path, 0],
+				})
+			})
+			return preventDefault()
+		}
+		if (element.children.every(it => isListItemElement(it))) {
+			Transforms.unwrapNodes(editor, {
+				at: path,
+			})
+			return preventDefault()
+		}
+		if (element.children.length === 1) {
+			const onlyChild = element.children[0]
+			if (SlateElement.isElement(onlyChild) && editor.isDefaultElement(onlyChild)) {
+				Transforms.unwrapNodes(editor, {
+					at: [...path, 0],
+				})
+				return preventDefault()
+			}
+		}
+		const firstChild = element.children[0]
+		if (SlateElement.isElement(firstChild) && isListElement(firstChild)) {
+			Transforms.insertNodes(editor, editor.createDefaultElement([{ text: '' }]), {
+				at: [...path, 0],
+			})
+			return preventDefault()
+		}
+	},
+})

package/src/plugins/element/lists/OrderedListElement.ts

@@ -0,0 +1,31 @@
+import { Editor as SlateEditor, Element as SlateElement, Node as SlateNode } from 'slate'
+import { ContemberEditor } from '../../../editor'
+import { getParentListElement } from './ListElement'
+import { unorderedListElementType } from './UnorderedListElement'
+import { normalizeListElement, toggleListElement } from './transforms'
+import { EditorElementPlugin, ElementRenderer } from '../../../types'
+
+export const orderedListElementType = 'orderedList' as const
+
+export interface OrderedListElement extends SlateElement {
+	type: typeof orderedListElementType
+	children: SlateEditor['children']
+}
+
+export const isOrderedListElement = (
+	element: SlateNode,
+	suchThat?: Partial<OrderedListElement>,
+): element is OrderedListElement => ContemberEditor.isElementType(element, orderedListElementType, suchThat)
+
+export const orderedListElementPlugin = ({ render }: { render: ElementRenderer<OrderedListElement> }): EditorElementPlugin<OrderedListElement> => ({
+	type: orderedListElementType,
+	render,
+	isActive: ({ editor, suchThat }) => {
+		const list = getParentListElement(editor)
+		return list ? isOrderedListElement(list, suchThat) : false
+	},
+	toggleElement: ({ editor, suchThat }) => {
+		toggleListElement(editor, orderedListElementType, suchThat, unorderedListElementType)
+	},
+	normalizeNode: normalizeListElement,
+})

package/src/plugins/element/lists/UnorderedListElement.ts

@@ -0,0 +1,31 @@
+import { Editor as SlateEditor, Element as SlateElement, Node as SlateNode } from 'slate'
+import { ContemberEditor } from '../../../editor'
+import { getParentListElement } from './ListElement'
+import { orderedListElementType } from './OrderedListElement'
+import { normalizeListElement, toggleListElement } from './transforms'
+import { EditorElementPlugin, ElementRenderer } from '../../../types'
+
+export const unorderedListElementType = 'unorderedList' as const
+
+export interface UnorderedListElement extends SlateElement {
+	type: typeof unorderedListElementType
+	children: SlateEditor['children']
+}
+
+export const isUnorderedListElement = (
+	element: SlateNode,
+	suchThat?: Partial<UnorderedListElement>,
+): element is UnorderedListElement => ContemberEditor.isElementType(element, unorderedListElementType, suchThat)
+
+export const unorderedListElementPlugin = ({ render }: { render: ElementRenderer<UnorderedListElement> }): EditorElementPlugin<UnorderedListElement> => ({
+	type: unorderedListElementType,
+	render,
+	isActive: ({ editor, suchThat }) => {
+		const list = getParentListElement(editor)
+		return list ? isUnorderedListElement(list, suchThat) : false
+	},
+	toggleElement: ({ editor, suchThat }) => {
+		toggleListElement(editor, unorderedListElementType, suchThat, orderedListElementType)
+	},
+	normalizeNode: normalizeListElement,
+})

package/src/plugins/element/lists/index.ts

@@ -0,0 +1,5 @@
+export * from './ListItemElement'
+export * from './ListHtmlDeserializer'
+export * from './OrderedListElement'
+export * from './UnorderedListElement'
+export * from './withLists'

package/src/plugins/element/lists/transforms/dedentListItem.ts

@@ -0,0 +1,70 @@
+import { Editor, Element as SlateElement, Node as SlateNode, Path as SlatePath, Transforms } from 'slate'
+import { ContemberEditor } from '../../../../editor'
+import type { ListItemElement } from '../ListItemElement'
+import { indentListItem } from './indentListItem'
+import { isListElement } from '../ListElement'
+import { isListItemElement } from '../ListItemElement'
+
+export const dedentListItem = (
+	editor: Editor,
+	listItem: ListItemElement,
+	listItemPath: SlatePath,
+): boolean => {
+	const parentListPath = SlatePath.parent(listItemPath)
+	const parentListElement = SlateNode.get(editor, parentListPath) as SlateElement
+	const parentListChildrenCount = parentListElement.children.length
+	const subsequentListItemCount = parentListChildrenCount - listItemPath[listItemPath.length - 1] - 1
+
+	if (!isListElement(parentListElement) || parentListPath.length <= 1) {
+		return false
+	}
+	const parentListItemPath = SlatePath.parent(parentListPath)
+	const parentListItemElement = SlateNode.get(editor, parentListItemPath)
+
+	if (!isListItemElement(parentListItemElement)) {
+		return false
+	}
+
+	const grandParentListPath = SlatePath.parent(parentListItemPath)
+	const grandParentListElement = SlateNode.get(editor, grandParentListPath)
+
+	if (!isListElement(grandParentListElement)) {
+		return false
+	}
+	const parentListElementSpecifics = ContemberEditor.elementToSpecifics(parentListElement)
+	const parentAndGrandParentAreCompatible = ContemberEditor.isElementType(
+		grandParentListElement,
+		parentListElement.type,
+		parentListElementSpecifics as any,
+	)
+
+	// TODO we need to handle following siblings!!!
+
+	if (parentAndGrandParentAreCompatible) {
+		const newListItemPath = SlatePath.next(parentListItemPath)
+		Editor.withoutNormalizing(editor, () => {
+			if (subsequentListItemCount) {
+				const nextSiblingPath = SlatePath.next(listItemPath)
+				for (let i = 0; i < subsequentListItemCount; i++) {
+					const nextListItem = SlateNode.get(editor, nextSiblingPath) as ListItemElement
+					indentListItem(editor, nextListItem, nextSiblingPath)
+				}
+			}
+			Transforms.moveNodes(editor, {
+				at: listItemPath,
+				to: newListItemPath,
+			})
+			if (parentListChildrenCount === 1) {
+				// We've just moved the last listItem away
+				Transforms.removeNodes(editor, {
+					at: parentListPath,
+				})
+			}
+		})
+		return true
+	} else {
+		// TODO this is recoverable: we can just append the list
+	}
+
+	return false // TODO stub
+}

package/src/plugins/element/lists/transforms/indentListItem.ts

@@ -0,0 +1,81 @@
+import {
+	Editor,
+	Element as SlateElement,
+	Node as SlateNode,
+	NodeEntry,
+	Path as SlatePath,
+	Text,
+	Transforms,
+} from 'slate'
+import { ContemberEditor } from '../../../../editor'
+import type { ListItemElement } from '../ListItemElement'
+import type { OrderedListElement } from '../OrderedListElement'
+import type { UnorderedListElement } from '../UnorderedListElement'
+
+export const indentListItem = (
+	editor: Editor,
+	listItem: ListItemElement,
+	listItemPath: SlatePath,
+): boolean => {
+	const previousListEntry = ContemberEditor.getPreviousSibling<Editor, ListItemElement>(
+		editor,
+		listItem,
+		listItemPath,
+	)
+	if (previousListEntry === undefined) {
+		return false
+	}
+
+	Editor.withoutNormalizing(editor, () => {
+		const [parentListElement] = Editor.parent(editor, listItemPath) as NodeEntry<
+			OrderedListElement | UnorderedListElement
+		>
+		let [previousListItem, previousListItemPath] = previousListEntry
+
+		const lastPreviousListItemChild = previousListItem.children[previousListItem.children.length - 1]
+		const previousEndsWithCompatibleList =
+			SlateElement.isElement(lastPreviousListItemChild) &&
+			ContemberEditor.isElementType(
+				lastPreviousListItemChild,
+				parentListElement.type,
+				ContemberEditor.elementToSpecifics(parentListElement) as any,
+			)
+
+		if (previousEndsWithCompatibleList) {
+			const newListItemPath = [
+				...previousListItemPath,
+				previousListItem.children.length - 1,
+				(lastPreviousListItemChild as UnorderedListElement | OrderedListElement).children.length,
+			]
+
+			Transforms.moveNodes(editor, {
+				at: listItemPath,
+				to: newListItemPath,
+			})
+		} else {
+			const previousContainsInlines = Editor.hasInlines(editor, previousListItem)
+			if (previousContainsInlines) {
+				const [previousStart, previousEnd] = Editor.edges(editor, previousListItemPath)
+				Transforms.wrapNodes(editor, editor.createDefaultElement([]), {
+					match: node => Text.isText(node) || (SlateElement.isElement(node) && editor.isInline(node)),
+					at: {
+						anchor: previousStart,
+						focus: previousEnd,
+					},
+				})
+			}
+			// Getting a new previousListItem because the children may have changed due to the branch above.
+			previousListItem = SlateNode.get(editor, previousListItemPath) as ListItemElement
+			// We're appending at the end: children.length is just lastOne + 1
+			const newListItemPath = [...previousListItemPath, previousListItem.children.length]
+
+			Transforms.moveNodes(editor, {
+				at: listItemPath,
+				to: newListItemPath,
+			})
+			Transforms.wrapNodes(editor, { ...parentListElement, children: [] }, { at: newListItemPath })
+		}
+	})
+
+	return true
+}

package/src/plugins/element/lists/transforms/index.ts

@@ -0,0 +1,4 @@
+export * from './indentListItem'
+export * from './dedentListItem'
+export * from './normalizeListElement'
+export * from './toggleListElement'

package/src/plugins/element/lists/transforms/normalizeListElement.ts

@@ -0,0 +1,20 @@
+import { Editor, Element as SlateElement, Node as SlateNode, Path as SlatePath, Transforms } from 'slate'
+import { listItemElementType } from '../ListItemElement'
+import { ContemberEditor } from '../../../../editor'
+
+export const normalizeListElement = ({ editor, path, preventDefault }: { editor: Editor, path: SlatePath, preventDefault: () => void }) => {
+	for (const [child, childPath] of SlateNode.children(editor, path)) {
+		if (SlateElement.isElement(child)) {
+			if (child.type !== listItemElementType) {
+				ContemberEditor.ejectElement(editor, childPath)
+				Transforms.setNodes(editor, { type: listItemElementType }, { at: childPath })
+			}
+		} else {
+			// If a list contains non-element nodes, just remove it.
+			Transforms.removeNodes(editor, {
+				at: path,
+			})
+			return preventDefault()
+		}
+	}
+}

package/src/plugins/element/lists/transforms/toggleListElement.ts

@@ -0,0 +1,113 @@
+import { OrderedListElement, orderedListElementType } from '../OrderedListElement'
+import { UnorderedListElement, unorderedListElementType } from '../UnorderedListElement'
+import { Editor, Element as SlateElement, NodeEntry, Text, Transforms } from 'slate'
+import { ContemberEditor } from '../../../../editor'
+import { listItemElementType } from '../ListItemElement'
+import { isListElement } from '../ListElement'
+
+export const toggleListElement = <T extends OrderedListElement | UnorderedListElement>(
+	editor: Editor,
+	elementType: T['type'],
+	suchThat: Partial<T> | undefined,
+	otherKindOfList: typeof orderedListElementType | typeof unorderedListElementType,
+) => {
+	if (editor.isElementActive(elementType, suchThat)) {
+		const closestListEntry = ContemberEditor.closest(editor, {
+			match: node => SlateElement.isElement(node) && node.type === elementType,
+		}) as NodeEntry<UnorderedListElement | OrderedListElement>
+		if (!closestListEntry) {
+			return
+		}
+		return Editor.withoutNormalizing(editor, () => {
+			const [closestList, closestListPath] = closestListEntry
+
+			// It's important that we iterate backwards because otherwise we'd mangle the paths.
+			// We unwrap elements which may have more than one child.
+			for (let i = closestList.children.length - 1; i >= 0; i--) {
+				const currentItemPath = [...closestListPath, i]
+				if (Editor.hasInlines(editor, closestList.children[i] as SlateElement)) {
+					Transforms.wrapNodes(editor, editor.createDefaultElement([]), {
+						at: currentItemPath,
+					})
+					Transforms.unwrapNodes(editor, {
+						at: [...currentItemPath, 0],
+					})
+				} else {
+					Transforms.unwrapNodes(editor, { at: currentItemPath })
+				}
+			}
+			Transforms.unwrapNodes(editor, { at: closestListPath })
+		})
+	}
+	if (editor.isElementActive(elementType) || editor.isElementActive(otherKindOfList)) {
+		// We're in a list but a different one. Note the lack of 'suchThat'
+		const closestListEntry = ContemberEditor.closest(editor, {
+			match: node => isListElement(node),
+		}) as NodeEntry<UnorderedListElement | OrderedListElement>
+		if (!closestListEntry) {
+			return
+		}
+		return Editor.withoutNormalizing(editor, () => {
+			const [, closestListPath] = closestListEntry
+			ContemberEditor.ejectElement(editor, closestListPath)
+			Transforms.setNodes(editor, { ...suchThat, type: elementType }, { at: closestListPath })
+		})
+	}
+
+	const selection = editor.selection
+
+	if (!selection) {
+		return
+	}
+
+	const closestViableParentEntry = ContemberEditor.closestViableBlockContainerEntry(editor)
+
+	if (!closestViableParentEntry) {
+		return
+	}
+
+	Editor.withoutNormalizing(editor, () => {
+		const [targetParent, targetParentPath] = closestViableParentEntry
+
+		if (SlateElement.isElement(targetParent) && Editor.hasInlines(editor, targetParent)) {
+			// We're deliberately widening the selection to include all the inlines.
+			const listItemPath = [...targetParentPath, 0]
+
+			// Not using wrapNodes because it appears to exhibit rather unpredictable treatment of text nodes.
+			Transforms.insertNodes(editor, { type: listItemElementType, children: [] }, { at: listItemPath })
+			Transforms.moveNodes(editor, {
+				to: [...listItemPath, 0],
+				match: node => Text.isText(node) || SlateElement.isElement(node) && Editor.isInline(editor, node),
+				at: {
+					anchor: Editor.start(editor, [...targetParentPath, 1]),
+					focus: Editor.end(editor, [...targetParentPath, targetParent.children.length]),
+				},
+			})
+			Transforms.wrapNodes(editor, { type: elementType, children: [] }, { at: listItemPath })
+		} else {
+			const [selectionStart, selectionEnd] = Editor.edges(editor, selection)
+			const relativeStartIndex = selectionStart.path[targetParentPath.length]
+			const relativeEndIndex = selectionEnd.path[targetParentPath.length]
+
+			for (let i = relativeStartIndex; i <= relativeEndIndex; i++) {
+				Transforms.wrapNodes(editor, { type: listItemElementType, children: [] }, { at: [...targetParentPath, i] })
+			}
+
+			const emptyList: UnorderedListElement | OrderedListElement = {
+				...suchThat,
+				type: elementType as (UnorderedListElement | OrderedListElement)['type'],
+				children: [],
+			}
+			const listPath = [...targetParentPath, relativeStartIndex]
+			Transforms.insertNodes(editor, emptyList, { at: listPath })
+
+			for (let i = relativeStartIndex; i <= relativeEndIndex; i++) {
+				Transforms.moveNodes(editor, {
+					to: [...listPath, i - relativeStartIndex],
+					// The path doesn't depend on i because we keep moving the siblings away.
+					at: [...targetParentPath, relativeStartIndex + 1],
+				})
+			}
+		}
+	})
+}