I have a React Component that renders an instance of tinymce editor.The goal is to resize the editor's height dynamically after it has been initialized. I am using "React Grid Layout" package to resize the component.
2 Questions:
1. Where can I look up for the change in height of the editor's parent within the react component.In which lifecycle?
2. Where should Update the editor configuration for its height? Within the init method?
render(){
<div id="wrapper">
<textArea id="tinymceSelector"></textArea>
</div>
}
Part of my solution is to determine the parent's height like this:
let parentHeight = document.getElementById('wrapper').clientHeight
If there is any difference before and after resizing with React Grid Layout this parent Height will show the difference in size.
After I have found the height and determine the height change (but where? that is my question 1). I would update the tinymce configuration with:
editorinstance.theme.resizeTo (width, height);
Thank you!!
The implemented solution was:
On first render, I initialize the tinymce editor as follows:
I calculate the initial height at which the editor should be rendered based on #wrapper height.
I set the for the #wrapper's height in a variable called this._wrapperHeight.
Instead of setting the editor's height to the same height as the #wrapper, I adjust it to be only 70% of the total value. This prevents scrollbars. (I must say, I would like a different implementation to this because when I resize it to be too small the scrollbars are persistent)
this._editorHeight = this._wrapperHeight * 0.7;
During init, the I also had to include the plugin autoresize in the editor's configuration and also set the autoresize_min_height=this._editorHeight
After initialization has been accomplished, updating the height dynamically was achieved as follows:
In componentWillReceiveProps I calculate the #wrapper's height again.
Evaluate the old wrapper's height vs the new one
If they are different then: set the new height tinymce.get(this.props.renderId).theme.resizeTo(this._editorWidth, this._editorHeight);
Related
I have a dashboard panel using react js that I used react-grid-layout in it; I used react-grid-layout in my content and that works correctly but when I close my right side or left side panels (drawers) , the width of my content that is the parent of my react-grid-layout modifies but after this changes my column's width did not modify according to their parent's width size; How can I reload my ResponsiveGridLayout component to changing the childs(columns) width?
this is simple code for showing my problem in this question :
example
this is my dashboard image :
If you look at the documentation here you'll see that ResponsiveGridLayout is a combination of a component called Responsive and a HOC called WidthProvider
import { Responsive, WidthProvider } from 'react-grid-layout';
const ResponsiveGridLayout = WidthProvider(Responsive);
If you look at the code of WidthProvider you may notice it subscribes to widnow resize event
window.addEventListener("resize", this.onWindowResize);
which isn't particularly useful for you, because in your case window does not resize. One way to deal with this problem is to create your own WidthProvider and attach the listener to the element that actually resizes and wrap it around Responsive
const MyVeryOwnResponsiveGridLayout = MyWidthProvider(Responsive);
P.S. You can try requesting the feature from the component creator or volunteer to contribute to the project
I found a better answer than extending the WidthProvider:
Trigger a Window Resize event (without actually resizing the window). I found a delay of 1ms is necessary to make it work.
See this solution:
https://stackoverflow.com/a/62874552/17570516
I'm using DetalisList within ScrollablePane component to keep the header in view, and let the rows scrollable. However, this requires me to manually set the height of the scrollable container.
div.scrollable-container
ScrollablePane
DetailsList
When I investigate the DOM elements for DetalisList, I can see that it's wrapped inside a ViewPort element. The height of this element is the actual height of the sum of the height of all components that make up the list (column headers, rows. etc.). Thus, I want to be able to read this value and set the container height based on whether it exceeds a certain value or not.
Is there a nice to way to access the height of the ViewPort? I can always query the DOM, and find the element, but I'd like to avoid relying on the internal structure of the component.
So, far I could not find any information on this. I noticed DetailsList takes a prop called viewport, but I don't think this is what I want.
You can try by giving height in "vh" (viewport height) unit. For example,
const gridContainerStyle: IStackStyles = {
root: { height: "70vh", position: "relative" },
};
I'm looking for a JS / React solution to count height or lines number of draggable div blocks (having different width). Height is needed to calculate the content height inside dashed border which is equal to (viewport - draggable_blocks_height).
As you can imagine, calculation should work dynamically during the window sizing / changing resolution and during dragging the blocks / removing or adding to the draggable_blocks_container.
Any ideas, concepts or similar examples?
Thank you
https://www.npmjs.com/package/react-height
Or go npm shopping for any number of variations.
I would assign a ref to a wrapper div. Then write a function that gets the height of the ref and run that func on window resize. Something like...
<dif ref={(div) => this.Wrapper = div}>
{/* blocks */}
</div>
function calcHeight() {
const rect = this.Wrapper.getBoundingClientRect();
return rect.height;
}
componentDidMount() {
window.addEventListener('resize', this.calcHeight());
}
A bit confused on what you want to do, but if you want to mirror the height in another div, set the calculated height to state and then use a style prop to control the height of the 2nd div.
So I saw this JSfiddle that produces a div element with "textarea textarea--ghost" (non-ghost textarea) as a class. I see the following code snippet:
setFilledTextareaHeight() {
if (this.mounted) {
const element = this.ghost;
this.setState({
height: element.clientHeight,
});
}
}
But that seems to update only the height of the actual textarea box with class ".textarea". How does the height of the "ghost" element with class "textarea textarea--ghost" get updated? Is there something about the React lifecycle I'm not understanding?
No React magic here. As the jsfiddle mentions:
Uses a ghost div to measure height. So the ghost height is measured not set. The height is implicitly specified by the height of the content.
The procedure works by:
Leaving the height of the ghost textarea free
Setting the value of the ghost textarea to the value of the main textarea
Allow the browser to figure out how high to make the ghost textarea to fill the value by rendering it
Measure ghost textarea height in JS/React
Set height of main textarea
This complicated procedure is mainly needed for the height CSS transition as CSS transitions on height don't work for 100% old height to 100% new height, so explicit pixel units must be given for the transition to work.
It's happening like this...
The ghost div has a ref defined -
Line 67: ref={(c) => this.ghost = c}
The ghost div is updated with the value of the textarea during its render.
Line 70: {this.state.value}
This changes the ghost's height.
At the same time, during the onKeyUp event, the setFilledTextareaHeight method uses the reference this.ghost which is the DOM element of the ghost div to get the height of the ghost div and set's it as height in state.
Re-render and presto!
So in a nutshell, the ghost div changes per the value entered in the main text area and its height is then applied to the text area.
After a component is rendered, how can I get the width and height? I tried .getWidth() and .getHeight(), but it returns the values of config properties. It seems they are just the getters of width and height config options.
What I want is the width and height of component after its been shown or rendered.
Use .getEl() to retrieve top level element. And than use element's getWidth method:
var width = yourComponent.getEl().getWidth();
this will give you width of actual DOM element.