Fix document.queryCommandValue('hiliteColor') not working

linagora · May 31, 2023 · e056608 · e056608
1 parent c2988da
commit e056608
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 6 deletions.
diff --git a/lib/src/widgets/html_editor_widget_mobile.dart b/lib/src/widgets/html_editor_widget_mobile.dart
@@ -403,7 +403,7 @@ class _HtmlEditorWidgetMobileState extends State<HtmlEditorWidget> {
                             var fontName;
                             var fontSize = 16;
                             var foreColor = "000000";
-                            var backColor = "FFFF00";
+                            var backColor = "FFFFFF";
                             var focusNode2 = \$(window.getSelection().focusNode);
                             var parentList = focusNode2.closest("div.note-editable ol, div.note-editable ul");
                             var parentListType = parentList.css('list-style-type');
@@ -428,6 +428,10 @@ class _HtmlEditorWidgetMobileState extends State<HtmlEditorWidget> {
                               fontSize = document.queryCommandValue('fontSize');
                               foreColor = document.queryCommandValue('foreColor');
                               backColor = document.queryCommandValue('hiliteColor');
+                              if (!backColor) {
+                                 console.log("Browser not support queryCommandValue('hiliteColor')");
+                                 backColor = document.queryCommandValue('backColor');
+                              }
                               fontName = document.queryCommandValue('fontName');
                             }
                             var message = {

diff --git a/lib/src/widgets/html_editor_widget_web.dart b/lib/src/widgets/html_editor_widget_web.dart
@@ -317,10 +317,25 @@ class _HtmlEditorWidgetWebState extends State<HtmlEditorWidget> {
                 \$('.note-status-output').empty();
               }
               if (data["type"].includes("execCommand")) {
-                if (data["argument"] === null) {
-                  document.execCommand(data["command"], false);
+                var commandType = data["command"];
+                if (commandType === "hiliteColor") {
+                  if (data["argument"] === null) {
+                    if (!document.execCommand("hiliteColor", false)) {
+                      console.log("Browser not support document.execCommand('hiliteColor')");
+                      document.execCommand("backColor", false);
+                    }
+                  } else {
+                    if (!document.execCommand("hiliteColor", false, data["argument"])) {
+                      console.log("Browser not support document.execCommand('hiliteColor')");
+                      document.execCommand("backColor", false, data["argument"]);
+                    }
+                  }
                 } else {
-                  document.execCommand(data["command"], false, data["argument"]);
+                  if (data["argument"] === null) {
+                    document.execCommand(commandType, false);
+                  } else {
+                    document.execCommand(commandType, false, data["argument"]);
+                  }
                 }
               }
               if (data["type"].includes("changeListStyle")) {
@@ -420,7 +435,7 @@ class _HtmlEditorWidgetWebState extends State<HtmlEditorWidget> {
           var fontName;
           var fontSize = 16;
           var foreColor = "000000";
-          var backColor = "FFFF00";
+          var backColor = "FFFFFF";
           var focusNode2 = \$(window.getSelection().focusNode);
           var parentList = focusNode2.closest("div.note-editable ol, div.note-editable ul");
           var parentListType = parentList.css('list-style-type');
@@ -444,7 +459,11 @@ class _HtmlEditorWidgetWebState extends State<HtmlEditorWidget> {
             parent = document.queryCommandValue('formatBlock');
             fontSize = document.queryCommandValue('fontSize');
             foreColor = document.queryCommandValue('foreColor');
-            backColor = document.queryCommandValue('hiliteColor');
+            backColor = document.queryCommandValue('hiliteColor')
+            if (!backColor) {
+               console.log("Browser not support queryCommandValue('hiliteColor')");
+               backColor = document.queryCommandValue('backColor');
+            }
             fontName = document.queryCommandValue('fontName');
           }
           var message = {