React Draft Wysiwyg

react-draft-wysiwyg is a third-party library. Please refer to its official documentation for more details.

Controlled Editor

---

'use client'

// React Imports
import { useState } from 'react'

// Third-party Imports
import { EditorState } from 'draft-js'

// Styled Component Import
import AppReactDraftWysiwyg from '@/libs/styles/AppReactDraftWysiwyg'

const EditorControlled = () => {
  // States
  const [value, setValue] = useState(EditorState.createEmpty())

  return <AppReactDraftWysiwyg editorState={value} onEditorStateChange={data => setValue(data)} />
}

export default EditorControlled

Uncontrolled Wysiwyg Editor

---

'use client'

// Styled Component Import
import AppReactDraftWysiwyg from '@/libs/styles/AppReactDraftWysiwyg'

const EditorUncontrolled = () => <AppReactDraftWysiwyg />

export default EditorUncontrolled