Alternative React component for Jodit HTML editor

[behnamazimi]

There are some issues when I use your jodit-react module, When I want to wrap the module in the third component and do some stuff on, like altering content before update or adding a default value to, It cause re-rendering on each onChange for JoditEditor component and I lose the focus and cursor point of the editor.

So I decided to use the main Jodit module instead of jodit-react and add some functionality on it. Lazy loading for jodit module and debounce for onChange prop are the main things that I added.

Here is the gist of it

[IvanBarbaric992]

Hello @behnamazimi I have used your implementation after many unsuccessful tries and still when i want to change font size or set bold, italic etc... it replaces my focus on the beginning of text and style is not applied. It doesn't matter what I do some of styles work other don't work. Did you have any similar problem?

[behnamazimi]

@IvanBarbaric992 It happens because you pass the changed content to the editor again. When you set the content editor in the state in the parent component, you should not pass it again as defaultValue.

[IvanBarbaric992]

Thank you for quick response. Ok I have a form which has many inputs, there are three inputs as Editor. All values are stored in one react state. Default value on creating new form is empty string ofc but on edit is value from database. I should pass that value as default value to editor, but on change It should not be passed any more. How should I save that state after I finish with with editor? should I set onBlur event? or? this is my code from parent component: return ( <HTMLEditor key={index} name={field} label={formatLabel(label, isRequired)} value={translation[field]} onChange={(content) => onContentEditorChange(field, content)} /> );

const onContentEditorChange = (name, content) => {
    setValues((prevState) => {
      return {
        ...prevState,
        [name]: content,
      };
    });
    onInputChange();
  };

I need this "field" to distinguish between inputs when inputing values. If you have any suggestions it would be really helpful? And one more thing, Is this editor work well with uploading images or photos to azure blob or some other servers? If you are familiar with that

[behnamazimi]

@IvanBarbaric992 here is the simple example that works for me:

export default function EditorParent() {

    const [defaultValue] = useState("ANY_VALUE");
    const [currentValue, setCurrentValue] = useState("");

    return (
        <HTMLEditor onChange={c => setCurrentValue(c)}
                    defaultValue={defaultValue}/>
    )
}

Also, the uploader works great for me.

[IvanBarbaric992]

Thank you @behnamazimi. Now it works