ProseKit

Appearance

prosekit/react ​

ProseKitProps ​

Properties ​

children? ​

optional children: ReactNode

editor ​

editor: Editor<any>

ReactNodeViewOptions ​

Options for defineReactNodeView.

Extends ​

Properties ​

as? ​

optional as: string | HTMLElement | (node) => HTMLElement

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

Inherited from ​

BaseNodeViewOptions.as

component ​

component: ReactNodeViewComponent

The React component to render the node.

contentAs? ​

optional contentAs: string | HTMLElement | (node) => HTMLElement

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

Inherited from ​

BaseNodeViewOptions.contentAs

deselectNode()? ​

optional deselectNode: () => void

Returns ​

void

Inherited from ​

BaseNodeViewOptions.deselectNode

destroy()? ​

optional destroy: () => void

Returns ​

void

Inherited from ​

BaseNodeViewOptions.destroy

ignoreMutation()? ​

optional ignoreMutation: (mutation) => boolean

Parameters ​

• mutation: MutationRecord

Returns ​

boolean

Inherited from ​

BaseNodeViewOptions.ignoreMutation

name ​

name: string

The name of the node type.

onUpdate()? ​

optional onUpdate: () => void

Returns ​

void

Inherited from ​

BaseNodeViewOptions.onUpdate

selectNode()? ​

optional selectNode: () => void

Returns ​

void

Inherited from ​

BaseNodeViewOptions.selectNode

setSelection()? ​

optional setSelection: (anchor, head, root) => void

Parameters ​

• anchor: number

• head: number

• root: Document | ShadowRoot

Returns ​

void

Inherited from ​

BaseNodeViewOptions.setSelection

stopEvent()? ​

optional stopEvent: (event) => boolean

Parameters ​

• event: Event

Returns ​

boolean

Inherited from ​

BaseNodeViewOptions.stopEvent

update()? ​

optional update: (node, decorations, innerDecorations) => boolean

Parameters ​

• node: Node

• decorations: readonly Decoration[]

• innerDecorations: DecorationSource

Returns ​

boolean

Inherited from ​

BaseNodeViewOptions.update

ReactNodeViewProps ​

Properties ​

contentRef() ​

contentRef: (node) => void

Parameters ​

• node: null | HTMLElement

Returns ​

void

decorations ​

decorations: readonly Decoration[]

getPos() ​

getPos: () => undefined | number

Returns ​

undefined | number

innerDecorations ​

innerDecorations: DecorationSource

node ​

node: Node

selected ​

selected: boolean

setAttrs() ​

setAttrs: (attrs) => void

Parameters ​

• attrs: Attrs

Returns ​

void

view ​

view: EditorView

UseExtensionOptions ​

Properties ​

editor? ​

optional editor: Editor<any>

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

priority? ​

optional priority: Priority

Optional priority to add the extension with.

ReactNodeViewComponent ​

ReactNodeViewComponent: ComponentType<ReactNodeViewProps>

ProseKit ​

const ProseKit: ComponentType<ProseKitProps>

The root component for a ProseKit editor.

defineReactNodeView() ​

defineReactNodeView(options): Extension

Defines a node view using a React component.

Parameters ​

• options: ReactNodeViewOptions

Returns ​

Extension

useDocChange() ​

useDocChange(handler, options?): void

Calls the given handler whenever the editor document changes.

Parameters ​

• handler

• options?: UseExtensionOptions

Returns ​

void

useEditor() ​

useEditor<E>(options?): Editor<E>

Retrieves the editor instance from the nearest ProseKit component.

Type Parameters ​

• E extends Extension<ExtensionTyping<any, any, any>> = any

Parameters ​

• options?

• options.update?: boolean

Whether to update the component when the editor is mounted or editor state is updated.

Default

ts
false

Returns ​

Editor<E>

useExtension() ​

useExtension(extension, options?): void

Add an extension to the editor.

Parameters ​

• extension: null | Extension<ExtensionTyping<any, any, any>>

The extension to add to the editor. If it changes, the previous extension will be removed and the new one (if not null) will be added.

• options?: UseExtensionOptions

Returns ​

void

useKeymap() ​

useKeymap(keymap, options?): void

Parameters ​

• keymap: Keymap

• options?: UseExtensionOptions

Returns ​

void

useStateUpdate() ​

useStateUpdate(handler, options?): void

Calls the given handler whenever the editor state changes.

Parameters ​

• handler

• options?: UseExtensionOptions

Returns ​

void