React Integration

ProseKit is designed to work seamlessly with React.

editor.tsx

import 'prosekit/basic/style.css'

import { createEditor, jsonFromNode, type NodeJSON } from 'prosekit/core'
import type { ProseMirrorNode } from 'prosekit/pm/model'
import { ProseKit, useDocChange } from 'prosekit/react'
import { useCallback, useMemo } from 'react'

import { defineExtension } from './extension'

export default function Editor({
  defaultContent,
  onDocUpdate,
}: {
  defaultContent?: NodeJSON
  onDocUpdate?: (doc: NodeJSON) => void
}) {
  const editor = useMemo(() => {
    const extension = defineExtension()
    return createEditor({ extension, defaultContent })
  }, [defaultContent])

  const handleDocChange = useCallback(
    (doc: ProseMirrorNode) => onDocUpdate?.(jsonFromNode(doc)),
    [onDocUpdate],
  )
  useDocChange(handleDocChange, { editor })

  return (
    <ProseKit editor={editor}>
      <div className='box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 shadow dark:border-zinc-700 flex flex-col bg-white dark:bg-neutral-900'>
        <div className='relative w-full flex-1 box-border overflow-y-scroll'>
          <div ref={editor.mount} className='ProseMirror box-border min-h-full px-[max(4rem,_calc(50%-20rem))] py-8 outline-none outline-0 [&_span[data-mention="user"]]:text-blue-500 [&_span[data-mention="tag"]]:text-violet-500 [&_pre]:text-white [&_pre]:bg-zinc-800'></div>
        </div>
      </div>
    </ProseKit>
  )
}

useEditor

Retrieves the current editor instance within a ProseKit component.

const editor = useEditor()

If you pass { update: true }, it will trigger a re-render when the editor state changes.

const editor = useEditor({ update: true })

This is useful if you want to update the UI based on the current editor state. For example, you can calculate the word count of the document after every change. Check out word-counter for a complete implementation.

useExtension

Adds an extension to the editor.

const extension = useMemo(() => defineMyExtension(), [])
useExtension(extension)

useKeymap

Adds key bindings to the editor.

use-submit-keymap.ts

import type { Keymap } from 'prosekit/core'
import { useKeymap } from 'prosekit/react'
import { useMemo } from 'react'

export function useSubmitKeymap(
  hotkey: 'Shift-Enter' | 'Enter',
  onSubmit: (hotkey: string) => void,
) {
  const keymap: Keymap = useMemo(() => {
    return {
      [hotkey]: () => {
        onSubmit(hotkey)
        // Return true to stop further keypress propagation.
        return true
      },
    }
  }, [hotkey, onSubmit])

  useKeymap(keymap)
}

Check out keymap for a complete implementation.

defineReactNodeView

Renders a node using a React component.

In some cases, React might be a more convenient tool for implementing certain interactions. For instance, for a code block, you might want to add a language selector that lets you change the language of the code block. You can implement this using a React component.

We begin by creating a CodeBlockView component to render the node. This component receives ReactNodeViewProps as props, which include the node and other useful details.

code-block-view.tsx

import type { CodeBlockAttrs } from 'prosekit/extensions/code-block'
import type { ReactNodeViewProps } from 'prosekit/react'

import LanguageSelector from './language-selector'

export default function CodeBlockView(props: ReactNodeViewProps) {
  const attrs = props.node.attrs as CodeBlockAttrs
  const language = attrs.language

  const setLanguage = (language: string) => {
    const attrs: CodeBlockAttrs = { language }
    props.setAttrs(attrs)
  }

  return (
    <>
      <LanguageSelector language={language} setLanguage={setLanguage} />
      <pre ref={props.contentRef} data-language={language}></pre>
    </>
  )
}

CodeBlockView renders a LanguageSelector component (the button in the top left corner) and a <pre> element to hold the code. We bind the contentRef to the <pre> element, which allows the editor to manage its content.

After defining the component, we can register it as a node view using defineReactNodeView. The name is the node's name, in this case "codeBlock". contentAs is the property name that contains the node's content. In this case, it's "code", which means a <code> element will be rendered inside the <pre> element. component is the component we just defined.

import {
  defineReactNodeView,
  type ReactNodeViewComponent,
} from 'prosekit/react'
import CodeBlockView from './code-block-view'

const extension = defineReactNodeView({
  name: 'codeBlock',
  contentAs: 'code',
  component: CodeBlockView satisfies ReactNodeViewComponent,
})

Check out code-block for a complete implementation.