I am using Next.JS in my project. I want to add the TinyMCE editor to my page. I have used the below code.
<TinyMceEditor
selector='textarea'
initialValue={ props.value }
apiKey=<API_KEY>
init={{
height: 500,
menubar: false,
plugins: [
'advlist autolink lists link image',
'charmap print preview anchor help',
'searchreplace visualblocks code',
'insertdatetime media table paste wordcount'
],
toolbar:
'undo redo | formatselect | bold italic underline | \
alignleft aligncenter alignright | \
bullist numlist outdent indent | \
anchor link table image media video | \
searchreplace visualblocks code'
}}
onChange={(...args) => console.log(args)}
/>
I am getting two different behavior of this code for the two different pages.
On the homepage, i.e. localhost:3000/
, the editor is working correctly. I can add Images through a popup modal, attach a link, etc.
But when I go localhost:3000/admin/teams
the input fields of the popup modal are not focusable. It does not gain focus when I click on it. But at the same time, I can interact with the buttons/checkboxes. It is just not focusing on the input field.
I am not getting what is causing this problem. The same problem is also happening in Jodit editor also. I am not getting whether it is related to the Next.JS environment issue or path-related issue. From the last few days after experimenting with these two editors, I am thinking the issue is related to the modal elements used in them (maybe).
Any advice or help would be appreciated. Thank you.
It was an issue with the dialog box of Material UI. After passing disableEnforceFocus={true}
to <Dialog />
component, it got resolved.