From 6bf25456513449a7b6fe8bc2e02bccd7dda541c7 Mon Sep 17 00:00:00 2001
From: sayomaki <sayomayomaki@gmail.com>
Date: Thu, 14 May 2026 00:45:16 +0800
Subject: [PATCH 1/7] feat: minimal monaco editor

---
 package.json                                  |  2 +
 src/commons/editor/EditorContainer.tsx        | 20 +++-
 src/commons/editor/MonacoEditor.tsx           | 75 ++++++++++++++
 .../editor/__tests__/EditorContainer.test.tsx | 98 +++++++++++++++++++
 .../editor/__tests__/MonacoEditor.test.tsx    | 96 ++++++++++++++++++
 src/commons/editor/monaco/setupMonaco.ts      | 51 ++++++++++
 src/commons/featureFlags/publicFlags.ts       |  2 +
 src/features/monaco/flagMonacoEditorEnable.ts | 10 ++
 yarn.lock                                     | 62 ++++++++++++
 9 files changed, 412 insertions(+), 4 deletions(-)
 create mode 100644 src/commons/editor/MonacoEditor.tsx
 create mode 100644 src/commons/editor/__tests__/EditorContainer.test.tsx
 create mode 100644 src/commons/editor/__tests__/MonacoEditor.test.tsx
 create mode 100644 src/commons/editor/monaco/setupMonaco.ts
 create mode 100644 src/features/monaco/flagMonacoEditorEnable.ts

diff --git a/package.json b/package.json
index a44a9923c0..0b66c0fa77 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@mantine/hooks": "^9.0.0",
+    "@monaco-editor/react": "^4.7.0",
     "@octokit/rest": "^22.0.0",
     "@reduxjs/toolkit": "^1.9.7",
     "@sentry/react": "^10.5.0",
@@ -77,6 +78,7 @@
     "lz-string": "^1.4.4",
     "mdast-util-from-markdown": "^2.0.0",
     "mdast-util-to-hast": "^13.0.0",
+    "monaco-editor": "^0.55.1",
     "normalize.css": "^8.0.1",
     "phaser": "~3.90.0",
     "query-string": "^9.0.0",
diff --git a/src/commons/editor/EditorContainer.tsx b/src/commons/editor/EditorContainer.tsx
index 07ad91db8b..142aa72f9f 100644
--- a/src/commons/editor/EditorContainer.tsx
+++ b/src/commons/editor/EditorContainer.tsx
@@ -1,11 +1,15 @@
 import _ from 'lodash';
-import { useContext } from 'react';
+import { lazy, Suspense, useContext } from 'react';
+import { flagMonacoEditorEnable } from 'src/features/monaco/flagMonacoEditorEnable';
 
+import { useFeature } from '../featureFlags/useFeature';
 import type { EditorTabState } from '../workspace/WorkspaceTypes';
 import { WorkspaceSettingsContext } from '../WorkspaceSettingsContext';
 import Editor, { type EditorProps, type EditorTabStateProps } from './Editor';
 import EditorTabContainer from './tabs/EditorTabContainer';
 
+const MonacoEditor = lazy(() => import('./MonacoEditor'));
+
 type OwnProps = {
   baseFilePath?: string;
   isFolderModeEnabled: boolean;
@@ -34,13 +38,21 @@ export const convertEditorTabStateToProps = (
 };
 
 const createNormalEditorTab =
-  (editorProps: Omit<EditorProps, keyof EditorTabStateProps>) =>
+  (editorProps: Omit<EditorProps, keyof EditorTabStateProps>, useMonacoEditor: boolean) =>
   (editorTabStateProps: EditorTabStateProps) => {
-    return <Editor {...editorProps} {...editorTabStateProps} />;
+    const editorPropsWithTab = { ...editorProps, ...editorTabStateProps };
+    return useMonacoEditor ? (
+      <Suspense fallback={null}>
+        <MonacoEditor {...editorPropsWithTab} />
+      </Suspense>
+    ) : (
+      <Editor {...editorPropsWithTab} />
+    );
   };
 
 const EditorContainer: React.FC<EditorContainerProps> = (props: EditorContainerProps) => {
   const [workspaceSettings] = useContext(WorkspaceSettingsContext)!;
+  const useMonacoEditor = useFeature(flagMonacoEditorEnable);
   const {
     baseFilePath,
     isFolderModeEnabled,
@@ -52,7 +64,7 @@ const EditorContainer: React.FC<EditorContainerProps> = (props: EditorContainerP
   } = props;
   editorProps.editorBinding = workspaceSettings.editorBinding;
 
-  const createEditorTab = createNormalEditorTab(editorProps);
+  const createEditorTab = createNormalEditorTab(editorProps, useMonacoEditor);
 
   if (activeEditorTabIndex === null) {
     return (
diff --git a/src/commons/editor/MonacoEditor.tsx b/src/commons/editor/MonacoEditor.tsx
new file mode 100644
index 0000000000..1d77409d84
--- /dev/null
+++ b/src/commons/editor/MonacoEditor.tsx
@@ -0,0 +1,75 @@
+import './monaco/setupMonaco';
+
+import { Card } from '@blueprintjs/core';
+import MonacoReactEditor from '@monaco-editor/react';
+import { useCallback } from 'react';
+
+import { EditorProps } from './Editor';
+
+const languageByExtension: Record<string, string> = {
+  c: 'c',
+  cc: 'cpp',
+  cpp: 'cpp',
+  css: 'css',
+  h: 'cpp',
+  html: 'html',
+  java: 'java',
+  js: 'javascript',
+  json: 'json',
+  jsx: 'javascript',
+  py: 'python',
+  ts: 'typescript',
+  tsx: 'typescript'
+};
+
+const getLanguage = ({ filePath, mode }: Pick<EditorProps, 'filePath' | 'mode'>): string => {
+  if (mode) {
+    return mode;
+  }
+  const extension = filePath?.split('.').pop()?.toLowerCase();
+  return (extension && languageByExtension[extension]) || 'javascript';
+};
+
+const MonacoEditor: React.FC<EditorProps> = props => {
+  const handleChange = useCallback(
+    (value: string | undefined, event: unknown) => {
+      const newValue = value ?? '';
+      props.handleEditorValueChange(props.editorTabIndex, newValue);
+      props.handleUpdateHasUnsavedChanges?.(true);
+      props.onChange?.(newValue, event);
+    },
+    [props]
+  );
+
+  return (
+    <Card className="Editor">
+      <div className="row editor-react-ace" data-testid="Editor" id="editor-react-ace">
+        <MonacoReactEditor
+          className="react-ace"
+          height="100%"
+          language={getLanguage(props)}
+          onChange={handleChange}
+          options={{
+            /* acceptSuggestionOnEnter: 'off', */
+            fontFamily: "'Inconsolata', 'Consolas', monospace",
+            fontSize: 17,
+            hover: { enabled: false },
+            minimap: { enabled: false },
+            /* parameterHints: { enabled: false }, */
+            /* quickSuggestions: false, */
+            readOnly: props.sessionDetails?.readOnly ?? false,
+            scrollBeyondLastLine: false,
+            /* suggestOnTriggerCharacters: false, */
+            /* tabCompletion: 'off', */
+            /* wordBasedSuggestions: 'off' */
+          }}
+          theme="source"
+          value={props.editorValue}
+          width="100%"
+        />
+      </div>
+    </Card>
+  );
+};
+
+export default MonacoEditor;
diff --git a/src/commons/editor/__tests__/EditorContainer.test.tsx b/src/commons/editor/__tests__/EditorContainer.test.tsx
new file mode 100644
index 0000000000..a3993b1780
--- /dev/null
+++ b/src/commons/editor/__tests__/EditorContainer.test.tsx
@@ -0,0 +1,98 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { Provider } from 'react-redux';
+import { mockInitialStore } from 'src/commons/mocks/StoreMocks';
+import {
+  defaultWorkspaceSettings,
+  WorkspaceSettingsContext
+} from 'src/commons/WorkspaceSettingsContext';
+import { flagMonacoEditorEnable } from 'src/features/monaco/flagMonacoEditorEnable';
+import { vi } from 'vitest';
+
+import EditorContainer, { EditorContainerProps } from '../EditorContainer';
+
+vi.mock('../MonacoEditor', () => ({
+  default: (props: any) => (
+    <textarea
+      data-testid="MonacoEditorMock"
+      onChange={event => props.handleEditorValueChange(props.editorTabIndex, event.target.value)}
+      readOnly={props.sessionDetails?.readOnly ?? false}
+      value={props.editorValue}
+    />
+  )
+}));
+
+const createProps = (overrides: Partial<EditorContainerProps> = {}): EditorContainerProps => ({
+  activeEditorTabIndex: 0,
+  editorSessionId: '',
+  editorTabs: [
+    {
+      breakpoints: [],
+      editorTabIndex: 0,
+      editorValue: 'const x = 1;',
+      filePath: '/program.js',
+      highlightedLines: []
+    }
+  ],
+  editorVariant: 'normal',
+  handleDeclarationNavigate: () => {},
+  handleEditorEval: () => {},
+  handleEditorUpdateBreakpoints: () => {},
+  handleEditorValueChange: () => {},
+  handlePromptAutocomplete: () => {},
+  isEditorAutorun: false,
+  isFolderModeEnabled: false,
+  removeEditorTabByIndex: () => {},
+  sessionDetails: null,
+  setActiveEditorTabIndex: () => {},
+  ...overrides
+});
+
+const renderEditorContainer = (
+  props: EditorContainerProps,
+  featureFlags: Record<string, any> = {}
+) => {
+  const store = mockInitialStore({
+    featureFlags: {
+      modifiedFlags: featureFlags
+    }
+  });
+
+  return render(
+    <Provider store={store}>
+      <WorkspaceSettingsContext.Provider value={[defaultWorkspaceSettings, () => {}]}>
+        <EditorContainer {...props} />
+      </WorkspaceSettingsContext.Provider>
+    </Provider>
+  );
+};
+
+test('EditorContainer renders Ace editor path when Monaco flag is off', () => {
+  renderEditorContainer(createProps());
+  expect(screen.getByTestId('Editor')).toBeTruthy();
+  expect(screen.queryByTestId('MonacoEditorMock')).toBeNull();
+});
+
+test('EditorContainer renders Monaco editor path when Monaco flag is on', async () => {
+  renderEditorContainer(createProps(), {
+    [flagMonacoEditorEnable.flagName]: true
+  });
+  expect(await screen.findByTestId('MonacoEditorMock')).toBeTruthy();
+});
+
+test('Monaco editor path forwards value changes with the active editor tab index', async () => {
+  const handleEditorValueChange = vi.fn();
+  renderEditorContainer(
+    createProps({
+      handleEditorValueChange
+    }),
+    {
+      [flagMonacoEditorEnable.flagName]: true
+    }
+  );
+
+  fireEvent.change(await screen.findByTestId('MonacoEditorMock'), {
+    target: { value: 'const y = 2;' }
+  });
+
+  expect(handleEditorValueChange).toHaveBeenCalledWith(0, 'const y = 2;');
+});
diff --git a/src/commons/editor/__tests__/MonacoEditor.test.tsx b/src/commons/editor/__tests__/MonacoEditor.test.tsx
new file mode 100644
index 0000000000..942c89f7aa
--- /dev/null
+++ b/src/commons/editor/__tests__/MonacoEditor.test.tsx
@@ -0,0 +1,96 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { vi } from 'vitest';
+
+import { EditorProps } from '../Editor';
+import MonacoEditor from '../MonacoEditor';
+
+vi.mock('monaco-editor', () => ({
+  editor: {
+    defineTheme: vi.fn()
+  }
+}));
+
+vi.mock('@monaco-editor/react', () => ({
+  default: (props: any) => (
+    <textarea
+      data-quick-suggestions={String(props.options?.quickSuggestions)}
+      data-suggest-on-trigger-characters={String(props.options?.suggestOnTriggerCharacters)}
+      data-theme={props.theme}
+      data-word-based-suggestions={props.options?.wordBasedSuggestions}
+      data-testid="MonacoReactEditorMock"
+      onChange={event => props.onChange(event.target.value, { source: 'test' })}
+      readOnly={props.options?.readOnly ?? false}
+      value={props.value}
+    />
+  ),
+  loader: {
+    config: vi.fn()
+  }
+}));
+
+const createProps = (overrides: Partial<EditorProps> = {}): EditorProps => ({
+  breakpoints: [],
+  editorSessionId: '',
+  editorTabIndex: 0,
+  editorValue: 'const x = 1;',
+  handleDeclarationNavigate: () => {},
+  handleEditorEval: () => {},
+  handleEditorUpdateBreakpoints: () => {},
+  handleEditorValueChange: () => {},
+  handlePromptAutocomplete: () => {},
+  highlightedLines: [],
+  isEditorAutorun: false,
+  sessionDetails: null,
+  ...overrides
+});
+
+test('MonacoEditor renders the Monaco React editor wrapper', () => {
+  render(<MonacoEditor {...createProps()} />);
+  const editor = screen.getByTestId('MonacoReactEditorMock') as HTMLTextAreaElement;
+  expect(screen.getByTestId('Editor')).toBeTruthy();
+  expect(editor.value).toBe('const x = 1;');
+  expect(editor.dataset.theme).toBe('source');
+  expect(editor.dataset.quickSuggestions).toBe('false');
+  expect(editor.dataset.suggestOnTriggerCharacters).toBe('false');
+  expect(editor.dataset.wordBasedSuggestions).toBe('off');
+});
+
+test('MonacoEditor forwards changes to workspace handlers', () => {
+  const handleEditorValueChange = vi.fn();
+  const handleUpdateHasUnsavedChanges = vi.fn();
+  const onChange = vi.fn();
+
+  render(
+    <MonacoEditor
+      {...createProps({
+        handleEditorValueChange,
+        handleUpdateHasUnsavedChanges,
+        onChange
+      })}
+    />
+  );
+
+  fireEvent.change(screen.getByTestId('MonacoReactEditorMock'), {
+    target: { value: 'const y = 2;' }
+  });
+
+  expect(handleEditorValueChange).toHaveBeenCalledWith(0, 'const y = 2;');
+  expect(handleUpdateHasUnsavedChanges).toHaveBeenCalledWith(true);
+  expect(onChange).toHaveBeenCalledWith('const y = 2;', { source: 'test' });
+});
+
+test('MonacoEditor passes session readonly state to Monaco', () => {
+  render(
+    <MonacoEditor
+      {...createProps({
+        sessionDetails: {
+          docId: 'doc-id',
+          owner: false,
+          readOnly: true
+        }
+      })}
+    />
+  );
+
+  expect(screen.getByTestId('MonacoReactEditorMock').hasAttribute('readonly')).toBe(true);
+});
diff --git a/src/commons/editor/monaco/setupMonaco.ts b/src/commons/editor/monaco/setupMonaco.ts
new file mode 100644
index 0000000000..768de46827
--- /dev/null
+++ b/src/commons/editor/monaco/setupMonaco.ts
@@ -0,0 +1,51 @@
+import { loader } from '@monaco-editor/react';
+import * as monaco from 'monaco-editor';
+
+type MonacoEnvironmentGlobal = typeof globalThis & {
+  MonacoEnvironment?: {
+    getWorker: (_moduleId: string, label: string) => Worker;
+  };
+};
+
+(self as MonacoEnvironmentGlobal).MonacoEnvironment = {
+  getWorker: () => {
+    return new Worker(new URL('monaco-editor/esm/vs/editor/editor.worker.js', import.meta.url), {
+      type: 'module'
+    });
+  }
+};
+
+monaco.editor.defineTheme('source', {
+  base: 'vs-dark',
+  inherit: true,
+  rules: [
+    { token: '', foreground: 'FFFFFF' },
+    { token: 'comment', foreground: '0088FF', fontStyle: 'italic' },
+    { token: 'constant', foreground: 'FF628C' },
+    { token: 'keyword', foreground: 'FF9D00' },
+    { token: 'number', foreground: 'FF628C' },
+    { token: 'string', foreground: 'FF628C' },
+    { token: 'type', foreground: 'FFEE80' },
+    { token: 'variable', foreground: 'CCCCCC' }
+  ],
+  colors: {
+    'editor.background': '#002240',
+    'editor.foreground': '#FFFFFF',
+    'editorCursor.foreground': '#FFFFFF',
+    'editorGutter.background': '#011e3a',
+    'editorLineNumber.foreground': '#8091A0',
+    'editorLineNumber.activeForeground': '#C8E4FD',
+    'editor.selectionBackground': '#B36539BF',
+    'editor.wordHighlightBorder': '#B36539BF',
+    'editor.lineHighlightBackground': '#00000059',
+    'editorIndentGuide.background1': '#334A60',
+    'editorIndentGuide.activeBackground1': '#8091A0',
+    'editorBracketMatch.background': '#009900',
+    'editorBracketMatch.border': '#009900',
+    'scrollbarSlider.background': '#6B839A66',
+    'scrollbarSlider.hoverBackground': '#6B839A99',
+    'scrollbarSlider.activeBackground': '#6B839ACC'
+  }
+});
+
+loader.config({ monaco });
diff --git a/src/commons/featureFlags/publicFlags.ts b/src/commons/featureFlags/publicFlags.ts
index ec0169df04..6e89023107 100644
--- a/src/commons/featureFlags/publicFlags.ts
+++ b/src/commons/featureFlags/publicFlags.ts
@@ -1,10 +1,12 @@
 import { flagConductorEnable } from '../../features/conductor/flagConductorEnable';
 import { flagDirectoryLanguageUrl } from '../../features/directory/flagDirectoryLanguageUrl';
 import { flagDirectoryPluginUrl } from '../../features/directory/flagDirectoryPluginUrl';
+import { flagMonacoEditorEnable } from '../../features/monaco/flagMonacoEditorEnable';
 import { FeatureFlag } from './FeatureFlag';
 
 export const publicFlags: FeatureFlag<any>[] = [
   flagConductorEnable,
   flagDirectoryLanguageUrl,
   flagDirectoryPluginUrl,
+  flagMonacoEditorEnable
 ];
diff --git a/src/features/monaco/flagMonacoEditorEnable.ts b/src/features/monaco/flagMonacoEditorEnable.ts
new file mode 100644
index 0000000000..feeb383b95
--- /dev/null
+++ b/src/features/monaco/flagMonacoEditorEnable.ts
@@ -0,0 +1,10 @@
+import { createFeatureFlag } from '../../commons/featureFlags';
+import { featureSelector } from '../../commons/featureFlags/featureSelector';
+
+export const flagMonacoEditorEnable = createFeatureFlag(
+  'monaco.editor.enable',
+  false,
+  'Enables the Monaco editor shell in place of Ace.'
+);
+
+export const selectMonacoEditorEnable = featureSelector(flagMonacoEditorEnable);
diff --git a/yarn.lock b/yarn.lock
index e276d0ef78..a262db9d1a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2135,6 +2135,28 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@monaco-editor/loader@npm:^1.5.0":
+  version: 1.7.0
+  resolution: "@monaco-editor/loader@npm:1.7.0"
+  dependencies:
+    state-local: "npm:^1.0.6"
+  checksum: 10c0/1fd3579cb09b669493cf553dfc0723a93483140a44353ce9a739827edfa7b2c6541b254024d15c48176ece749ef666b6d16cce6cf0e4396c7fa1c5a48012d08a
+  languageName: node
+  linkType: hard
+
+"@monaco-editor/react@npm:^4.7.0":
+  version: 4.7.0
+  resolution: "@monaco-editor/react@npm:4.7.0"
+  dependencies:
+    "@monaco-editor/loader": "npm:^1.5.0"
+  peerDependencies:
+    monaco-editor: ">= 0.25.0 < 1"
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+  checksum: 10c0/a4e91c6eda1a71f5fd23871bd801de435490ccbc43934d23cba65cefe2be7e9d02c9a57c4ef80fc9fe99e4d4deea51e5db19cb4e0ecf3f51818dda0eb9cdbf12
+  languageName: node
+  linkType: hard
+
 "@napi-rs/wasm-runtime@npm:1.1.4, @napi-rs/wasm-runtime@npm:^1.1.4":
   version: 1.1.4
   resolution: "@napi-rs/wasm-runtime@npm:1.1.4"
@@ -6153,6 +6175,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dompurify@npm:3.2.7":
+  version: 3.2.7
+  resolution: "dompurify@npm:3.2.7"
+  dependencies:
+    "@types/trusted-types": "npm:^2.0.7"
+  dependenciesMeta:
+    "@types/trusted-types":
+      optional: true
+  checksum: 10c0/d41bb31a72f1acdf9b84c56723c549924b05d92a39a15bd8c40bec9007ff80d5fccf844bc53ee12af5b69044f9a7ce24a1e71c267a4f49cf38711379ed8c1363
+  languageName: node
+  linkType: hard
+
 "dompurify@npm:^3.2.4":
   version: 3.4.2
   resolution: "dompurify@npm:3.4.2"
@@ -7069,6 +7103,7 @@ __metadata:
     "@dnd-kit/sortable": "npm:^10.0.0"
     "@dnd-kit/utilities": "npm:^3.2.2"
     "@mantine/hooks": "npm:^9.0.0"
+    "@monaco-editor/react": "npm:^4.7.0"
     "@octokit/rest": "npm:^22.0.0"
     "@reduxjs/toolkit": "npm:^1.9.7"
     "@rsbuild/core": "npm:^2.0.3"
@@ -7150,6 +7185,7 @@ __metadata:
     lz-string: "npm:^1.4.4"
     mdast-util-from-markdown: "npm:^2.0.0"
     mdast-util-to-hast: "npm:^13.0.0"
+    monaco-editor: "npm:^0.55.1"
     normalize.css: "npm:^8.0.1"
     npm-run-all2: "npm:^8.0.0"
     phaser: "npm:~3.90.0"
@@ -9165,6 +9201,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"marked@npm:14.0.0":
+  version: 14.0.0
+  resolution: "marked@npm:14.0.0"
+  bin:
+    marked: bin/marked.js
+  checksum: 10c0/57a47cb110f7b1a10f398b0a7236f9183aad2dcd5345ee73f2732b6387e585d04cef472bc655d2f84c542296be9728e179aebe3ed7f2f8666b8a0a9dae592876
+  languageName: node
+  linkType: hard
+
 "math-intrinsics@npm:^1.1.0":
   version: 1.1.0
   resolution: "math-intrinsics@npm:1.1.0"
@@ -9982,6 +10027,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"monaco-editor@npm:^0.55.1":
+  version: 0.55.1
+  resolution: "monaco-editor@npm:0.55.1"
+  dependencies:
+    dompurify: "npm:3.2.7"
+    marked: "npm:14.0.0"
+  checksum: 10c0/c1a0cf887657b42c8996518bc5ee96bbd39c977f862d2a2b2018427c45f14b0dd25d1452278202056f6b1ead97981282ccacd7d7ad918d8f0ef084159f974a25
+  languageName: node
+  linkType: hard
+
 "mqtt-packet@npm:^6.8.0":
   version: 6.10.0
   resolution: "mqtt-packet@npm:6.10.0"
@@ -12623,6 +12678,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"state-local@npm:^1.0.6":
+  version: 1.0.7
+  resolution: "state-local@npm:1.0.7"
+  checksum: 10c0/8dc7daeac71844452fafb514a6d6b6f40d7e2b33df398309ea1c7b3948d6110c57f112b7196500a10c54fdde40291488c52c875575670fb5c819602deca48bd9
+  languageName: node
+  linkType: hard
+
 "std-env@npm:^4.0.0-rc.1":
   version: 4.0.0
   resolution: "std-env@npm:4.0.0"

From e8ab897a142af390826bc52871797b46ef0eb595 Mon Sep 17 00:00:00 2001
From: sayomaki <sayomayomaki@gmail.com>
Date: Thu, 14 May 2026 00:48:10 +0800
Subject: [PATCH 2/7] fix: remove default overrides and update font size

---
 src/commons/editor/MonacoEditor.tsx | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/src/commons/editor/MonacoEditor.tsx b/src/commons/editor/MonacoEditor.tsx
index 1d77409d84..b29f7da429 100644
--- a/src/commons/editor/MonacoEditor.tsx
+++ b/src/commons/editor/MonacoEditor.tsx
@@ -50,18 +50,12 @@ const MonacoEditor: React.FC<EditorProps> = props => {
           language={getLanguage(props)}
           onChange={handleChange}
           options={{
-            /* acceptSuggestionOnEnter: 'off', */
             fontFamily: "'Inconsolata', 'Consolas', monospace",
-            fontSize: 17,
+            fontSize: 16,
             hover: { enabled: false },
             minimap: { enabled: false },
-            /* parameterHints: { enabled: false }, */
-            /* quickSuggestions: false, */
             readOnly: props.sessionDetails?.readOnly ?? false,
             scrollBeyondLastLine: false,
-            /* suggestOnTriggerCharacters: false, */
-            /* tabCompletion: 'off', */
-            /* wordBasedSuggestions: 'off' */
           }}
           theme="source"
           value={props.editorValue}

From 88f2ca85bc20eddbe8464ff62fd986d1383ea3b4 Mon Sep 17 00:00:00 2001
From: sayomaki <sayomayomaki@gmail.com>
Date: Thu, 14 May 2026 01:06:03 +0800
Subject: [PATCH 3/7] fix: update background colors to be like Ace

---
 src/commons/editor/MonacoEditor.tsx      |  6 +--
 src/commons/editor/monaco/setupMonaco.ts | 65 +++++++++++++++++++-----
 2 files changed, 54 insertions(+), 17 deletions(-)

diff --git a/src/commons/editor/MonacoEditor.tsx b/src/commons/editor/MonacoEditor.tsx
index b29f7da429..d9a3cc7f22 100644
--- a/src/commons/editor/MonacoEditor.tsx
+++ b/src/commons/editor/MonacoEditor.tsx
@@ -1,10 +1,9 @@
-import './monaco/setupMonaco';
-
 import { Card } from '@blueprintjs/core';
 import MonacoReactEditor from '@monaco-editor/react';
 import { useCallback } from 'react';
 
 import { EditorProps } from './Editor';
+import { SOURCE_MONACO_THEME } from './monaco/setupMonaco';
 
 const languageByExtension: Record<string, string> = {
   c: 'c',
@@ -55,9 +54,10 @@ const MonacoEditor: React.FC<EditorProps> = props => {
             hover: { enabled: false },
             minimap: { enabled: false },
             readOnly: props.sessionDetails?.readOnly ?? false,
+            renderLineHighlight: 'none',
             scrollBeyondLastLine: false,
           }}
-          theme="source"
+          theme={SOURCE_MONACO_THEME}
           value={props.editorValue}
           width="100%"
         />
diff --git a/src/commons/editor/monaco/setupMonaco.ts b/src/commons/editor/monaco/setupMonaco.ts
index 768de46827..d403d4c539 100644
--- a/src/commons/editor/monaco/setupMonaco.ts
+++ b/src/commons/editor/monaco/setupMonaco.ts
@@ -1,6 +1,25 @@
 import { loader } from '@monaco-editor/react';
 import * as monaco from 'monaco-editor';
 
+export const SOURCE_MONACO_THEME = 'source';
+
+const aceSourceColors = {
+  activeLineBackground: '#00000059',
+  autocompleteActiveLineBackground: '#495A6B',
+  autocompleteBackground: '#2C3E50',
+  bracketMatchBackground: '#009900',
+  cursor: '#FFFFFF',
+  // These are the visible Ace editor surface colors from _workspace.scss.
+  editorBackground: '#2C3E50',
+  foreground: '#FFFFFF',
+  gutterBackground: '#34495E',
+  invisibleForeground: '#FFFFFF26',
+  lineNumberForeground: '#8091A0',
+  printMarginBackground: '#555555',
+  selectionBackground: '#B36539BF',
+  widgetBorder: '#555555'
+} as const;
+
 type MonacoEnvironmentGlobal = typeof globalThis & {
   MonacoEnvironment?: {
     getWorker: (_moduleId: string, label: string) => Worker;
@@ -15,11 +34,11 @@ type MonacoEnvironmentGlobal = typeof globalThis & {
   }
 };
 
-monaco.editor.defineTheme('source', {
+const sourceTheme: monaco.editor.IStandaloneThemeData = {
   base: 'vs-dark',
   inherit: true,
   rules: [
-    { token: '', foreground: 'FFFFFF' },
+    { token: '', foreground: aceSourceColors.foreground.slice(1) },
     { token: 'comment', foreground: '0088FF', fontStyle: 'italic' },
     { token: 'constant', foreground: 'FF628C' },
     { token: 'keyword', foreground: 'FF9D00' },
@@ -29,23 +48,41 @@ monaco.editor.defineTheme('source', {
     { token: 'variable', foreground: 'CCCCCC' }
   ],
   colors: {
-    'editor.background': '#002240',
-    'editor.foreground': '#FFFFFF',
-    'editorCursor.foreground': '#FFFFFF',
-    'editorGutter.background': '#011e3a',
-    'editorLineNumber.foreground': '#8091A0',
+    'editor.background': aceSourceColors.editorBackground,
+    'editor.foreground': aceSourceColors.foreground,
+    'editorCursor.foreground': aceSourceColors.cursor,
+    'editorGutter.background': aceSourceColors.gutterBackground,
+    'editorLineNumber.foreground': aceSourceColors.lineNumberForeground,
     'editorLineNumber.activeForeground': '#C8E4FD',
-    'editor.selectionBackground': '#B36539BF',
-    'editor.wordHighlightBorder': '#B36539BF',
-    'editor.lineHighlightBackground': '#00000059',
+    'editor.selectionBackground': aceSourceColors.selectionBackground,
+    'editor.wordHighlightBorder': aceSourceColors.selectionBackground,
+    'editor.lineHighlightBackground': aceSourceColors.activeLineBackground,
+    'editor.lineHighlightBorder': '#00000000',
+    'editorRuler.foreground': aceSourceColors.printMarginBackground,
+    'editorWhitespace.foreground': aceSourceColors.invisibleForeground,
     'editorIndentGuide.background1': '#334A60',
-    'editorIndentGuide.activeBackground1': '#8091A0',
-    'editorBracketMatch.background': '#009900',
-    'editorBracketMatch.border': '#009900',
+    'editorIndentGuide.activeBackground1': aceSourceColors.lineNumberForeground,
+    'editorBracketMatch.background': aceSourceColors.bracketMatchBackground,
+    'editorBracketMatch.border': aceSourceColors.bracketMatchBackground,
+    'editorWidget.background': aceSourceColors.autocompleteBackground,
+    'editorWidget.border': aceSourceColors.widgetBorder,
+    'editorHoverWidget.background': aceSourceColors.autocompleteActiveLineBackground,
+    'editorHoverWidget.border': aceSourceColors.widgetBorder,
+    'editorSuggestWidget.background': aceSourceColors.autocompleteBackground,
+    'editorSuggestWidget.border': aceSourceColors.widgetBorder,
+    'editorSuggestWidget.foreground': aceSourceColors.foreground,
+    'editorSuggestWidget.highlightForeground': '#FF9D00',
+    'editorSuggestWidget.selectedBackground': aceSourceColors.autocompleteActiveLineBackground,
+    'editorSuggestWidget.selectedForeground': aceSourceColors.foreground,
+    'editorSuggestWidget.focusHighlightForeground': '#FF9D00',
+    'editorSuggestWidgetStatus.foreground': '#CED9E0',
     'scrollbarSlider.background': '#6B839A66',
     'scrollbarSlider.hoverBackground': '#6B839A99',
     'scrollbarSlider.activeBackground': '#6B839ACC'
   }
-});
+};
+
+monaco.editor.defineTheme(SOURCE_MONACO_THEME, sourceTheme);
+monaco.editor.setTheme(SOURCE_MONACO_THEME);
 
 loader.config({ monaco });

From c33e5cbbdcf093478cf42abaca5c409aee08476a Mon Sep 17 00:00:00 2001
From: sayomaki <sayomayomaki@gmail.com>
Date: Thu, 14 May 2026 01:26:38 +0800
Subject: [PATCH 4/7] feat: make monaco editor look closer to ace

---
 src/commons/editor/MonacoEditor.tsx                |  6 +++++-
 src/commons/editor/__tests__/MonacoEditor.test.tsx | 10 ++++++++++
 src/styles/_workspace.scss                         |  4 ++++
 3 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/commons/editor/MonacoEditor.tsx b/src/commons/editor/MonacoEditor.tsx
index d9a3cc7f22..be3589bbed 100644
--- a/src/commons/editor/MonacoEditor.tsx
+++ b/src/commons/editor/MonacoEditor.tsx
@@ -50,8 +50,12 @@ const MonacoEditor: React.FC<EditorProps> = props => {
           onChange={handleChange}
           options={{
             fontFamily: "'Inconsolata', 'Consolas', monospace",
-            fontSize: 16,
+            fontSize: 17,
+            folding: false,
+            glyphMargin: false,
             hover: { enabled: false },
+            lineHeight: 17,
+            lineNumbersMinChars: 4,
             minimap: { enabled: false },
             readOnly: props.sessionDetails?.readOnly ?? false,
             renderLineHighlight: 'none',
diff --git a/src/commons/editor/__tests__/MonacoEditor.test.tsx b/src/commons/editor/__tests__/MonacoEditor.test.tsx
index 942c89f7aa..4366a1e3ed 100644
--- a/src/commons/editor/__tests__/MonacoEditor.test.tsx
+++ b/src/commons/editor/__tests__/MonacoEditor.test.tsx
@@ -13,6 +13,11 @@ vi.mock('monaco-editor', () => ({
 vi.mock('@monaco-editor/react', () => ({
   default: (props: any) => (
     <textarea
+      data-folding={String(props.options?.folding)}
+      data-glyph-margin={String(props.options?.glyphMargin)}
+      data-line-decorations-width={String(props.options?.lineDecorationsWidth)}
+      data-line-height={String(props.options?.lineHeight)}
+      data-line-numbers-min-chars={String(props.options?.lineNumbersMinChars)}
       data-quick-suggestions={String(props.options?.quickSuggestions)}
       data-suggest-on-trigger-characters={String(props.options?.suggestOnTriggerCharacters)}
       data-theme={props.theme}
@@ -50,6 +55,11 @@ test('MonacoEditor renders the Monaco React editor wrapper', () => {
   expect(screen.getByTestId('Editor')).toBeTruthy();
   expect(editor.value).toBe('const x = 1;');
   expect(editor.dataset.theme).toBe('source');
+  expect(editor.dataset.folding).toBe('false');
+  expect(editor.dataset.glyphMargin).toBe('false');
+  expect(editor.dataset.lineDecorationsWidth).toBe('4');
+  expect(editor.dataset.lineHeight).toBe('19');
+  expect(editor.dataset.lineNumbersMinChars).toBe('3');
   expect(editor.dataset.quickSuggestions).toBe('false');
   expect(editor.dataset.suggestOnTriggerCharacters).toBe('false');
   expect(editor.dataset.wordBasedSuggestions).toBe('off');
diff --git a/src/styles/_workspace.scss b/src/styles/_workspace.scss
index f55c293a88..26eb873f2f 100644
--- a/src/styles/_workspace.scss
+++ b/src/styles/_workspace.scss
@@ -157,6 +157,10 @@ $code-color-notification: #f9f0d7;
       margin-left: -10px;
       color: red;
     }
+
+    .monaco-editor .lines-content {
+      padding-left: 5px;
+    }
   }
 
   .MCQChooser {

From 465ca01d8f5342dcd304f84d2d235f67d1765b9b Mon Sep 17 00:00:00 2001
From: sayomaki <sayomayomaki@gmail.com>
Date: Thu, 14 May 2026 01:27:47 +0800
Subject: [PATCH 5/7] chore: update tests to remove unnecessary checks

---
 .../editor/__tests__/MonacoEditor.test.tsx       | 16 ----------------
 1 file changed, 16 deletions(-)

diff --git a/src/commons/editor/__tests__/MonacoEditor.test.tsx b/src/commons/editor/__tests__/MonacoEditor.test.tsx
index 4366a1e3ed..8b2303ad3c 100644
--- a/src/commons/editor/__tests__/MonacoEditor.test.tsx
+++ b/src/commons/editor/__tests__/MonacoEditor.test.tsx
@@ -13,15 +13,7 @@ vi.mock('monaco-editor', () => ({
 vi.mock('@monaco-editor/react', () => ({
   default: (props: any) => (
     <textarea
-      data-folding={String(props.options?.folding)}
-      data-glyph-margin={String(props.options?.glyphMargin)}
-      data-line-decorations-width={String(props.options?.lineDecorationsWidth)}
-      data-line-height={String(props.options?.lineHeight)}
-      data-line-numbers-min-chars={String(props.options?.lineNumbersMinChars)}
-      data-quick-suggestions={String(props.options?.quickSuggestions)}
-      data-suggest-on-trigger-characters={String(props.options?.suggestOnTriggerCharacters)}
       data-theme={props.theme}
-      data-word-based-suggestions={props.options?.wordBasedSuggestions}
       data-testid="MonacoReactEditorMock"
       onChange={event => props.onChange(event.target.value, { source: 'test' })}
       readOnly={props.options?.readOnly ?? false}
@@ -55,14 +47,6 @@ test('MonacoEditor renders the Monaco React editor wrapper', () => {
   expect(screen.getByTestId('Editor')).toBeTruthy();
   expect(editor.value).toBe('const x = 1;');
   expect(editor.dataset.theme).toBe('source');
-  expect(editor.dataset.folding).toBe('false');
-  expect(editor.dataset.glyphMargin).toBe('false');
-  expect(editor.dataset.lineDecorationsWidth).toBe('4');
-  expect(editor.dataset.lineHeight).toBe('19');
-  expect(editor.dataset.lineNumbersMinChars).toBe('3');
-  expect(editor.dataset.quickSuggestions).toBe('false');
-  expect(editor.dataset.suggestOnTriggerCharacters).toBe('false');
-  expect(editor.dataset.wordBasedSuggestions).toBe('off');
 });
 
 test('MonacoEditor forwards changes to workspace handlers', () => {

From 3cfe30bd04e4885318933e707024c28714a0b75a Mon Sep 17 00:00:00 2001
From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date: Mon, 18 May 2026 20:59:51 +0800
Subject: [PATCH 6/7] Fix errors post-merge

---
 src/commons/editor/EditorContainer.test.tsx | 34 ++++++++++-----------
 src/commons/editor/MonacoEditor.test.tsx    | 28 ++++++++---------
 2 files changed, 31 insertions(+), 31 deletions(-)

diff --git a/src/commons/editor/EditorContainer.test.tsx b/src/commons/editor/EditorContainer.test.tsx
index a3993b1780..95788e6280 100644
--- a/src/commons/editor/EditorContainer.test.tsx
+++ b/src/commons/editor/EditorContainer.test.tsx
@@ -3,14 +3,14 @@ import { Provider } from 'react-redux';
 import { mockInitialStore } from 'src/commons/mocks/StoreMocks';
 import {
   defaultWorkspaceSettings,
-  WorkspaceSettingsContext
+  WorkspaceSettingsContext,
 } from 'src/commons/WorkspaceSettingsContext';
 import { flagMonacoEditorEnable } from 'src/features/monaco/flagMonacoEditorEnable';
-import { vi } from 'vitest';
+import { expect, test, vi } from 'vitest';
 
-import EditorContainer, { EditorContainerProps } from '../EditorContainer';
+import EditorContainer, { type EditorContainerProps } from './EditorContainer';
 
-vi.mock('../MonacoEditor', () => ({
+vi.mock('./MonacoEditor', () => ({
   default: (props: any) => (
     <textarea
       data-testid="MonacoEditorMock"
@@ -18,7 +18,7 @@ vi.mock('../MonacoEditor', () => ({
       readOnly={props.sessionDetails?.readOnly ?? false}
       value={props.editorValue}
     />
-  )
+  ),
 }));
 
 const createProps = (overrides: Partial<EditorContainerProps> = {}): EditorContainerProps => ({
@@ -30,8 +30,8 @@ const createProps = (overrides: Partial<EditorContainerProps> = {}): EditorConta
       editorTabIndex: 0,
       editorValue: 'const x = 1;',
       filePath: '/program.js',
-      highlightedLines: []
-    }
+      highlightedLines: [],
+    },
   ],
   editorVariant: 'normal',
   handleDeclarationNavigate: () => {},
@@ -44,17 +44,17 @@ const createProps = (overrides: Partial<EditorContainerProps> = {}): EditorConta
   removeEditorTabByIndex: () => {},
   sessionDetails: null,
   setActiveEditorTabIndex: () => {},
-  ...overrides
+  ...overrides,
 });
 
 const renderEditorContainer = (
   props: EditorContainerProps,
-  featureFlags: Record<string, any> = {}
+  featureFlags: Record<string, any> = {},
 ) => {
   const store = mockInitialStore({
     featureFlags: {
-      modifiedFlags: featureFlags
-    }
+      modifiedFlags: featureFlags,
+    },
   });
 
   return render(
@@ -62,7 +62,7 @@ const renderEditorContainer = (
       <WorkspaceSettingsContext.Provider value={[defaultWorkspaceSettings, () => {}]}>
         <EditorContainer {...props} />
       </WorkspaceSettingsContext.Provider>
-    </Provider>
+    </Provider>,
   );
 };
 
@@ -74,7 +74,7 @@ test('EditorContainer renders Ace editor path when Monaco flag is off', () => {
 
 test('EditorContainer renders Monaco editor path when Monaco flag is on', async () => {
   renderEditorContainer(createProps(), {
-    [flagMonacoEditorEnable.flagName]: true
+    [flagMonacoEditorEnable.flagName]: true,
   });
   expect(await screen.findByTestId('MonacoEditorMock')).toBeTruthy();
 });
@@ -83,15 +83,15 @@ test('Monaco editor path forwards value changes with the active editor tab index
   const handleEditorValueChange = vi.fn();
   renderEditorContainer(
     createProps({
-      handleEditorValueChange
+      handleEditorValueChange,
     }),
     {
-      [flagMonacoEditorEnable.flagName]: true
-    }
+      [flagMonacoEditorEnable.flagName]: true,
+    },
   );
 
   fireEvent.change(await screen.findByTestId('MonacoEditorMock'), {
-    target: { value: 'const y = 2;' }
+    target: { value: 'const y = 2;' },
   });
 
   expect(handleEditorValueChange).toHaveBeenCalledWith(0, 'const y = 2;');
diff --git a/src/commons/editor/MonacoEditor.test.tsx b/src/commons/editor/MonacoEditor.test.tsx
index 8b2303ad3c..2e4e3bb742 100644
--- a/src/commons/editor/MonacoEditor.test.tsx
+++ b/src/commons/editor/MonacoEditor.test.tsx
@@ -1,13 +1,13 @@
 import { fireEvent, render, screen } from '@testing-library/react';
-import { vi } from 'vitest';
+import { expect, test, vi } from 'vitest';
 
-import { EditorProps } from '../Editor';
-import MonacoEditor from '../MonacoEditor';
+import type { EditorProps } from './Editor';
+import MonacoEditor from './MonacoEditor';
 
 vi.mock('monaco-editor', () => ({
   editor: {
-    defineTheme: vi.fn()
-  }
+    defineTheme: vi.fn(),
+  },
 }));
 
 vi.mock('@monaco-editor/react', () => ({
@@ -21,8 +21,8 @@ vi.mock('@monaco-editor/react', () => ({
     />
   ),
   loader: {
-    config: vi.fn()
-  }
+    config: vi.fn(),
+  },
 }));
 
 const createProps = (overrides: Partial<EditorProps> = {}): EditorProps => ({
@@ -38,7 +38,7 @@ const createProps = (overrides: Partial<EditorProps> = {}): EditorProps => ({
   highlightedLines: [],
   isEditorAutorun: false,
   sessionDetails: null,
-  ...overrides
+  ...overrides,
 });
 
 test('MonacoEditor renders the Monaco React editor wrapper', () => {
@@ -59,13 +59,13 @@ test('MonacoEditor forwards changes to workspace handlers', () => {
       {...createProps({
         handleEditorValueChange,
         handleUpdateHasUnsavedChanges,
-        onChange
+        onChange,
       })}
-    />
+    />,
   );
 
   fireEvent.change(screen.getByTestId('MonacoReactEditorMock'), {
-    target: { value: 'const y = 2;' }
+    target: { value: 'const y = 2;' },
   });
 
   expect(handleEditorValueChange).toHaveBeenCalledWith(0, 'const y = 2;');
@@ -80,10 +80,10 @@ test('MonacoEditor passes session readonly state to Monaco', () => {
         sessionDetails: {
           docId: 'doc-id',
           owner: false,
-          readOnly: true
-        }
+          readOnly: true,
+        },
       })}
-    />
+    />,
   );
 
   expect(screen.getByTestId('MonacoReactEditorMock').hasAttribute('readonly')).toBe(true);

From 9bede5d114df5e9b0f8c91dbc183946b32ed1a4b Mon Sep 17 00:00:00 2001
From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date: Mon, 18 May 2026 21:00:46 +0800
Subject: [PATCH 7/7] Fix format post-merge

---
 src/commons/editor/MonacoEditor.tsx           |  4 ++--
 src/commons/editor/monaco/setupMonaco.ts      | 12 ++++++------
 src/commons/featureFlags/publicFlags.ts       |  2 +-
 src/features/monaco/flagMonacoEditorEnable.ts |  2 +-
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/commons/editor/MonacoEditor.tsx b/src/commons/editor/MonacoEditor.tsx
index be3589bbed..7c2dd961e7 100644
--- a/src/commons/editor/MonacoEditor.tsx
+++ b/src/commons/editor/MonacoEditor.tsx
@@ -18,7 +18,7 @@ const languageByExtension: Record<string, string> = {
   jsx: 'javascript',
   py: 'python',
   ts: 'typescript',
-  tsx: 'typescript'
+  tsx: 'typescript',
 };
 
 const getLanguage = ({ filePath, mode }: Pick<EditorProps, 'filePath' | 'mode'>): string => {
@@ -37,7 +37,7 @@ const MonacoEditor: React.FC<EditorProps> = props => {
       props.handleUpdateHasUnsavedChanges?.(true);
       props.onChange?.(newValue, event);
     },
-    [props]
+    [props],
   );
 
   return (
diff --git a/src/commons/editor/monaco/setupMonaco.ts b/src/commons/editor/monaco/setupMonaco.ts
index d403d4c539..3e92c2eb44 100644
--- a/src/commons/editor/monaco/setupMonaco.ts
+++ b/src/commons/editor/monaco/setupMonaco.ts
@@ -17,7 +17,7 @@ const aceSourceColors = {
   lineNumberForeground: '#8091A0',
   printMarginBackground: '#555555',
   selectionBackground: '#B36539BF',
-  widgetBorder: '#555555'
+  widgetBorder: '#555555',
 } as const;
 
 type MonacoEnvironmentGlobal = typeof globalThis & {
@@ -29,9 +29,9 @@ type MonacoEnvironmentGlobal = typeof globalThis & {
 (self as MonacoEnvironmentGlobal).MonacoEnvironment = {
   getWorker: () => {
     return new Worker(new URL('monaco-editor/esm/vs/editor/editor.worker.js', import.meta.url), {
-      type: 'module'
+      type: 'module',
     });
-  }
+  },
 };
 
 const sourceTheme: monaco.editor.IStandaloneThemeData = {
@@ -45,7 +45,7 @@ const sourceTheme: monaco.editor.IStandaloneThemeData = {
     { token: 'number', foreground: 'FF628C' },
     { token: 'string', foreground: 'FF628C' },
     { token: 'type', foreground: 'FFEE80' },
-    { token: 'variable', foreground: 'CCCCCC' }
+    { token: 'variable', foreground: 'CCCCCC' },
   ],
   colors: {
     'editor.background': aceSourceColors.editorBackground,
@@ -78,8 +78,8 @@ const sourceTheme: monaco.editor.IStandaloneThemeData = {
     'editorSuggestWidgetStatus.foreground': '#CED9E0',
     'scrollbarSlider.background': '#6B839A66',
     'scrollbarSlider.hoverBackground': '#6B839A99',
-    'scrollbarSlider.activeBackground': '#6B839ACC'
-  }
+    'scrollbarSlider.activeBackground': '#6B839ACC',
+  },
 };
 
 monaco.editor.defineTheme(SOURCE_MONACO_THEME, sourceTheme);
diff --git a/src/commons/featureFlags/publicFlags.ts b/src/commons/featureFlags/publicFlags.ts
index 6e89023107..9919e85a81 100644
--- a/src/commons/featureFlags/publicFlags.ts
+++ b/src/commons/featureFlags/publicFlags.ts
@@ -8,5 +8,5 @@ export const publicFlags: FeatureFlag<any>[] = [
   flagConductorEnable,
   flagDirectoryLanguageUrl,
   flagDirectoryPluginUrl,
-  flagMonacoEditorEnable
+  flagMonacoEditorEnable,
 ];
diff --git a/src/features/monaco/flagMonacoEditorEnable.ts b/src/features/monaco/flagMonacoEditorEnable.ts
index feeb383b95..ddf3e149c2 100644
--- a/src/features/monaco/flagMonacoEditorEnable.ts
+++ b/src/features/monaco/flagMonacoEditorEnable.ts
@@ -4,7 +4,7 @@ import { featureSelector } from '../../commons/featureFlags/featureSelector';
 export const flagMonacoEditorEnable = createFeatureFlag(
   'monaco.editor.enable',
   false,
-  'Enables the Monaco editor shell in place of Ace.'
+  'Enables the Monaco editor shell in place of Ace.',
 );
 
 export const selectMonacoEditorEnable = featureSelector(flagMonacoEditorEnable);