Set width/height for drop zone view

linagora · Sep 29, 2023 · 5076681 · 5076681
1 parent 291dd15
commit 5076681
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 7 deletions.
diff --git a/lib/assets/summernote-lite-unminified.js b/lib/assets/summernote-lite-unminified.js
diff --git a/lib/assets/summernote-lite-v2.min.js b/lib/assets/summernote-lite-v2.min.js
diff --git a/lib/src/widgets/html_editor_widget_web.dart b/lib/src/widgets/html_editor_widget_web.dart
@@ -61,6 +61,8 @@ class _HtmlEditorWidgetWebState extends State<HtmlEditorWidget> {
   /// Tracks whether the editor was disabled onInit (to avoid re-disabling on reload)
   bool alreadyDisabled = false;
 
+  final _jsonEncoder = const JsonEncoder();
+
   @override
   void initState() {
     actualHeight = widget.otherOptions.height;
@@ -70,6 +72,18 @@ class _HtmlEditorWidgetWebState extends State<HtmlEditorWidget> {
     super.initState();
   }
 
+  @override
+  void didUpdateWidget(covariant HtmlEditorWidget oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    if (widget.otherOptions.dropZoneWidth != oldWidget.otherOptions.dropZoneWidth ||
+        widget.otherOptions.dropZoneHeight != oldWidget.otherOptions.dropZoneHeight) {
+      _setDimensionDropZoneView(
+        width: widget.otherOptions.dropZoneWidth,
+        height: widget.otherOptions.dropZoneHeight,
+      );
+    }
+  }
+
   void initSummernote() async {
     var headString = '';
     var summernoteCallbacks = '''callbacks: {
@@ -254,6 +268,20 @@ class _HtmlEditorWidgetWebState extends State<HtmlEditorWidget> {
               if (data["type"].includes("setInputType")) {
                 document.getElementsByClassName('note-editable')[0].setAttribute('inputmode', '${describeEnum(widget.htmlEditorOptions.inputType)}');
               }
+              if (data["type"].includes("setDimensionDropZone")) {
+                var styleDropZone = "";
+                if (data["height"]) {
+                  styleDropZone = "height:" + data["height"] + "px;";
+                }
+                if (data["width"]) {
+                  styleDropZone = styleDropZone + "width:" + data["width"] + "px;";
+                }
+                const nodeDropZone = document.querySelector('.note-editor > .note-dropzone');
+                if (nodeDropZone) {
+                  nodeDropZone.setAttribute('style', styleDropZone);
+                  console.log("nodeDropZone: " + nodeDropZone.outerHTML);
+                }
+              }
               if (data["type"].includes("setText")) {
                 \$('#summernote-2').summernote('code', data["text"]);
               }
@@ -570,9 +598,8 @@ class _HtmlEditorWidgetWebState extends State<HtmlEditorWidget> {
         data['view'] = createdViewId;
         var data2 = <String, Object>{'type': 'toIframe: setInputType'};
         data2['view'] = createdViewId;
-        const jsonEncoder = JsonEncoder();
-        var jsonStr = jsonEncoder.convert(data);
-        var jsonStr2 = jsonEncoder.convert(data2);
+        var jsonStr = _jsonEncoder.convert(data);
+        var jsonStr2 = _jsonEncoder.convert(data2);
         html.window.onMessage.listen((event) {
           var data = json.decode(event.data);
           if (data['type'] != null &&
@@ -618,6 +645,14 @@ class _HtmlEditorWidgetWebState extends State<HtmlEditorWidget> {
         });
         html.window.postMessage(jsonStr, '*');
         html.window.postMessage(jsonStr2, '*');
+
+        if (widget.otherOptions.dropZoneHeight != null ||
+            widget.otherOptions.dropZoneWidth != null) {
+          _setDimensionDropZoneView(
+            height: widget.otherOptions.dropZoneHeight,
+            width: widget.otherOptions.dropZoneWidth
+          );
+        }
       });
     ui.platformViewRegistry
         .registerViewFactory(createdViewId, (int viewId) => iframe);
@@ -861,4 +896,19 @@ class _HtmlEditorWidgetWebState extends State<HtmlEditorWidget> {
       }
     });
   }
+
+  void _setDimensionDropZoneView({double? height, double? width}) {
+    var dataDimension = <String, Object>{
+      'type': 'toIframe: setDimensionDropZone',
+      'view': createdViewId,
+    };
+    if (height != null) {
+      dataDimension['height'] = '${height.round()}';
+    }
+    if (width != null) {
+      dataDimension['width'] = '${width.round()}';
+    }
+    final jsonDimension = _jsonEncoder.convert(dataDimension);
+    html.window.postMessage(jsonDimension, '*');
+  }
 }
diff --git a/lib/utils/options.dart b/lib/utils/options.dart
@@ -423,6 +423,8 @@ class OtherOptions {
           Border.fromBorderSide(BorderSide(color: Color(0xffececec), width: 1)),
     ),
     this.height = 400,
+    this.dropZoneWidth,
+    this.dropZoneHeight,
   });
 
   /// The BoxDecoration to use around the Html editor. By default, the widget
@@ -435,4 +437,10 @@ class OtherOptions {
   ///
   /// The default value is 400.
   final double height;
+
+  /// Sets the width of the DropZone widget.
+  final double? dropZoneWidth;
+
+  /// Sets the height of the DropZone widget.
+  final double? dropZoneHeight;
 }