Flutter web project with javascript modules that use requireJS (Monaco editor in Flutter web)

Question

Flutter web project with javascript modules that use requireJS (Monaco editor in Flutter web)

155 Views Asked by user3103070 At 26 November 2023 at 19:39

I'm trying to use the Monaco editor in Flutter Web.

The simplest way that I see is to sync load all the resources example.

Here's a stand alone html file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
            rel="stylesheet"
            data-name="vs/editor/editor.main"
            href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.44.0/min/vs/editor/editor.main.css"
        />

    <style>
      @font-face {
        font-family: "codicon",
        src: url("https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.44.0/min/vs/base/browser/ui/codicons/codicon.ttf") format("truetype")
      }
    </style>
    <title>Monaco</title>
  </head>
  <body>
    <h2>Monaco Editor Sync Loading Sample</h2>
    <div id="code" style="width: 800px; height: 600px; border: 1px solid grey"></div>

    <script>
      var require = { paths: { vs: "https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.44.0/min/vs" } };
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.44.0/min/vs/loader.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.44.0/min/vs/editor/editor.main.nls.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.44.0/min/vs/editor/editor.main.js"></script>

    <script>
      var editor = monaco.editor.create(document.getElementById("code"), {
        value:  ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
        language: "javascript",
        additionalCssClassName: "code"
      });
    </script>

  </body>
</html>

My question is: How do I modify the index.html file of the sample Flutter Web project, so I can load all the required assets? There seems to be an issue with the line

      var require = { paths: { vs: "https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.44.0/min/vs" } };

as the flutter build never finishes (gets stuck somewhere.) I see that Flutter itself uses requirejs and there may be a conflict that I don't know how to resolve.

If you know how to do this, please post a Fluter Web index.html file that loads all the js required files for the editor.

Thank you, T

Original Q&A

There are 1 best solutions below

**Hua777** · Answer 1 · 2024-01-11T02:21:45.053000

https://github.com/Hua777/flutter_monaco_editor

I have roughly completed the flutter version of monaco editor.

But it's not perfect yet, I hope it helps.

how does it work

  static Future<void> _waitForGetting() async {
    if (_monaco == null) {
      print('[monaco] getting...');
      return Future.delayed(
        const Duration(seconds: 1),
        () {
          return _waitForGetting();
        },
      );
    }
  }

  static Future<void> load() async {
    print('[monaco] preparing');
    final NodeValidatorBuilder htmlValidator = NodeValidatorBuilder.common()
      ..allowElement('link', attributes: ['rel', 'href', 'data-name'])
      ..allowElement('script', attributes: ['src']);
    (document.getElementsByTagName('body')[0] as HtmlElement).insertAdjacentHtml(
      'afterBegin',
      '''
<link rel="stylesheet" data-name="vs/editor/editor.main" href="/vs/editor/editor.main.css">
<script src="/vs/loader.js"></script>
<script src="/vs/editor/editor.main.nls.js"></script>
<script src="/vs/editor/editor.main.js"></script>
  ''',
      validator: htmlValidator,
    );
    print('[monaco] loading');
    await _waitForGetting();
    print('[monaco] loaded');
  }

load function import monaco js.

_waitForGetting function make sure monaco loads successfully.

you just need to call load in main function.

next step

var monaco = context['monaco'];

you can use monaco like js.

Flutter web project with javascript modules that use requireJS (Monaco editor in Flutter web)

There are 1 best solutions below

Related Questions in FLUTTER

Related Questions in REQUIREJS

Related Questions in MONACO-EDITOR

Trending Questions

Popular # Hahtags

Popular Questions