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

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

@@ -0,0 +1,165 @@
+import { Editor, NodeEntry, Transforms } from 'slate'
+import { ReactEditor } from 'slate-react'
+import { getTableElementColumnCount, getTableElementRowCount, TableElement } from './TableElement'
+import { createEmptyTableRowElement, isTableRowElement, TableRowElement, tableRowElementType } from './TableRowElement'
+import { ContemberEditor } from '../../../editor'
+import {
+	createEmptyTableCellElement,
+	isTableCellElement,
+	TableCellElement,
+	tableCellElementType,
+} from './TableCellElement'
+
+export class TableModifications {
+	public static deleteTableColumn(editor: Editor, element: TableElement, index: number) {
+		const tablePath = ReactEditor.findPath(editor, element)
+		const rowCount = element.children.length
+
+		Editor.withoutNormalizing(editor, () => {
+			for (let rowIndex = 0; rowIndex < rowCount; rowIndex++) {
+				Transforms.removeNodes(editor, {
+					at: [...tablePath, rowIndex, index],
+				})
+			}
+		})
+	}
+
+	public static addTableRow(editor: Editor, element: TableElement, index?: number) {
+		const tablePath = ReactEditor.findPath(editor, element)
+		const columnCount = getTableElementColumnCount(element)
+		const rowIndex = index ?? element.children.length
+
+		let tableRow: TableRowElement
+		if (element.children.length === 0) {
+			tableRow = createEmptyTableRowElement(columnCount)
+		} else {
+			const blueprintRow = element.children[rowIndex === 0 ? 0 : rowIndex - 1] as TableRowElement
+
+			tableRow = {
+				...ContemberEditor.elementToSpecifics(blueprintRow),
+				type: tableRowElementType,
+				children: Array.from(
+					{ length: columnCount },
+					(_, columnIndex): TableCellElement => copyTableCell(blueprintRow.children[columnIndex] as TableCellElement),
+				),
+			}
+
+			if (rowIndex === 0) {
+				const firstRow = element.children[0] as TableRowElement
+				if (firstRow.headerScope) {
+					Transforms.setNodes(editor, { headerScope: null }, { at: [...tablePath, 0] })
+				}
+			}
+		}
+
+		Transforms.insertNodes(editor, tableRow, {
+			at: [...tablePath, rowIndex],
+		})
+	}
+
+	public static addTableColumn(editor: Editor, element: TableElement, index?: number) {
+		const tablePath = ReactEditor.findPath(editor, element)
+		const columnCount = getTableElementColumnCount(element)
+		const rowCount = getTableElementRowCount(element)
+		const columnIndex = index ?? columnCount ?? 0
+
+		Editor.withoutNormalizing(editor, () => {
+			for (let rowIndex = 0; rowIndex < rowCount; rowIndex++) {
+				const tableRow = element.children[rowIndex] as TableRowElement
+
+				let tableCell: TableCellElement
+				if (tableRow.children.length === 0) {
+					tableCell = createEmptyTableCellElement()
+				} else {
+					tableCell = copyTableCell(tableRow.children[columnIndex === 0 ? 0 : columnIndex - 1] as TableCellElement)
+
+					if (columnIndex === 0) {
+						const firstCell = tableRow.children[0] as TableCellElement
+						if (firstCell.headerScope) {
+							Transforms.setNodes(editor, { headerScope: null }, { at: [...tablePath, rowIndex, 0] })
+						}
+					}
+				}
+
+				Transforms.insertNodes(editor, tableCell, {
+					at: [...tablePath, rowIndex, columnIndex],
+				})
+			}
+		})
+	}
+
+	public static justifyTableColumn(editor: Editor, element: TableElement, columnIndex: number, direction: TableCellElement['justify']) {
+		forEachCellInColumn(editor, element, columnIndex, ([, cellPath]) => {
+			Transforms.setNodes(
+				editor,
+				{ justify: direction ?? null },
+				{ match: node => isTableCellElement(node), at: cellPath },
+			)
+		})
+	}
+
+	public static toggleTableRowHeaderScope(editor: Editor, element: TableElement, rowIndex: number, scope: TableRowElement['headerScope']) {
+		const rowCount = element.children.length
+		if (rowIndex !== 0 || rowCount < 1) {
+			return
+		}
+		const tablePath = ReactEditor.findPath(editor, element)
+		const firstRow = element.children[0] as TableRowElement
+
+		Transforms.setNodes(
+			editor,
+			{ headerScope: firstRow.headerScope === scope ? null : scope },
+			{ match: node => isTableRowElement(node), at: [...tablePath, 0] },
+		)
+	}
+
+	public static toggleTableColumnHeaderScope(editor: Editor, element: TableElement, columnIndex: number, scope: TableCellElement['headerScope']) {
+		let currentStatusScore = 0
+		const rowCount = element.children.length
+
+		forEachCellInColumn(editor, element, columnIndex, ([cell]) => {
+			currentStatusScore += cell.headerScope === scope ? 1 : -1
+		})
+
+		// If none have it or the majority does but not all.
+		const shouldSetScope =
+			-currentStatusScore === rowCount || (currentStatusScore > 0 && currentStatusScore !== rowCount)
+
+		forEachCellInColumn(editor, element, columnIndex, ([, cellPath]) => {
+			Transforms.setNodes(
+				editor,
+				{ headerScope: shouldSetScope ? scope : null },
+				{ match: node => isTableCellElement(node), at: cellPath },
+			)
+		})
+	}
+
+	public static deleteTableRow(editor: Editor, element: TableElement, index: number) {
+		const tablePath = ReactEditor.findPath(editor, element)
+		Transforms.removeNodes(editor, {
+			at: [...tablePath, index],
+		})
+	}
+}
+
+const forEachCellInColumn = (
+	editor: Editor,
+	element: TableElement,
+	columnIndex: number,
+	callback: (cellEntry: NodeEntry<TableCellElement>) => void,
+) => {
+	const tablePath = ReactEditor.findPath(editor, element)
+	const rowCount = getTableElementRowCount(element)
+
+	Editor.withoutNormalizing(editor, () => {
+		for (let rowIndex = 0; rowIndex < rowCount; rowIndex++) {
+			callback(Editor.node(editor, [...tablePath, rowIndex, columnIndex]) as NodeEntry<TableCellElement>)
+		}
+	})
+}
+const copyTableCell = (tableCellElement: TableCellElement): TableCellElement => ({
+	...ContemberEditor.elementToSpecifics(tableCellElement),
+	type: tableCellElementType,
+	children: [{ text: '' }],
+})
+

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

@@ -0,0 +1,47 @@
+import { Editor as SlateEditor, Element as SlateElement, Element, Node, Node as SlateNode, Transforms } from 'slate'
+import { createEmptyTableCellElement, isTableCellElement, tableCellElementType } from './TableCellElement'
+import { ContemberEditor } from '../../../editor'
+import { tableElementType } from './TableElement'
+import { EditorElementPlugin, ElementRenderer } from '../../../types'
+
+export const tableRowElementType = 'tableRow' as const
+
+export interface TableRowElement extends SlateElement {
+	type: typeof tableRowElementType
+	children: SlateEditor['children']
+	headerScope?: 'table'
+}
+
+export const isTableRowElement = (element: Node): element is TableRowElement => Element.isElement(element) && element.type === tableRowElementType
+
+export const createEmptyTableRowElement = (columnCount = 2) => ({
+	type: tableRowElementType,
+	children: Array.from({ length: columnCount }, () => createEmptyTableCellElement()),
+})
+
+export const tableRowElementPlugin = ({ render }: {render: ElementRenderer<TableRowElement>}): EditorElementPlugin<TableRowElement> => ({
+	type: tableRowElementType,
+	render,
+	normalizeNode: ({ editor, path, element, preventDefault }) => {
+		for (const [child, childPath] of SlateNode.children(editor, path)) {
+			if (SlateElement.isElement(child)) {
+				if (!isTableCellElement(child)) {
+					ContemberEditor.ejectElement(editor, childPath)
+					Transforms.setNodes(editor, { type: tableCellElementType }, { at: childPath })
+				}
+			} else {
+				Transforms.removeNodes(editor, { at: path })
+				return preventDefault()
+			}
+		}
+		if (!ContemberEditor.hasParentOfType(editor, [element, path], tableElementType)) {
+			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: false,
+})

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

@@ -0,0 +1,35 @@
+import type { TableElement } from './TableElement'
+import type { TableRowElement } from './TableRowElement'
+
+export const gaugeTableColumnCount = (table: TableElement): number => {
+	// This whole function is obviously very heuristic. It's intended to be called during normalizations (i.e. often),
+	// and so it aims to be reasonably fast. We want to use this return value to repair corrupted tables.
+
+	if (table.children.length === 0) {
+		return 0
+	}
+
+	const rowSampleStart = table.children[0] as TableRowElement
+	const rowSampleMiddle = table.children[Math.floor(table.children.length / 2)] as TableRowElement
+	const rowSampleEnd = table.children[table.children.length - 1] as TableRowElement
+
+	const columnSampleStart = rowSampleStart.children.length
+	const columnSampleMiddle = rowSampleMiddle.children.length
+	const columnSampleEnd = rowSampleEnd.children.length
+
+	// Tables most often get corrupted either at the beginning or at the end. Thus we assume that out of these three
+	// values, two will likely be the same.
+	if (columnSampleStart === columnSampleEnd) {
+		return columnSampleStart
+	}
+	if (columnSampleStart === columnSampleMiddle) {
+		return columnSampleStart
+	}
+	if (columnSampleMiddle === columnSampleEnd) {
+		return columnSampleMiddle
+	}
+
+	// If we make it here, then all three are different and the table is completely broken. We could consult more rows
+	// but really, odds are that it wouldn't really help.
+	return columnSampleStart
+}

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

@@ -0,0 +1,5 @@
+export * from './TableCellElement'
+export * from './TableElement'
+export * from './TableRowElement'
+export * from './withTables'
+export * from './TableModifications'

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

@@ -0,0 +1,335 @@
+import { Editor, Element, Node as SlateNode, NodeEntry, Path as SlatePath, Point, Range as SlateRange, Text, Transforms } from 'slate'
+import { ContemberEditor } from '../../../editor'
+import { isTableCellElement, TableCellElement, tableCellElementPlugin } from './TableCellElement'
+import { getTableElementColumnCount, getTableElementRowCount, isTableElement, TableElement, tableElementPlugin } from './TableElement'
+import { getTableCellCoordinates, selectTableCellContents } from './TableElementSelection'
+import { TableModifications } from './TableModifications'
+import { isTableRowElement, TableRowElement, tableRowElementPlugin } from './TableRowElement'
+import { ElementRenderer } from '../../../types'
+
+export const withTables = ({ renderTable, renderTableCell, renderTableRow }: {
+	renderTable: ElementRenderer<TableElement>
+	renderTableCell: ElementRenderer<TableCellElement>
+	renderTableRow: ElementRenderer<TableRowElement>
+}) => <E extends Editor>(editor: E): E => {
+	const {
+		deleteForward,
+		deleteBackward,
+		deleteFragment,
+		insertBreak,
+		onKeyDown,
+	} = editor
+
+	editor.registerElement(tableElementPlugin({ render: renderTable }))
+	editor.registerElement(tableCellElementPlugin({ render: renderTableCell }))
+	editor.registerElement(tableRowElementPlugin({ render: renderTableRow }))
+
+	Object.assign<Editor, Partial<Editor>>(editor, {
+		insertBreak: () => {
+			const closestBlockEntry = ContemberEditor.closestBlockEntry(editor)
+			if (closestBlockEntry && isTableCellElement(closestBlockEntry[0])) {
+				const selection = editor.selection
+				const [, closestBlockPath] = closestBlockEntry
+				const [cellStart, cellEnd] = Editor.edges(editor, closestBlockPath)
+
+				if (!selection) {
+					return insertBreak()
+				}
+
+				return Editor.withoutNormalizing(editor, () => {
+					Transforms.wrapNodes(editor, editor.createDefaultElement([]), {
+						at: {
+							anchor: cellStart,
+							focus: cellEnd,
+						},
+						match: node => Text.isText(node) || (Element.isElement(node) && editor.isInline(node)),
+					})
+
+					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,
+					})
+				})
+			}
+			insertBreak()
+		},
+		deleteBackward: unit => {
+			const selection = editor.selection
+			if (selection && SlateRange.isCollapsed(selection)) {
+				const closestBlockEntry = ContemberEditor.closestBlockEntry(editor)
+				if (
+					closestBlockEntry &&
+					isTableCellElement(closestBlockEntry[0]) &&
+					Point.equals(selection.focus, Editor.start(editor, closestBlockEntry[1]))
+				) {
+					return
+				}
+			}
+			deleteBackward(unit)
+		},
+		deleteForward: unit => {
+			const selection = editor.selection
+			if (selection && SlateRange.isCollapsed(selection)) {
+				const closestBlockEntry = ContemberEditor.closestBlockEntry(editor)
+				if (
+					closestBlockEntry &&
+					isTableCellElement(closestBlockEntry[0]) &&
+					Point.equals(selection.focus, Editor.end(editor, closestBlockEntry[1]))
+				) {
+					return
+				}
+			}
+			deleteForward(unit)
+		},
+		deleteFragment: () => {
+			const selection = editor.selection
+			if (!selection || SlateRange.isCollapsed(selection)) {
+				return deleteFragment()
+			}
+			const lowestCommonAncestorPath = SlatePath.common(selection.anchor.path, selection.focus.path)
+			const [lowestCommonAncestor] = Editor.node(editor, lowestCommonAncestorPath)
+
+			if (isTableElement(lowestCommonAncestor) || isTableRowElement(lowestCommonAncestor)) {
+				return // TODO nope for now
+			}
+			deleteFragment()
+		},
+		onKeyDown: event => {
+			const selection = editor.selection
+			if (
+				!selection ||
+				!(
+					event.key === 'Tab' ||
+					event.key === 'ArrowUp' ||
+					event.key === 'ArrowRight' ||
+					event.key === 'ArrowDown' ||
+					event.key === 'ArrowLeft' ||
+					event.key === 'Enter' ||
+					event.key === 'Backspace'
+				)
+			) {
+				return onKeyDown(event)
+			}
+			const closestBlockEntry = ContemberEditor.closestBlockEntry(editor, { at: selection })
+
+			if (!closestBlockEntry) {
+				return onKeyDown(event)
+			}
+			let cellElement: TableCellElement
+			let cellPath: SlatePath
+
+			if (!isTableCellElement(closestBlockEntry[0])) {
+				const parent = SlateNode.parent(editor, closestBlockEntry[1])
+				if (Element.isElement(closestBlockEntry[0]) && editor.isDefaultElement(closestBlockEntry[0]) && isTableCellElement(parent)) {
+					cellElement = parent
+					cellPath = SlatePath.parent(closestBlockEntry[1])
+				} else {
+					return onKeyDown(event)
+				}
+			} else {
+				[cellElement, cellPath] = closestBlockEntry
+			}
+			if (cellPath.length < 3) {
+				return onKeyDown(event)
+			}
+			const [rowIndex, columnIndex] = getTableCellCoordinates(editor, cellElement)
+			const tablePath = cellPath.slice(0, -2)
+			const tableElement = SlateNode.get(editor, tablePath) as TableElement
+			const rowCount = getTableElementRowCount(tableElement)
+			const columnCount = getTableElementColumnCount(tableElement)
+
+			if (rowCount === 0 || columnCount === 0) {
+				return
+			}
+
+			const moveSelectionBeforeTable = () => {
+				const pointBeforeTable = Editor.before(editor, tablePath)
+				if (!pointBeforeTable) {
+					return onKeyDown(event)
+				}
+				event.preventDefault()
+				return Transforms.select(editor, pointBeforeTable)
+			}
+			const moveSelectionAfterTable = () => {
+				const pointAfterTable = Editor.after(editor, tablePath)
+				if (!pointAfterTable) {
+					return onKeyDown(event)
+				}
+				event.preventDefault()
+				return Transforms.select(editor, pointAfterTable)
+			}
+
+			if (event.key === 'Tab') {
+				if (event.shiftKey) {
+					// Moving backwards
+					if (columnIndex > 0) {
+						event.preventDefault()
+						return selectTableCellContents(editor, tablePath, rowIndex, columnIndex - 1)
+					} else if (columnIndex === 0) {
+						if (rowIndex > 0) {
+							event.preventDefault()
+							return selectTableCellContents(editor, tablePath, rowIndex - 1, columnCount - 1)
+						}
+						return moveSelectionBeforeTable()
+					}
+				} else {
+					// Moving forwards
+					if (columnIndex < columnCount - 1) {
+						event.preventDefault()
+						return selectTableCellContents(editor, tablePath, rowIndex, columnIndex + 1)
+					} else if (columnIndex === columnCount - 1) {
+						// We're at the right edge of the table
+						if (rowIndex < rowCount - 1) {
+							event.preventDefault()
+							return selectTableCellContents(editor, tablePath, rowIndex + 1, 0)
+						} else if (rowIndex === rowCount - 1) {
+							return moveSelectionAfterTable()
+						}
+					}
+				}
+			}
+
+			if (event.key === 'ArrowLeft') {
+				if (!SlateRange.isCollapsed(selection)) {
+					return onKeyDown(event)
+				}
+				if (Point.equals(selection.focus, Editor.start(editor, cellPath))) {
+					if (columnIndex > 0) {
+						event.preventDefault()
+						return Transforms.select(editor, Editor.end(editor, [...tablePath, rowIndex, columnIndex - 1]))
+					} else if (columnIndex === 0) {
+						if (rowIndex > 0) {
+							event.preventDefault()
+							return Transforms.select(editor, Editor.end(editor, [...tablePath, rowIndex - 1, columnCount - 1]))
+						}
+						return moveSelectionBeforeTable()
+					}
+				}
+			} else if (event.key === 'ArrowRight') {
+				if (!SlateRange.isCollapsed(selection)) {
+					return onKeyDown(event)
+				}
+				if (Point.equals(selection.focus, Editor.end(editor, cellPath))) {
+					if (columnIndex < columnCount - 1) {
+						event.preventDefault()
+						return Transforms.select(editor, Editor.start(editor, [...tablePath, rowIndex, columnIndex + 1]))
+					} else if (columnIndex === columnCount - 1) {
+						if (rowIndex < rowCount - 1) {
+							event.preventDefault()
+							return Transforms.select(editor, Editor.start(editor, [...tablePath, rowIndex + 1, 0]))
+						} else if (rowIndex === rowCount - 1) {
+							return moveSelectionAfterTable()
+						}
+					}
+				}
+			} else if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
+				const withinDefault = editor.isDefaultElement(closestBlockEntry[0])
+				if (withinDefault) {
+					const relative = SlatePath.relative(closestBlockEntry[1], cellPath)
+					const defaultIndex = relative[0]
+					if (
+						(event.key === 'ArrowUp' && defaultIndex !== 0) ||
+						(event.key === 'ArrowDown' && defaultIndex !== cellElement.children.length - 1)
+					) {
+						return onKeyDown(event)
+					}
+				}
+				if (event.key === 'ArrowUp') {
+					if (rowIndex > 0) {
+						event.preventDefault()
+						const rowAboveEndPoint = Editor.end(editor, [...tablePath, rowIndex - 1, columnIndex])
+
+						if (!SlateRange.isCollapsed(selection)) {
+							return Transforms.select(editor, rowAboveEndPoint)
+						}
+						const minOffset = Math.min(selection.focus.offset, rowAboveEndPoint.offset)
+						return Transforms.select(editor, {
+							path: rowAboveEndPoint.path,
+							offset: minOffset,
+						})
+					}
+					return moveSelectionBeforeTable()
+				} else if (event.key === 'ArrowDown') {
+					if (rowIndex < rowCount - 1) {
+						event.preventDefault()
+						const rowBelowStatPoint = Editor.start(editor, [...tablePath, rowIndex + 1, columnIndex])
+
+						if (!SlateRange.isCollapsed(selection)) {
+							return Transforms.select(editor, rowBelowStatPoint)
+						}
+						const [rowBelowStatPointNode] = Editor.node(editor, rowBelowStatPoint) as NodeEntry<Text>
+
+						return Transforms.select(editor, {
+							path: rowBelowStatPoint.path,
+							offset: Math.min(selection.focus.offset, rowBelowStatPointNode.text.length),
+						})
+					}
+					return moveSelectionAfterTable()
+				}
+			} else if (event.ctrlKey || event.metaKey) {
+				if (event.key === 'Backspace') {
+					event.preventDefault()
+
+					if (event.altKey) {
+						TableModifications.deleteTableColumn(editor, tableElement, columnIndex)
+
+						if (columnCount > 1) {
+							const columnBefore = Editor.start(editor, [...tablePath, rowIndex, Math.max(0, columnIndex - 1)])
+
+							return Transforms.select(editor, columnBefore)
+						} else {
+							return moveSelectionBeforeTable()
+						}
+					} else {
+						TableModifications.deleteTableRow(editor, tableElement, rowIndex)
+
+						if (rowCount > 1) {
+							const rowAbove = Editor.start(editor, [...tablePath, Math.max(0, rowIndex - 1), columnIndex])
+
+							return Transforms.select(editor, rowAbove)
+						} else {
+							return moveSelectionBeforeTable()
+						}
+					}
+				} else if (event.key === 'Enter') {
+					event.preventDefault()
+
+					if (event.altKey) {
+						if (event.shiftKey) {
+							TableModifications.addTableColumn(editor, tableElement, columnIndex)
+							const columnBefore = Editor.start(editor, [...tablePath, rowIndex, Math.max(0, columnIndex)])
+
+							return Transforms.select(editor, columnBefore)
+						} else {
+							TableModifications.addTableColumn(editor, tableElement, columnIndex + 1)
+							const columnAfter = Editor.start(editor, [...tablePath, rowIndex, columnIndex + 1])
+
+							return Transforms.select(editor, columnAfter)
+						}
+					} else {
+						if (event.shiftKey) {
+							TableModifications.addTableRow(editor, tableElement, rowIndex)
+							const rowAbove = Editor.start(editor, [...tablePath, Math.max(0, rowIndex), columnIndex])
+
+							return Transforms.select(editor, rowAbove)
+						} else {
+							TableModifications.addTableRow(editor, tableElement, rowIndex + 1)
+							const rowBelowStat = Editor.start(editor, [...tablePath, rowIndex + 1, columnIndex])
+
+							return Transforms.select(editor, rowBelowStat)
+						}
+					}
+				}
+			}
+			onKeyDown(event)
+		},
+
+	})
+
+	return editor
+}

package/src/plugins/index.ts

@@ -0,0 +1,4 @@
+export * from './element'
+export * from './attributes'
+export * from './text'
+export * from './behaviour'

package/src/plugins/text/bold/boldMark.ts

@@ -0,0 +1,11 @@
+import { createElement } from 'react'
+import { isHotkey } from 'is-hotkey'
+import { EditorMarkPlugin } from '../../../types'
+
+export const boldMark = 'isBold'
+
+export const boldMarkPlugin: EditorMarkPlugin = {
+	type: boldMark,
+	isHotKey: isHotkey('mod+b'),
+	render: ({ children }) => createElement('b', undefined, children),
+}

package/src/plugins/text/bold/index.ts

@@ -0,0 +1,2 @@
+export * from './withBold'
+export * from './boldMark'

package/src/plugins/text/bold/withBold.ts

@@ -0,0 +1,15 @@
+import { boldMark, boldMarkPlugin } from './boldMark'
+import { EditorPlugin } from '../../../types'
+import { createMarkHtmlDeserializer } from '../../behaviour'
+
+
+export const withBold = (): EditorPlugin => editor => {
+	editor.registerMark(boldMarkPlugin)
+	editor.htmlDeserializer.registerPlugin(
+		createMarkHtmlDeserializer(
+			boldMark,
+			el => el.nodeName === 'STRONG' || (el.nodeName === 'B' && !el.id.startsWith('docs-internal-guid')),
+			el => ['italic', 'oblique'].includes(el.style.fontWeight),
+		),
+	)
+}

package/src/plugins/text/code/codeMark.ts

@@ -0,0 +1,11 @@
+import { isHotkey } from 'is-hotkey'
+import { createElement } from 'react'
+import { EditorMarkPlugin } from '../../../types'
+
+export const codeMark = 'isCode'
+
+export const codeMarkPlugin: EditorMarkPlugin = {
+	type: codeMark,
+	isHotKey: isHotkey('mod+`'),
+	render: ({ children }) => createElement('code', undefined, children),
+}

package/src/plugins/text/code/index.ts

@@ -0,0 +1,2 @@
+export * from './withCode'
+export * from './codeMark'

package/src/plugins/text/code/withCode.ts

@@ -0,0 +1,10 @@
+import { Editor as SlateEditor } from 'slate'
+import { codeMarkPlugin } from './codeMark'
+import { EditorPlugin } from '../../../types'
+
+
+export const withCode = (): EditorPlugin => editor => {
+	editor.registerMark(codeMarkPlugin)
+
+	return editor
+}

package/src/plugins/text/highlight/highlightMark.ts

@@ -0,0 +1,11 @@
+import { isHotkey } from 'is-hotkey'
+import { createElement } from 'react'
+import { EditorMarkPlugin } from '../../../types'
+
+export const highlightMark = 'isHighlighted'
+
+export const highlightMarkPlugin: EditorMarkPlugin = {
+	type: highlightMark,
+	isHotKey: isHotkey('mod+e'),
+	render: ({ children }) => createElement('em', undefined, children),
+}

package/src/plugins/text/highlight/index.ts

@@ -0,0 +1,2 @@
+export * from './withHighlight'
+export * from './highlightMark'

package/src/plugins/text/highlight/withHighlight.ts

@@ -0,0 +1,10 @@
+import { Editor as SlateEditor } from 'slate'
+import { highlightMarkPlugin } from './highlightMark'
+import { EditorPlugin } from '../../../types'
+
+
+export const withHighlight = (): EditorPlugin => editor => {
+	editor.registerMark(highlightMarkPlugin)
+
+	return editor
+}