fix: changed code-mirror to monaco-editor #8047

omkarK06 · 2025-08-19T10:59:23Z

PR Type

Enhancement, Bug fix

Description

Replace CodeMirror with Monaco editor
Add Monaco autocomplete and markers
Update build to bundle Monaco
Remove re-render key from logs UI

Diagram Walkthrough

flowchart LR
  CM["CodeMirror-based editor"] -- Replaced by --> ME["Monaco editor integration"]
  ME -- Autocomplete/Markers --> UX["Improved editor UX"]
  Build["Vite config"] -- Add monaco plugin/chunks --> Bundle["Optimized bundles"]
  UI["Logs and SearchBar"] -- Minor fixes/cleanup --> Stability["Reduced re-renders"]

File Walkthrough

Relevant files

Enhancement

3 files

CodeQueryEditor.vue `Replace CodeMirror with Monaco, add features`	+369/-980
Index.vue `Cleanups, visualization flow, formatting tweaks`	+105/-78
SearchBar.vue `Editor placeholder, menus, toggle guards`	+148/-82

Dependencies

3 files

CodeQueryEditorDarkTheme.ts `Remove legacy CodeMirror dark theme`	+0/-230
CodeQueryEditorLightTheme.ts `Remove legacy CodeMirror light theme`	+0/-246
package.json `Remove CodeMirror deps; add Monaco and plugin`	+2/-16

Configuration changes

1 files

vite.config.ts `Integrate Monaco plugin and chunking`	+25/-15

greptile-apps

Greptile Summary

This pull request implements a complete migration from CodeMirror to Monaco Editor for the web application's code editing functionality. The changes encompass several key areas:

Dependency Management: The package.json removes 16 CodeMirror-related packages (including @codemirror/autocomplete, @codemirror/commands, language packages, themes, and core codemirror) and replaces them with monaco-editor (v0.52.2) and vite-plugin-monaco-editor (v1.1.0).

Build Configuration: The vite.config.ts is updated to integrate Monaco Editor with a custom plugin configuration that specifies a distribution path for Monaco's web workers, and updates chunk configurations to handle Monaco Editor bundles instead of CodeMirror.

Component Rewrite: The CodeQueryEditor.vue component undergoes a complete rewrite, replacing CodeMirror's EditorView API with Monaco's editor instance. The component maintains the same external interface but changes internal implementation including editor initialization, content handling, and theme management.

Theme Removal: Both CodeQueryEditorLightTheme.ts and CodeQueryEditorDarkTheme.ts files are removed entirely, as Monaco Editor provides built-in theming (vs and vs-dark) that replaces the custom CodeMirror theme configurations.

This migration aligns the codebase with Monaco Editor's more robust feature set, including better TypeScript support, enhanced IntelliSense, and the familiar VS Code editing experience. The change affects code editing functionality throughout the application, particularly in query editors and log analysis interfaces.

Confidence score: 2/5

This PR has significant implementation issues that could cause runtime errors and functionality problems
Score lowered due to missing null checks, removed debouncing logic, potential memory leaks, and incomplete error handling in the main editor component
Pay close attention to web/src/components/CodeQueryEditor.vue which contains several critical issues including unsafe editor object access and missing cleanup logic

_{5 files reviewed, 2 comments}

_{Edit Code Review Bot Settings | Greptile}

web/src/components/CodeQueryEditor.vue

github-actions · 2025-08-19T11:00:31Z

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 4 🔵🔵🔵🔵⚪
🧪 No relevant tests
🔒 No security concerns identified
⚡ Recommended focus areas for review Possible Issue Emitted update events are no longer debounced; every keystroke triggers "update-query" and "update:query", which could cause excessive reactivity and performance regressions compared to the prior debounced behavior. editorObj.onDidChangeModelContent( // debounce((e: any) => { (e: any) => { console.log("e", editorObj.getValue()?.trim(), props.editorId); emit("update-query", editorObj.getValue()?.trim()); emit("update:query", editorObj.getValue()?.trim()); }, ); Memory/Leak Risk Monaco completion provider and editor instance disposal is partial; provider is stored in a ref but editor instance is never disposed on unmount, and multiple registerAutoCompleteProvider calls could stack if not carefully disposed. onMounted(async () => { provider.value?.dispose(); if (props.language === "vrl") { monaco.languages.register({ id: "vrl" }); // Register a tokens provider for the language monaco.languages.setMonarchTokensProvider( "vrl", vrlLanguageDefinition as any, ); } if (props.language === "sql") { await import( "monaco-editor/esm/vs/basic-languages/sql/sql.contribution.js" ); } if (props.language === "json") { await import( "monaco-editor/esm/vs/language/json/monaco.contribution.js" ); } if (props.language === "html") { await import( "monaco-editor/esm/vs/language/html/monaco.contribution.js" ); } if (props.language === "markdown") { await import( "monaco-editor/esm/vs/basic-languages/markdown/markdown.contribution.js" ); } if (props.language === "python") { await import( "monaco-editor/esm/vs/basic-languages/python/python.contribution.js" ); } if (props.language === "javascript") { await import( "monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution.js" ); } setupEditor(); }); onActivated(async () => { if (!editorObj) { setupEditor(); editorObj?.layout(); } else { provider.value?.dispose(); registerAutoCompleteProvider(); } }); onDeactivated(() => { provider.value?.dispose(); }); onUnmounted(() => { provider.value?.dispose(); console.log("onUnmounted", props.editorId); }); Build Config Monaco plugin import uses monacoEditorPlugin.default(...); depending on ESM interop, this may fail in some environments—ensure correct usage (default vs named) and that customDistPath is served correctly in production. }), enterpriseResolverPlugin, vueJsx(), monacoEditorPlugin.default({ customDistPath: () => path.resolve(__dirname, "dist/monacoeditorwork"), }), ].filter(Boolean),

github-actions · 2025-08-19T11:01:13Z

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
Possible issue	Fix off-by-one cursor index Returning index minus one will underflow to -1 at document start and is off-by-one elsewhere. Remove the subtraction and safely handle missing model/position to prevent runtime errors. web/src/components/CodeQueryEditor.vue [456-460] const getCursorIndex = () => { - const currentPosition = editorObj.getPosition(); - const cursorIndex = - editorObj?.getModel().getOffsetAt(currentPosition) - 1; - return cursorIndex \|\| null; + const model = editorObj?.getModel?.(); + const pos = editorObj?.getPosition?.(); + if (!model \|\| !pos) return null; + return model.getOffsetAt(pos); }; Suggestion importance[1-10]: 8 __ Why: The current code subtracts 1 from the offset, yielding -1 at the start and off-by-one elsewhere. The fix is precise, guards nulls, and prevents incorrect indices and potential errors, improving correctness.	Medium
Possible issue	Stop trimming and debounce changes Avoid trimming on every keystroke; it alters user input and cursor position, and emits excessively. Emit the raw value on change, and perform trimming on blur or before submit. Also debounce the change handler to reduce churn. web/src/components/CodeQueryEditor.vue [199-206] -editorObj.onDidChangeModelContent( - // debounce((e: any) => { - (e: any) => { - console.log("e", editorObj.getValue()?.trim(), props.editorId); - emit("update-query", editorObj.getValue()?.trim()); - emit("update:query", editorObj.getValue()?.trim()); - }, -); +const emitContentChange = debounce(() => { + const val = editorObj.getValue(); + emit("update-query", val); + emit("update:query", val); +}, props.debounceTime); +editorObj.onDidChangeModelContent(() => { + emitContentChange(); +}); + Suggestion importance[1-10]: 7 __ Why: Trimming on each keystroke can disrupt cursor position and user intent; debouncing change emission reduces churn and matches the existing trim-on-blur behavior. The improved code aligns with PR context and is a solid usability/performance fix.	Medium
General	Guard model when setting markers `setModelMarkers` expects a model object, not null; calling it without checking the current model can throw. Fetch the current model once, guard null, and clear markers by setting an empty array in the same guarded call. web/src/components/CodeQueryEditor.vue [489-541] -const addErrorDiagnostics = (ranges: any) => { - // const markers = [ - // { - // resource: { - // $mid: 1, - // external: "inmemory://model/4", - // path: "/4", - // scheme: "inmemory", - // authority: "model", - // }, - // owner: "owner", - // code: "MY_ERROR_CODE", - // severity: monaco.MarkerSeverity.Error, - // message: "Error: Something went wrong", - // startLineNumber: 2, - // startColumn: 1, - // endLineNumber: 7, - // endColumn: 1, - // }, - // ... - // ]; - - // Set markers to the model - // monaco.editor.setModelMarkers(getModel(), "owner", markers); - const markers = ranges.map((range: any) => ({ - severity: monaco.MarkerSeverity.Error, // Mark as error +const addErrorDiagnostics = (ranges: any[]) => { + const model = editorObj?.getModel?.(); + if (!model) return; + const markers = (ranges \|\| []).map((range: any) => ({ + severity: monaco.MarkerSeverity.Error, startLineNumber: range.startLine, - startColumn: 1, // Start of the line + startColumn: 1, endLineNumber: range.endLine, - endColumn: 1, // End of the line - message: range.error, // The error message - code: "", // Optional error code + endColumn: 1, + message: range.error \|\| "", + code: "" })); - - monaco.editor.setModelMarkers(getModel(), "owner", []); - monaco.editor.setModelMarkers(getModel(), "owner", markers); -} + monaco.editor.setModelMarkers(model, "owner", markers); +}; Suggestion importance[1-10]: 6 __ Why: Calling setModelMarkers with a null model can throw; guarding and computing markers safely is correct and improves robustness. Impact is moderate since it's defensive handling around diagnostics.	Low

github-actions bot added the ☢️ Bug Something isn't working label Aug 19, 2025

bjp232004 approved these changes Aug 19, 2025

View reviewed changes

greptile-apps bot reviewed Aug 19, 2025

View reviewed changes

web/src/components/CodeQueryEditor.vue Show resolved Hide resolved

web/src/components/CodeQueryEditor.vue Show resolved Hide resolved

web/src/components/CodeQueryEditor.vue Outdated Show resolved Hide resolved

github-actions bot added the Review effort 4/5 label Aug 19, 2025

omkarK06 force-pushed the fix/revert-code-mirror-changes branch from 663111d to a3bc0d0 Compare August 19, 2025 11:00

omkarK06 force-pushed the fix/revert-code-mirror-changes branch from bef657c to ac05008 Compare August 20, 2025 05:25

oasisk force-pushed the fix/revert-code-mirror-changes branch from 980d040 to 5e17100 Compare August 27, 2025 04:40

bjp232004 force-pushed the fix/revert-code-mirror-changes branch from 5e17100 to 3a877f7 Compare August 28, 2025 09:45

omkarK06 force-pushed the fix/revert-code-mirror-changes branch 11 times, most recently from 45a9909 to c39e0f4 Compare September 10, 2025 05:42

omkarK06 force-pushed the fix/revert-code-mirror-changes branch from c39e0f4 to df0f801 Compare September 10, 2025 07:10

Shrinath-O2 approved these changes Sep 10, 2025

View reviewed changes

omkarK06 force-pushed the fix/revert-code-mirror-changes branch 4 times, most recently from 685aae0 to 080ffa2 Compare September 12, 2025 09:52

omkarK06 added 3 commits September 12, 2025 15:44

fix: replaced code-mirror with monaco-editor

92c15aa

fix: removed unnecessary key causing re-renders

0aeda58

fix: refactoring

fddf5fe

omkarK06 and others added 21 commits September 12, 2025 15:44

fix: type errors

37f6d21

fix: added computed for suggestions and keywords

26ddd7d

fix: added theme watcher

8a2a39b

fix: fixed class for showing Function Editor png

b9d2f83

fix: fixed locators of monaco-editor

6993aeb

fix: vrl editor bg image issue

b5c3b65

fix: empty fn classname issue

3d1391c

fix: duplicate suggestions

a0ec9af

fix: promql suggestion issue

6683744

fix: deleted vrl language spec file as it has code mirror references

349d630

fix: test cases monaco-editor selectors

1240da9

fix: test cases

d5cff83

fix: fixed test case

fab93c1

fix: test cases

66bd1a3

fix: test case

bdd33df

fix: commented toBeEditable

e0ffaeb

fix: removed test only

14a14d7

fix: fixed monaco-editor text selector

2b3e598

fix: fixed test case

e6f9e93

fix: Locators of monaco editor as click does not work on .inputarea

78e5330

fix: ui unit test case

11f2765

omkarK06 force-pushed the fix/revert-code-mirror-changes branch from 080ffa2 to 11f2765 Compare September 12, 2025 10:14

omkarK06 merged commit ab156ba into main Sep 12, 2025
38 of 40 checks passed

omkarK06 deleted the fix/revert-code-mirror-changes branch September 12, 2025 11:20

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix: changed code-mirror to monaco-editor #8047

fix: changed code-mirror to monaco-editor #8047

Uh oh!

omkarK06 commented Aug 19, 2025 •

edited by github-actions bot

Loading

Uh oh!

greptile-apps bot left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Aug 19, 2025

Uh oh!

github-actions bot commented Aug 19, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

fix: changed code-mirror to monaco-editor #8047

fix: changed code-mirror to monaco-editor #8047

Uh oh!

Conversation

omkarK06 commented Aug 19, 2025 • edited by github-actions bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Type

Description

Diagram Walkthrough

File Walkthrough

Uh oh!

greptile-apps bot left a comment

Choose a reason for hiding this comment

Greptile Summary

Confidence score: 2/5

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Aug 19, 2025

PR Reviewer Guide 🔍

Uh oh!

github-actions bot commented Aug 19, 2025

PR Code Suggestions ✨

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

omkarK06 commented Aug 19, 2025 •

edited by github-actions bot

Loading