From f5cab90b5ccb42b78d1360618d2245b5a6c87f71 Mon Sep 17 00:00:00 2001
From: Devanshu Rastogi <devanshu.rastogi05@gmail.com>
Date: Wed, 4 Dec 2024 13:53:28 +0530
Subject: [PATCH] Fix: Content overflow issue in rich text editor (#11405)

* Fixed the content overflow issue in rich text editor.

* Fixed issue where content overflowed when height is resized below a certain height.
---
 .../src/Editor/Components/DraftEditor.jsx     | 30 +++++++++++++++++--
 1 file changed, 27 insertions(+), 3 deletions(-)

diff --git a/frontend/src/Editor/Components/DraftEditor.jsx b/frontend/src/Editor/Components/DraftEditor.jsx
index 71b9a9de04..1df78ee1bf 100644
--- a/frontend/src/Editor/Components/DraftEditor.jsx
+++ b/frontend/src/Editor/Components/DraftEditor.jsx
@@ -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}