import { useEffect, useRef } from 'preact/hooks'
import ReactMdxEditor from ':components/react/MdxEditor.tsx'
import React from 'react'
import ReactDOM from 'react-dom/client'

export default function MdxEditor(props: Parameters<typeof ReactMdxEditor>[0]) {
	const ref = useRef<HTMLDivElement>(null)

	useEffect(() => {
		if (ref.current) {
			const root = ReactDOM.createRoot(ref.current!)
			root.render(React.createElement(ReactMdxEditor, props))
		}
	}, [])

	return <div ref={ref}></div>
}