CodeMirror Migration - Part 3 (#552)

* feat: support markdown in hover doc

* feat: render markdown in completion items

* feat: add plugin theme

* fix: pass theme to autocomp ext

* feat: provide styles for autocomplete

* feat: reload completion config

* feat: add dark mode theme

* fix: tooltip styles

* feat: reskin completion and hover to mimic vscode

* feat: move autocompletion style to CSS module

* feat: lazy-load editor

* fix: workspace file

* fix: tests

Author: x1unix

web/package.json

@@ -19,6 +19,7 @@
     "@eslint/js": "^9.0.0",
     "@fluentui/react": "^8.122.8",
     "@fluentui/react-icons": "^2.0.271",
+    "@lezer/highlight": "^1.2.3",
     "@monaco-editor/loader": "^1.4.0",
     "@monaco-editor/react": "^4.6.0",
     "@replit/codemirror-emacs": "^6.1.0",
@@ -67,6 +68,7 @@
     "file-saver": "^2.0.5",
     "globals": "^15.0.0",
     "jsdom": "^25.0.1",
+    "markdown-it": "^14.1.1",
     "monaco-editor": "^0.45.0",
     "monaco-vim": "^0.3.4",
     "prettier": "^3.2.4",
@@ -121,5 +123,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@types/markdown-it": "^14"
   }
 }

web/src/components/features/workspace/CMCodeEditor/CodeEditorContainer.tsx

@@ -191,3 +191,5 @@ export const CodeEditorContainer: React.FC = () => {
     />
   )
 }
+
+export default CodeEditorContainer

web/src/components/features/workspace/CMCodeEditor/LazyCodeEditorContainer.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+
+import { Spinner, SpinnerSize } from '@fluentui/react'
+import { FlexContainer } from '../FlexContainer'
+
+const styles = {
+  flex: '1 1 0%',
+  overflow: 'hidden',
+  display: 'flex',
+  'align-items': 'center',
+  'justify-content': 'center',
+}
+
+const CodeEditorContainer = React.lazy(() => import('./CodeEditorContainer'))
+
+const CodeEditorPreloader: React.FC = () => (
+  <div style={styles}>
+    <Spinner key="spinner" label="Loading editor..." size={SpinnerSize.large} labelPosition="bottom" />
+  </div>
+)
+
+/**
+ * Lazy-loading wrapper for code editor container
+ */
+export const LazyCodeEditorContainer: React.FC = () => {
+  return (
+    <React.Suspense fallback={<CodeEditorPreloader />}>
+      <CodeEditorContainer />
+    </React.Suspense>
+  )
+}

web/src/components/features/workspace/Workspace/LazyLoadedWorkspace.tsx

@@ -1,7 +1,7 @@
 import React, { lazy } from 'react'
 import { SuspenseBoundary } from '~/components/elements/misc/SuspenseBoundary'
 
-const LazyWorkspace = lazy(async () => await import('./Workspace.tsx'))
+const LazyWorkspace = lazy(async () => await import('./Workspace'))
 
 export const LazyLoadedWorkspace: React.FC = () => (
   <SuspenseBoundary errorLabel="Failed to load workspace" preloaderText="Loading workspace...">

web/src/components/features/workspace/Workspace/Workspace.tsx

@@ -7,8 +7,7 @@ import { dispatchCreateFile, dispatchRemoveFile, dispatchImportFile, newFileSele
 import { TabView } from '~/components/elements/tabs/TabView'
 import type { TabBarAction, TabIconStyles } from '~/components/elements/tabs/types'
 
-import { CodeEditorContainer } from '../CMCodeEditor/CodeEditorContainer'
-import { FlexContainer } from '../FlexContainer'
+import { LazyCodeEditorContainer } from '../CMCodeEditor/LazyCodeEditorContainer'
 import { NewFileModal } from '../NewFileModal'
 import { ContentPlaceholder } from '../ContentPlaceholder'
 import { newEmptyFileContent } from './utils'
@@ -109,7 +108,7 @@ const Workspace: React.FC = () => {
       disabled={(snippet?.loading ?? false) || !!snippet?.error}
     >
       {tabs?.length ? (
-        <CodeEditorContainer />
+        <LazyCodeEditorContainer />
       ) : (
         <ContentPlaceholder
           isLoading={snippet?.loading}

web/src/components/layout/Header/Header.tsx

@@ -201,7 +201,6 @@ class HeaderContainer extends ThemeableComponent<Props, HeaderState> {
   private onSettingsClose(changes: SettingsChanges) {
     if (changes.monaco) {
       // Update monaco state if some of its settings were changed
-      console.log(changes.monaco)
       this.props.dispatch(newMonacoParamsChangeDispatcher(changes.monaco))
     }
 

web/src/components/pages/PlaygroundPage/PlaygroundPage.tsx

@@ -10,7 +10,7 @@ import styles from './PlaygroundPage.module.css'
 import { SuspenseBoundary } from '~/components/elements/misc/SuspenseBoundary'
 import { LazyAnnouncementBanner } from '~/components/layout/AnnouncementBanner'
 
-const LazyPlaygroundContent = lazy(async () => await import('./PlaygroundContainer.tsx'))
+const LazyPlaygroundContent = lazy(async () => await import('./PlaygroundContainer'))
 
 interface PageParams {
   snippetID: string