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

package/src/plugins/text/index.ts

@@ -0,0 +1,7 @@
+export * from './bold'
+export * from './code'
+export * from './highlight'
+export * from './italic'
+export * from './newline'
+export * from './strikeThrough'
+export * from './underline'

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

@@ -0,0 +1,2 @@
+export * from './withItalic'
+export * from './italicMark'

package/src/plugins/text/italic/italicMark.ts

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

package/src/plugins/text/italic/withItalic.ts

@@ -0,0 +1,15 @@
+import { italicMark, italicMarkPlugin } from './italicMark'
+import { EditorPlugin } from '../../../types'
+import { createMarkHtmlDeserializer } from '../../behaviour'
+
+
+export const withItalic = (): EditorPlugin => editor => {
+	editor.registerMark(italicMarkPlugin)
+	editor.htmlDeserializer.registerPlugin(
+		createMarkHtmlDeserializer(
+			italicMark,
+			el => ['I', 'EM'].includes(el.nodeName),
+			el => ['italic', 'oblique'].includes(el.style.fontWeight),
+		),
+	)
+}

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

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

package/src/plugins/text/newline/withNewline.ts

@@ -0,0 +1,13 @@
+import { Transforms } from 'slate'
+import { EditorPlugin } from '../../../types'
+
+export const withNewline = (): EditorPlugin => editor => {
+	const { onKeyDown } = editor
+	editor.onKeyDown = e => {
+		if (e.key !== 'Enter' || !e.shiftKey) {
+			return onKeyDown(e)
+		}
+		e.preventDefault()
+		Transforms.insertText(editor, '\n')
+	}
+}

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

@@ -0,0 +1,2 @@
+export * from './withStrikeThrough'
+export * from './strikeThroughMark'

package/src/plugins/text/strikeThrough/strikeThroughMark.ts

@@ -0,0 +1,10 @@
+import { createElement } from 'react'
+import { isHotkey } from 'is-hotkey'
+import { EditorMarkPlugin } from '../../../types'
+
+export const strikeThroughMark = 'isStruckThrough'
+export const strikeThroughPlugin: EditorMarkPlugin = {
+	type: strikeThroughMark,
+	render: ({ children }) => createElement('s', undefined, children),
+	isHotKey: isHotkey('mod+opt+s'),
+}

package/src/plugins/text/strikeThrough/withStrikeThrough.ts

@@ -0,0 +1,18 @@
+import { Editor as SlateEditor } from 'slate'
+import { strikeThroughMark, strikeThroughPlugin } from './strikeThroughMark'
+import { EditorPlugin } from '../../../types'
+import { createMarkHtmlDeserializer } from '../../behaviour'
+
+
+export const withStrikeThrough = (): EditorPlugin => editor => {
+	editor.registerMark(strikeThroughPlugin)
+	editor.htmlDeserializer.registerPlugin(
+		createMarkHtmlDeserializer(
+			strikeThroughMark,
+			el => el.nodeName === 'S',
+			el => el.style.textDecoration === 'line-through',
+		),
+	)
+
+	return editor
+}

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

@@ -0,0 +1,2 @@
+export * from './withUnderline'
+export * from './underlineMark'

package/src/plugins/text/underline/underlineMark.ts

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

package/src/plugins/text/underline/withUnderline.ts

@@ -0,0 +1,17 @@
+import { underlineMark, underlineMarkPlugin } from './underlineMark'
+import { createMarkHtmlDeserializer } from '../../behaviour'
+import { EditorPlugin } from '../../../types'
+
+
+export const withUnderline = (): EditorPlugin => editor => {
+	editor.registerMark(underlineMarkPlugin)
+	editor.htmlDeserializer.registerPlugin(
+		createMarkHtmlDeserializer(
+			underlineMark,
+			el => el.nodeName === 'U',
+			el => el.style.textDecoration === 'underline',
+		),
+	)
+
+	return editor
+}

package/src/slate-reexport.ts

@@ -0,0 +1,4 @@
+import { Editor } from 'slate'
+
+export { Transforms as EditorTransforms } from 'slate'
+export const EditorUtils = Editor

package/src/slate-types.ts

@@ -0,0 +1,33 @@
+import { BaseEditor, Descendant, Selection, Point, Range, Ancestor, Path } from 'slate'
+import { ReactEditor, RenderElementProps } from 'slate-react'
+import { HistoryEditor } from 'slate-history'
+import { EditorWithEssentials } from './types/editor'
+
+export type Editor = EditorWithEssentials<ReactEditor & HistoryEditor & BaseEditor>
+export type EditorElement = {
+	[K in string]: unknown
+} & {
+	type: string
+	children: Array<Descendant>
+}
+export type EditorText = {
+	[K in string]: unknown
+} & {
+	text: string
+}
+
+export type EditorDescendant = Descendant
+export type EditorAncestor = Ancestor
+export type EditorSelection = Selection
+export type EditorRange = Range
+export type EditorPath = Path
+export type EditorPoint = Point
+export type EditorRenderElementProps = RenderElementProps
+
+declare module 'slate' {
+	interface CustomTypes {
+		Editor: Editor
+		Element: EditorElement
+		Text: EditorText
+	}
+}

package/src/tsconfig.json

@@ -0,0 +1,11 @@
+{
+	"extends": "../../../tsconfig.settings.json",
+	"compilerOptions": {
+		"outDir": "../dist/types"
+	},
+	"references": [
+		{ "path": "../../binding/src" },
+		{ "path": "../../react-binding/src" },
+		{ "path": "../../utilities/src" },
+	]
+}

package/src/types/editor.ts

@@ -0,0 +1,55 @@
+import type { FocusEvent as ReactFocusEvent, KeyboardEvent as ReactKeyboardEvent, ReactElement } from 'react'
+import type { BaseEditor, Descendant, Editor, Element as SlateElement, Node as SlateNode, NodeEntry, Text as SlateText } from 'slate'
+import type { RenderElementProps, RenderLeafProps } from 'slate-react'
+import { EditorElementPlugin, EditorMarkPlugin } from './plugins'
+import type * as Slate from 'slate'
+import { HtmlDeserializer } from '../plugins/behaviour/paste/HtmlDeserializer'
+
+export type EditorDefaultElementFactory = (children: Descendant[]) => SlateElement;
+
+export interface WithEssentials {
+	slate: typeof Slate
+	htmlDeserializer: HtmlDeserializer
+	formatVersion: number
+	defaultElementType: string
+	isDefaultElement: (element: SlateElement) => boolean
+	createDefaultElement: EditorDefaultElementFactory
+	insertBetweenBlocks: (blockEntry: NodeEntry, edge: 'before' | 'after') => void
+
+	canToggleMarks: <T extends SlateText>(marks: TextSpecifics<T>) => boolean
+	hasMarks: <T extends SlateText>(marks: TextSpecifics<T>) => boolean
+	toggleMarks: <T extends SlateText>(marks: TextSpecifics<T>) => void
+
+	canToggleElement: <E extends SlateElement>(elementType: E['type'], suchThat?: Partial<E>) => boolean
+	isElementActive: <E extends SlateElement>(elementType: E['type'], suchThat?: Partial<E>) => boolean
+	toggleElement: <E extends SlateElement>(elementType: E['type'], suchThat?: Partial<E>) => void
+	acceptsAttributes: <E extends SlateElement>(elementType: E['type'], suchThat: Partial<E>) => boolean
+
+	canContainAnyBlocks: (element: SlateElement | Editor) => boolean
+
+	serializeNodes: (nodes: Array<Descendant>, errorMessage?: string) => string
+	deserializeNodes: (serializedNodes: string, errorMessage?: string) => Array<SlateElement | SlateText>
+
+	upgradeFormatBySingleVersion: (node: SlateNode, oldVersion: number) => SlateNode
+
+	registerElement: (plugin: EditorElementPlugin<any>) => void
+	registerMark: (plugin: EditorMarkPlugin) => void
+
+	// <Editable> props
+	renderElement: (props: RenderElementProps) => ReactElement
+	renderLeaf: (props: RenderLeafProps) => ReactElement
+	renderLeafChildren: (props: Omit<RenderLeafProps, 'attributes'>) => ReactElement
+	onDOMBeforeInput: (event: Event) => void
+	onKeyDown: (event: ReactKeyboardEvent<HTMLDivElement>) => void
+	onFocus: (event: ReactFocusEvent<HTMLDivElement>) => void
+	onBlur: (event: ReactFocusEvent<HTMLDivElement>) => void
+}
+
+export type EditorWithEssentials<E extends BaseEditor> = WithEssentials & E
+
+export interface SerializableEditorNode {
+	formatVersion: number
+	children: Array<SlateElement | SlateText>
+}
+
+export type TextSpecifics<Text extends SlateText> = Omit<Text, 'text'>

package/src/types/htmlDeserializer.ts

@@ -0,0 +1,42 @@
+import { Descendant, Element as SlateElement } from 'slate'
+import { HtmlDeserializer } from '../plugins/behaviour/paste/HtmlDeserializer'
+
+export type HtmlDeserializerNextCallback = (children: NodeList | Node[], cumulativeTextAttrs: HtmlDeserializerTextAttrs) => Descendant[];
+
+export interface HtmlDeserializerTextAttrs {
+	[key: string]: any
+}
+
+export type HtmlDeserializerNodesWithType =
+	| { texts: Descendant[]; elements?: undefined }
+	| { elements: SlateElement[]; texts?: undefined }
+	| null
+
+export interface HtmlDeserializerPlugin {
+	processBlockPaste?: (
+		args: {
+			deserializer: HtmlDeserializer,
+			element: HTMLElement,
+			next: HtmlDeserializerNextCallback,
+			cumulativeTextAttrs: HtmlDeserializerTextAttrs,
+		}
+	) => SlateElement[] | SlateElement | null
+	processInlinePaste?: (
+		args: {
+			deserializer: HtmlDeserializer,
+			element: HTMLElement,
+			next: HtmlDeserializerNextCallback,
+			cumulativeTextAttrs: HtmlDeserializerTextAttrs
+		}
+	) => Descendant[] | Descendant | null
+	processAttributesPaste?: (args: {
+		deserializer: HtmlDeserializer,
+		element: HTMLElement,
+		cumulativeTextAttrs: HtmlDeserializerTextAttrs,
+	}) => HtmlDeserializerTextAttrs
+	processNodeListPaste?: (args: {
+		deserializer: HtmlDeserializer,
+		nodeList: Node[],
+		cumulativeTextAttrs: HtmlDeserializerTextAttrs,
+	}) => HtmlDeserializerNodesWithType
+}

package/src/types/index.ts

@@ -0,0 +1,3 @@
+export * from './editor'
+export * from './htmlDeserializer'
+export * from './plugins'

package/src/types/plugins.ts

@@ -0,0 +1,35 @@
+import { Editor, Element, Path } from 'slate'
+import { FunctionComponent, ReactNode } from 'react'
+import { RenderElementProps, RenderLeafProps } from 'slate-react'
+import { Environment } from '@contember/react-binding'
+import { EntityAccessor } from '@contember/binding'
+
+export type EditorPluginWrapperProps = { children?: ReactNode, editor: Editor };
+export type EditorPlugin = ((editor: Editor) => void) | {
+	extendEditor?: (args: { editor: Editor, children: ReactNode, environment: Environment, entity: EntityAccessor }) => void
+	OuterWrapper?: FunctionComponent<EditorPluginWrapperProps>
+	InnerWrapper?: FunctionComponent<EditorPluginWrapperProps>
+	staticRender?: (props: { children?: ReactNode }, environment: Environment) => ReactNode
+}
+
+
+export type ElementRenderer<T extends Element> = FunctionComponent<RenderElementProps & { element: T }>
+
+export interface EditorElementPlugin<T extends Element> {
+	type: T['type']
+	render: ElementRenderer<T>
+	normalizeNode?: (args: { element: T, path: Path, editor: Editor, preventDefault: () => void }) => void
+	isActive?: (args: { editor: Editor, suchThat?: Partial<T> }) => boolean
+	isInline?: boolean
+	isVoid?: boolean | ((args: { element: T, editor: Editor }) => boolean)
+	canContainAnyBlocks?: boolean
+	toggleElement?: (args: { editor: Editor, suchThat?: Partial<T> }) => void
+	acceptsAttributes?: (args: { editor: Editor, suchThat: Partial<T> }) => boolean
+}
+
+
+export interface EditorMarkPlugin {
+	type: string
+	isHotKey: (e: KeyboardEvent) => boolean
+	render: FunctionComponent<RenderLeafProps>
+}