I'm trying to embed Ace editor in my Flutter Web project. I've already wrote Flutter Interop JS with this package. My problem is that the Ace editor requires HTML element in which it will be placed. According to the Ace API Reference, I have to call Ace edit method with the HTML element id, or with the DOMElement itself, to provide it.
I'm creating DivElement in Flutter Web and displaying it using HtmlElementView. But Flutter puts my element in shadow root, so I can't call it directly with it's id. Then I call the Ace.edit method with my DivElement object and I see the Ace editor at the page. But the editor is not able to display text, work with it and create selections. It's just an empty editor with line numbers. Example is here.
Screenshot of an empty Ace editor
I also reproduced this error without Flutter using JavaScript. Example is here.
I'm looking for a way to use Ace editor in shadow root or for a way not to use shadow root to place an HTML Element in Flutter Web.
<body>
<script>
let el = document.createElement('div');
const newContent = document.createTextNode("some code\ntwo lines");
el.appendChild(newContent);
el.setAttribute('style', 'width: 500px; height: 500px; background-color: gray');
el.setAttribute('id', 'editor');
customElements.define('flt-platform-view', class extends HTMLElement {
connectedCallback() {
const shadow = this.attachShadow({mode: 'open'});
shadow.appendChild(el);
}
});
</script>
<flt-platform-view></flt-platform-view>
<script src="ace/ace.js" type="application/javascript"></script>
<script>
let Document = ace.require("ace/document").Document;
let doc = new Document("Lorem ipsum\ntwo lines");
let editor = ace.edit(el);
editor.getSession().setDocument(doc);
</script>
</body>
After creating the editor, attach the renderer to the shadow root.