Using React tinymce with react-hook-form infinite loop while setting the state

Question

I am trying to use the setValue function which comes with react-hook-form when the user types in to the react tinymce editor to store the typed in html data from the editor: https://react-hook-form.com/api/useform/setvalue/.

It works fine when using the onClick button, the html data which is typed from the tinymce editor gets stored using the setValue function using the htmlContent when I click the button.

However when I try and use the onEditorChange or an onChange function with setValue the react tinymce editor doesn't let me type into it and the app crashes, I got around 5000 console errors which kept getting higher within a few second which weren't related to the component, it kept duplicating an error regarding duplicate keys from another component at a very fast rate.

It seems to be doing an infinite loop and crashing when trying to use setValue in the provided onEditorChange or using an onChange function, but works fine when using the same logic onClick of the button.

import React, { useState } from 'react'
import { Editor } from '@tinymce/tinymce-react'
import { useFormContext } from 'react-hook-form'
import { HtmlEditorWrapper } from './HtmlEditor.styles'

type HtmlEditorProps = {
    name: string
}

export const HtmlEditorComponent = ({ name }: HtmlEditorProps): JSX.Element => {
    const [htmlContent, setHtmlContent] = useState('')
    const { setValue } = useFormContext()

    return (
        <>
            <HtmlEditorWrapper>
                <Editor
                    value={htmlContent}
                    apiKey={process.env.REACT_APP_TINYMCE_KEY}
                    onEditorChange={(content: string) => {
                        setHtmlContent(content)
                        // setValue(name, content)
                    }}
                    // onChange={() => setValue(name, htmlContent)}}
                    init={{
                        height: 200,
                        menubar: false,
                        plugins: [
                            'advlist autolink lists link image charmap print preview anchor',
                            'searchreplace visualblocks code fullscreen',
                            'insertdatetime media table paste code help wordcount',
                        ],
                        toolbar:
                            'undo redo | formatselect | ' +
                            'bold italic backcolor | alignleft aligncenter ' +
                            'alignright alignjustify | bullist numlist outdent indent | ' +
                            'removeformat | help',
                        content_style:
                            'body { font-family:Helvetica,Arial,sans-serif; font-size:14px, }',
                    }}
                />

                <button onClick={() => setValue(name, htmlContent)}>
                    Save desc
                </button>
                {htmlContent}
            </HtmlEditorWrapper>
        </>
    )
}

Joris · Accepted Answer · 2021-08-19 20:24:39Z

4

Here is a working example with a demo key: https://codesandbox.io/s/stupefied-sutherland-09eh2

There are several ways to achieve what you want. One of it is to use Controller or useController.

answered Aug 19, 2021 at 20:24

Joris

2,83618 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

DINA TAKLIT · Accepted Answer · 2023-01-25 21:02:12Z

2

you can use Controller of react-hook-form with onEditorChange of tinymc here is an example of code using material ui

<Controller
  name="content"
  control={control}
  rules={{
    required: 'Veuillez insérer le text',
  }}
  render={({ field: { onChange } }) => (
    <FormControl fullWidth>
      <Editor
        initialValue={recommendationData?.content || ''}
        apiKey={process.env.REACT_APP_TINY_API_KWY}
        onInit={(evt, editor) => (editorRef.current = editor)}
        init={{
          branding: false,
          height: 500,
          menubar: true,
          plugins: [
            'image',
            'advlist',
            'autolink',
            'lists',
            'link',
            'image',
            'charmap',
            'preview',
            'anchor',
            'searchreplace',
            'visualblocks',
            'code',
            'fullscreen',
            'insertdatetime',
            'media',
            'table',
            'code',
            'help',
            'wordcount',
            'anchor',
          ],
          toolbar:
            'undo redo | blocks | image | bold italic forecolor | alignleft aligncenter bold italic forecolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent |removeformat | help',

          content_style:
            'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',
        }}
        onEditorChange={onChange}
      />
    </FormControl>
  )}
/>

answered Jan 25, 2023 at 21:02

DINA TAKLIT

8,50410 gold badges85 silver badges92 bronze badges

2 Comments

Sreekuttan Over a year ago

Could you please tell me where 'recommendationData?.content' come from??

DINA TAKLIT Over a year ago

It is a data I retrieve from database recommendationData?.content is string containing the content like "content bla bla..."

Collectives™ on Stack Overflow

Using React tinymce with react-hook-form infinite loop while setting the state

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related