Skip to content

wip: New Monaco editor integration#3436

Closed
msmithstubbs wants to merge 8 commits into
Logflare:mainfrom
msmithstubbs:refactor/monaco-editor-component
Closed

wip: New Monaco editor integration#3436
msmithstubbs wants to merge 8 commits into
Logflare:mainfrom
msmithstubbs:refactor/monaco-editor-component

Conversation

@msmithstubbs

@msmithstubbs msmithstubbs commented May 6, 2026

Copy link
Copy Markdown
Contributor

Note

Early WIP don't review yet.

The goal is to replace the existing LiveMonacoEditor component with a simpler, more testable model. This approach uses a hidden <textarea> element to store the edited code. The Monaco editor instance writes updates to that element, which in turn triggers the standard form change event handled by LiveView. Updates from LiveView still use a hook, but the Monaco editor itself no longer sends events directly to LiveView. This should be much closer to the familiar form-backed LiveView model.

The intention is to enable JavaScript-based test coverage for editor and DOM interactions without requiring a running LiveView instance. I also expect to add a small number of end-to-end Playwright tests to sanity-check the integration.

Another advantage of this approach is that it allows us to vendor the Monaco JavaScript dependencies directly into our repository.

Follows #3444

Fixes O11Y-1684

TODO

  • Replace QueryLive editor
  • Replace Search LQL editor
  • Replace Endpoints editor
  • JS unit tests for monaco_hook
  • E2E integration test.

@Ziinc

Ziinc commented May 7, 2026

Copy link
Copy Markdown
Contributor

@msmithstubbs can you give this lib a try to see if we can have a more lightweight testing strategy for the js areas, especially for Monaco editor testing

https://github.com/Ziinc/phoenix_test_jsdom

@msmithstubbs msmithstubbs force-pushed the refactor/monaco-editor-component branch 3 times, most recently from 618f13e to 727ccd4 Compare May 14, 2026 05:07
@msmithstubbs

Copy link
Copy Markdown
Contributor Author

I've got the JSDOM library working locally but the biggest missing piece is cookie support so it can hit authenticated routes. Could submit a PR for this? Or is there another approach to take? If we just want to test the monaco editor in isolation we could just mount it in a harness designed for testing, and leave Playwright to handle full integration testing

@msmithstubbs msmithstubbs force-pushed the refactor/monaco-editor-component branch from 727ccd4 to a8a4050 Compare May 20, 2026 00:46
@msmithstubbs

Copy link
Copy Markdown
Contributor Author

Closing, now #3525

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants