Jodit call a lot of times of blob endpoint to get worker-html.js

[biokaito]

Jodit Version: 4.0.30

Browser: Chrome
OS: Windows/Mac
Is React App: True
Reproduced on xdsoft.net: True
React Version 17.0.1

Code

<JoditEditor
    // className="mail-content-container"
    ref={editor}
    value={dataContent || mailObject?.content}
    config={configJodit}
    onBlur={handleCKEditorChange}
    tabIndex={1}
    onChange={(newContent) => {}}
  />

Here is log for network on our staging env.

And this is log on localhost:

Jodit call a lot of times to get the same response, it is importScripts('https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.2/worker-html.js');

Expected behavior: Call less and don't make Jodit component re-render

Actual behavior: Make Jodit component re-render a lot of times, can not use it.

[biokaito]

I tried to upgrade to Jodit-react 4.1.2 but not work for me

[dotam308]

I met this situation too
Trying to find a solution on google, but seems like no results =((
This is so urgent to my project

Please help....Anyone?

[xdan]

Hi, @biokaito could you show full code? First of all - onChange={useCallback((newContent) => {}, [])}

[biokaito]

Hi @xdan , Here is all my code about Jodit Editor.
import JoditEditor from 'jodit-react';

const configJodit = { readonly: false, observer: false, toolbar: true, spellcheck: true, language: 'en', toolbarButtonSize: 'medium', toolbarAdaptive: false, showCharsCounter: true, showWordsCounter: true, showXPathInStatusbar: false, askBeforePasteHTML: true, askBeforePasteFromWord: true, defaultActionOnPaste: 'insert_clear_html', buttons, uploader: { insertImageAsBase64URI: true, }, width: 800, height: 550, autofocus: true, noDefaultProperties: true, toolbarInline: true, toolbarInlineForSelection: true, toolbarInlineDisableFor: [], toolbarInlineDisabledButtons: ['source'] }

const [dataContent, setDataContent] = useState('');

const editor = useRef(null);

`const handleCKEditorChange = async (data) => {
    setDataContent(data);
  };`

`<JoditEditor
    ref={editor}
    value={dataContent}
    config={configJodit}
    onBlur={handleCKEditorChange}
    tabIndex={1}
  />`

[quanntdev]

Coincidentally
I am also encountering a similar error.
Somehow, I can't reproduce this error locally, but it appears when I deploy.
I have tried searching for a solution but haven't found any results. Hopefully, someone can help me.

[dotam308]

Hi @xdan , Here is all my code about Jodit Editor. import JoditEditor from 'jodit-react';

const configJodit = { readonly: false, observer: false, toolbar: true, spellcheck: true, language: 'en', toolbarButtonSize: 'medium', toolbarAdaptive: false, showCharsCounter: true, showWordsCounter: true, showXPathInStatusbar: false, askBeforePasteHTML: true, askBeforePasteFromWord: true, defaultActionOnPaste: 'insert_clear_html', buttons, uploader: { insertImageAsBase64URI: true, }, width: 800, height: 550, autofocus: true, noDefaultProperties: true, toolbarInline: true, toolbarInlineForSelection: true, toolbarInlineDisableFor: [], toolbarInlineDisabledButtons: ['source'] }

const [dataContent, setDataContent] = useState('');

const editor = useRef(null);

`const handleCKEditorChange = async (data) => {
    setDataContent(data);
  };`

`<JoditEditor
    ref={editor}
    value={dataContent}
    config={configJodit}
    onBlur={handleCKEditorChange}
    tabIndex={1}
  />`

Hi @xdan , Here is all my code about Jodit Editor. import JoditEditor from 'jodit-react';

const configJodit = { readonly: false, observer: false, toolbar: true, spellcheck: true, language: 'en', toolbarButtonSize: 'medium', toolbarAdaptive: false, showCharsCounter: true, showWordsCounter: true, showXPathInStatusbar: false, askBeforePasteHTML: true, askBeforePasteFromWord: true, defaultActionOnPaste: 'insert_clear_html', buttons, uploader: { insertImageAsBase64URI: true, }, width: 800, height: 550, autofocus: true, noDefaultProperties: true, toolbarInline: true, toolbarInlineForSelection: true, toolbarInlineDisableFor: [], toolbarInlineDisabledButtons: ['source'] }

const [dataContent, setDataContent] = useState('');

const editor = useRef(null);

`const handleCKEditorChange = async (data) => {
    setDataContent(data);
  };`

`<JoditEditor
    ref={editor}
    value={dataContent}
    config={configJodit}
    onBlur={handleCKEditorChange}
    tabIndex={1}
  />`

hi @xdan , have you had a chance to look at this?

[batdaucode]

I also got this error. Please fix it

[xdan]

Hi, @biokaito

const configJodit = useMemo(() => ({
const handleCKEditorChange = useCallback(async (data) => {