I am facing a challenge with my React Component that displays a tinymce editor. The task is to dynamically adjust the height of the editor after it has been initialized. To achieve this, I am utilizing the "React Grid Layout" package for resizing the component.
I have 2 questions in mind: 1. In which lifecycle method can I check for changes in the parent's height where the editor is rendered? 2. Where should I update the editor's configuration to set its height? Should it be within the init method?
render(){
<div id="wrapper">
<textArea id="tinymceSelector"></textArea>
</div>
}
One aspect of my proposed solution involves determining the height of the parent element as follows:
let parentHeight = document.getElementById('wrapper').clientHeight
If there is a disparity in the parent height before and after resizing using React Grid Layout, this value will indicate the difference in size.
Once I have identified the height change (which brings me back to question 1), I plan to update the tinymce configuration with:
editorinstance.theme.resizeTo(width, height);
Any insights or suggestions would be greatly appreciated. Thank you!