Click to tune does not work inside shadow DOM

[damodharanj]

Click to tune does not work inside shadow DOM

Steps to reproduce:

1. Go to Demo
2. Try writing and use "Click to tune"
3. No operation happens

Expected behavior: Default actions of Editor.js

Screenshots:

Device, Browser, OS: Mac, Chrome

Editor.js version: @latest

Plugins you use with their versions:

[EisenbergEffect]

It would be great if the Editor.js team could do some work to ensure that everything functions properly inside of a shadow root. There's another issue, #2026 that relates to this as well.

I worked with one of the rich text editor teams at Microsoft to get their editor working in a shadow dom. Here are a couple of notes:

• For styles, Editor.js probably needs to use the getRootNode() API and not assume that it can place styles in the head.
• For selection, have a look here https://github.com/microsoft/roosterjs/issues/722 for some notes and approaches. You may also find this useful https://github.com/GoogleChromeLabs/shadow-selection-polyfill/issues/11 along with the bug fix to Safari https://github.com/WebKit/WebKit/pull/10843

Microsoft was able to get the RoosterJS editor up and running in shadow dom last year without much effort, so it should be possible to get Editor.js working as well. This would be a great selling point for the library. It's the only thing holding me back from using it and recommending it broadly right now.

Looking forward to these fixes. Can't wait to start using this!

[unilynx]

This would also be a first step towards safely loading parts of a website's CSS into the editor to get closer to a WYSIWYG (without having to style the editor explicitly) - eg to get H1, H2 and Paragraph styling (and especially their vertical margin rules) to match the website