feat: add configurable Monaco loader opts

README.md

@@ -134,6 +134,20 @@ The code editor is created with default options to provide a better UX out-of-th
 />
 ```
 
+### Configure the Monaco loader
+
+The loader will load sources from a CDN by default. You can configure this:
+
+```elixir
+config :live_monaco_editor, :loader, %{
+  "paths" => %{
+    "vs" => "/js/monaco-editor/min/vs"
+  }
+}
+```
+
+This is useful when you want to self-host Monaco assets. 
+
 ### Fetching the editor value
 
 You can listen to events emitted by the code editor to fetch its current value and send it back to the parent LiveView where the component is used. Firstly, add a event listener:
@@ -273,4 +287,3 @@ Have a project in mind? [Get in touch](https://dockyard.com/contact/hire-us)!
 * [Jonatan Kłosko](https://github.com/jonatanklosko) for his amazing work with [Livebook Editor](https://github.com/livebook-dev/livebook/blob/main/assets/js/hooks/cell_editor.js)
 * [Logo](https://www.flaticon.com/free-icons/script) created by kerismaker - Flaticon
 * [Logo font](https://fonts.google.com/specimen/Source+Code+Pro) designed by Paul D. hunt
-

assets/js/live_monaco_editor/editor/code_editor.js

@@ -45,22 +45,25 @@ class CodeEditor {
   }
 
   _mountEditor() {
-    this.opts.value = this.value
+    const { loader: loaderConfig, ...editorOpts } = this.opts
+    editorOpts.value = this.value
 
-    loader.config({
+    const defaultLoaderConfig = {
       paths: { vs: "https://cdn.jsdelivr.net/npm/monaco-editor@0.52.2/min/vs" },
-    })
+    }
+
+    loader.config(loaderConfig || defaultLoaderConfig)
 
     loader.init().then((monaco) => {
       monaco.editor.defineTheme("default", theme)
 
       let modelUri = monaco.Uri.parse(this.path)
-      let language = this.opts.language
+      let language = editorOpts.language
       let model = monaco.editor.createModel(this.value, language, modelUri)
 
-      this.opts.language = undefined
-      this.opts.model = model
-      this.standalone_code_editor = monaco.editor.create(this.el, this.opts)
+      editorOpts.language = undefined
+      editorOpts.model = model
+      this.standalone_code_editor = monaco.editor.create(this.el, editorOpts)
 
       this._onMount.forEach((callback) => callback(monaco))
 

lib/live_monaco_editor.ex

@@ -130,7 +130,16 @@ defmodule LiveMonacoEditor do
   @doc """
   The default Monaco Editor opts passed to `<.code_editor>`
   """
-  def default_opts, do: @default_opts
+  def default_opts do
+    maybe_put_default_loader(@default_opts)
+  end
+
+  defp maybe_put_default_loader(opts) do
+    case Application.get_env(:live_monaco_editor, :loader) do
+      nil -> opts
+      loader_opts -> Map.put_new(opts, "loader", loader_opts)
+    end
+  end
 
   # https://github.com/phoenixframework/phoenix_live_view/blob/c3c21d6de55315adea04e28f7a461a91e46497bb/lib/phoenix_live_view/utils.ex#L176-L183
   defp random_encoded_bytes do