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

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

@@ -0,0 +1,202 @@
+import {
+	Editor,
+	Element as SlateElement,
+	Node as SlateNode,
+	Path as SlatePath,
+	Range as SlateRange,
+	Text,
+	Transforms,
+} from 'slate'
+import { ContemberEditor } from '../../../editor'
+import { isListItemElement, ListItemElement, listItemElementPlugin } from './ListItemElement'
+import { OrderedListElement, orderedListElementPlugin } from './OrderedListElement'
+import { dedentListItem, indentListItem } from './transforms'
+import { UnorderedListElement, unorderedListElementPlugin } from './UnorderedListElement'
+import { isListElement } from './ListElement'
+import { listHtmlDeserializerFactory } from './ListHtmlDeserializer'
+import { ElementRenderer } from '../../../types'
+
+export const withLists = ({ renderListItem, renderUnorderedList, renderOrderedList }: {
+	renderListItem: ElementRenderer<ListItemElement>
+	renderOrderedList: ElementRenderer<OrderedListElement>
+	renderUnorderedList: ElementRenderer<UnorderedListElement>
+}) => <E extends Editor>(editor: E): E => {
+	const {
+		insertBreak,
+		onKeyDown,
+	} = editor
+
+	editor.registerElement(listItemElementPlugin({ render: renderListItem }))
+	editor.registerElement(orderedListElementPlugin({ render: renderOrderedList }))
+	editor.registerElement(unorderedListElementPlugin({ render: renderUnorderedList }))
+
+	editor.htmlDeserializer.registerPlugin(listHtmlDeserializerFactory())
+
+	Object.assign<Editor, Partial<Editor>>(editor, {
+		insertBreak: () => {
+			const { selection } = editor
+
+			if (!selection || !SlateRange.isCollapsed(selection)) {
+				return insertBreak()
+			}
+			const closestBlockEntry = ContemberEditor.closestBlockEntry(editor)
+			if (closestBlockEntry === undefined) {
+				return insertBreak()
+			}
+			const [closestBlock, closestBlockPath] = closestBlockEntry
+
+			let containingListItem: ListItemElement
+			let containingListItemPath: SlatePath
+
+			if (!isListItemElement(closestBlock)) {
+				if (closestBlockPath.length < 2) {
+					// This block cannot be inside a list
+					return insertBreak()
+				}
+
+				containingListItemPath = SlatePath.parent(closestBlockPath)
+				const closestListItem = SlateNode.get(editor, containingListItemPath)
+
+				if (!isListItemElement(closestListItem)) {
+					// The block is not inside a list
+					return insertBreak()
+				}
+				containingListItem = closestListItem
+			} else {
+				containingListItem = closestBlock
+				containingListItemPath = closestBlockPath
+			}
+
+			if (SlateNode.string(containingListItem) !== '') {
+				return Transforms.splitNodes(editor, {
+					always: true,
+					at: selection.focus,
+					match: node => isListItemElement(node),
+				})
+			}
+
+			// We're in a list and want to leave this list.
+
+			const containingListPath = SlatePath.parent(containingListItemPath)
+			const containingList = SlateNode.get(editor, containingListPath)
+
+			if (!isListElement(containingList)) {
+				// This shouldn't really happen. It's more of a sanity check.
+				return insertBreak()
+			}
+
+			const followingListItemPath = SlatePath.next(containingListItemPath)
+			const hasFollowingListItem = SlateNode.has(editor, followingListItemPath)
+
+			if (hasFollowingListItem) {
+				const followingListItemNode = SlateNode.get(editor, followingListItemPath)
+				if (!isListItemElement(followingListItemNode)) {
+					// This shouldn't really happen. It's more of a sanity check.
+					return insertBreak()
+				}
+				if (containingListItemPath[containingListItemPath.length - 1] === 0) {
+					// We're at the beginning of a list
+					Editor.withoutNormalizing(editor, () => {
+						// Remove the trailing empty listItem
+						Transforms.removeNodes(editor, { at: containingListItemPath })
+						Transforms.insertNodes(editor, editor.createDefaultElement([{ text: '' }]), { at: containingListPath, select: true })
+					})
+				} else {
+					// We're in the middle of a list.
+					Editor.withoutNormalizing(editor, () => {
+						Transforms.removeNodes(editor, { at: containingListItemPath })
+						Transforms.splitNodes(editor, { at: containingListItemPath })
+						const afterListParent = SlatePath.next(containingListPath)
+						Transforms.insertNodes(editor, editor.createDefaultElement([{ text: '' }]), { at: afterListParent, select: true })
+					})
+				}
+			} else {
+				// We're at the end of a list.
+				Editor.withoutNormalizing(editor, () => {
+					const afterListParent = SlatePath.next(containingListPath)
+					// Remove the trailing empty listItem
+					Transforms.removeNodes(editor, { at: containingListItemPath })
+					Transforms.insertNodes(editor, editor.createDefaultElement([{ text: '' }]), { at: afterListParent, select: true })
+				})
+			}
+		},
+		onKeyDown: event => {
+			// TODO this should also work for expanded selections
+			if (
+				(event.key !== 'Tab' && event.key !== 'Enter') ||
+				!editor.selection ||
+				!SlateRange.isCollapsed(editor.selection)
+			) {
+				return onKeyDown(event)
+			}
+			const selection = editor.selection
+			const closestBlockEntry = ContemberEditor.closestBlockEntry(editor, { at: selection.focus })
+
+			if (closestBlockEntry === undefined) {
+				return onKeyDown(event)
+			}
+			let [closestBlockElement, closestBlockPath] = closestBlockEntry
+			if (!SlateElement.isElement(closestBlockElement)) {
+				return onKeyDown(event)
+			}
+
+			if (event.key === 'Tab') {
+				if (editor.isDefaultElement(closestBlockElement)) {
+					[closestBlockElement, closestBlockPath] = Editor.parent(editor, closestBlockPath)
+				}
+				if (!isListItemElement(closestBlockElement)) {
+					return onKeyDown(event)
+				}
+				const succeeded = event.shiftKey
+					? dedentListItem(editor, closestBlockElement, closestBlockPath)
+					: indentListItem(editor, closestBlockElement, closestBlockPath)
+
+				if (succeeded) {
+					return event.preventDefault()
+				}
+			} else if (event.key === 'Enter' && event.shiftKey) {
+				if (editor.isDefaultElement(closestBlockElement)) {
+					const [listItem] = Editor.parent(editor, closestBlockPath)
+					if (!isListItemElement(listItem)) {
+						return onKeyDown(event)
+					}
+					event.preventDefault()
+					return Transforms.splitNodes(editor, {
+						always: true,
+						at: selection.focus,
+						match: node => SlateElement.isElement(node) && Editor.isBlock(editor, node) && editor.isDefaultElement(node),
+					})
+				} else if (isListItemElement(closestBlockElement)) {
+					// We want to create a newline but the closest block is the list item.
+					// This should mean that it only contains inlines. Hence we wrap them in a default element
+					// and then split it.
+					const [listItemStart, listItemEnd] = Editor.edges(editor, closestBlockPath)
+					event.preventDefault()
+					return Editor.withoutNormalizing(editor, () => {
+						Transforms.wrapNodes(editor, editor.createDefaultElement([]), {
+							match: node => Text.isText(node) || (SlateElement.isElement(node) && editor.isInline(node)),
+							at: {
+								anchor: listItemStart,
+								focus: listItemEnd,
+							},
+						})
+						const relative = SlatePath.relative(selection.focus.path, closestBlockPath)
+						Transforms.splitNodes(editor, {
+							// The zero should be the newly created default element.
+							at: {
+								path: [...closestBlockPath, 0, ...relative],
+								offset: selection.focus.offset,
+							},
+							always: true,
+						})
+					})
+				}
+			}
+			return onKeyDown(event)
+		},
+	})
+
+
+
+	return editor
+}

package/src/plugins/element/paragraphs/ParagraphElement.ts

@@ -0,0 +1,59 @@
+import { Editor as SlateEditor, Editor, Element as SlateElement, Node as SlateNode, Transforms } from 'slate'
+import { ContemberEditor } from '../../../editor'
+import { AlignDirection } from '../../attributes'
+import { EditorElementPlugin, ElementRenderer } from '../../../types'
+
+export const paragraphElementType = 'paragraph' as const
+
+export interface ParagraphElement extends SlateElement {
+	type: typeof paragraphElementType
+	isNumbered?: boolean
+	children: SlateEditor['children']
+	align?: AlignDirection
+}
+
+export const isParagraphElement = (
+	element: SlateNode,
+	suchThat?: Partial<ParagraphElement>,
+): element is ParagraphElement => ContemberEditor.isElementType(element, paragraphElementType, suchThat)
+
+export const paragraphElementPlugin = ({ render }: {render: ElementRenderer<ParagraphElement>}): EditorElementPlugin<ParagraphElement> => ({
+	type: paragraphElementType,
+	render,
+	canContainAnyBlocks: false,
+	acceptsAttributes: ({ editor, suchThat }) => {
+		return 'align' in suchThat
+	},
+	toggleElement: ({ editor, suchThat }) => {
+		Editor.withoutNormalizing(editor, () => {
+			const topLevelNodes = Array.from(ContemberEditor.topLevelNodes(editor))
+
+			if (topLevelNodes.every(([node]) => isParagraphElement(node, suchThat))) {
+				for (const [, path] of topLevelNodes) {
+					ContemberEditor.ejectElement(editor, path)
+					Transforms.setNodes(editor, { type: editor.defaultElementType }, { at: path })
+				}
+			} else {
+				for (const [node, path] of topLevelNodes) {
+					if (isParagraphElement(node, suchThat)) {
+						continue
+					}
+					ContemberEditor.ejectElement(editor, path)
+					const newProps: Partial<ParagraphElement> = {
+						...suchThat,
+						type: paragraphElementType,
+					}
+					Transforms.setNodes(editor, newProps, { at: path })
+				}
+			}
+		})
+	},
+	normalizeNode: ({ editor, element, path, preventDefault }) => {
+		for (const [i, child] of element.children.entries()) {
+			if (SlateElement.isElement(child) && Editor.isBlock(editor, child)) {
+				Transforms.unwrapNodes(editor, { at: [...path, i] })
+				return preventDefault()
+			}
+		}
+	},
+})

package/src/plugins/element/paragraphs/ParagraphHtmlDeserializer.ts

@@ -0,0 +1,9 @@
+import { paragraphElementType } from './ParagraphElement'
+import { HtmlDeserializerPlugin } from '../../../types'
+
+export const paragraphHtmlDeserializer: HtmlDeserializerPlugin = {
+	processBlockPaste: ({ element, next, cumulativeTextAttrs }) => element.nodeName === 'P' ? {
+		type: paragraphElementType,
+		children: next(element.childNodes, cumulativeTextAttrs),
+	} : null,
+}

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

@@ -0,0 +1,3 @@
+export * from './ParagraphElement'
+export * from './ParagraphHtmlDeserializer'
+export * from './withParagraphs'

package/src/plugins/element/paragraphs/withParagraphs.ts

@@ -0,0 +1,70 @@
+import { Editor, Element as SlateElement, Point, Range as SlateRange, Transforms } from 'slate'
+import { ContemberEditor } from '../../../editor'
+import { isParagraphElement, ParagraphElement, paragraphElementPlugin, paragraphElementType } from './ParagraphElement'
+import { paragraphHtmlDeserializer } from './ParagraphHtmlDeserializer'
+import { ElementRenderer } from '../../../types'
+
+export const withParagraphs = ({ render }: { render: ElementRenderer<ParagraphElement> }) => <E extends Editor>(editor: E): E => {
+	const {
+		canToggleElement,
+		deleteBackward,
+	} = editor
+
+	editor.registerElement(paragraphElementPlugin({ render }))
+
+
+	editor.canToggleElement = (elementType, suchThat) => {
+		// This only allows numbered paragraphs at the top level.
+		// TODO this is pretty bad but in order to fix this, we'd also have to fix toggleElement and there's no time now.
+
+		if (elementType !== paragraphElementType || suchThat === undefined) {
+			return canToggleElement(elementType, suchThat)
+		}
+		const isNumbered = suchThat.isNumbered
+
+		if (isNumbered !== true) {
+			return canToggleElement(elementType, suchThat)
+		}
+
+		if (!editor.selection) {
+			return false
+		}
+		const closestBlockEntry = ContemberEditor.closestBlockEntry(editor)
+		if (closestBlockEntry === undefined) {
+			return true
+		}
+		const [closestBlockElement, closestBlockPath] = closestBlockEntry
+
+		return closestBlockPath.length === 1 &&  SlateElement.isElement(closestBlockElement) && closestBlockElement.type === paragraphElementType
+	}
+
+	editor.deleteBackward = unit => {
+		const selection = editor.selection
+		if (unit !== 'character' || !selection || !SlateRange.isCollapsed(selection) || selection.focus.offset !== 0) {
+			return deleteBackward(unit)
+		}
+		// The offset being zero doesn't necessarily imply that selection refers to the start of a paragraph.
+		// It's just a way to early-exit.
+
+		const closestNumberedEntry = Editor.above<ParagraphElement>(editor, {
+			match: node => SlateElement.isElement(node) && isParagraphElement(node, { isNumbered: true }),
+		})
+		if (closestNumberedEntry === undefined) {
+			return deleteBackward(unit)
+		}
+		const [, paragraphPath] = closestNumberedEntry
+		const paragraphStartPoint = Editor.start(editor, paragraphPath)
+
+		if (!Point.equals(paragraphStartPoint, selection.focus)) {
+			return deleteBackward(unit)
+		}
+		Transforms.setNodes(
+			editor,
+			{ isNumbered: null }, // null removes the key altogether
+			{ at: paragraphPath },
+		)
+	}
+	editor.htmlDeserializer.registerPlugin(paragraphHtmlDeserializer)
+
+	return editor
+}

package/src/plugins/element/scrollTargets/ScrollTargetElement.ts

@@ -0,0 +1,61 @@
+import { Editor as SlateEditor, Editor, Element as SlateElement, Node as SlateNode, Range as SlateRange, Transforms } from 'slate'
+import { EditorElementPlugin, ElementRenderer } from '../../../types'
+
+export const scrollTargetElementType = 'scrollTarget' as const
+
+export interface ScrollTargetElement extends SlateElement {
+	type: typeof scrollTargetElementType
+	identifier: string
+	children: SlateEditor['children']
+}
+
+export const isScrollTargetElement = (element: SlateNode): element is ScrollTargetElement =>
+	SlateElement.isElement(element) && element.type === scrollTargetElementType
+
+export const isScrollTargetElementActive = (editor: Editor) => {
+	const [link] = Editor.nodes(editor, { match: isScrollTargetElement })
+	return !!link
+}
+
+export const scrollTargetElementPlugin = ({ render }: { render: ElementRenderer<ScrollTargetElement> }): EditorElementPlugin<ScrollTargetElement> => ({
+	type: scrollTargetElementType,
+	render,
+	isActive: ({ editor }) => isScrollTargetElementActive(editor),
+	isInline: true,
+	isVoid: true,
+	toggleElement: ({ editor, suchThat }) => {
+		if (isScrollTargetElementActive(editor)) {
+			unwrapScrollTarget(editor)
+		} else {
+			let identifier =
+				suchThat?.identifier ??
+				prompt('Insert the identifier:')
+
+			if (!identifier) {
+				return
+			}
+			wrapScrollTarget(editor, identifier)
+		}
+	},
+})
+const unwrapScrollTarget = (editor: Editor) => {
+	Transforms.removeNodes(editor, { match: isScrollTargetElement })
+}
+const wrapScrollTarget = (editor: Editor, identifier: string) => {
+	if (isScrollTargetElementActive(editor)) {
+		unwrapScrollTarget(editor)
+	}
+
+	const selection = editor.selection
+	const isCollapsed = selection ? SlateRange.isCollapsed(selection!) : false
+	const ScrollTarget: ScrollTargetElement = {
+		type: scrollTargetElementType,
+		identifier,
+		children: [{ text: '' }],
+	}
+
+	if (!isCollapsed) {
+		Transforms.collapse(editor, { edge: 'start' })
+	}
+	Transforms.insertNodes(editor, ScrollTarget)
+}

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

@@ -0,0 +1,2 @@
+export * from './ScrollTargetElement'
+export * from './withScrollTargets'

package/src/plugins/element/scrollTargets/withScrollTargets.ts

@@ -0,0 +1,8 @@
+import { Editor } from 'slate'
+import { ScrollTargetElement, scrollTargetElementPlugin } from './ScrollTargetElement'
+import { ElementRenderer } from '../../../types'
+
+export const withScrollTargets = ({ render }: { render: ElementRenderer<ScrollTargetElement> }) => <E extends Editor>(editor: E): E => {
+	editor.registerElement(scrollTargetElementPlugin({ render }))
+	return editor
+}

package/src/plugins/element/tables/TableCellElement.ts

@@ -0,0 +1,45 @@
+import { Editor as SlateEditor, Element, Element as SlateElement, Node, Transforms } from 'slate'
+import { ContemberEditor } from '../../../editor'
+import { tableRowElementType } from './TableRowElement'
+import { EditorElementPlugin, ElementRenderer } from '../../../types'
+
+export const tableCellElementType = 'tableCell' as const
+
+export interface TableCellElement extends SlateElement {
+	type: typeof tableCellElementType
+	children: SlateEditor['children']
+	headerScope?: 'row'
+	justify?: 'start' | 'center' | 'end'
+}
+
+export const isTableCellElement = (element: Node): element is TableCellElement => Element.isElement(element) && element.type === tableCellElementType
+
+export const createEmptyTableCellElement = () => ({
+	type: tableCellElementType,
+	children: [{ text: '' }],
+})
+
+
+export const tableCellElementPlugin = ({ render }: {render: ElementRenderer<TableCellElement>}): EditorElementPlugin<TableCellElement> => ({
+	type: tableCellElementType,
+	render,
+	normalizeNode: ({ element, editor, path, preventDefault }) => {
+		if (element.children.length === 1) {
+			const onlyChild = element.children[0]
+			if (SlateElement.isElement(onlyChild) && editor.isDefaultElement(onlyChild)) {
+				Transforms.unwrapNodes(editor, {
+					at: [...path, 0],
+				})
+			}
+		}
+		if (!ContemberEditor.hasParentOfType(editor, [element, path], tableRowElementType)) {
+			Transforms.unwrapNodes(editor, { at: path })
+			return preventDefault()
+		}
+		if (path[path.length - 1] > 0 && element.headerScope) {
+			Transforms.setNodes(editor, { headerScope: null }, { at: path })
+			return preventDefault()
+		}
+	},
+	canContainAnyBlocks: true,
+})

package/src/plugins/element/tables/TableElement.ts

@@ -0,0 +1,125 @@
+import { Editor as SlateEditor, Editor, Element as SlateElement, Element, Node as SlateNode, Node, NodeEntry, Path as SlatePath, Range as SlateRange, Transforms } from 'slate'
+import { createEmptyTableRowElement, isTableRowElement, TableRowElement, tableRowElementType } from './TableRowElement'
+import { ContemberEditor } from '../../../editor'
+import { gaugeTableColumnCount } from './gaugeTableColumnCount'
+import { createEmptyTableCellElement } from './TableCellElement'
+import { EditorElementPlugin, ElementRenderer } from '../../../types'
+
+export const tableElementType = 'table' as const
+
+export interface TableElement extends SlateElement {
+	type: typeof tableElementType
+	children: SlateEditor['children']
+}
+
+export const isTableElement = (element: Node): element is TableElement => Element.isElement(element) && element.type === tableElementType
+
+export const createEmptyTableElement = (rowCount = 3, columnCount = 2) => ({
+	type: tableElementType,
+	children: Array.from({ length: rowCount }, () => createEmptyTableRowElement(columnCount)),
+})
+
+export const getTableElementRowCount = (element: TableElement): number => {
+	return element.children.length
+}
+
+export const getTableElementColumnCount = (element: TableElement): number => {
+	const firstRow = element.children[0] as TableRowElement | undefined
+	return firstRow?.children.length ?? 0
+}
+
+export const tableElementPlugin = ({ render }: {render: ElementRenderer<TableElement>}): EditorElementPlugin<TableElement> => ({
+	type: tableElementType,
+	render,
+	normalizeNode: ({ editor, element, path, preventDefault }) => {
+		if (element.children.length === 0) {
+			Transforms.removeNodes(editor, { at: path })
+			return preventDefault()
+		}
+
+		let didTransform = false
+		for (const [child, childPath] of SlateNode.children(editor, path)) {
+			if (SlateElement.isElement(child)) {
+				if (!isTableRowElement(child)) {
+					ContemberEditor.ejectElement(editor, childPath)
+					Transforms.setNodes(editor, { type: tableRowElementType }, { at: childPath })
+					didTransform = true
+				}
+			} else {
+				Transforms.removeNodes(editor, { at: path })
+				return preventDefault()
+			}
+		}
+		if (didTransform) {
+			return preventDefault()
+		}
+		const columnCount = gaugeTableColumnCount(element)
+		for (const [row, childPath] of SlateNode.children(editor, path) as Iterable<NodeEntry<TableRowElement>>) {
+			const currentColumnCount = row.children.length
+			if (currentColumnCount === columnCount) {
+				continue
+			}
+
+			// For the first row, we prepend or insert at the start which in most cases will likely preserve the
+			// already existing cells' positions.
+			if (currentColumnCount > columnCount) {
+				const shouldBiasTowardsStart = childPath[childPath.length - 1] === 0
+				for (let i = columnCount; i < currentColumnCount; i++) {
+					Transforms.removeNodes(editor, { at: [...childPath, shouldBiasTowardsStart ? 0 : i] })
+				}
+			} else if (currentColumnCount < columnCount) {
+				const shouldBiasTowardsStart = childPath[childPath.length - 1] === 0
+				for (let i = currentColumnCount; i < columnCount; i++) {
+					Transforms.insertNodes(editor, createEmptyTableCellElement(), {
+						at: [...childPath, shouldBiasTowardsStart ? 0 : i],
+					})
+				}
+			}
+		}
+	},
+	canContainAnyBlocks: false,
+	toggleElement: ({ editor }) => {
+		const closestTableEntry = Editor.above(editor, {
+			mode: 'lowest',
+			match: matchedNode => SlateElement.isElement(matchedNode) && isTableElement(matchedNode),
+		})
+		if (closestTableEntry) {
+			return
+		}
+		const { selection } = editor
+		if (!selection || SlateRange.isExpanded(selection)) {
+			return
+		}
+
+		const closestDefaultEntry: NodeEntry | undefined = Editor.above(editor, {
+			at: selection.focus,
+			mode: 'lowest',
+			match: matchedNode => SlateElement.isElement(matchedNode) && editor.isDefaultElement(matchedNode),
+		})
+		if (!closestDefaultEntry) {
+			return
+		}
+		const [closestDefault, closestDefaultPath] = closestDefaultEntry
+
+		if (closestDefaultPath.length !== 1) {
+			return // We only support tables at the very top level
+		}
+
+		Editor.withoutNormalizing(editor, () => {
+			let targetPath: SlatePath
+			if (SlateNode.string(closestDefault) === '') {
+				Transforms.removeNodes(editor, {
+					at: closestDefaultPath,
+				})
+				targetPath = closestDefaultPath
+			} else {
+				targetPath = [closestDefaultPath[0] + 1]
+			}
+			const table = createEmptyTableElement()
+
+			Transforms.insertNodes(editor, table, {
+				at: targetPath,
+			})
+		})
+	},
+})

package/src/plugins/element/tables/TableElementSelection.ts

@@ -0,0 +1,19 @@
+import { ReactEditor } from 'slate-react'
+import { Editor, Path as SlatePath, Transforms } from 'slate'
+import { TableCellElement } from './TableCellElement'
+import { TableElement } from './TableElement'
+
+export const selectTableCellContents = (editor: Editor, table: TableElement | SlatePath, rowIndex: number, columnIndex: number) => {
+	if (!Array.isArray(table)) {
+		table = ReactEditor.findPath(editor, table)
+	}
+	Transforms.select(editor, {
+		anchor: Editor.start(editor, [...table, rowIndex, columnIndex]),
+		focus: Editor.end(editor, [...table, rowIndex, columnIndex]),
+	})
+}
+
+export const getTableCellCoordinates = (editor: Editor, element: TableCellElement) => {
+	const cellPath = ReactEditor.findPath(editor, element)
+	return cellPath.slice(-2) as [number, number]
+}