html editor enhanced alert dialog not working when the dialog placed on editor - flutter

Question

Dependency : html_editor_enhanced: ^2.4.0+1
HtmlEditor(
controller: controller,
htmlEditorOptions: HtmlEditorOptions(
darkMode: true,
initialText: _phase!.value,
hint: "Enter you information",
autoAdjustHeight: false,
shouldEnsureVisible: true,
webInitialScripts:
UnmodifiableListView([
WebScript(
name: "editorBG",
script:"document.getElementsByClassName('note-editable')[0].style.backgroundColor='blue';"),
WebScript(
name: "height",
script: """
var height = document.body.scrollHeight;
window.parent.postMessage(JSON.stringify({"type": "toDart: height", "height": height}), "*"); //,"color":'white'
"""),
]
)
),
htmlToolbarOptions:
const HtmlToolbarOptions(
// toolbarItemHeight: 90.0,
// gridViewHorizontalSpacing: 0.1,
// gridViewVerticalSpacing: 0.1,
toolbarPosition: ToolbarPosition.aboveEditor,
toolbarType: ToolbarType.nativeGrid
),
otherOptions: OtherOptions(
decoration: BoxDecoration(
color: Colors.white,
borderRadius:
BorderRadius.circular(10.0),
border: Border.all(
color: const Color.fromRGBO(244, 248, 248, 1),
width: 2),
),
),
);
If I click alert dialog(image choose) cancel or ok button, then click goes to editor only which is placed under dialog box. please confirm what other dependency is compatible for this... also this is flutter inbuild widget which they already wrap it with PointerInterceptor... but still it is not working

Answer 1

Problem:
html_editor_enhanced uses an HtmlElementView to display the editor and the HtmlElementView consume mouse events before Flutter gets to consume the events.
When overlaying Flutter widgets on top of HtmlElementView widgets that
respond to mouse gestures (handle clicks, for example), the clicks
will be consumed by the HtmlElementView, and not relayed to Flutter.
The result is that Flutter widget's onTap (and other) handlers won't
fire as expected, but they'll affect the underlying webview.
Source: pointer_interceptor docs
Solution:
Wrap the dialog widget with a PointerInterceptor from the pointer_interceptor package.
From the docs:
PointerInterceptor is a widget that prevents mouse events (in web)
from being captured by an underlying HtmlElementView.
So if your dialog code was this previously:
AlertDialog(
content: Container(
...
)
)
You should update it to this:
PointerInterceptor(
AlertDialog(
content: Container(
...
)
)
)

Answer 2

I've been having a similar issue, but I found this https://github.com/flutter/flutter/issues/54027#issuecomment-797757996
Try running your flutter app with "--web-renderer html".

Answer 3

if you face an error after ok or cancel you should clear focus before the dialog/page closed use the below function, first create a controller for the htmleditor
editorController.clearFocus();