Integrating Jodit into React/Typescript app without compile errors

[johnrteg]

Greetings:

I am testing out Jodit in a React/Typescript/MUI application, and I get the following compile error:

JSX element type 'JoditEditor' does not have any construct or call signatures.

Using sample discussion from here:
https://www.dhiwise.com/post/reasons-why-react-jodit-is-the-ultimate-wysiwyg-editor

Here is the sample code:

//
import React from "react";

//
import JoditEditor from "jodit-react";


export interface TextEditorProps
{

}

export function TextEditor( props : TextEditorProps ) : JSX.Element
{
    const editor                        = React.useRef<any>(null);
    const [content,setContent]          = React.useState< string >( "" );

    /*
    const config = React.useMemo<any>(
		{
			readonly: false, // all options from https://xdsoft.net/jodit/docs/,
			placeholder: placeholder || 'Start typings...'
		},
		[placeholder] );
        */

    //////////////////////////////////////////////////////////////////////////
    function onChange( newContent : string ) : void
    {
        console.log(newContent); // Log the updated content
    }

    //////////////////////////////////////////////////////////////////////////
    function onBlur( newContent : string ) : boolean
    {
        setContent( newContent );
        return false;
    }


    const editorConfig : any = {
        readonly: false, // all options from <https://xdsoft.net/jodit/doc/>
    };


    return <JoditEditor
                            ref={ editor }
                            value={ content }
                            config={ editorConfig }
                            tabIndex={1} // tabIndex of textarea
                            onBlur={ onBlur } // preferred to use only this option to update the content for performance reasons
                            onChange={ onChange }
                    />;
    
}

//
// eof
//

There seems to be some discussions on how to deal with a non-React define component, but I would think this would work out of the box.

Thank you in advance.

[johnrteg]

More info.. The file the code is in is a .tsx file so it is expecting a JSX return. Is this not possible?

[rowin-C]

I don't know how to get rid of the error in your case but i also have a nextjs/Typescript app in which i have implemented jodit like this:

import React from "react"
import dynamic from "next/dynamic"

import "react-quill/dist/quill.snow.css"

// Import Quill styles

type QuillEditorProps = {
  size: string
  content: string
  setContent: (value: string) => void
}

const QuillEditor = dynamic(() => import("react-quill"), { ssr: false })

export default function Editor({
  size,
  content,
  setContent,
}: QuillEditorProps) {
  const quillModules = {
    toolbar: [
      [{ header: [1, 2, 3, false] }],
      ["bold", "italic", "underline", "strike", "blockquote"],
      [{ list: "ordered" }, { list: "bullet" }],
      ["link", "image"],
      [{ align: [] }],
      [{ color: [] }],
      ["code-block"],
      ["clean"],
    ],
  }

  const quillFormats = [
    "header",
    "bold",
    "italic",
    "underline",
    "strike",
    "blockquote",
    "list",
    "bullet",
    "link",
    "image",
    "align",
    "color",
    "code-block",
  ]

  const handleEditorChange = (newContent: string) => {
    setContent(newContent)
  }

  return (
    <QuillEditor
      style={{ height: size, width: "100%" }}
      theme="snow"
      value={content}
      onChange={handleEditorChange}
      modules={quillModules}
      formats={quillFormats}
    />
  )
}