tsx
import 'prosekit/basic/style.css'
import { defineBasicExtension } from 'prosekit/basic'
import { createEditor } from 'prosekit/core'
import { ProseKit } from 'prosekit/react'
import { useMemo } from 'react'
import ExtensionComponent from './extension-component'
export default function EditorComponent({
placeholder,
}: {
placeholder: string
}) {
const editor = useMemo(() => {
return createEditor({ extension: defineBasicExtension() })
}, [])
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>
<ExtensionComponent placeholder={placeholder} />
</ProseKit>
)
}
tsx
import {
useCallback,
useEffect,
useRef,
useState,
} from 'react'
import EditorComponent from './editor-component'
function EditorGroup() {
const nextKeyRef = useRef(1)
const [editorKeys, setEditorKeys] = useState<number[]>([])
const addEditor = useCallback(() => {
const key = nextKeyRef.current
nextKeyRef.current += 1
setEditorKeys((keys) => [...keys, key])
}, [])
const removeEditor = useCallback((key: number) => {
setEditorKeys((keys) => keys.filter((k) => k !== key))
}, [])
useEffect(() => {
if (nextKeyRef.current === 1) {
addEditor()
}
}, [addEditor])
return (
<div className="flex flex-col gap-2">
<div className="flex gap-2">
<button onClick={addEditor} className="border p-2">
Add editor
</button>
{editorKeys.map((key) => (
<button
key={key}
onClick={() => removeEditor(key)}
className="border p-2"
>
Unmount No.{key}
</button>
))}
</div>
{editorKeys.map((key) => (
<div key={key} className="h-32">
<EditorComponent
placeholder={`Editor No.${key} of ${editorKeys.length}`}
/>
</div>
))}
</div>
)
}
export default EditorGroup
tsx
import { definePlaceholder } from 'prosekit/extensions/placeholder'
import { useExtension } from 'prosekit/react'
import { useMemo } from 'react'
export default function ExtensionComponent({
placeholder,
}: {
placeholder: string
}) {
const extension = useMemo(
() => definePlaceholder({ placeholder }),
[placeholder],
)
useExtension(extension)
return null
}