Preact package for ProseMirror Adapter
npm install @prosemirror-adapter/preactPreact adapter for ProseMirror.
You can view the example in prosemirror-adapter/examples/preact.
``bash`
npm install @prosemirror-adapter/preact
`tsx
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(
root,
)
`
`tsx
import { useNodeViewContext } from '@prosemirror-adapter/preact'
export function Paragraph() {
const { contentRef, selected } = useNodeViewContext()
return
Bind the component with ProseMirror:
tsx
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
}
`Mark, Plugin, and Widget Views
The same hooks available in the React package are exposed for Preact:
-
-
-
-
-
- Each hook mirrors the behaviour of its React counterpart, providing idiomatic Preact components that stay in sync with the underlying ProseMirror view.
API Surface
ts
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.
Follow our contribution guide to learn how to contribute to prosemirror-adapter.