TypeError: editorState.getImmutable is not a function

[Akashmishra1209]

My Code Is :- import React, { useState } from 'react' import { Editor } from "react-draft-wysiwyg"; import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";

export default function BlogEditor() { const [content, setcontent] = useState("

Welcome

") return (

{/* <Editor apiKey="cyamfx5u42wgqop0qpytq20dkluwcnngeefqe36iimrq76xj" // Replace with your TinyMCE API key initialValue={content} // onEditorChange={(e)=>setcontent(e.target)} onChange={(e) => setcontent(e.target.value)} init={{ selector: '#editor', plugins: ' searchreplace autolink directionality visualblocks visualchars image link media codesample table charmap pagebreak nonbreaking anchor insertdatetime advlist lists wordcount help charmap linkchecker emoticons autosave', toolbar: 'undo redo print spellcheckdialog formatpainter | blocks fontfamily fontsize | bold italic underline forecolor backcolor | link image | alignleft aligncenter alignright alignjustify', height: '600px' }} /> */} <Editor editorState={content} toolbarClassName="toolbarClassName" wrapperClassName="wrapperClassName" editorClassName="editorClassName" onEditorStateChange={(e)=>{setcontent(e.target.value)}} /> <button className='btn btn-primary mt-2' onClick={()=>navigator.clipboard.writeText(content).then(alert("Copied To Clipboard"))}>Copy

) } Bur When I Run It Says TypeError: editorState.getImmutable is not a function

[vasanthmn1]

@Akashmishra1209 Initialize the editorState correctly.

import React, { useState } from 'react';
import { EditorState } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
import { convertToRaw, ContentState } from 'draft-js';

export default function BlogEditor() {
  const [editorState, setEditorState] = useState(EditorState.createWithContent(ContentState.createFromText("Welcome")));

  const handleCopy = () => {
    const content = convertToRaw(editorState.getCurrentContent());
    const text = content.blocks.map(block => block.text).join('\n');
    navigator.clipboard.writeText(text).then(() => alert("Copied To Clipboard"));
  };

  return (
    <div>
      <Editor
        editorState={editorState}
        toolbarClassName="toolbarClassName"
        wrapperClassName="wrapperClassName"
        editorClassName="editorClassName"
        onEditorStateChange={setEditorState}
      />
      <button className='btn btn-primary mt-2' onClick={handleCopy}>Copy</button>
    </div>
  );
}