jodit icon indicating copy to clipboard operation
jodit copied to clipboard

Popups don't work inside Shadow DOM

Open eemorozov opened this issue 2 years ago • 0 comments

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:

  1. 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.

  2. 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.

eemorozov avatar Jul 12 '22 23:07 eemorozov