remove react-codemirror and update all the codemirror libs (#2901)

* start of removing react-codemirror

Signed-off-by: Jess Frazelle <github@jessfraz.com>

* updates

Signed-off-by: Jess Frazelle <github@jessfraz.com>

* change theme

Signed-off-by: Jess Frazelle <github@jessfraz.com>

* updates

Signed-off-by: Jess Frazelle <github@jessfraz.com>

* updates

Signed-off-by: Jess Frazelle <github@jessfraz.com>

* updates

Signed-off-by: Jess Frazelle <github@jessfraz.com>

* disable copilot temporarily

Signed-off-by: Jess Frazelle <github@jessfraz.com>

* fixes

Signed-off-by: Jess Frazelle <github@jessfraz.com>

* fixes

Signed-off-by: Jess Frazelle <github@jessfraz.com>

---------

Signed-off-by: Jess Frazelle <github@jessfraz.com>

e2e/playwright/flow-tests.spec.ts

@@ -600,7 +600,11 @@ test.describe('Editor tests', () => {
     // TODO: Jess needs to fix this but you have to mod the code to get them to show
     // up, its an annoying codemirror thing.
     await page.locator('.cm-content').click()
-    await page.keyboard.press('End')
+    await page.keyboard.press('ArrowDown')
+    await page.keyboard.press('ArrowDown')
+    await page.keyboard.press('ArrowDown')
+    await page.keyboard.press('ArrowDown')
+    await page.keyboard.press('ArrowDown')
     await page.keyboard.press('Enter')
 
     const foldGutterFoldLine = page.locator('[title="Fold line"]')
@@ -1451,6 +1455,8 @@ test.describe('Can create sketches on all planes and their back sides', () => {
 })
 
 test.describe('Copilot ghost text', () => {
+  test.skip(true, 'temporarily disabled')
+
   test('completes code in empty file', async ({ page }) => {
     const u = await getUtils(page)
     // const PUR = 400 / 37.5 //pixeltoUnitRatio
@@ -2927,7 +2933,7 @@ const sketch002 = startSketchOn(launderExtrudeThroughVar, seg02)
     await expect(page.getByTestId('hover-highlight').first()).not.toBeVisible()
 
     await page.mouse.move(flatExtrusionFace[0], flatExtrusionFace[1])
-    await expect(page.getByTestId('hover-highlight')).toHaveCount(19) // multiple lines
+    await expect(page.getByTestId('hover-highlight')).toHaveCount(5) // multiple lines
     await page.mouse.move(nothing[0], nothing[1])
     await page.waitForTimeout(100)
     await expect(page.getByTestId('hover-highlight').first()).not.toBeVisible()
@@ -3067,7 +3073,7 @@ const part001 = startSketchOn('XZ')
       await page.mouse.move(pos[0], pos[1], { steps: 5 })
       await expect(page.getByTestId('hover-highlight').first()).toBeVisible()
       await expect(page.getByTestId('hover-highlight').first()).toHaveText(
-        removeAfterFirstParenthesis(expectedCode)
+        expectedCode
       )
       // hover over segment, click it and check the cursor has move to the right place
       await page.mouse.click(pos[0], pos[1])

package.json

@@ -3,12 +3,13 @@
   "version": "0.23.0",
   "private": true,
   "dependencies": {
-    "@codemirror/autocomplete": "^6.16.3",
+    "@codemirror/autocomplete": "^6.17.0",
     "@codemirror/commands": "^6.6.0",
     "@codemirror/language": "^6.10.2",
     "@codemirror/lint": "^6.8.1",
     "@codemirror/search": "^6.5.6",
     "@codemirror/state": "^6.4.1",
+    "@codemirror/theme-one-dark": "^6.1.2",
     "@csstools/postcss-oklab-function": "^3.0.16",
     "@fortawesome/fontawesome-svg-core": "^6.5.2",
     "@fortawesome/free-brands-svg-icons": "^6.5.2",
@@ -29,7 +30,6 @@
     "@tauri-apps/plugin-updater": "^2.0.0-beta.3",
     "@ts-stack/markdown": "^1.5.0",
     "@tweenjs/tween.js": "^23.1.1",
-    "@uiw/react-codemirror": "^4.21.25",
     "@xstate/inspect": "^0.8.0",
     "@xstate/react": "^3.2.2",
     "codemirror": "^6.0.1",

packages/codemirror-lsp-client/src/index.ts

@@ -52,7 +52,8 @@ export function lspPlugin(options: LanguageServerOptions): Extension {
       if (plugin == null) return null
       // Get the folding ranges from the language server.
       // Since this is async we directly need to update the folding ranges after.
-      return plugin?.foldingRange(lineStart, lineEnd)
+      const range = plugin?.foldingRange(lineStart, lineEnd)
+      return range
     }),
   ]
 

src/components/CommandBar/CommandBarKclInput.tsx

@@ -1,5 +1,6 @@
 import { Completion } from '@codemirror/autocomplete'
-import { EditorState, EditorView, useCodeMirror } from '@uiw/react-codemirror'
+import { EditorView, ViewUpdate } from '@codemirror/view'
+import { EditorState } from '@codemirror/state'
 import { CustomIcon } from 'components/CustomIcon'
 import { useCommandsContext } from 'hooks/useCommandsContext'
 import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
@@ -12,6 +13,7 @@ import { useEffect, useRef, useState } from 'react'
 import { useHotkeys } from 'react-hotkeys-hook'
 import styles from './CommandBarKclInput.module.css'
 import { createIdentifier, createVariableDeclaration } from 'lang/modifyAst'
+import { useCodeMirror } from 'components/ModelingSidebar/ModelingPanes/CodeEditor'
 
 function CommandBarKclInput({
   arg,
@@ -63,9 +65,7 @@ function CommandBarKclInput({
 
   const { setContainer } = useCodeMirror({
     container: editorRef.current,
-    value,
+    initialDocValue: value,
-    indentWithTab: false,
-    basicSetup: false,
     autoFocus: true,
     selection: {
       anchor: 0,
@@ -74,7 +74,6 @@ function CommandBarKclInput({
           ? previouslySetValue.valueText.length
           : defaultValue.length,
     },
-    accessKey: 'command-bar',
     theme:
       settings.context.app.theme.current === 'system'
         ? getSystemTheme()
@@ -96,8 +95,12 @@ function CommandBarKclInput({
         }
         return tr
       }),
+      EditorView.updateListener.of((vu: ViewUpdate) => {
+        if (vu.docChanged) {
+          setValue(vu.state.doc.toString())
+        }
+      }),
     ],
-    onChange: (newValue) => setValue(newValue),
   })
 
   useEffect(() => {

src/components/ModelingMachineProvider.tsx

@@ -64,7 +64,7 @@ import { TEST } from 'env'
 import { exportFromEngine } from 'lib/exportFromEngine'
 import { Models } from '@kittycad/lib/dist/types/src'
 import toast from 'react-hot-toast'
-import { EditorSelection, Transaction } from '@uiw/react-codemirror'
+import { EditorSelection, Transaction } from '@codemirror/state'
 import { useSearchParams } from 'react-router-dom'
 import { letEngineAnimateAndSyncCamAfter } from 'clientSideScene/CameraControls'
 import { getVarNameModal } from 'hooks/useToolbarGuards'

src/components/ModelingSidebar/ModelingPanes/CodeEditor.tsx

@@ -0,0 +1,171 @@
+import React, {
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  forwardRef,
+  useImperativeHandle,
+} from 'react'
+import {
+  EditorState,
+  EditorStateConfig,
+  Extension,
+  StateEffect,
+} from '@codemirror/state'
+import { EditorView } from '@codemirror/view'
+import { oneDark } from '@codemirror/theme-one-dark'
+
+//reference: https://github.com/sachinraja/rodemirror/blob/main/src/use-first-render.ts
+const useFirstRender = () => {
+  const firstRender = useRef(true)
+
+  useEffect(() => {
+    firstRender.current = false
+  }, [])
+
+  return firstRender.current
+}
+
+const defaultLightThemeOption = EditorView.theme(
+  {
+    '&': {
+      backgroundColor: '#fff',
+    },
+  },
+  {
+    dark: false,
+  }
+)
+
+interface CodeEditorRef {
+  editor?: HTMLDivElement | null
+  view?: EditorView
+  state?: EditorState
+}
+
+interface CodeEditorProps {
+  onCreateEditor?: (view: EditorView | null) => void
+  initialDocValue?: EditorStateConfig['doc']
+  extensions?: Extension
+  theme: 'light' | 'dark'
+  autoFocus?: boolean
+  selection?: EditorStateConfig['selection']
+}
+
+interface UseCodeMirror extends CodeEditorProps {
+  container?: HTMLDivElement | null
+}
+
+const CodeEditor = forwardRef<CodeEditorRef, CodeEditorProps>((props, ref) => {
+  const {
+    onCreateEditor,
+    extensions = [],
+    initialDocValue,
+    theme,
+    autoFocus = false,
+    selection,
+  } = props
+  const editor = useRef<HTMLDivElement>(null)
+
+  const { view, state, container } = useCodeMirror({
+    container: editor.current,
+    onCreateEditor,
+    extensions,
+    initialDocValue,
+    theme,
+    autoFocus,
+    selection,
+  })
+
+  useImperativeHandle(
+    ref,
+    () => ({ editor: editor.current, view: view, state: state }),
+    [editor, container, view, state]
+  )
+
+  return <div ref={editor}></div>
+})
+
+export function useCodeMirror(props: UseCodeMirror) {
+  const {
+    onCreateEditor,
+    extensions = [],
+    initialDocValue,
+    theme,
+    autoFocus = false,
+    selection,
+  } = props
+
+  const [container, setContainer] = useState<HTMLDivElement | null>()
+  const [view, setView] = useState<EditorView>()
+  const [state, setState] = useState<EditorState>()
+
+  const isFirstRender = useFirstRender()
+
+  const targetExtensions = useMemo(() => {
+    let exts = Array.isArray(extensions) ? extensions : []
+    if (theme === 'dark') {
+      exts = [...exts, oneDark]
+    } else if (theme === 'light') {
+      exts = [...exts, defaultLightThemeOption]
+    }
+
+    return exts
+  }, [extensions, theme])
+
+  useEffect(() => {
+    if (container && !state) {
+      const config = {
+        doc: initialDocValue,
+        selection,
+        extensions: [...Array.of(extensions)],
+      }
+      const stateCurrent = EditorState.create(config)
+      setState(stateCurrent)
+      if (!view) {
+        const viewCurrent = new EditorView({
+          state: stateCurrent,
+          parent: container,
+        })
+        setView(viewCurrent)
+        onCreateEditor && onCreateEditor(viewCurrent)
+      }
+    }
+    return () => {
+      if (view) {
+        setState(undefined)
+        setView(undefined)
+      }
+    }
+  }, [container, state])
+
+  useEffect(() => setContainer(props.container), [props.container])
+
+  useEffect(
+    () => () => {
+      if (view) {
+        view.destroy()
+        setView(undefined)
+      }
+    },
+    [view]
+  )
+
+  useEffect(() => {
+    if (autoFocus && view) {
+      view.focus()
+    }
+  }, [autoFocus, view])
+
+  useEffect(() => {
+    if (view && !isFirstRender) {
+      view.dispatch({
+        effects: StateEffect.reconfigure.of(targetExtensions),
+      })
+    }
+  }, [targetExtensions])
+
+  return { view, setView, container, setContainer, state, setState }
+}
+
+export default CodeEditor

src/components/ModelingSidebar/ModelingPanes/KclEditorPane.tsx

@@ -1,4 +1,3 @@
-import ReactCodeMirror from '@uiw/react-codemirror'
 import { TEST } from 'env'
 import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
 import { Themes, getSystemTheme } from 'lib/theme'
@@ -43,6 +42,7 @@ import {
   closeBracketsKeymap,
   completionKeymap,
 } from '@codemirror/autocomplete'
+import CodeEditor from './CodeEditor'
 
 export const editorShortcutMeta = {
   formatCode: {
@@ -185,15 +185,15 @@ export const KclEditorPane = () => {
       id="code-mirror-override"
       className={'absolute inset-0 ' + (cursorBlinking.current ? 'blink' : '')}
     >
-      <ReactCodeMirror
+      <CodeEditor
-        value={initialCode.current}
+        initialDocValue={initialCode.current}
         extensions={editorExtensions}
         theme={theme}
         onCreateEditor={(_editorView) => {
+          if (_editorView === null) return
+
           editorManager.setEditorView(_editorView)
         }}
-        indentWithTab={false}
-        basicSetup={false}
       />
     </div>
   )

src/editor/plugins/lsp/copilot/index.ts

@@ -621,7 +621,7 @@ export const copilotPlugin = (options: LanguageServerOptions): Extension => {
   )
 
   return [
-    lspPlugin(options),
+    /*lspPlugin(options),
     completionPlugin,
     copilotAutocompleteKeymapExt,
     domHandlers,
@@ -632,6 +632,6 @@ export const copilotPlugin = (options: LanguageServerOptions): Extension => {
       plugin.rejectSuggestionCommand()
 
       return null
-    }),
+    }),*/
   ]
 }

src/index.css

@@ -260,3 +260,8 @@ code {
     @apply bg-chalkboard-20 dark:bg-chalkboard-90;
   }
 }
+
+#code-mirror-override .cm-scroller,
+#code-mirror-override .cm-editor {
+  height: 100% !important;
+}

src/lang/codeManager.ts

@@ -6,7 +6,8 @@ import { isTauri } from 'lib/isTauri'
 import { writeTextFile } from '@tauri-apps/plugin-fs'
 import toast from 'react-hot-toast'
 import { editorManager } from 'lib/singletons'
-import { Annotation, KeyBinding, Transaction } from '@uiw/react-codemirror'
+import { Annotation, Transaction } from '@codemirror/state'
+import { KeyBinding } from '@codemirror/view'
 
 const PERSIST_CODE_KEY = 'persistCode'
 

src/lib/selections.ts

@@ -8,8 +8,7 @@ import {
 import { CallExpression, SourceRange, Value, parse, recast } from 'lang/wasm'
 import { ModelingMachineEvent } from 'machines/modelingMachine'
 import { uuidv4 } from 'lib/utils'
-import { EditorSelection } from '@codemirror/state'
+import { EditorSelection, SelectionRange } from '@codemirror/state'
-import { SelectionRange } from '@uiw/react-codemirror'
 import { getNormalisedCoordinates, isOverlap } from 'lib/utils'
 import { isCursorInSketchCommandRange } from 'lang/util'
 import { Program } from 'lang/wasm'

src/routes/Onboarding/index.tsx

@@ -80,8 +80,10 @@ export const onboardingRoutes = [
 export function useDemoCode() {
   useEffect(() => {
     if (!editorManager.editorView) return
-    setTimeout(() => codeManager.updateCodeStateEditor(bracket))
+    setTimeout(() => {
-  }, [editorManager.editorView, codeManager.updateCodeStateEditor])
+      codeManager.updateCodeStateEditor(bracket)
+    })
+  }, [editorManager.editorView])
 }
 
 export function useNextClick(newStatus: string) {

yarn.lock

@@ -1124,7 +1124,7 @@
   resolved "https://registry.yarnpkg.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz#f0ba69b075e1f05fb2825b7fad991e7adbb18310"
   integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==
 
-"@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.18.6", "@babel/runtime@^7.20.13", "@babel/runtime@^7.23.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.20.13", "@babel/runtime@^7.23.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
   version "7.24.7"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.7.tgz#f4f0d5530e8dbdf59b3451b9b3e594b6ba082e12"
   integrity sha512-UwgBRMjJP+xv857DCngvqXI3Iq6J4v0wXmwc6sapg+zyhbwmQX67LUEFrkK5tbyJ30jGuG3ZvWpBiB9LCy1kWw==
@@ -1175,17 +1175,17 @@
     "@codemirror/view" "^6.17.0"
     "@lezer/common" "^1.0.0"
 
-"@codemirror/autocomplete@^6.16.3":
+"@codemirror/autocomplete@^6.17.0":
-  version "6.16.3"
+  version "6.17.0"
-  resolved "https://registry.yarnpkg.com/@codemirror/autocomplete/-/autocomplete-6.16.3.tgz#04d5a4e4e44ccae1ba525d47db53a5479bf46338"
+  resolved "https://registry.yarnpkg.com/@codemirror/autocomplete/-/autocomplete-6.17.0.tgz#24ff5fc37fd91f6439df6f4ff9c8e910cde1b053"
-  integrity sha512-Vl/tIeRVVUCRDuOG48lttBasNQu8usGgXQawBXI7WJAiUDSFOfzflmEsZFZo48mAvAaa4FZ/4/yLLxFtdJaKYA==
+  integrity sha512-fdfj6e6ZxZf8yrkMHUSJJir7OJkHkZKaOZGzLWIYp2PZ3jd+d+UjG8zVPqJF6d3bKxkhvXTPan/UZ1t7Bqm0gA==
   dependencies:
     "@codemirror/language" "^6.0.0"
     "@codemirror/state" "^6.0.0"
     "@codemirror/view" "^6.17.0"
     "@lezer/common" "^1.0.0"
 
-"@codemirror/commands@^6.0.0", "@codemirror/commands@^6.1.0", "@codemirror/commands@^6.6.0":
+"@codemirror/commands@^6.0.0", "@codemirror/commands@^6.6.0":
   version "6.6.0"
   resolved "https://registry.yarnpkg.com/@codemirror/commands/-/commands-6.6.0.tgz#d308f143fe1b8896ca25fdb855f66acdaf019dd4"
   integrity sha512-qnY+b7j1UNcTS31Eenuc/5YJB6gQOzkUoNmJQc0rznwqSRpeaWWpjkWy2C/MPTcePpsKJEM26hXrOXl1+nceXg==
@@ -1234,12 +1234,12 @@
     "@codemirror/view" "^6.0.0"
     crelt "^1.0.5"
 
-"@codemirror/state@^6.0.0", "@codemirror/state@^6.1.1", "@codemirror/state@^6.2.1", "@codemirror/state@^6.4.0", "@codemirror/state@^6.4.1":
+"@codemirror/state@^6.0.0", "@codemirror/state@^6.2.1", "@codemirror/state@^6.4.0", "@codemirror/state@^6.4.1":
   version "6.4.1"
   resolved "https://registry.yarnpkg.com/@codemirror/state/-/state-6.4.1.tgz#da57143695c056d9a3c38705ed34136e2b68171b"
   integrity sha512-QkEyUiLhsJoZkbumGZlswmAhA7CBU02Wrz7zvH4SrcifbsqwlXShVXg65f3v/ts57W3dqyamEriMhij1Z3Zz4A==
 
-"@codemirror/theme-one-dark@^6.0.0":
+"@codemirror/theme-one-dark@^6.1.2":
   version "6.1.2"
   resolved "https://registry.yarnpkg.com/@codemirror/theme-one-dark/-/theme-one-dark-6.1.2.tgz#fcef9f9cfc17a07836cb7da17c9f6d7231064df8"
   integrity sha512-F+sH0X16j/qFLMAfbciKTxVOwkdAS336b7AXTKOZhy8BR3eH/RelsnLgLFINrpST63mmN2OuwUt0W2ndUgYwUA==
@@ -2454,31 +2454,6 @@
     "@typescript-eslint/types" "5.62.0"
     eslint-visitor-keys "^3.3.0"
 
-"@uiw/codemirror-extensions-basic-setup@4.22.2":
-  version "4.22.2"
-  resolved "https://registry.yarnpkg.com/@uiw/codemirror-extensions-basic-setup/-/codemirror-extensions-basic-setup-4.22.2.tgz#a114dc9ebad6de41a441c8aca655d9c34934a7d9"
-  integrity sha512-zcHGkldLFN3cGoI5XdOGAkeW24yaAgrDEYoyPyWHODmPiNwybQQoZGnH3qUdzZwUaXtAcLWoAeOPzfNRW2yGww==
-  dependencies:
-    "@codemirror/autocomplete" "^6.0.0"
-    "@codemirror/commands" "^6.0.0"
-    "@codemirror/language" "^6.0.0"
-    "@codemirror/lint" "^6.0.0"
-    "@codemirror/search" "^6.0.0"
-    "@codemirror/state" "^6.0.0"
-    "@codemirror/view" "^6.0.0"
-
-"@uiw/react-codemirror@^4.21.25":
-  version "4.22.2"
-  resolved "https://registry.yarnpkg.com/@uiw/react-codemirror/-/react-codemirror-4.22.2.tgz#18dcb79e31cf34e0704366f3041da93ff3c64109"
-  integrity sha512-okCSl+WJG63gRx8Fdz7v0C6RakBQnbb3pHhuzIgDB+fwhipgFodSnu2n9oOsQesJ5YQ7mSOcKMgX0JEsu4nnfQ==
-  dependencies:
-    "@babel/runtime" "^7.18.6"
-    "@codemirror/commands" "^6.1.0"
-    "@codemirror/state" "^6.1.1"
-    "@codemirror/theme-one-dark" "^6.0.0"
-    "@uiw/codemirror-extensions-basic-setup" "4.22.2"
-    codemirror "^6.0.0"
-
 "@ungap/structured-clone@^1.2.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@ungap/structured-clone/-/structured-clone-1.2.0.tgz#756641adb587851b5ccb3e095daf27ae581c8406"
@@ -3530,7 +3505,7 @@ clone@^1.0.2:
   resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
   integrity sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==
 
-codemirror@^6.0.0, codemirror@^6.0.1:
+codemirror@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-6.0.1.tgz#62b91142d45904547ee3e0e0e4c1a79158035a29"
   integrity sha512-J8j+nZ+CdWmIeFIGXEFbFPtpiYacFMDR8GlHK3IyHQJMCaVRfGx9NT+Hxivv1ckLWPvNdZqndbr/7lVhrf/Svg==