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

package/src/plugins/behaviour/paste/HtmlDeserializer.ts

@@ -0,0 +1,180 @@
+import { Descendant, Element as SlateElement, Text as SlateText } from 'slate'
+import { HtmlDeserializerNextCallback, HtmlDeserializerPlugin } from '../../../types/htmlDeserializer'
+import { EditorDefaultElementFactory } from '../../../types/editor'
+
+const ignoredElements = ['SCRIPT', 'STYLE', 'TEMPLATE']
+
+export interface TextAttrs {
+	[key: string]: any
+}
+
+export type NodesWithTypeFiltered =
+	| { texts: Descendant[]; elements?: undefined }
+	| { elements: SlateElement[]; texts?: undefined }
+
+export type NodesWithType = NodesWithTypeFiltered | null
+
+export class HtmlDeserializer {
+	constructor(
+		public createDefaultElement: EditorDefaultElementFactory,
+		private plugins: HtmlDeserializerPlugin[],
+	) {
+	}
+
+	registerPlugin(plugin: HtmlDeserializerPlugin, prepend: boolean = true) {
+		prepend ? this.plugins.unshift(plugin) : this.plugins.push(plugin)
+	}
+
+	public processNodeListPaste(nodeList: Node[], cumulativeTextAttrs: TextAttrs) {
+		for (const plugin of this.plugins) {
+			const result = plugin.processNodeListPaste?.({ nodeList, cumulativeTextAttrs, deserializer: this }) ?? null
+			if (result !== null) {
+				return result
+			}
+		}
+		const processed: (
+			| { text: SlateText | SlateElement; element?: undefined; isWhiteSpace: boolean }
+			| { element: SlateElement; text?: undefined }
+			)[] = []
+
+		for (const childNode of nodeList) {
+			const isWhiteSpace = childNode.nodeType === Node.TEXT_NODE && childNode.textContent?.match(/^\s*$/) !== null
+
+			// Block
+			const attrs = this.processWithAttributeProcessor(childNode, cumulativeTextAttrs)
+			const result =
+				childNode instanceof HTMLElement
+					? this.processBlockPaste(
+						childNode,
+						cumulativeTextAttrs,
+					)
+					: null
+			if (result !== null) {
+				processed.push(...(Array.isArray(result) ? result : [result]).map(element => ({ element })))
+			} else {
+				// Inline
+				const result = this.deserializeTextNode(childNode, cumulativeTextAttrs)
+				if (result !== null) {
+					processed.push(...result.map(text => ({ text, isWhiteSpace })))
+				} else {
+					// Unknown element
+					const deserializedChildren = this.processNodeListPaste(
+						Array.from(childNode.childNodes),
+						attrs,
+					)
+					processed.push(
+						...(deserializedChildren === null
+							? []
+							: deserializedChildren.texts !== undefined
+								? deserializedChildren.texts.map(text => ({ text, isWhiteSpace }))
+								: deserializedChildren.elements.map(element => ({ element }))),
+					)
+				}
+			}
+		}
+
+		if (processed.length === 0) {
+			return null
+		}
+
+		const containsBlock = processed.find(({ element }) => element !== undefined) !== undefined
+
+		if (containsBlock) {
+			return {
+				elements: processed.flatMap(item => {
+					if (item.text !== undefined) {
+						return item.isWhiteSpace ? [] : [this.createDefaultElement([item.text])]
+					} else if (item.element !== undefined) {
+						return [item.element]
+					}
+					{
+						return []
+					}
+				}),
+			}
+		} else {
+			return { texts: processed.map(item => item.text as SlateText) }
+		}
+	}
+
+	deserializeInline(list: NodeList | Node[], cumulativeTextAttrs: TextAttrs): Descendant[] {
+		return Array.from(list).flatMap(childNode => {
+			const result = this.deserializeTextNode(childNode, cumulativeTextAttrs)
+			if (result !== null) {
+				return result
+			} else {
+				const attrs = this.processWithAttributeProcessor(childNode, cumulativeTextAttrs)
+				return this.deserializeInline(childNode.childNodes, attrs)
+			}
+		})
+	}
+
+	deserializeBlocks(list: Node[], cumulativeTextAttrs: TextAttrs): Descendant[] {
+		const result = this.processNodeListPaste(list, cumulativeTextAttrs)
+		return result?.texts ?? result?.elements ?? []
+	}
+
+
+	private deserializeTextNode(node: Node, cumulativeTextAttrs: TextAttrs): Descendant[] | null {
+		if (node.nodeType === Node.TEXT_NODE) {
+			const text = node.textContent ?? ''
+			return [{ ...cumulativeTextAttrs, text: text.replace(/[ \t]*(?:\r?\n[ \t]*)+/g, ' ') }]
+		} else if (node instanceof HTMLElement) {
+			const result = this.processInlinePaste(
+				node,
+				cumulativeTextAttrs,
+			)
+			if (result !== null) {
+				return Array.isArray(result) ? result : [result]
+			}
+		}
+
+		return null
+	}
+
+	private processInlinePaste(element: HTMLElement, cumulativeTextAttrs: TextAttrs): (SlateElement | SlateText)[] | SlateElement | SlateText | null {
+		if (ignoredElements.includes(element.tagName)) {
+			return []
+		}
+		if (element.tagName === 'BR') {
+			return { ...cumulativeTextAttrs, text: ' ' }
+		}
+		const next: HtmlDeserializerNextCallback = (list, cta) => {
+			const attrs = this.processWithAttributeProcessor(element, cta)
+			return this.deserializeInline(list, attrs)
+		}
+		for (const plugin of this.plugins) {
+			const result = plugin.processInlinePaste?.({ element, next, cumulativeTextAttrs, deserializer: this }) ?? null
+			if (result !== null) {
+				return result
+			}
+		}
+		return null
+	}
+
+	private processWithAttributeProcessor(element: Node, cumulativeTextAttrs: TextAttrs): TextAttrs {
+		if (!(element instanceof HTMLElement)) {
+			return {}
+		}
+		return this.plugins.reduce(
+			(cta, plugin) => plugin.processAttributesPaste?.({ element, cumulativeTextAttrs, deserializer: this  }) ?? cta,
+			cumulativeTextAttrs,
+		)
+	}
+
+	private processBlockPaste(element: HTMLElement, cumulativeTextAttrs: TextAttrs): SlateElement[] | SlateElement | null {
+		if (ignoredElements.includes(element.tagName)) {
+			return []
+		}
+		const next: HtmlDeserializerNextCallback = (list, cta) =>
+			this.deserializeBlocks(Array.from(list), { ...cumulativeTextAttrs, ...cta })
+
+		for (const plugin of this.plugins) {
+			const result = plugin.processBlockPaste?.({ element, next, cumulativeTextAttrs, deserializer: this }) ?? null
+			if (result !== null) {
+				return result
+			}
+		}
+		return null
+	}
+}

package/src/plugins/behaviour/paste/createMarkHtmlDeserializer.ts

@@ -0,0 +1,13 @@
+import { HtmlDeserializerPlugin } from '../../../types/htmlDeserializer'
+
+export const createMarkHtmlDeserializer = (markType: string, tagMatcher: (el: HTMLElement) => boolean, attributeMatcher: (el: HTMLElement) => boolean): HtmlDeserializerPlugin => ({
+	processAttributesPaste: ({ element, cumulativeTextAttrs: cta }) => {
+		return attributeMatcher(element) ? { ...cta, [markType]: true } : cta
+	},
+	processInlinePaste: ({ element, next, cumulativeTextAttrs }) => {
+		if (tagMatcher(element)) {
+			return next(element.childNodes, { ...cumulativeTextAttrs, [markType]: true })
+		}
+		return null
+	},
+})

package/src/plugins/behaviour/paste/index.ts

@@ -0,0 +1,2 @@
+export * from './createMarkHtmlDeserializer'
+export * from './withPaste'

package/src/plugins/behaviour/paste/withPaste.ts

@@ -0,0 +1,24 @@
+import { Editor, Transforms } from 'slate'
+import { EditorPlugin } from '../../../types/plugins'
+import { HtmlDeserializer } from './HtmlDeserializer'
+import { HtmlDeserializerPlugin } from '../../../types/htmlDeserializer'
+
+
+export const withPaste = (editor: Editor) => {
+	const { insertData } = editor
+	const htmlDeserializer = new HtmlDeserializer(editor.createDefaultElement, [])
+	editor.insertData = data => {
+		if (data.getData('application/x-slate-fragment')) {
+			return insertData(data)
+		}
+		const html = data.getData('text/html')
+		if (!html) {
+			return insertData(data)
+		}
+		const document = new DOMParser().parseFromString(html, 'text/html')
+		const nodes = Array.from(document.body.childNodes)
+		const result = htmlDeserializer.deserializeBlocks(nodes, {})
+		Transforms.insertFragment(editor, result)
+	}
+	editor.htmlDeserializer = htmlDeserializer
+}

package/src/plugins/element/anchors/AnchorElement.ts

@@ -0,0 +1,49 @@
+import { Editor as SlateEditor, Editor, Element as SlateElement, Node as SlateNode, Path, Range as SlateRange, Transforms } from 'slate'
+import { AnchorModifications } from './AnchorModifications'
+import { EditorElementPlugin, ElementRenderer } from '../../../types'
+
+export const anchorElementType = 'anchor' as const
+
+export interface AnchorElement extends SlateElement {
+	type: typeof anchorElementType
+	href: string
+	children: SlateEditor['children']
+}
+
+export const isAnchorElement = (element: SlateNode): element is AnchorElement => SlateElement.isElement(element) && element.type === anchorElementType
+
+export const isAnchorElementActive = (editor: Editor) => {
+	const [link] = Editor.nodes(editor, { match: isAnchorElement })
+	return !!link
+}
+
+
+export const anchorElementPlugin = ({ render }: { render: ElementRenderer<AnchorElement> }): EditorElementPlugin<AnchorElement> => ({
+	type: anchorElementType,
+	isInline: true,
+	render,
+	isActive: ({ editor }) => isAnchorElementActive(editor),
+	toggleElement: ({ editor, suchThat }) => {
+		if (isAnchorElementActive(editor)) {
+			AnchorModifications.unwrapAnchor(editor)
+		} else {
+			const href = suchThat?.href ?? prompt('Insert the URL:')
+			if (!href) {
+				return
+			}
+			AnchorModifications.wrapAnchor(editor, href)
+		}
+	},
+	normalizeNode: ({ element, path, editor, preventDefault }) => {
+		if (SlateNode.string(element) === '') {
+			const selection = editor.selection
+			Transforms.removeNodes(editor, {
+				at: path,
+			})
+			if (selection && SlateRange.isCollapsed(selection) && Path.isCommon(path, selection.focus.path)) {
+				Transforms.select(editor, Path.parent(path))
+			}
+			return preventDefault()
+		}
+	},
+})

package/src/plugins/element/anchors/AnchorHtmlDeserializer.ts

@@ -0,0 +1,18 @@
+import { HtmlDeserializerPlugin } from '../../../types'
+
+export const anchorHtmlDeserializer: HtmlDeserializerPlugin  = {
+	processInlinePaste: ({ element, next, cumulativeTextAttrs }) => {
+		if (element.tagName === 'A' && element.getAttribute('href')) {
+			const href = element.getAttribute('href')
+
+			return [
+				{
+					type: 'anchor',
+					href,
+					children: next(element.childNodes, cumulativeTextAttrs),
+				},
+			]
+		}
+		return null
+	},
+}

package/src/plugins/element/anchors/AnchorModifications.ts

@@ -0,0 +1,29 @@
+import { Editor, Range, Transforms } from 'slate'
+import { AnchorElement, isAnchorElement, isAnchorElementActive } from './AnchorElement'
+
+export class AnchorModifications {
+	public static unwrapAnchor(editor: Editor) {
+		Transforms.unwrapNodes(editor, { match: isAnchorElement })
+	}
+
+	public static wrapAnchor(editor: Editor, url: string) {
+		if (isAnchorElementActive(editor)) {
+			AnchorModifications.unwrapAnchor(editor)
+		}
+
+		const selection = editor.selection
+		const isCollapsed = selection ? Range.isCollapsed(selection!) : false
+		const anchor: AnchorElement = {
+			type: 'anchor',
+			href: url,
+			children: isCollapsed ? [{ text: url }] : [{ text: '' }],
+		}
+
+		if (isCollapsed) {
+			Transforms.insertNodes(editor, anchor)
+		} else {
+			Transforms.wrapNodes(editor, anchor, { split: true })
+			Transforms.collapse(editor, { edge: 'end' })
+		}
+	}
+}

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

@@ -0,0 +1,3 @@
+export * from './AnchorElement'
+export * from './AnchorHtmlDeserializer'
+export * from './withAnchors'

package/src/plugins/element/anchors/withAnchors.ts

@@ -0,0 +1,23 @@
+import { Editor } from 'slate'
+import { AnchorModifications } from './AnchorModifications'
+import { AnchorElement, anchorElementPlugin } from './AnchorElement'
+import { anchorHtmlDeserializer } from './AnchorHtmlDeserializer'
+import { ElementRenderer } from '../../../types'
+import { parseUrl } from '../../../internal/utils'
+
+export const withAnchors = ({ render }: { render: ElementRenderer<AnchorElement> }) => <E extends Editor>(editor: E): E => {
+	const { insertText } = editor
+
+	editor.registerElement(anchorElementPlugin({ render }))
+	editor.htmlDeserializer.registerPlugin(anchorHtmlDeserializer)
+
+	editor.insertText = text => {
+		if (text && parseUrl(text) !== undefined) {
+			AnchorModifications.wrapAnchor(editor, text)
+		} else {
+			insertText(text)
+		}
+	}
+
+	return editor
+}

package/src/plugins/element/headings/HeadingElement.ts

@@ -0,0 +1,52 @@
+import { Editor, Editor as SlateEditor, Element, Node as SlateNode, Path as SlatePath, Transforms } from 'slate'
+import { ContemberEditor } from '../../../editor'
+import { AlignDirection } from '../../attributes'
+import { EditorElementPlugin, ElementRenderer } from '../../../types'
+
+export const headingElementType = 'heading' as const
+
+export interface HeadingElement extends Element {
+	type: typeof headingElementType
+	level: 1 | 2 | 3 | 4 | 5 | 6
+	isNumbered?: boolean
+	align?: AlignDirection
+	children: SlateEditor['children']
+}
+
+export const isHeadingElement = (
+	element: SlateNode,
+	suchThat?: Partial<HeadingElement>,
+): element is HeadingElement => ContemberEditor.isElementType(element, headingElementType, suchThat)
+
+export const ejectHeadingElement = (editor: Editor, elementPath: SlatePath) => {
+	ContemberEditor.ejectElement(editor, elementPath)
+	Transforms.setNodes(editor, { type: editor.defaultElementType }, { at: elementPath })
+}
+
+
+export const headingElementPlugin = ({ render }: { render: ElementRenderer<HeadingElement> }): EditorElementPlugin<HeadingElement> => ({
+	type: headingElementType,
+	render,
+	canContainAnyBlocks: false,
+	acceptsAttributes: ({ editor, suchThat }) => {
+		return 'align' in suchThat
+	},
+	// TODO in the following function, we need to conditionally trim the selection so that it doesn't potentially
+	// 	include empty strings at the edges of top-level elements.
+	toggleElement: ({ editor, suchThat }) => {
+		SlateEditor.withoutNormalizing(editor, () => {
+			const headings = Array.from(Editor.nodes(editor, { match: it => isHeadingElement(it, suchThat) }))
+			if (headings.length) {
+				for (const heading of headings) {
+					ejectHeadingElement(editor, heading[1])
+				}
+			} else {
+				Transforms.setNodes(editor, {
+					...suchThat,
+					children: [],
+					type: headingElementType,
+				})
+			}
+		})
+	},
+})

package/src/plugins/element/headings/HeadingHtmlDeserializer.ts

@@ -0,0 +1,20 @@
+import { headingElementType } from './HeadingElement'
+import { HtmlDeserializerPlugin } from '../../../types'
+import { EditorPasteUtils } from '../../../internal/utils/EditorPasteUtils'
+
+export const headingHtmlDeserializer: HtmlDeserializerPlugin = {
+	processBlockPaste: ({ element, next, cumulativeTextAttrs }) => {
+		const match = element.nodeName.match(/^H(?<level>[1-6])$/)
+		if (match !== null) {
+			const isNumbered = (element.getAttribute('style')?.match(/mso-list:\w+ level\d+ \w+/) ?? null) !== null
+			const children = isNumbered ? EditorPasteUtils.wordPasteListItemContent(element.childNodes) : element.childNodes
+			return {
+				type: headingElementType,
+				level: parseInt(match.groups!.level),
+				children: next(children, cumulativeTextAttrs),
+				isNumbered,
+			}
+		}
+		return null
+	},
+}

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

@@ -0,0 +1,3 @@
+export * from './HeadingElement'
+export * from './HeadingHtmlDeserializer'
+export * from './withHeadings'

package/src/plugins/element/headings/withHeadings.ts

@@ -0,0 +1,120 @@
+import { Editor, Editor as SlateEditor, Element as SlateElement, Point, Range as SlateRange, Transforms } from 'slate'
+import { ContemberEditor } from '../../../editor'
+import {
+	ejectHeadingElement,
+	HeadingElement,
+	headingElementPlugin,
+	headingElementType,
+	isHeadingElement,
+} from './HeadingElement'
+import { headingHtmlDeserializer } from './HeadingHtmlDeserializer'
+import { ElementRenderer } from '../../../types'
+
+export const withHeadings = ({ render }: { render: ElementRenderer<HeadingElement> }) => <E extends Editor>(editor: E): E => {
+	const {
+		canToggleElement,
+		insertBreak,
+		deleteBackward,
+	} = editor
+
+
+	editor.registerElement(headingElementPlugin({ render }))
+	editor.htmlDeserializer.registerPlugin(headingHtmlDeserializer)
+
+	// T O D O cache this
+	// e.getNumberedHeadingSection = function recurse(element): number[] {
+	// 	const [topLevelIndex] = ReactEditor.findPath(e, element)
+	// 	let previousNumberedHeadingIndex: number = topLevelIndex - 1
+	//
+	// 	let previousNumberedHeading: SlateNode
+	// 	do {
+	// 		previousNumberedHeading = e.children[previousNumberedHeadingIndex--]
+	// 	} while (
+	// 		previousNumberedHeadingIndex >= 0 &&
+	// 		!(isHeading(previousNumberedHeading) && previousNumberedHeading.isNumbered)
+	// 	)
+	//
+	// 	if (previousNumberedHeadingIndex < 0) {
+	// 		return Array(element.level).fill(1)
+	// 	}
+	// 	const previousHeadingSection = recurse(previousNumberedHeading as HeadingElement)
+	//
+	// 	// Ensures the correct length - this is essentially padRight with zeros
+	// 	const normalizedPrevious = previousHeadingSection.concat(Array(element.level).fill(0)).slice(0, element.level)
+	//
+	// 	normalizedPrevious[normalizedPrevious.length - 1]++
+	//
+	// 	// The map isn't really necessary for now but would be if we introduced deeper levels
+	// 	return normalizedPrevious.map(level => Math.max(level, 1))
+	// }
+
+	editor.canToggleElement = (elementType, suchThat) => {
+		if (elementType !== headingElementType) {
+			return canToggleElement(elementType, suchThat)
+		}
+		if (!editor.selection) {
+			return false
+		}
+		const closestBlockEntry = ContemberEditor.closestBlockEntry(editor)
+		if (closestBlockEntry === undefined) {
+			return true
+		}
+		const [closestBlockElement] = closestBlockEntry
+
+		return (
+			SlateElement.isElement(closestBlockElement) && (
+				editor.isDefaultElement(closestBlockElement)
+				|| isHeadingElement(closestBlockElement)
+			)
+		)
+	}
+
+
+
+	editor.insertBreak = () => {
+		SlateEditor.withoutNormalizing(editor, () => {
+			insertBreak()
+
+			const { selection } = editor
+
+			if (selection === null || SlateRange.isExpanded(selection)) {
+				return
+			}
+			const [topLevelElement, path] = SlateEditor.node(editor, selection, {
+				depth: 1,
+			})
+			if (isHeadingElement(topLevelElement) && SlateEditor.isEmpty(editor, topLevelElement)) {
+				ejectHeadingElement(editor, path)
+			}
+		})
+	}
+
+	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 heading.
+		// It's just a way to early-exit.
+
+		const closestNumberedEntry = Editor.above<HeadingElement>(editor, {
+			match: node => SlateElement.isElement(node) && isHeadingElement(node, { isNumbered: true }),
+		})
+		if (closestNumberedEntry === undefined) {
+			return deleteBackward(unit)
+		}
+		const [, headingPath] = closestNumberedEntry
+		const headingStartPoint = Editor.start(editor, headingPath)
+
+		if (!Point.equals(headingStartPoint, selection.focus)) {
+			return deleteBackward(unit)
+		}
+		Transforms.setNodes(
+			editor,
+			{ isNumbered: null }, // null removes the key altogether
+			{ at: headingPath },
+		)
+	}
+
+	return editor
+}

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

@@ -0,0 +1,48 @@
+import { Editor as SlateEditor, Editor, Element as SlateElement, Node as SlateNode, Range as SlateRange, Transforms } from 'slate'
+import { EditorElementPlugin, ElementRenderer } from '../../../types'
+
+export const horizontalRuleElementType = 'horizontalRule' as const
+
+export interface HorizontalRuleElement extends SlateElement {
+	type: typeof horizontalRuleElementType
+	children: SlateEditor['children']
+}
+
+export const isHorizontalRuleElement = (element: SlateNode): element is HorizontalRuleElement =>
+	SlateElement.isElement(element) && element.type === horizontalRuleElementType
+
+export const isHorizontalRuleElementActive = (editor: Editor) => {
+	const [hr] = Editor.nodes(editor, { match: isHorizontalRuleElement })
+	return !!hr
+}
+
+export const horizontalRuleElementPlugin = ({ render }: { render: ElementRenderer<HorizontalRuleElement> }): EditorElementPlugin<HorizontalRuleElement> => ({
+	type: horizontalRuleElementType,
+	render,
+	isVoid: true,
+	toggleElement: ({ editor }) => {
+		if (isHorizontalRuleElementActive(editor)) {
+			removeHorizontalRule(editor)
+		} else {
+			insertHorizontalRule(editor)
+		}
+	},
+})
+
+const removeHorizontalRule = (editor: Editor) => {
+	Transforms.removeNodes(editor, { match: isHorizontalRuleElement })
+}
+
+const insertHorizontalRule = (editor: Editor) => {
+	const selection = editor.selection
+	const isCollapsed = selection ? SlateRange.isCollapsed(selection!) : false
+
+	if (!isCollapsed || isHorizontalRuleElementActive(editor)) {
+		return
+	}
+	const horizontalRule: HorizontalRuleElement = {
+		type: horizontalRuleElementType,
+		children: [{ text: '' }],
+	}
+	Transforms.insertNodes(editor, horizontalRule)
+}

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

@@ -0,0 +1,2 @@
+export * from './HorizontalRuleElement'
+export * from './withHorizontalRules'