Add binding for Microsoft's Monaco editor

package.json

@@ -11,12 +11,14 @@
   "dependencies": {
     "bootstrap": "^5.0.2",
     "graphviz-react": "^1.2.0",
+    "monaco-editor": "^0.25.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
   "devDependencies": {
     "autoprefixer": "^10.3.1",
     "css-loader": "^5.2.6",
+    "file-loader": "^6.2.0",
     "html-webpack-plugin": "^5.3.2",
     "postcss": "^8.3.5",
     "postcss-loader": "^6.1.1",

src/bindings/dune

@@ -3,3 +3,9 @@
  (deps errorBoundary.mli)
  (action
   (run %{bin:gen_js_api} -o %{targets} %{deps})))
+
+(rule
+ (targets monaco.ml)
+ (deps monaco.mli)
+ (action
+  (run %{bin:gen_js_api} -o %{targets} %{deps})))

src/bindings/monaco.mli

@@ -0,0 +1,27 @@
+module Editor : sig
+  module ITextModel : sig
+    type t = private Ojs.t
+
+    val id : t -> string
+  end
+
+  val create_model : value:string -> ?language:string -> unit -> ITextModel.t
+    [@@js.global "monaco.editor.createModel"]
+
+  module IStandaloneCodeEditor : sig
+    type t = private Ojs.t
+
+    val set_value : t -> string -> unit [@@js.call]
+  end
+
+  module IStandaloneEditorConstructionOptions : sig
+    type t = { model : ITextModel.t; read_only : bool }
+  end
+
+  val create :
+    dom_element:React.Dom.domElement ->
+    ?options:IStandaloneEditorConstructionOptions.t ->
+    unit ->
+    IStandaloneCodeEditor.t
+    [@@js.global "monaco.editor.create"]
+end

src/static-requires.js

@@ -2,3 +2,6 @@ var prismJs = require("./static/prism.js");
 var prismCss = require("./static/prism.css");
 
 require('./stylesheet.scss');
+
+joo_global_object.monaco = require('monaco-editor/esm/vs/editor/editor.api');
+require('monaco-editor/esm/vs/basic-languages/cpp/cpp.contribution');

src/ui/editor/gvCodeEditor.re

@@ -0,0 +1,40 @@
+open Batteries;
+
+module Dom = React.Dom;
+module Js = Js_of_ocaml.Js;
+
+module Editor = Monaco.Editor;
+module IStandaloneCodeEditor = Editor.IStandaloneCodeEditor;
+
+[@react.component]
+let make = (~value=?, ~read_only=?) => {
+  let (value, read_only) = Utils.fix_opt_args2(value, read_only);
+  let value = Option.default("", value);
+  let read_only = Option.default(false, read_only);
+
+  let editor = React.useRef(None);
+
+  React.useEffect1(
+    () => {
+      editor
+      |> React.Ref.current
+      |> Option.may(e => IStandaloneCodeEditor.set_value(e, value));
+      None;
+    },
+    [|value|],
+  );
+
+  let ref =
+    Dom.Ref.callbackDomRef(
+      Js.Opt.iter(_, dom_element =>
+        if (editor |> React.Ref.current |> Option.is_none) {
+          let model = Editor.create_model(~value, ~language="c", ());
+          Editor.create(~dom_element, ~options={model, read_only}, ())
+          |> Option.some
+          |> React.Ref.setCurrent(editor);
+        }
+      ),
+    );
+
+  <div ref style={Dom.Style.make(~height="600px", ())} />;
+};

webpack.config.js

@@ -13,16 +13,20 @@ module.exports = {
                     'css-loader',
                     {
                         loader: 'postcss-loader',
-                        options: { postcssOptions: { plugins: ['autoprefixer'] } }
+                        options: { postcssOptions: { plugins: ['autoprefixer'] } },
                     },
-                    'sass-loader'
-                ]
-            }
-        ]
+                    'sass-loader',
+                ],
+            },
+            {
+                test: /\.ttf$/,
+                use: 'file-loader',
+            },
+        ],
     },
     plugins: [new HtmlWebpackPlugin({ template: 'public/index.html' })],
     resolve: { fallback: { child_process: false, constants: false, fs: false, tty: false } },
     devServer: {
-        contentBase: path.resolve(__dirname, 'public')
-    }
+        contentBase: path.resolve(__dirname, 'public'),
+    },
 };