Package Exports

@prosemirror-adapter/preact
@prosemirror-adapter/preact/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@prosemirror-adapter/preact) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@prosemirror-adapter/preact

Preact adapter for ProseMirror.

Example

You can view the example in prosemirror-adapter/examples/preact.

Getting Started

Install the package

npm install @prosemirror-adapter/preact

Wrap your component with the provider

import { ProsemirrorAdapterProvider } from '@prosemirror-adapter/preact'
import { StrictMode } from 'preact/compat'
import { render } from 'preact'

import { YourAwesomeEditor } from './YourAwesomeEditor'

const root = document.querySelector('#app')

if (!root) throw new Error('Missing #app element')

render(
  <StrictMode>
    <ProsemirrorAdapterProvider>
      <YourAwesomeEditor />
    </ProsemirrorAdapterProvider>
  </StrictMode>,
  root,
)

Building Node Views

import { useNodeViewContext } from '@prosemirror-adapter/preact'

export function Paragraph() {
  const { contentRef, selected } = useNodeViewContext()

  return <div ref={contentRef} style={{ outline: selected ? '2px solid #3b82f6' : 'none' }} />
}

Bind the component with ProseMirror:

import { useNodeViewFactory } from '@prosemirror-adapter/preact'
import { useCallback } from 'preact/hooks'
import { EditorView } from 'prosemirror-view'

import { Paragraph } from './Paragraph'

export function YourAwesomeEditor() {
  const nodeViewFactory = useNodeViewFactory()

  const editorRef = useCallback((element: HTMLDivElement | null) => {
    if (!element || element.firstChild) return

    new EditorView(element, {
      state: YourProsemirrorEditorState,
      nodeViews: {
        paragraph: nodeViewFactory({
          component: Paragraph,
          as: 'div',
          contentAs: 'p',
        }),
      },
    })
  }, [])

  return <div ref={editorRef} />
}

The same hooks available in the React package are exposed for Preact:

useMarkViewFactory
usePluginViewFactory
useWidgetViewFactory
useMarkViewContext
usePluginViewContext
useWidgetViewContext

Each hook mirrors the behaviour of its React counterpart, providing idiomatic Preact components that stay in sync with the underlying ProseMirror view.

API Surface

export { ProsemirrorAdapterProvider } from '@prosemirror-adapter/preact'
export { useNodeViewFactory, useNodeViewContext, createNodeViewContext } from '@prosemirror-adapter/preact/nodeView'
export { useMarkViewFactory, useMarkViewContext, createMarkViewContext } from '@prosemirror-adapter/preact/markView'
export {
  usePluginViewFactory,
  usePluginViewContext,
  createPluginViewContext,
} from '@prosemirror-adapter/preact/pluginView'
export {
  useWidgetViewFactory,
  useWidgetViewContext,
  createWidgetViewContext,
} from '@prosemirror-adapter/preact/widgetView'

Refer to the React adapter documentation for a deeper dive—only the UI layer changes.

Contributing

Follow our contribution guide to learn how to contribute to prosemirror-adapter.

License

MIT