From 7abcea6320a9dad1754bcd5800ed35b2c1bb8ba9 Mon Sep 17 00:00:00 2001
From: DatDang <tddang@linagora.com>
Date: Fri, 1 Mar 2024 15:45:46 +0700
Subject: [PATCH] TF-2591 Run js script on drop with HtmlEditor

---
 core/lib/utils/html/html_utils.dart           | 16 +++++++++
 .../widgets/web/web_editor_widget.dart        | 36 +++++++++++++++++--
 2 files changed, 50 insertions(+), 2 deletions(-)

diff --git a/core/lib/utils/html/html_utils.dart b/core/lib/utils/html/html_utils.dart
index c2fda6341..c9ab00f37 100644
--- a/core/lib/utils/html/html_utils.dart
+++ b/core/lib/utils/html/html_utils.dart
@@ -16,6 +16,22 @@ class HtmlUtils {
         });''',
     name: 'lineHeight100Percent');
 
+  static const registerDropListener = (
+    script: '''
+      document.querySelector(".note-editable").addEventListener(
+        "drop",
+        (event) => window.parent.postMessage(
+          JSON.stringify({"name": "registerDropListener"})))''',
+    name: 'registerDropListener');
+
+  static const unregisterDropListener = (
+    script: '''
+      console.log("unregisterDropListener");
+      const editor = document.querySelector(".note-editable");
+      const newEditor = editor.cloneNode(true);
+      editor.parentNode.replaceChild(newEditor, editor);''',
+    name: 'unregisterDropListener');
+
   static String customCssStyleHtmlEditor({TextDirection direction = TextDirection.ltr}) {
     if (PlatformInfo.isWeb) {
       return '''
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 a1a3543cf..44ade9bab 100644
--- a/lib/features/composer/presentation/widgets/web/web_editor_widget.dart
+++ b/lib/features/composer/presentation/widgets/web/web_editor_widget.dart
@@ -1,9 +1,11 @@
+import 'dart:convert';
 
 import 'package:collection/collection.dart';
 import 'package:core/utils/app_logger.dart';
 import 'package:core/utils/html/html_utils.dart';
 import 'package:flutter/material.dart';
 import 'package:html_editor_enhanced/html_editor.dart';
+import 'package:universal_html/html.dart' hide VoidCallback;
 
 typedef OnChangeContentEditorAction = Function(String? text);
 typedef OnInitialContentEditorAction = Function(String text);
@@ -62,6 +64,16 @@ class _WebEditorState extends State<WebEditorWidget> {
   double? dropZoneWidth;
   double? dropZoneHeight;
   final ValueNotifier<double> _htmlEditorHeight = ValueNotifier(_defaultHtmlEditorHeight);
+  bool _dropListenerRegistered = false;
+
+  void _dropListener(Event event) {
+    if (event is MessageEvent) {
+      if (jsonDecode(event.data)['name'] == HtmlUtils.registerDropListener.name) {
+        _editorController.evaluateJavascriptWeb(
+          HtmlUtils.lineHeight100Percent.name);
+      }
+    }
+  }
 
   @override
   void initState() {
@@ -76,6 +88,8 @@ class _WebEditorState extends State<WebEditorWidget> {
       dropZoneWidth = widget.width! - _offsetWidth;
     }
     log('_WebEditorState::initState:dropZoneWidth: $dropZoneWidth | dropZoneHeight: $dropZoneHeight');
+
+    window.addEventListener("message", _dropListener);
   }
 
   @override
@@ -96,6 +110,9 @@ class _WebEditorState extends State<WebEditorWidget> {
   @override
   void dispose() {
     _htmlEditorHeight.dispose();
+    _editorController.evaluateJavascriptWeb(
+      HtmlUtils.unregisterDropListener.name);
+    window.removeEventListener("message", _dropListener);
     super.dispose();
   }
 
@@ -118,7 +135,15 @@ class _WebEditorState extends State<WebEditorWidget> {
               WebScript(
                 name: HtmlUtils.lineHeight100Percent.name,
                 script: HtmlUtils.lineHeight100Percent.script,
-              )
+              ),
+              WebScript(
+                name: HtmlUtils.registerDropListener.name,
+                script: HtmlUtils.registerDropListener.script,
+              ),
+              WebScript(
+                name: HtmlUtils.unregisterDropListener.name,
+                script: HtmlUtils.unregisterDropListener.script,
+              ),
             ])
           ),
           htmlToolbarOptions: const HtmlToolbarOptions(
@@ -133,7 +158,14 @@ class _WebEditorState extends State<WebEditorWidget> {
           callbacks: Callbacks(
             onBeforeCommand: widget.onChangeContent,
             onChangeContent: widget.onChangeContent,
-            onInit: () => widget.onInitial?.call(widget.content),
+            onInit: () {
+              widget.onInitial?.call(widget.content);
+              if (!_dropListenerRegistered) {
+                _editorController.evaluateJavascriptWeb(
+                  HtmlUtils.registerDropListener.name);
+                _dropListenerRegistered = true;
+              }
+            },
             onFocus: widget.onFocus,
             onBlur: widget.onUnFocus,
             onMouseDown: () => widget.onMouseDown?.call(context),