leandrocp

leandrocp

LiveMonacoEditor - Monaco Editor component for Phoenix LiveView

Hey everyone, live_monaco_editor is a new component to render the Monaco Editor in your app. Monaco is the editor that powers VSCode and is the editor we all use and love in Livebook.

It was created to be used on BeaconCMS Admin UI but it can be used in any app.

How it looks like

After installing the dep and adding its hook into live socket, you can have an editor as simple as:

<LiveMonacoEditor.code_editor value="# My Code Editor" />

And interact with it calling:

socket
|> LiveMonacoEditor.change_language("html")
|> LiveMonacoEditor.set_value("<h1>New File</h1>")

Check out all features. More to come.

How assets are loaded

It’s using monaco-loader to load assets dynamically at runtime keeping the bundle size really small. It may support importing local assets if that’s ever requested.

Is it ready for production?

It’s in the early stages but a new version to make it more stable will be released soon.

Roadmap

The top priority is delivering a great UX for editing Elixir and HEEx files with auto complete and features you’d expect from a code editor, similar to Livebook. Note that this project has no association with Livebook but that’s a source of inspiration thanks to Jonatan Kłosko.

Enjoy!

Most Liked

leandrocp

leandrocp

Hey :wave: quick update since the last post.

Improved look & feel by loading the JetBrains Mono font and OneDark theme by default. That’s how it looks like rendering Elixir code:

And HTML:

Enjoy! New features coming soon.

Exadra37

Exadra37

I am using MD library:

https://github.com/am-kantox/md

The announcement:

What I am using it for:

leandrocp

leandrocp

Hey @Exadra37 that’s for Beacon and not LiveMonacoEditor but it will be replaced soon. To give you some context, earmark was failing to parse a bunch of markdown files and it won’t be fixed, which is fine since parsing markdown is complex and not all libraries supports all edge cases, so I’ve been experimenting with alternatives and the end goal is to not require an external dependency.

Last Post!

W3NDO

W3NDO

@leandrocp I am currently using this to build a collaborative text editor. I am running into an issue where when one user changes the text, I end up in a cascade of changes on all synced editors where the changes applied and un-applied.

I am using the #set_value/3 function to synchronise the changes as shown here

case socket.assigns.user_id == user_id do
      true ->
        {:noreply, socket}

      _ ->
        {:noreply,
         socket
         |> LiveMonacoEditor.set_value(new_code, to: "file_#{socket.assigns.collab_id}")}
    end

I tried to use user_id to prevent this cascade but it didn’t work.

this.handleEvent("sync_editor", (payload) => {
      if (this.editor.dataset.userId == payload.user_id) {
        if (this.editor.getValue() != payload.code) {
          this.editor.setValue(payload.code);
        }
      }
    });

This is my sync editor function in the JS hook.

I am reading that some solutions include using a CRDT to track the changes, but before I commit to doing that I wanted to know if there are any other options

Where Next?

Popular in Announcing Top

zorbash
I created Kitto a framework for dashboards inspired by Dashing. The distributed characteristics of Elixir and the low memory footprint...
New
bryanjos
Hi, I wanted share a small library we at Revelry Labs made for rendering react components from the server side. There are instructions fo...
New
danschultzer
None of the current solutions worked well for me, so I went ahead and built a user management system from scratch. This project took far...
548 30338 241
New
tmbb
I’ve decided to create this topic to discuss optimization possibilities for something like Phoenix LiveView. I’ve created this topic unde...
144 10789 141
New
devonestes
Introducing assertions, the library that helps you write really great test assertions! GitHub: GitHub - devonestes/assertions: Helpful a...
New
brainlid
LangChain is short for Language Chain. An LLM, or Large Language Model, is the “Language” part. This library makes it easier for Elixir a...
New
MRdotB
I needed to reuse React components from my Chrome extension in my Phoenix/LiveView backend. I noticed that for Svelte/Vue, there are live...
New

Other popular topics Top

JakeBecker
TL;DR: I’ve just released an implementation of Microsoft’s IDE-independent Language Server Protocol for Elixir. It adds language support ...
1144 54921 245
New
greenz1
I have a phoenix application from which a user can download multiple(5-6) files of size 1MB. I couldn’t find anything related to sending ...
New
gshaw
What is the idiomatic way of matching for not nil in Elixir? E.g., First way: defp halt_if_not_signed_in(conn, signed_in_account) when...
New
sorentwo
Hello! tl;dr Announcing Oban, an Ecto based job processing library with a focus on reliability and historical observability. After spen...
985 44532 311
New
WestKeys
Currently suffering from paralysis by [HTTP client] analysis. This is rather unusual in Elixirland as there tends to be consensus on the ...
New
Harrisonl
We have an ECS cluster with 4 services, where each task joins a single cluster, via discovery ECS discovery service. Currently when I de...
New

We're in Beta

About us Mission Statement