CODEWITHSUNDEEP
reactjstinymcereact-hook-form
walker1
walker1

Reputation: 361

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

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>
        </>
    )
}

Upvotes: 2

Views: 3820

Answers (2)

DINA TAKLIT
DINA TAKLIT

Reputation: 8388

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>
  )}
/>

Upvotes: 2

Joris
Joris

Reputation: 2796

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.

Upvotes: 4

Related Questions