ProseMirror Adapter for Preact

1import {2  ProsemirrorAdapterProvider,3  useNodeViewContext,4  useNodeViewFactory,5} from '@prosemirror-adapter/preact';6import { useEffect, useRef } from 'preact/hooks';7import type { EditorState } from 'prosemirror-state';8import { EditorView } from 'prosemirror-view';9 10function ParagraphView() {11  const { contentRef, selected } = useNodeViewContext();12  return <div ref={contentRef} data-selected={selected || undefined} />;13}14 15function Editor({ state }: { state: EditorState }) {16  const host = useRef<HTMLDivElement>(null);17  const nodeViewFactory = useNodeViewFactory();18 19  useEffect(() => {20    if (!host.current) return;21    const view = new EditorView(host.current, {22      state,23      nodeViews: {24        paragraph: nodeViewFactory({25          component: ParagraphView,26          as: 'div',27          contentAs: 'p',28        }),29      },30    });31    return () => view.destroy();32  }, [nodeViewFactory, state]);33 34  return <div ref={host} />;35}36 37export function EditorShell({ state }: { state: EditorState }) {38  return (39    <ProsemirrorAdapterProvider>40      <Editor state={state} />41    </ProsemirrorAdapterProvider>42  );43}