jodit
jodit copied to clipboard
Popups don't work inside Shadow DOM
Jodit Version: 3.18.9
Browser: Chrome/FF OS: Windows Is React App: True
Code CodeSandbox
Expected behavior: If you try to select image or table, popup with additional menu should be shown.
Actual behavior: Popup is not shown:
-
https://github.com/xdan/jodit/blob/5278d95338da6c67807f4dae8a1dc53d94d96eeb/src/plugins/select/select.ts#L85 Component bind click event to window and check target inside callback. This doesn't work with Shadow DOM (e.target is Shadow DOM host every time). We have to use "path" instead of target. I made CodeSandbox example. Here I patch Select plugin "onOutsideClick" method with "getEventTarget" helper. If you try to select image - poppup will work (but not the case with table, see next) So instead of patching we should just use "getEventTarget" everywhere.
-
https://github.com/xdan/jodit/blob/5278d95338da6c67807f4dae8a1dc53d94d96eeb/src/plugins/table/select-cells.ts#L163 Because of that condition popup is shown and closed at the same time - "document.elementFromPoint" method can't search inside Shadow DOM. I made another CodeSandbox example where "document.elementFromPoint" patched with helper method with deep search. So instead of patching we should just use "elementFromPoint" everywhere.