Skip to content

Commit 19aaa18

Browse files
jsladermanjsladerman
committed
fix: code editor cursor bug
1 parent 7b07df3 commit 19aaa18

File tree

6 files changed

+51
-43
lines changed

6 files changed

+51
-43
lines changed

‎package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@
4646
"@floating-ui/react-dom-interactions": "0.13.3",
4747
"@loomhq/loom-embed": "1.5.0",
4848
"@markdoc/markdoc": "0.4.0",
49-
"@monaco-editor/react": "4.6.0",
49+
"@monaco-editor/react": "4.7.0",
5050
"@radix-ui/react-accordion": "1.2.0",
5151
"@radix-ui/react-dialog": "1.1.1",
5252
"@radix-ui/react-focus-scope": "1.1.0",
@@ -56,7 +56,7 @@
5656
"@react-stately/utils": "3.9.0",
5757
"@tanstack/match-sorter-utils": "8.8.4",
5858
"@tanstack/react-table": "8.20.5",
59-
"@tanstack/react-virtual": "3.0.1",
59+
"@tanstack/react-virtual": "3.13.12",
6060
"chroma-js": "2.4.2",
6161
"classnames": "2.3.2",
6262
"dayjs": "1.11.13",
@@ -126,6 +126,7 @@
126126
"jest-mock": "29.5.0",
127127
"jsdom": "23.0.1",
128128
"lint-staged": "15.2.0",
129+
"monaco-editor": "0.52.2",
129130
"npm-run-all": "4.1.5",
130131
"prettier": "3.0.3",
131132
"react": "19.0.0",

‎src/components/CodeEditor.tsx‎

Lines changed: 16 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import { type Dispatch, useCallback, useEffect, useState } from 'react'
1+
import { type Dispatch, useCallback, useEffect, useMemo, useState } from 'react'
22
import { Div, Flex, P } from 'honorable'
33
import { useTheme } from 'styled-components'
44

5-
import Editor, { useMonaco } from '@monaco-editor/react'
5+
import Editor, { useMonaco, type EditorProps } from '@monaco-editor/react'
66
import { merge } from 'lodash'
77

88
import { editorThemeDark } from '../theme/editorThemeDark'
@@ -16,28 +16,22 @@ type CodeEditorProps = Omit<CardProps, 'children'> & {
1616
value?: string
1717
onChange?: Dispatch<string>
1818
language?: string
19-
options?: object
19+
options?: EditorProps['options']
2020
save?: boolean
2121
saving?: boolean
2222
onSave?: Dispatch<string>
2323
saveLabel?: string
2424
height?: string | number
2525
}
2626

27-
const defaultOptions = {
28-
fontFamily: '"Monument Mono", monospace',
29-
fontSize: '14px',
30-
padding: {
31-
bottom: '16px',
32-
top: '16px',
33-
},
34-
scrollbar: {
35-
useShadows: false,
36-
verticalScrollbarSize: 5,
37-
},
27+
const defaultOptions: EditorProps['options'] = {
28+
fontFamily: 'ui-monospace, monospace',
29+
fontSize: 14,
30+
padding: { bottom: 16, top: 16 },
31+
scrollbar: { useShadows: false, verticalScrollbarSize: 5 },
3832
scrollBeyondLastLine: false,
39-
// Fixes cursor alignment issues when using custom font
40-
fontLigatures: '',
33+
fontLigatures: false,
34+
automaticLayout: true,
4135
}
4236

4337
export default function CodeEditor({
@@ -89,6 +83,11 @@ export default function CodeEditor({
8983
)
9084
}, [monaco, theme.mode])
9185

86+
const mergedOptions = useMemo(
87+
() => merge({}, defaultOptions, options),
88+
[options]
89+
)
90+
9291
return (
9392
<Card
9493
fillLevel={toFillLevel(Math.min(parentFillLevel + 1, 2))}
@@ -119,7 +118,7 @@ export default function CodeEditor({
119118
setCurrent(v)
120119
if (onChange) onChange(v)
121120
}}
122-
options={merge(defaultOptions, options)}
121+
options={mergedOptions}
123122
theme={theme.mode === 'light' ? 'plural-light' : 'plural-dark'}
124123
onMount={onEditorMount}
125124
/>

‎src/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -127,7 +127,7 @@ export { default as SubTab } from './components/SubTab'
127127
export { Switch } from './components/Switch'
128128
export { default as Tab } from './components/Tab'
129129
export { default as Table } from './components/table/Table'
130-
export type { TableProps } from './components/table/tableUtils'
130+
export type { TableProps, VirtualSlice } from './components/table/tableUtils'
131131
export { TabList } from './components/TabList'
132132
export type { TabBaseProps, TabListStateProps } from './components/TabList'
133133
export { default as TabPanel } from './components/TabPanel'

‎src/theme/editorThemeDark.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { blue, red } from './colors-base'
33

44
export const editorThemeDark = {
55
inherit: true,
6-
base: 'vs-dark',
6+
base: 'vs-dark' as const,
77
rules: [
88
{
99
background: semanticColors['fill-one'],

‎src/theme/editorThemeLight.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { red } from './colors-base'
33

44
export const editorThemeLight = {
55
inherit: true,
6-
base: 'vs',
6+
base: 'vs' as const,
77
rules: [
88
{
99
background: semanticColors['fill-one'],

‎yarn.lock‎

Lines changed: 29 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -2581,7 +2581,7 @@ __metadata:
25812581
languageName: node
25822582
linkType: hard
25832583

2584-
"@monaco-editor/loader@npm:^1.4.0":
2584+
"@monaco-editor/loader@npm:^1.5.0":
25852585
version: 1.5.0
25862586
resolution: "@monaco-editor/loader@npm:1.5.0"
25872587
dependencies:
@@ -2590,16 +2590,16 @@ __metadata:
25902590
languageName: node
25912591
linkType: hard
25922592

2593-
"@monaco-editor/react@npm:4.6.0":
2594-
version: 4.6.0
2595-
resolution: "@monaco-editor/react@npm:4.6.0"
2593+
"@monaco-editor/react@npm:4.7.0":
2594+
version: 4.7.0
2595+
resolution: "@monaco-editor/react@npm:4.7.0"
25962596
dependencies:
2597-
"@monaco-editor/loader": ^1.4.0
2597+
"@monaco-editor/loader": ^1.5.0
25982598
peerDependencies:
25992599
monaco-editor: ">= 0.25.0 < 1"
2600-
react: ^16.8.0 || ^17.0.0 || ^18.0.0
2601-
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
2602-
checksum: 9d44e76c5baad6db5f84c90a5540fbd3c9af691b97d76cf2a99b3c8273004d0efe44c2572d80e9d975c9af10022c21e4a66923924950a5201e82017c8b20428c
2600+
react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
2601+
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
2602+
checksum: 8b3bd8adfcd6af70dc5f965e986932269e1e2c2a0f6beb5a3c632c8c7942c1341f6086d9664f9a949983bdf4a04a706e529a93bfec3b5884642915dfcc0354c3
26032603
languageName: node
26042604
linkType: hard
26052605

@@ -2724,7 +2724,7 @@ __metadata:
27242724
"@floating-ui/react-dom-interactions": 0.13.3
27252725
"@loomhq/loom-embed": 1.5.0
27262726
"@markdoc/markdoc": 0.4.0
2727-
"@monaco-editor/react": 4.6.0
2727+
"@monaco-editor/react": 4.7.0
27282728
"@pluralsh/eslint-config-typescript": 2.5.147
27292729
"@radix-ui/react-accordion": 1.2.0
27302730
"@radix-ui/react-dialog": 1.1.1
@@ -2746,7 +2746,7 @@ __metadata:
27462746
"@storybook/theming": 8.3.5
27472747
"@tanstack/match-sorter-utils": 8.8.4
27482748
"@tanstack/react-table": 8.20.5
2749-
"@tanstack/react-virtual": 3.0.1
2749+
"@tanstack/react-virtual": 3.13.12
27502750
"@testing-library/jest-dom": 5.17.0
27512751
"@types/chroma-js": 2.4.3
27522752
"@types/lodash-es": 4.17.12
@@ -2785,6 +2785,7 @@ __metadata:
27852785
jsdom: 23.0.1
27862786
lint-staged: 15.2.0
27872787
lodash-es: 4.17.21
2788+
monaco-editor: 0.52.2
27882789
npm-run-all: 4.1.5
27892790
prettier: 3.0.3
27902791
react: 19.0.0
@@ -5552,15 +5553,15 @@ __metadata:
55525553
languageName: node
55535554
linkType: hard
55545555

5555-
"@tanstack/react-virtual@npm:3.0.1":
5556-
version: 3.0.1
5557-
resolution: "@tanstack/react-virtual@npm:3.0.1"
5556+
"@tanstack/react-virtual@npm:3.13.12":
5557+
version: 3.13.12
5558+
resolution: "@tanstack/react-virtual@npm:3.13.12"
55585559
dependencies:
5559-
"@tanstack/virtual-core": 3.0.0
5560+
"@tanstack/virtual-core": 3.13.12
55605561
peerDependencies:
5561-
react: ^16.8.0 || ^17.0.0 || ^18.0.0
5562-
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
5563-
checksum: 11534a23100de14a7e0a95da667381181e60a24e29a71246aeed174f8d5f6e176216de6639e6e1f403722ae30d8b92b21ed75ea131529b1417fb81f433468ef0
5562+
react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
5563+
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
5564+
checksum: 7b64c728ae3666c22f6a1727d464f877c04ae02347480eab482c7a002c2a340167ded856e3dd52b19de34f965aeb01a1e223acdab44d646251c0aa89c3d69539
55645565
languageName: node
55655566
linkType: hard
55665567

@@ -5571,10 +5572,10 @@ __metadata:
55715572
languageName: node
55725573
linkType: hard
55735574

5574-
"@tanstack/virtual-core@npm:3.0.0":
5575-
version: 3.0.0
5576-
resolution: "@tanstack/virtual-core@npm:3.0.0"
5577-
checksum: 7283d50fc7b7a56608c37a8e94a93b85890ff7e39c6281633a19c4d6f6f4fbf25f8418f1eec302a008a8746a0d1d0cd00630137b55e6cf019818d68af8ed16b6
5575+
"@tanstack/virtual-core@npm:3.13.12":
5576+
version: 3.13.12
5577+
resolution: "@tanstack/virtual-core@npm:3.13.12"
5578+
checksum: bef2c3138543a2088fff7d4fa46624d07403b18d92ec5a7271e187457851535031a79bc78ac655355a221d5549ef3b5674a3b249d2531f4c17c93107498c8438
55785579
languageName: node
55795580
linkType: hard
55805581

@@ -14500,6 +14501,13 @@ __metadata:
1450014501
languageName: node
1450114502
linkType: hard
1450214503

14504+
"monaco-editor@npm:0.52.2":
14505+
version: 0.52.2
14506+
resolution: "monaco-editor@npm:0.52.2"
14507+
checksum: d5ff7b7a469afee25ac708d9ace0dcc5ef24ed328dfc526a52944a497f0d826cfb0685a778ff4b7becc0a8f7843f260c17ea6de3f6719481d53501d79ebb1260
14508+
languageName: node
14509+
linkType: hard
14510+
1450314511
"morgan@npm:^1.10.0, morgan@npm:^1.8.2":
1450414512
version: 1.10.0
1450514513
resolution: "morgan@npm:1.10.0"

0 commit comments

Comments
 (0)