prosekit/react

children?: ReactNode

editor: Editor

Options for defineReactMarkView.

as?: MarkViewDOMSpec

component: ReactMarkViewComponent

contentAs?: MarkViewDOMSpec

destroy?: () => void

ignoreMutation?: (mutation: ViewMutationRecord) => boolean | void

name: string

The name of the mark type.

contentRef: MarkViewContentRef

mark: Mark

view: EditorView

Options for defineReactNodeView.

as?: NodeViewDOMSpec

component: ReactNodeViewComponent

contentAs?: NodeViewDOMSpec

deselectNode?: () => void

destroy?: () => void

ignoreMutation?: (mutation: ViewMutationRecord) => boolean | void

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: ProseMirrorNode, decorations: readonly Decoration[], innerDecorations: DecorationSource) => boolean | void

contentRef: NodeViewContentRef

decorations: readonly Decoration[]

getPos: () => undefined | number

innerDecorations: DecorationSource

node: ProseMirrorNode

selected: boolean

setAttrs: (attrs: Attrs) => void

view: EditorView

editor?: Editor<E>

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

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.

Type: ComponentType<ReactMarkViewProps>

Type: ComponentType<ReactNodeViewProps>

The root component for a ProseKit editor.

Type: ComponentType<ProseKitProps>

function defineReactMarkView(options: ReactMarkViewOptions): Extension

Defines a mark view using a React component.

function defineReactNodeView(options: ReactNodeViewOptions): Extension

Defines a node view using a React component.

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

Calls the given handler whenever the editor document changes.

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

Retrieves the editor instance from the nearest ProseKit component.

function useEditorDerivedValue<E extends Extension<ExtensionTyping<any, any, any>>, Derived>(derive: (editor: Editor<E>) => Derived, options?: UseEditorDerivedOptions<E>): Derived

A hook that runs a function to derive a value from the editor instance after editor state changes.

This is useful when you need to render something based on the editor state, for example, whether the selected text is wrapped in an italic mark.

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

Add an extension to the editor.

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

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

Calls the given handler whenever the editor state changes.