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

package/src/editor/methods/closest.ts

@@ -0,0 +1,21 @@
+import { Editor as SlateEditor, Editor, Element, Location, NodeEntry, Text } from 'slate'
+
+export const closest = <E extends SlateEditor>(
+	editor: E,
+	options: {
+		at?: Location
+		match: (node: Editor | Element) => boolean
+	},
+): NodeEntry<Editor | Element> | undefined => {
+	const entries = Editor.levels<Editor | Element>(editor, {
+		at: options.at,
+		match: node => {
+			return !Text.isText(node) && options.match(node)
+		},
+		reverse: true,
+	})
+	for (const entry of entries) {
+		return entry
+	}
+	return undefined
+}

package/src/editor/methods/closestBlockEntry.ts

@@ -0,0 +1,14 @@
+import { Editor as SlateEditor, Editor, Location, Element } from 'slate'
+import { closest } from './closest'
+
+export const closestBlockEntry = <E extends SlateEditor>(
+	editor: E,
+	options?: {
+		at?: Location
+		match?: (node: Element) => boolean
+	},
+) =>
+	closest(editor, {
+		at: options?.at,
+		match: node => !Editor.isEditor(node) && Editor.isBlock(editor, node) && (options?.match ? options.match(node) : true),
+	})

package/src/editor/methods/closestViableBlockContainerEntry.ts

@@ -0,0 +1,14 @@
+import type { Location as SlateLocation, NodeEntry } from 'slate'
+import { Editor as SlateEditor, Element as SlateElement } from 'slate'
+import { closest } from './closest'
+
+export const closestViableBlockContainerEntry = <E extends SlateEditor>(
+	editor: E,
+	options?: {
+		at?: SlateLocation
+	},
+): NodeEntry<SlateElement | SlateEditor> | undefined =>
+	closest(editor, {
+		at: options?.at,
+		match: node => editor.canContainAnyBlocks(node),
+	})

package/src/editor/methods/ejectElement.ts

@@ -0,0 +1,14 @@
+import { Editor as SlateEditor, Element as SlateElement, Node as SlateNode, Path, Transforms } from 'slate'
+
+export const ejectElement = <E extends SlateEditor>(editor: E, path: Path) => {
+	const element = SlateNode.get(editor, path)
+
+	if (!SlateElement.isElement(element)) {
+		return
+	}
+	const { children, ...otherProperties } = element
+
+	Transforms.unsetNodes(editor, Object.keys(otherProperties), {
+		at: path,
+	})
+}

package/src/editor/methods/elementToSpecifics.ts

@@ -0,0 +1,8 @@
+import { Element as SlateElement } from 'slate'
+
+export const elementToSpecifics = <Element extends SlateElement = SlateElement>(
+	element: Element,
+): Partial<Element> => {
+	const { type, children, referenceId, ...specifics } = element
+	return specifics as Partial<Element>
+}

package/src/editor/methods/getElementDataAttributes.ts

@@ -0,0 +1,22 @@
+import type { Scalar } from '@contember/react-binding'
+import { Element as SlateElement } from 'slate'
+
+export interface ElementDataAttributes {
+	[dataAttribute: string]: Scalar
+}
+
+export const getElementDataAttributes = <Element extends SlateElement = SlateElement>(
+	element: Element,
+	attributeNamePrefix: string = 'contember',
+): ElementDataAttributes => {
+	const { children, ...extendedSpecifics } = element
+
+	return Object.fromEntries(
+		Object.entries(extendedSpecifics)
+			.filter(([, value]) => {
+				const t = typeof value
+				return t === 'string' || t === 'number' || t === 'boolean'
+			})
+			.map(([attribute, value]) => [`data-${attributeNamePrefix}-${attribute.toLowerCase()}`, value as Scalar]),
+	)
+}

package/src/editor/methods/getPreviousSibling.ts

@@ -0,0 +1,18 @@
+import { Editor as SlateEditor, Node as SlateNode, NodeEntry, Path as SlatePath } from 'slate'
+
+export const getPreviousSibling = <
+	E extends SlateEditor = SlateEditor,
+	CurrentNode extends SlateNode = SlateNode,
+	PreviousNode extends SlateNode = CurrentNode,
+>(
+	editor: E,
+	node: CurrentNode,
+	nodePath: SlatePath,
+): NodeEntry<PreviousNode> | undefined => {
+	const lastPathIndex = nodePath[nodePath.length - 1]
+	if (lastPathIndex === 0) {
+		return undefined
+	}
+	const previousPath = nodePath.slice(0, -1).concat(lastPathIndex - 1)
+	return [SlateNode.get(editor, previousPath) as PreviousNode, previousPath]
+}

package/src/editor/methods/hasMarks.ts

@@ -0,0 +1,30 @@
+import { Editor as SlateEditor, Node as SlateNode, Path, Text as SlateText } from 'slate'
+import { TextSpecifics } from '../../types/editor'
+
+export const hasMarks = <T extends SlateText, E extends SlateEditor>(
+	editor: E,
+	marks: TextSpecifics<T>,
+	options: {
+		from?: Path
+		to?: Path
+	} = {},
+) => {
+	const from = options.from ?? editor.selection?.anchor.path
+	const to = options.to ?? editor.selection?.focus.path
+
+	if (!from && !to) {
+		return false
+	}
+
+	for (const [text] of SlateNode.texts(editor, {
+		from,
+		to,
+	})) {
+		for (const markName in marks) {
+			if (!(markName in text) || text[markName] !== (marks as any)[markName]) {
+				return false
+			}
+		}
+	}
+	return true
+}

package/src/editor/methods/hasParentOfType.ts

@@ -0,0 +1,18 @@
+import { Editor as SlateEditor, Element as SlateElement, Node as SlateNode, NodeEntry, Path as SlatePath } from 'slate'
+import { ContemberEditor } from '../index'
+
+export const hasParentOfType = <Editor extends SlateEditor, Element extends SlateElement>(
+	editor: Editor,
+	nodeEntry: NodeEntry<SlateNode | SlateElement>,
+	type: Element['type'],
+	suchThat?: Partial<Element>,
+): boolean => {
+	const [, path] = nodeEntry
+	if (path.length === 1) {
+		return false // Doesn't have a parent
+	}
+	const parentPath = SlatePath.parent(path)
+	const parent = SlateNode.get(editor, parentPath)
+
+	return ContemberEditor.isElementType(parent, type, suchThat)
+}

package/src/editor/methods/index.ts

@@ -0,0 +1,19 @@
+export * from './addMarks'
+export * from './canToggleMark'
+export * from './closest'
+export * from './closestBlockEntry'
+export * from './closestViableBlockContainerEntry'
+export * from './ejectElement'
+export * from './elementToSpecifics'
+export * from './getElementDataAttributes'
+export * from './hasMarks'
+export * from './hasParentOfType'
+export * from './getPreviousSibling'
+export * from './isElementType'
+export * from './permissivelyDeserializeNodes'
+export * from './removeMarks'
+export * from './serializeNodes'
+export * from './strictlyDeserializeNodes'
+export * from './textToSpecifics'
+export * from './toLatestFormat'
+export * from './topLevelNodes'

package/src/editor/methods/isElementType.ts

@@ -0,0 +1,29 @@
+import { Element as SlateElement, Node as SlateNode } from 'slate'
+
+export const isElementType = <Element extends SlateElement>(
+	element: SlateNode,
+	type: Element['type'],
+	suchThat?: Partial<Element>,
+): boolean => {
+	if (!SlateElement.isElement(element) || element.type !== type) {
+		return false
+	}
+	if (suchThat === undefined) {
+		return true
+	}
+
+	for (const prop in suchThat) {
+		const propValue = suchThat[prop]
+		const propPresent = prop in element
+
+		if (!propValue && !propPresent) {
+			// Falsy values get special treatment.
+			continue
+		}
+
+		if (!propPresent || (element as Element)[prop as keyof Element] !== propValue) {
+			return false
+		}
+	}
+	return true
+}

package/src/editor/methods/permissivelyDeserializeNodes.ts

@@ -0,0 +1,30 @@
+import { toLatestFormat } from './toLatestFormat'
+import { Editor as SlateEditor, Element as SlateElement, Text as SlateText } from 'slate'
+import { SerializableEditorNode } from '../../types/editor'
+
+export const permissivelyDeserializeNodes = <E extends SlateEditor>(
+	editor: E,
+	serializedElement: string,
+	errorMessage?: string,
+): Array<SlateElement | SlateText> => {
+	let deserialized: SerializableEditorNode | SlateElement | null = null
+	try {
+		// It is important that only the JSON.parse call is inside the try block.
+		// We don't want to catch other exceptions from here.
+		deserialized = JSON.parse(serializedElement)
+	} catch (e) {}
+
+	if (typeof deserialized !== 'object' || deserialized === null) {
+		return [editor.createDefaultElement([{ text: serializedElement }])]
+	}
+
+	if ('formatVersion' in deserialized) {
+		return toLatestFormat(editor, deserialized as SerializableEditorNode).children
+	}
+
+	// If no format version is specified, assume zero.
+	return toLatestFormat(editor, {
+		formatVersion: 0,
+		children: [deserialized],
+	}).children
+}

package/src/editor/methods/removeMarks.ts

@@ -0,0 +1,10 @@
+import { Editor as SlateEditor, Editor, Text as SlateText } from 'slate'
+import { TextSpecifics } from '../../types/editor'
+
+export const removeMarks = <T extends SlateText, E extends SlateEditor>(editor: E, marks: TextSpecifics<T>) => {
+	Editor.withoutNormalizing(editor, () => {
+		for (const mark in marks) {
+			Editor.removeMark(editor, mark)
+		}
+	})
+}

package/src/editor/methods/serializeNodes.ts

@@ -0,0 +1,18 @@
+import { Editor as SlateEditor, Element as SlateElement, Text as SlateText } from 'slate'
+import { SerializableEditorNode } from '../../types/editor'
+
+export const serializeNodes = <E extends SlateEditor>(
+	editor: E,
+	elements: Array<SlateElement | SlateText>,
+	errorMessage?: string,
+) => {
+	try {
+		const serialized: SerializableEditorNode = {
+			formatVersion: editor.formatVersion,
+			children: elements,
+		}
+		return JSON.stringify(serialized)
+	} catch (e) {
+		throw new Error(errorMessage || `Editor: serialization error`)
+	}
+}

package/src/editor/methods/strictlyDeserializeNodes.ts

@@ -0,0 +1,19 @@
+import { toLatestFormat } from './toLatestFormat'
+import { Editor as SlateEditor, Element as SlateElement, Text as SlateText } from 'slate'
+import { SerializableEditorNode } from '../../types/editor'
+
+export const strictlyDeserializeNodes = <E extends SlateEditor>(
+	editor: E,
+	serializedElement: string,
+	errorMessage?: string,
+): Array<SlateElement | SlateText> => {
+	let deserialized: SerializableEditorNode
+	try {
+		// It is important that only the JSON.parse call is inside the try block.
+		// We don't want to catch other exceptions from here.
+		deserialized = JSON.parse(serializedElement)
+	} catch (e) {
+		throw new Error(errorMessage || `Editor: deserialization error`)
+	}
+	return toLatestFormat(editor, deserialized).children
+}

package/src/editor/methods/textToSpecifics.ts

@@ -0,0 +1,7 @@
+import { Text as SlateText } from 'slate'
+import { TextSpecifics } from '../../types/editor'
+
+export const textToSpecifics = <Text extends SlateText = SlateText>(textNode: Text): TextSpecifics<Text> => {
+	const { text, ...specifics } = textNode
+	return specifics
+}

package/src/editor/methods/toLatestFormat.ts

@@ -0,0 +1,37 @@
+import { BindingError } from '@contember/react-binding'
+import { Editor as SlateEditor, Element as SlateElement } from 'slate'
+import { SerializableEditorNode } from '../../types/editor'
+
+export const toLatestFormat = <E extends SlateEditor>(
+	editor: E,
+	potentiallyOldNode: SerializableEditorNode,
+): SerializableEditorNode => {
+	if (potentiallyOldNode.formatVersion === editor.formatVersion) {
+		return potentiallyOldNode
+	}
+	if (potentiallyOldNode.formatVersion > editor.formatVersion) {
+		// Boy oh boy, do we have a situation…
+		return potentiallyOldNode // Just hope it's at least somewhat backwards compatible.
+	}
+	let formatNumber = potentiallyOldNode.formatVersion
+	try {
+		for (; formatNumber < editor.formatVersion; formatNumber++) {
+			potentiallyOldNode = {
+				formatVersion: formatNumber + 1,
+				children: potentiallyOldNode.children.map(oldChild =>
+					editor.upgradeFormatBySingleVersion(oldChild, formatNumber),
+				) as SlateElement[],
+			}
+		}
+		return potentiallyOldNode
+	} catch (e) {
+		const genericMessage = `Failed to upgrade editor format from version ${formatNumber}.`
+		if (e instanceof RangeError) {
+			throw new BindingError(
+				`${genericMessage}\nDetected a stack overflow. ` +
+					`Perhaps you incorrectly implemented 'upgradeFormatBySingleVersion'?`,
+			)
+		}
+		throw new BindingError(genericMessage)
+	}
+}

package/src/editor/methods/topLevelNodes.ts

@@ -0,0 +1,11 @@
+import { Editor as SlateEditor, Element as SlateElement } from 'slate'
+
+export const topLevelNodes = <E extends SlateEditor>(editor: E) => {
+	// We manually filter out void nodes because it appears that Slate doesn't respect the voids setting from here.
+	// The combination of isElement and mode: 'highest' is really just a roundabout way of excluding the Editor.
+	return SlateEditor.nodes(editor, {
+		match: node => SlateElement.isElement(node) && !editor.isVoid(node),
+		mode: 'highest',
+		voids: false,
+	})
+}

package/src/index.ts

@@ -0,0 +1,6 @@
+export * from './editor'
+export * from './components'
+export * from './types'
+export * from './slate-types'
+export * from './slate-reexport'
+export * from './plugins'

package/src/internal/components/DefaultElement.tsx

@@ -0,0 +1,11 @@
+import { createElement, FunctionComponent } from 'react'
+import { RenderElementProps, useSlateStatic } from 'slate-react'
+
+export interface DefaultElementProps extends RenderElementProps {}
+
+export const DefaultElement: FunctionComponent<DefaultElementProps> = ({ attributes, children, element }) => {
+	const editor = useSlateStatic()
+
+	return createElement(editor.isInline(element) ? 'span' : 'div', attributes, children)
+}
+DefaultElement.displayName = 'DefaultElement'

package/src/internal/hooks/useRichTextFieldNodes.ts

@@ -0,0 +1,38 @@
+import { BindingError, FieldAccessor } from '@contember/react-binding'
+import { Descendant, Editor } from 'slate'
+
+export interface UseRichTextFieldEditorNodeOptions {
+	editor: Editor
+	fieldAccessor: FieldAccessor<string>
+	contemberFieldElementCache: WeakMap<FieldAccessor<string>, Descendant[]>
+}
+
+export const useRichTextFieldNodes = ({
+	editor,
+	fieldAccessor,
+	contemberFieldElementCache,
+}: UseRichTextFieldEditorNodeOptions): Descendant[] => {
+	if (contemberFieldElementCache.has(fieldAccessor)) {
+		return contemberFieldElementCache.get(fieldAccessor)!
+	}
+
+	const fieldValue = fieldAccessor.value
+	if (typeof fieldValue !== 'string' && fieldValue !== null) {
+		throw new BindingError(`RichTextField: the underlying field does not contain a string value.`)
+	}
+
+	const elements: Descendant[] =
+		fieldValue === null || fieldValue === ''
+			? [editor.createDefaultElement([{ text: '' }])]
+			: [
+					editor.createDefaultElement(
+						editor.deserializeNodes(
+							fieldValue,
+							`RichTextField: the underlying field contains invalid JSON.`,
+						) as Descendant[],
+					),
+			  ]
+	contemberFieldElementCache.set(fieldAccessor, elements)
+
+	return elements
+}

package/src/internal/utils/EditorPasteUtils.ts

@@ -0,0 +1,53 @@
+import { Element } from 'slate'
+import { NodesWithType } from '../../plugins/behaviour/paste/HtmlDeserializer'
+import { EditorDefaultElementFactory } from '../../types/editor'
+
+export class EditorPasteUtils {
+		public static wordPasteListItemContent(allNodes: Iterable<Node> | ArrayLike<Node>): Node[] {
+			const nodes: Node[] = []
+			let ignoring = false
+			let forProcessing = Array.from(allNodes)
+			if (
+				(forProcessing.length === 1 && forProcessing[0].nodeName === 'SPAN') ||
+				(forProcessing.length === 2 && forProcessing[0].nodeName === 'SPAN' && forProcessing[1].nodeName === 'O:P')
+			) {
+				forProcessing = Array.from(forProcessing[0].childNodes)
+			}
+
+			for (const node of forProcessing) {
+				const isStartIgnore = node.nodeType === Node.COMMENT_NODE && node.nodeValue === '[if !supportLists]'
+				if (isStartIgnore) {
+					ignoring = true
+				} else {
+					const isEndIgnore = node.nodeType === Node.COMMENT_NODE && node.nodeValue === '[endif]'
+					if (isEndIgnore) {
+						ignoring = false
+					} else {
+						if (!ignoring) {
+							nodes.push(node)
+						}
+					}
+				}
+			}
+			return nodes
+		}
+
+		public static flattenNodesWithType(withType: NodesWithType[], defaultElementFactory: EditorDefaultElementFactory): NodesWithType  {
+			const withTypeFiltered = withType.filter((item): item is Exclude<NodesWithType, null> => item !== null)
+			const containsBlock = withTypeFiltered.find(({ elements }) => elements !== undefined) !== undefined
+
+			if (containsBlock) {
+				return {
+					elements: withTypeFiltered.flatMap<Element>(item => {
+						if (item.elements === undefined) {
+							return [defaultElementFactory(item.texts)]
+						} else {
+							return item.elements
+						}
+					}),
+				}
+			} else {
+				return { texts: withTypeFiltered.flatMap(item => item.texts!) }
+			}
+		}
+}

package/src/internal/utils/index.ts

@@ -0,0 +1,2 @@
+export * from './parseUrl'
+export * from './parseIframeSrc'

package/src/internal/utils/parseIframeSrc.ts

@@ -0,0 +1,13 @@
+export const parseIframeSrc = (source: string): string | undefined => {
+	if (source.startsWith('<iframe')) {
+		const parser = new DOMParser()
+		try {
+			const { body } = parser.parseFromString(source, 'text/html')
+			if (body.children.length === 1 && body.children[0] instanceof HTMLIFrameElement) {
+				const iFrame = body.children[0]
+				return iFrame.src
+			}
+		} catch {}
+	}
+	return undefined
+}

package/src/internal/utils/parseUrl.ts

@@ -0,0 +1,13 @@
+export const parseUrl = (url: string): URL | undefined => {
+	if (url.length < 4 || url.includes(' ')) {
+		// This is almost definitely not an url anyway.
+		// By returning early, we avoid the relatively costly URL constructor and can speed up the most common case of
+		// just inserting a single character which better be as fast as possible.
+		return undefined
+	}
+	try {
+		return new URL(url)
+	} catch {
+		return undefined
+	}
+}

package/src/plugins/attributes/alignment/alignButton.ts

@@ -0,0 +1,30 @@
+import { Editor, Element as SlateElement, Node, Transforms } from 'slate'
+
+export type AlignDirection = 'start' | 'center' | 'end' | 'justify' | undefined
+
+const isAlignTarget = (editor: Editor, it: Node, direction: AlignDirection) =>
+	SlateElement.isElement(it)
+	&& editor.acceptsAttributes(it.type, { align: direction })
+
+export const createAlignHandler = (direction: AlignDirection): {
+	isActive?: (args: { editor: Editor }) => boolean
+	shouldDisplay?: (args: { editor: Editor }) => boolean
+	toggle: (args: { editor: Editor }) => void
+}	=> ({
+	shouldDisplay: ({ editor }) => {
+		return Array.from(Editor.nodes(editor, { match: it => isAlignTarget(editor, it, direction) })).length > 0
+	},
+	isActive: ({ editor }) => {
+		return Array.from(Editor.nodes(editor, { match: it => isAlignTarget(editor, it, direction) && (it as any).align === direction })).length > 0
+	},
+	toggle: ({ editor }) => {
+		Transforms.setNodes(editor, {
+			align: direction,
+		}, {
+			match: it => isAlignTarget(editor, it, direction),
+		})
+	},
+})
+
+
+

package/src/plugins/attributes/alignment/index.ts

@@ -0,0 +1 @@
+export * from './alignButton'

package/src/plugins/attributes/index.ts

@@ -0,0 +1 @@
+export * from './alignment'

package/src/plugins/behaviour/index.ts

@@ -0,0 +1 @@
+export * from './paste'