Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Migrate the code editor to CodeMirror #2444

Merged
merged 2 commits into from
Jan 24, 2024
Merged

Migrate the code editor to CodeMirror #2444

merged 2 commits into from
Jan 24, 2024

Conversation

jonatanklosko
Copy link
Member

@jonatanklosko jonatanklosko commented Jan 24, 2024

CodeMirror is an extensible, modular, and lightweight (everything is opt-in by default). When we started Livebook it was in the process of rewriting, but things stabilised since then and I decided to migrate from Monaco. Monaco is fairly heavy and even with cherry-picking imports, it's just a lot of stuff that we don't need. Over time we accumulated a lot of workarounds, including monkey-patching.

A couple updates worth noting:

  1. Full load for the session page content 6.9 MB -> 4.0 MB (actual transfer 1.6 MB -> 958 kB).

  2. Editor history distinguishes remote changes, so when collaborating, undo rolls back local changes only (properly transformed).

  3. I revisited collaborative cursors propagation and now they are a part of the Operational Transform, meaning that the cursors update in sync with changes, which is particularly relevant under noticeable latency.

  4. I made all editor mounting lazy. We mount the editor only once it enters the viewport. We put the editor content into the page though, so search works and the scroll position is accurate. This way, even very large notebooks can be opened pretty quick.

  5. CodeMirror uses an incremental parsing system for highlighting and indentation, we now have livebook-dev/codemirror-lang-elixir.

  6. Closes Can't create cell on Safari when a previous cell is focused #2003, closes Keyword and Map not highlighting properly #2417. Actually fixes do/end autocompletion puts cursor in the wrong line #152 and Livebook crashing attempting to open a livebook. #1098.

Copy link

github-actions bot commented Jan 24, 2024

Uffizzi Preview deployment-45017 was deleted.

@@ -0,0 +1,122 @@
defmodule Livebook.Text.JS do
Copy link
Member Author

@jonatanklosko jonatanklosko Jan 24, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This module is fun.

Previously, whenever we were applying a client delta on the server, we would convert the string to a list of UTF16 code units, apply delta to this list, and convert back. Same for mapping columns. Now we work directly on the string binaries!

README.md Outdated Show resolved Hide resolved
@jonatanklosko jonatanklosko merged commit 0cd2f69 into main Jan 24, 2024
7 checks passed
@jonatanklosko jonatanklosko deleted the jk-cm branch January 24, 2024 15:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
2 participants