From 5ad800a2b08f67d7662cfa60db5ed3fb6c30f764 Mon Sep 17 00:00:00 2001
From: HuyNguyen <quanghnguyen@linagora.com>
Date: Fri, 26 Jan 2024 17:35:25 +0700
Subject: [PATCH] TF-2427: Update height of body composer when changing screen
 size

---
 .../widgets/web/web_editor_widget.dart        | 87 ++++++++++++-------
 1 file changed, 54 insertions(+), 33 deletions(-)

diff --git a/lib/features/composer/presentation/widgets/web/web_editor_widget.dart b/lib/features/composer/presentation/widgets/web/web_editor_widget.dart
index fec1b7317..765706eec 100644
--- a/lib/features/composer/presentation/widgets/web/web_editor_widget.dart
+++ b/lib/features/composer/presentation/widgets/web/web_editor_widget.dart
@@ -55,17 +55,21 @@ class _WebEditorState extends State<WebEditorWidget> {
 
   static const double _offsetHeight = 50;
   static const double _offsetWidth = 90;
+  static const double _defaultHtmlEditorHeight = 550;
 
   late HtmlEditorController _editorController;
   double? dropZoneWidth;
   double? dropZoneHeight;
+  final ValueNotifier<double> _htmlEditorHeight = ValueNotifier(_defaultHtmlEditorHeight);
 
   @override
   void initState() {
     super.initState();
     _editorController = widget.editorController;
+    log('_WebEditorState::initState:height: ${widget.height} | width: ${widget.width}');
     if (widget.height != null) {
       dropZoneHeight = widget.height! - _offsetHeight;
+      _htmlEditorHeight.value = widget.height ?? _defaultHtmlEditorHeight;
     }
     if (widget.width != null) {
       dropZoneWidth = widget.width! - _offsetWidth;
@@ -79,44 +83,61 @@ class _WebEditorState extends State<WebEditorWidget> {
     if (oldWidget.direction != widget.direction) {
       _editorController.updateBodyDirection(widget.direction.name);
     }
+
+    log('_EmailEditorState::didUpdateWidget():Old: ${oldWidget.height} | current: ${widget.height}');
+
+    if (oldWidget.height != widget.height) {
+      _htmlEditorHeight.value = widget.height ?? _defaultHtmlEditorHeight;
+    }
     super.didUpdateWidget(oldWidget);
   }
 
+  @override
+  void dispose() {
+    _htmlEditorHeight.dispose();
+    super.dispose();
+  }
+
   @override
   Widget build(BuildContext context) {
-    return HtmlEditor(
-      key: const Key('web_editor'),
-      controller: _editorController,
-      htmlEditorOptions: HtmlEditorOptions(
-        shouldEnsureVisible: true,
-        hint: '',
-        darkMode: false,
-        initialText: widget.content,
-        customBodyCssStyle: HtmlUtils.customCssStyleHtmlEditor(direction: widget.direction),
-        spellCheck: true,
-      ),
-      htmlToolbarOptions: const HtmlToolbarOptions(
-        toolbarType: ToolbarType.hide,
-        defaultToolbarButtons: [],
-      ),
-      otherOptions: OtherOptions(
-        height: 550,
-        dropZoneWidth: dropZoneWidth,
-        dropZoneHeight: dropZoneHeight,
-      ),
-      callbacks: Callbacks(
-        onBeforeCommand: widget.onChangeContent,
-        onChangeContent: widget.onChangeContent,
-        onInit: () => widget.onInitial?.call(widget.content),
-        onFocus: widget.onFocus,
-        onBlur: widget.onUnFocus,
-        onMouseDown: () => widget.onMouseDown?.call(context),
-        onChangeSelection: widget.onEditorSettings,
-        onChangeCodeview: widget.onChangeContent,
-        onImageUpload: widget.onImageUploadSuccessAction,
-        onImageUploadError: widget.onImageUploadFailureAction,
-        onTextFontSizeChanged: widget.onEditorTextSizeChanged,
-      ),
+    return ValueListenableBuilder(
+      valueListenable: _htmlEditorHeight,
+      builder: (context, height, _) {
+        return HtmlEditor(
+          key: Key('web_editor_$height'),
+          controller: _editorController,
+          htmlEditorOptions: HtmlEditorOptions(
+            shouldEnsureVisible: true,
+            hint: '',
+            darkMode: false,
+            initialText: widget.content,
+            customBodyCssStyle: HtmlUtils.customCssStyleHtmlEditor(direction: widget.direction),
+            spellCheck: true,
+          ),
+          htmlToolbarOptions: const HtmlToolbarOptions(
+            toolbarType: ToolbarType.hide,
+            defaultToolbarButtons: [],
+          ),
+          otherOptions: OtherOptions(
+            height: height,
+            dropZoneWidth: dropZoneWidth,
+            dropZoneHeight: dropZoneHeight,
+          ),
+          callbacks: Callbacks(
+            onBeforeCommand: widget.onChangeContent,
+            onChangeContent: widget.onChangeContent,
+            onInit: () => widget.onInitial?.call(widget.content),
+            onFocus: widget.onFocus,
+            onBlur: widget.onUnFocus,
+            onMouseDown: () => widget.onMouseDown?.call(context),
+            onChangeSelection: widget.onEditorSettings,
+            onChangeCodeview: widget.onChangeContent,
+            onImageUpload: widget.onImageUploadSuccessAction,
+            onImageUploadError: widget.onImageUploadFailureAction,
+            onTextFontSizeChanged: widget.onEditorTextSizeChanged,
+          ),
+        );
+      }
     );
   }
 }
\ No newline at end of file