prosekit/react

ProseKitProps

children?: ReactNode

editor: Editor<any>

ReactNodeViewOptions

Options for defineReactNodeView.

as?: string | HTMLElement | ((node: Node) => HTMLElement)

The wrapping DOM element for the node view. Defaults to div for block nodes and span for inline nodes.

component: ReactNodeViewComponent

The React component to render the node.

contentAs?: string | HTMLElement | ((node: Node) => HTMLElement)

The wrapping DOM element for the node view's content. Defaults to div for block nodes and span for inline nodes.

deselectNode?: () => void

destroy?: () => void

ignoreMutation?: (mutation: ViewMutationRecord) => boolean

name: string

The name of the node type.

onUpdate?: () => void

selectNode?: () => void

setSelection?: (anchor: number, head: number, root: Document | ShadowRoot) => void

stopEvent?: (event: Event) => boolean

update?: (node: Node, decorations: readonly Decoration[], innerDecorations: DecorationSource) => boolean

ReactNodeViewProps

contentRef: (node: null | HTMLElement) => void

decorations: readonly Decoration[]

getPos: () => undefined | number

innerDecorations: DecorationSource

node: Node

selected: boolean

setAttrs: (attrs: Attrs) => void

view: EditorView

UseExtensionOptions

editor?: Editor<any>

The editor to add the extension to. If not provided, it will use the editor from the nearest ProseKit component.

priority?: Priority

Optional priority to add the extension with.

ReactNodeViewComponent

Type: ComponentType<ReactNodeViewProps>

ProseKit

The root component for a ProseKit editor.

Type: ComponentType<ProseKitProps>

defineReactNodeView

function defineReactNodeView(options: ReactNodeViewOptions): Extension

Defines a node view using a React component.

useDocChange

function useDocChange(handler: (doc: Node) => void, options?: UseExtensionOptions): void

Calls the given handler whenever the editor document changes.

useEditor

function useEditor<E extends Extension<ExtensionTyping<any, any, any>>>(options?: { update?: boolean }): Editor<E>

Retrieves the editor instance from the nearest ProseKit component.

useExtension

function useExtension(extension: null | Extension<ExtensionTyping<any, any, any>>, options?: UseExtensionOptions): void

Add an extension to the editor.

useKeymap

function useKeymap(keymap: Keymap, options?: UseExtensionOptions): void

useStateUpdate

function useStateUpdate(handler: (state: EditorState) => void, options?: UseExtensionOptions): void

Calls the given handler whenever the editor state changes.