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
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:
And HTML:
Enjoy! New features coming soon.
Exadra37
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
@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
Popular in Announcing
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Deploy Phoenix to your own VPS with PaaS ease: push-to-deploy, zero downtime, auto SSL, managed Postgres. 14-day free trial at potions.io
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #elixirconf-us
- #advent-of-code
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #hex
- #security
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking for Elixir devs who love to ship. Start your free account.
Practical resources that improve the lives of professional developers.
Develop your skills with books, videos, and courses.
Producing high quality Elixir screencasts since 2017.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"