LiveMonacoEditor - Monaco Editor component for Phoenix LiveView

Install cmark-gfm and execute the following to get a local server running:

Why requiring an external dependency to be installed in our operating system?

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.

I am using MD library:

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

The announcement:

What I am using it for:

MD library seems great for our use case and it’s on my radar since I saw your implementation parsing heex components. Cool idea and implementation btw. Here’s the issue on Beacon repo Editor: Extend markdown to support HEEx features · Issue #28 · BeaconCMS/beacon_live_admin · GitHub

How is your MD parser working? Have you found more issues or limitations?

For my use case its working fine, but as the library author says, my approach isn’t idiomatic for the library, because its not returning an AST representation of what is being parsed, instead I am returning HTML.. He says that he will think if he can address my use case in an idiomatic way for the library, thus maybe you also want to expose your use case to see what he as to say.

My project is pretty much parked since that post I made, but not because of the MD library, just because of lacking the time to work on it, thus I cannot tell if my approach will find issues/limitations as I try to do more with it.

my approach isn’t idiomatic for the library, because its not returning an AST representation of what is being parsed, instead I am returning HTML

It’s not much different than what I need so I may get into the same situation as you.

expose your use case to see what he as to say

I’m gonna reach out as soon as I get back to that We have 700+ pages written in Markdown for dockyard.com (blog posts) so that may be a good test for the library. Do you mind if I reach out to you as well when I get to implement that custom MD parser?

Feel free to reach out. I will try to help on what I can

Hey 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:

elixir954×498 34.9 KB

And HTML:

Screenshot 2023-06-10 at 10.42.52 AM1030×384 34.6 KB

Enjoy! New features coming soon.

@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