import 'bulma/css/bulma.css'
import 'xen-editor/dist/style.css'
import { Editor } from 'xen-editor'

const EditorContainer = () => {
  const ref = useRef(null)
  const [html, setHTML] = useState(null)

  function handlePrintClick() {
    if (ref.current) {
      setHTML(ref.current.html())
    }
  }

  return (
    <>
      <StyledEditor
        initialValue={`
          <p style="text-align: center">Buddy</p>
          <p>Hello</p>
          <p><span style="color: red;">World</span></p>
          <p style="margin-left: 40px">Indented</p>
        `}
        apiBaseURL="https://graphql.linkareer.com/graphql"
        ref={ref}
      />
      <button onClick={handlePrintClick}>Print</button>
      {html && <div dangerouslySetInnerHTML={{ __html: html }} />}
    </>
  )
}