pluralsh · jsladerman · Aug 26, 2025 · Aug 26, 2025
@@ -46,7 +46,7 @@
     "@floating-ui/react-dom-interactions": "0.13.3",
     "@loomhq/loom-embed": "1.5.0",
     "@markdoc/markdoc": "0.4.0",
-    "@monaco-editor/react": "4.6.0",
+    "@monaco-editor/react": "4.7.0",
     "@radix-ui/react-accordion": "1.2.0",
     "@radix-ui/react-dialog": "1.1.1",
     "@radix-ui/react-focus-scope": "1.1.0",
@@ -56,7 +56,7 @@
     "@react-stately/utils": "3.9.0",
     "@tanstack/match-sorter-utils": "8.8.4",
     "@tanstack/react-table": "8.20.5",
-    "@tanstack/react-virtual": "3.0.1",
+    "@tanstack/react-virtual": "3.13.12",
     "chroma-js": "2.4.2",
     "classnames": "2.3.2",
     "dayjs": "1.11.13",
@@ -126,6 +126,7 @@
     "jest-mock": "29.5.0",
     "jsdom": "23.0.1",
     "lint-staged": "15.2.0",
+    "monaco-editor": "0.52.2",
     "npm-run-all": "4.1.5",
     "prettier": "3.0.3",
     "react": "19.0.0",

@@ -1,8 +1,8 @@
-import { type Dispatch, useCallback, useEffect, useState } from 'react'
+import { type Dispatch, useCallback, useEffect, useMemo, useState } from 'react'
 import { Div, Flex, P } from 'honorable'
 import { useTheme } from 'styled-components'
 
-import Editor, { useMonaco } from '@monaco-editor/react'
+import Editor, { useMonaco, type EditorProps } from '@monaco-editor/react'
 import { merge } from 'lodash'
 
 import { editorThemeDark } from '../theme/editorThemeDark'
@@ -16,28 +16,22 @@ type CodeEditorProps = Omit<CardProps, 'children'> & {
   value?: string
   onChange?: Dispatch<string>
   language?: string
-  options?: object
+  options?: EditorProps['options']
   save?: boolean
   saving?: boolean
   onSave?: Dispatch<string>
   saveLabel?: string
   height?: string | number
 }
 
-const defaultOptions = {
-  fontFamily: '"Monument Mono", monospace',
-  fontSize: '14px',
-  padding: {
-    bottom: '16px',
-    top: '16px',
-  },
-  scrollbar: {
-    useShadows: false,
-    verticalScrollbarSize: 5,
-  },
+const defaultOptions: EditorProps['options'] = {
+  fontFamily: 'ui-monospace, monospace',
+  fontSize: 14,
+  padding: { bottom: 16, top: 16 },
+  scrollbar: { useShadows: false, verticalScrollbarSize: 5 },
   scrollBeyondLastLine: false,
-  // Fixes cursor alignment issues when using custom font
-  fontLigatures: '',
+  fontLigatures: false,
+  automaticLayout: true,
 }
 
 export default function CodeEditor({
@@ -89,6 +83,11 @@ export default function CodeEditor({
     )
   }, [monaco, theme.mode])
 
+  const mergedOptions = useMemo(
+    () => merge({}, defaultOptions, options),
+    [options]
+  )
+
   return (
     <Card
       fillLevel={toFillLevel(Math.min(parentFillLevel + 1, 2))}
@@ -119,7 +118,7 @@ export default function CodeEditor({
             setCurrent(v)
             if (onChange) onChange(v)
           }}
-          options={merge(defaultOptions, options)}
+          options={mergedOptions}
           theme={theme.mode === 'light' ? 'plural-light' : 'plural-dark'}
           onMount={onEditorMount}
         />

@@ -127,7 +127,7 @@ export { default as SubTab } from './components/SubTab'
 export { Switch } from './components/Switch'
 export { default as Tab } from './components/Tab'
 export { default as Table } from './components/table/Table'
-export type { TableProps } from './components/table/tableUtils'
+export type { TableProps, VirtualSlice } from './components/table/tableUtils'
 export { TabList } from './components/TabList'
 export type { TabBaseProps, TabListStateProps } from './components/TabList'
 export { default as TabPanel } from './components/TabPanel'

@@ -3,7 +3,7 @@ import { blue, red } from './colors-base'
 
 export const editorThemeDark = {
   inherit: true,
-  base: 'vs-dark',
+  base: 'vs-dark' as const,
   rules: [
     {
       background: semanticColors['fill-one'],

@@ -3,7 +3,7 @@ import { red } from './colors-base'
 
 export const editorThemeLight = {
   inherit: true,
-  base: 'vs',
+  base: 'vs' as const,
   rules: [
     {
       background: semanticColors['fill-one'],

@@ -2581,7 +2581,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@monaco-editor/loader@npm:^1.4.0":
+"@monaco-editor/loader@npm:^1.5.0":
   version: 1.5.0
   resolution: "@monaco-editor/loader@npm:1.5.0"
   dependencies:
@@ -2590,16 +2590,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@monaco-editor/react@npm:4.6.0":
-  version: 4.6.0
-  resolution: "@monaco-editor/react@npm:4.6.0"
+"@monaco-editor/react@npm:4.7.0":
+  version: 4.7.0
+  resolution: "@monaco-editor/react@npm:4.7.0"
   dependencies:
-    "@monaco-editor/loader": ^1.4.0
+    "@monaco-editor/loader": ^1.5.0
   peerDependencies:
     monaco-editor: ">= 0.25.0 < 1"
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: 9d44e76c5baad6db5f84c90a5540fbd3c9af691b97d76cf2a99b3c8273004d0efe44c2572d80e9d975c9af10022c21e4a66923924950a5201e82017c8b20428c
+    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: 8b3bd8adfcd6af70dc5f965e986932269e1e2c2a0f6beb5a3c632c8c7942c1341f6086d9664f9a949983bdf4a04a706e529a93bfec3b5884642915dfcc0354c3
   languageName: node
   linkType: hard
 
@@ -2724,7 +2724,7 @@ __metadata:
     "@floating-ui/react-dom-interactions": 0.13.3
     "@loomhq/loom-embed": 1.5.0
     "@markdoc/markdoc": 0.4.0
-    "@monaco-editor/react": 4.6.0
+    "@monaco-editor/react": 4.7.0
     "@pluralsh/eslint-config-typescript": 2.5.147
     "@radix-ui/react-accordion": 1.2.0
     "@radix-ui/react-dialog": 1.1.1
@@ -2746,7 +2746,7 @@ __metadata:
     "@storybook/theming": 8.3.5
     "@tanstack/match-sorter-utils": 8.8.4
     "@tanstack/react-table": 8.20.5
-    "@tanstack/react-virtual": 3.0.1
+    "@tanstack/react-virtual": 3.13.12
     "@testing-library/jest-dom": 5.17.0
     "@types/chroma-js": 2.4.3
     "@types/lodash-es": 4.17.12
@@ -2785,6 +2785,7 @@ __metadata:
     jsdom: 23.0.1
     lint-staged: 15.2.0
     lodash-es: 4.17.21
+    monaco-editor: 0.52.2
     npm-run-all: 4.1.5
     prettier: 3.0.3
     react: 19.0.0
@@ -5552,15 +5553,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@tanstack/react-virtual@npm:3.0.1":
-  version: 3.0.1
-  resolution: "@tanstack/react-virtual@npm:3.0.1"
+"@tanstack/react-virtual@npm:3.13.12":
+  version: 3.13.12
+  resolution: "@tanstack/react-virtual@npm:3.13.12"
   dependencies:
-    "@tanstack/virtual-core": 3.0.0
+    "@tanstack/virtual-core": 3.13.12
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: 11534a23100de14a7e0a95da667381181e60a24e29a71246aeed174f8d5f6e176216de6639e6e1f403722ae30d8b92b21ed75ea131529b1417fb81f433468ef0
+    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: 7b64c728ae3666c22f6a1727d464f877c04ae02347480eab482c7a002c2a340167ded856e3dd52b19de34f965aeb01a1e223acdab44d646251c0aa89c3d69539
   languageName: node
   linkType: hard
 
@@ -5571,10 +5572,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@tanstack/virtual-core@npm:3.0.0":
-  version: 3.0.0
-  resolution: "@tanstack/virtual-core@npm:3.0.0"
-  checksum: 7283d50fc7b7a56608c37a8e94a93b85890ff7e39c6281633a19c4d6f6f4fbf25f8418f1eec302a008a8746a0d1d0cd00630137b55e6cf019818d68af8ed16b6
+"@tanstack/virtual-core@npm:3.13.12":
+  version: 3.13.12
+  resolution: "@tanstack/virtual-core@npm:3.13.12"
+  checksum: bef2c3138543a2088fff7d4fa46624d07403b18d92ec5a7271e187457851535031a79bc78ac655355a221d5549ef3b5674a3b249d2531f4c17c93107498c8438
   languageName: node
   linkType: hard
 
@@ -14500,6 +14501,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"monaco-editor@npm:0.52.2":
+  version: 0.52.2
+  resolution: "monaco-editor@npm:0.52.2"
+  checksum: d5ff7b7a469afee25ac708d9ace0dcc5ef24ed328dfc526a52944a497f0d826cfb0685a778ff4b7becc0a8f7843f260c17ea6de3f6719481d53501d79ebb1260
+  languageName: node
+  linkType: hard
+
 "morgan@npm:^1.10.0, morgan@npm:^1.8.2":
   version: 1.10.0
   resolution: "morgan@npm:1.10.0"