Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-23 00:48:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

Fix: Content overflow issue in rich text editor (#11405)

Browse source 
* Fixed the content overflow issue in rich text editor.

* Fixed issue where content overflowed when height is resized below a certain height.
This commit is contained in:
Devanshu Rastogi 2024-12-04 13:53:28 +05:30 committed by GitHub
parent 05b25cfe82
commit f5cab90b5c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 27 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
frontend/src/Editor/Components/DraftEditor.jsx
View file

@ -152,6 +152,9 @@ class DraftEditor extends React.Component {
editorState: EditorState.createWithContent(ContentState.createFromText(this.props.defaultValue)),
};
this.editorContainerRef = React.createRef();
this.controlsRef = React.createRef();
this.focus = () => this.refs.editor.focus();
this.onChange = (editorState) => {
let html = stateToHTML(editorState.getCurrentContent());
@ -165,6 +168,27 @@ class DraftEditor extends React.Component {
this.toggleInlineStyle = this._toggleInlineStyle.bind(this);
}
componentDidMount() {
//For resizing the editor container based on the height of rich text editor controls
this.resizeObserver = new ResizeObserver(() => {
if (this.controlsRef.current && this.editorContainerRef.current) {
const controlsHeight = this.controlsRef.current.offsetHeight;
const editorHeight = this.props.height - 46 - controlsHeight;
this.editorContainerRef.current.style.height = `${editorHeight}px`;
}
});
if (this.controlsRef.current) {
this.resizeObserver.observe(this.controlsRef.current);
}
}
componentWillUnmount() {
if (this.resizeObserver) {
this.resizeObserver.disconnect();
}
}
componentDidUpdate(prevProps) {
if (prevProps.defaultValue !== this.props.defaultValue) {
const newContentState = ContentState.createFromText(this.props.defaultValue);
@ -219,12 +243,12 @@ class DraftEditor extends React.Component {
}
return (
<div className="RichEditor-root">
<div className="RichEditor-controls">
<div className="RichEditor-root" style={{ overflowY: 'scroll', scrollbarWidth: 'none' }}>
<div className="RichEditor-controls" ref={this.controlsRef}>
<BlockStyleControls editorState={editorState} onToggle={this.toggleBlockType} />
<InlineStyleControls editorState={editorState} onToggle={this.toggleInlineStyle} />
</div>
<div className={className} style={{ height: `${this.props.height - 60}px` }} onClick={this.focus}>
<div className={className} ref={this.editorContainerRef} onClick={this.focus}>
<Editor
blockStyleFn={getBlockStyle}
customStyleMap={styleMap}