CustomEditor.tsx

// import {  } from 'draft-js'
import { stateToHTML } from 'draft-js-export-html'
import { useState } from 'react'
import { Editor, EditorState } from 'react-draft-wysiwyg'
import CustomLink from './CustomLink'
import './customEditor.scss'

interface CustomEditorProps {
  baseState: EditorState
  editorType: 'info' | 'title' | 'content' | 'question' | 'link'
  handleChange: (
    value: string,
    type: 'info' | 'title' | 'content' | 'question' | 'link'
  ) => void
}

const CustomEditor: React.FC<CustomEditorProps> = ({
  baseState,
  handleChange,
  editorType,
}: CustomEditorProps) => {
  const [editorState, setEditorState] = useState<EditorState>(baseState)

  const handleStateChange = (state: EditorState) => {
    let options = {
      entityStyleFn: (entity: any) => {
        const entityType = entity.get('type').toLowerCase()
        if (entityType === 'link') {
          const data = entity.getData()
          return {
            element: 'a',
            attributes: {
              target: data.targetOption,
              href: data.href,
            },
          }
        }
      },
    }
    setEditorState(state)
    handleChange(stateToHTML(state.getCurrentContent(), options), editorType)
  }

  return (
    <Editor
      editorState={editorState}
      onEditorStateChange={(state) => handleStateChange(state)}
      wrapperClassName="wrapper-class"
      editorClassName="editor-class"
      toolbarClassName="toolbar-class"
      toolbarCustomButtons={[<CustomLink editorState={editorState} />]}
    />
  )
}
export default CustomEditor