The goal is to send data from flutter to the script field in html.
I think the data is being send and received by html file but i cant get a handle on the data.
the goal is for the script field (html file) to use the data send from the user in the auto complete.
code1:
MonacoEditorWidget(objects: {"current":{"name":"b"}, },)
code2:
import 'dart:convert';
import 'dart:html' as html;
import 'dart:async';
import 'package:flutter/material.dart';
import 'dart:ui' as ui;
class MonacoEditorWidget extends StatefulWidget {
final Map<String, dynamic> objects;
MonacoEditorWidget({Key? key, required this.objects}) : super(key: key);
@override
_MonacoEditorWidgetState createState() => _MonacoEditorWidgetState();
}
class _MonacoEditorWidgetState extends State<MonacoEditorWidget> {
late StreamSubscription<html.MessageEvent> _messageSubscription;
@override
void initState() {
super.initState();
// Send the objects to the iframe for code suggestion
WidgetsBinding.instance.addPostFrameCallback((_) {
html.window.postMessage({
'type': 'initMonaco',
'objects': jsonEncode(widget.objects)
}, '*');
});
// Listen for messages from the iframe
_messageSubscription = html.window.onMessage.listen((event) {
print('Message received from iframe: ${event.data}');
});
}
@override
void dispose() {
_messageSubscription.cancel();
super.dispose();
}
@override
Widget build(BuildContext context) {
// iFrame
final String iframeId = 'monaco-editor-container';
// Create iframe element
final html.IFrameElement iframeElement = html.IFrameElement()
..src = 'monaco_editor.html'
..style.border = 'none';
// Register iframe
// ignore: undefined_prefixed_name
ui.platformViewRegistry.registerViewFactory(
iframeId,
(int viewId) => iframeElement,
);
return HtmlElementView(viewType: iframeId);
}
}
code3(script field /html file):
<!DOCTYPE html>
<html>
<head>
<!-- Load the Monaco Editor Loader Script -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.47.0/min/vs/loader.min.js"
integrity="sha512-ZG31AN9z/CQD1YDDAK4RUAvogwbJHv6bHrumrnMLzdCrVu4HeAqrUX7Jsal/cbUwXGfaMUNmQU04tQ8XXl5Znw=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
body,
html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
display: flex;
/* Establishes a flex container */
overflow: hidden;
/* Prevents unwanted overflow */
}
#editorArea,
#output {
flex: 1;
/* This ensures both the editor area and output take up equal space */
min-width: 0;
/* Prevents flex items from growing beyond their content size, allowing shrinking */
}
#editorArea {
display: flex;
flex-direction: column;
overflow: hidden;
/* Ensures overflow content in the editor is scrollable */
}
#toolbar {
padding: 10px;
background-color: #f5f5f5;
border-bottom: 1px solid #ccc;
}
#editorContainer {
flex-grow: 1;
overflow: auto;
/* Allows scrolling within the editor if content overflows */
}
#container {
width: 100%;
height: 100%;
/* Ensures the editor uses the full available area */
}
#outputArea {
display: flex;
flex-direction: column;
flex: 1;
/* Equal width with the editor area */
overflow: hidden;
/* Hide overflow */
}
#outputToolbar {
display: flex;
justify-content: space-between;
padding: 10px;
background-color: #f5f5f5;
border-bottom: 1px solid #ccc;
}
#output {
flex-grow: 1;
padding: 10px;
overflow: auto;
/* Make output scrollable */
border-left: 1px solid #ddd;
/* Visual separation */
}
</style>
</head>
<body>
<div id="editorArea">
<div id="toolbar">
<select id="languageSelector">
<option value="javascript">JavaScript</option>
</select>
</div>
<div id="editorContainer">
<div id="container"></div>
</div>
</div>
<div id="outputArea">
<div id="outputToolbar">
<button id="runCodeButton">Run</button>
<button id="exitEditorButton" style="float: right;">Exit Editor</button>
</div>
<div id="output">Output will appear here...</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
require.config({
paths: {
'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.47.0/min/vs'
}
});
require(['vs/editor/editor.main'], function () {
var editor = monaco.editor.create(document.getElementById('container'), {
value: "// Your code here",
language: 'javascript',
theme: 'vs-dark',
automaticLayout: true
});
// Listen for changes in the language selector and update the editor
document.getElementById('languageSelector').addEventListener('change', function () {
var newLanguage = this.value;
monaco.editor.setModelLanguage(editor.getModel(), newLanguage);
});
});
document.getElementById('runCodeButton').addEventListener('click', function () {
// Save the original console.log
const originalConsoleLog = console.log;
// Clear the output window before each run
document.getElementById('output').textContent = '';
// Override console.log
console.log = function (...args) {
// Display output in the UI's output window
document.getElementById('output').textContent += args.join(' ') + 'n';
// Optionally call the original console.log to see output in the browser console as well
// originalConsoleLog.apply(console, args);
};
try {
// Get the current code from the Monaco editor
const userCode = monaco.editor.getModels()[0].getValue();
// Evaluate the user's code
eval(userCode);
} catch (e) {
// If an error occurs, display it in the output window
document.getElementById('output').textContent = 'Error: ' + e.message;
} finally {
// Restore the original console.log
console.log = originalConsoleLog;
}
});
});
</script>
</body>
</html>
this is the output i see::
Restarted application in 27ms.
The debugEmulateFlutterTesterEnvironment getter is deprecated and will be removed in a future release. Please use `debugEmulateFlutterTesterEnvironment` from `dart:ui_web` instead.
The platformViewRegistry getter is deprecated and will be removed in a future release. Please import it from `dart:ui_web` instead.
Height of Platform View type: [monaco-editor-container] may not be set. Defaulting to `height: 100%`.
Set `style.height` to any appropriate value to stop this message.
Width of Platform View type: [monaco-editor-container] may not be set. Defaulting to `width: 100%`.
Set `style.width` to any appropriate value to stop this message.
22
{type: initMonaco, objects: {"current":{"name":"b"}}}
17
Message received from iframe: {type: initMonaco, objects: {"current":{"name":"b"}}}
it appears that the data is being received somehow by the html, but i cant get a handle on it.
is it possible to do this?
these are my dependecies::
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^1.0.2
js: ^0.7.1
flutter_js: ^0.8.1
i found this medium article that might help, didnt help me 🙁
https://medium.com/@andcachia/communication-between-flutter-iframe-and-html-parent-9fd7acd33ebf
