Flutter Monaco Editor Integration
I am implementing the Monaco Editor inside a Flutter web app and using an iFrameElement to load the editor. The setup works fine, but I’m facing an issue when trying to send data from the Flutter side to JavaScript (running inside the iframe). However, sending data from the Javascript to iFrame works fine.
Code reference: gist
Summary of the Issue:
- I’m using an iFrameElement in Flutter to integrate the Monaco Editor.
- I want to send data from Flutter to JavaScript, which should then be processed by the editor inside the iframe.
- However, when I attempt to send the data, the JavaScript inside the iframe seems to be receiving incorrect or unknown data.
- I’m using iFrameElement.contentWindow.postMessage to communicate between the iframe and the main page.
Required Functionality:
- Communication from the iFrameElement to JavaScript. (❌ Receiving some irrelevant data)
Actual data sent: ✅
<code>{
"name": "gokul"
}
</code>
<code>{
"name": "gokul"
}
</code>
{
"name": "gokul"
}
Received data: ❌
<code>{
"vscodeScheduleAsyncWork": 1
}
</code>
<code>{
"vscodeScheduleAsyncWork": 1
}
</code>
{
"vscodeScheduleAsyncWork": 1
}
- Communication from JavaScript to the iFrameElement works as expected. (✅ Working fine)