Skip to content

Commit b1ab401

Browse files
lerouxbaddaleax
lerouxb
and
addaleax
authored
chore(deps): upgrade react-ace to 9.5.0 COMPASS-4528 (#1157)
* Upgrade react-ace to 9.5.0 * fix autocompletion * fix type casting * shuffle some imports * fix the theme * Update packages/browser-repl/src/components/editor.tsx Co-authored-by: Anna Henningsen <[email protected]> * delete window.prompt from the iframe Co-authored-by: Anna Henningsen <[email protected]>
1 parent 3b36e62 commit b1ab401

File tree

8 files changed

+701
-178
lines changed

8 files changed

+701
-178
lines changed

‎packages/browser-repl/package-lock.json‎

Lines changed: 644 additions & 136 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/browser-repl/package.json‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@
4747
"@mongosh/i18n": "0.0.0-dev.0",
4848
"@mongosh/node-runtime-worker-thread": "0.0.0-dev.0",
4949
"@mongosh/service-provider-core": "0.0.0-dev.0",
50+
"karma": "^6.3.9",
5051
"pretty-bytes": "^5.3.0",
5152
"text-table": "^0.2.0"
5253
},
@@ -77,7 +78,7 @@
7778
"prop-types": "^15.7.2",
7879
"puppeteer": "^2.0.0",
7980
"react": "^16.12.0",
80-
"react-ace": "^6.6.0",
81+
"react-ace": "^9.5.0",
8182
"react-dom": "^16.12.0",
8283
"rimraf": "^3.0.2",
8384
"style-loader": "^1.1.2",
@@ -90,7 +91,7 @@
9091
"mongodb-ace-theme": "^0.0.1",
9192
"prop-types": "^15.7.2",
9293
"react": "^16.12.0",
93-
"react-ace": "^6.6.0",
94+
"react-ace": "^9.5.0",
9495
"react-dom": "^16.12.0"
9596
}
96-
}
97+
}

‎packages/browser-repl/src/components/ace-theme.js‎

Lines changed: 23 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -17,95 +17,96 @@ const commentsColor = uiColors.gray.light1;
1717
const variablesColor = '#FF6F44';
1818

1919
const layoutCss = `
20-
.ace-mongosh.ace_editor {
20+
.ace_dark.ace-mongosh.ace_editor {
2121
font-family: Menlo, Monaco, 'Courier New', monospace;
2222
font-size: 13px;
2323
line-height: 24px;
2424
margin-left: -4px;
2525
background: transparent;
2626
color: ${foregroundColor};
2727
}
28-
.ace-mongosh .ace_cursor {
28+
.ace_dark.ace-mongosh .ace_cursor {
2929
background: transparent;
3030
color: ${cursorColor};
3131
border-color: ${cursorColor};
3232
}
33-
.ace-mongosh .ace_hidden-cursors .ace_cursor {
33+
.ace_dark.ace-mongosh .ace_hidden-cursors .ace_cursor {
3434
opacity: 0;
3535
visibility: hidden;
3636
}
37-
.ace-mongosh.ace_focus .ace_marker-layer .ace_active-line {
37+
.ace_dark.ace-mongosh.ace_focus .ace_marker-layer .ace_active-line {
3838
background: transparent;
3939
}
40-
.ace-mongosh .ace_marker-layer .ace_active-line {
40+
.ace_dark.ace-mongosh .ace_marker-layer .ace_active-line {
4141
background: transparent;
4242
}
43-
.ace-mongosh .ace_marker-layer .ace_selection {
43+
.ace_dark.ace-mongosh .ace_marker-layer .ace_selection {
4444
background: ${selectionColor};
4545
}
4646
`;
4747

4848
const syntaxCss = `
49-
.ace-mongosh .ace_keyword {
49+
.ace_dark.ace-mongosh .ace_keyword {
5050
color: ${keywordsColor};
5151
font-weight: normal;
5252
}
53-
.ace-mongosh .ace_identifier {
53+
.ace_dark.ace-mongosh .ace_identifier {
5454
color: ${foregroundColor}
5555
}
56-
.ace-mongosh .ace_string {
56+
.ace_dark.ace-mongosh .ace_string {
5757
color: ${stringsColor};
5858
}
59-
.ace-mongosh .ace_boolean {
59+
.ace_dark.ace-mongosh .ace_boolean {
6060
color: ${literalsColor};
6161
font-weight: normal;
6262
}
63-
.ace-mongosh .ace_constant.ace_numeric {
63+
.ace_dark.ace-mongosh .ace_constant.ace_numeric {
6464
color: ${variablesColor};
6565
}
66-
.ace-mongosh .ace_string.ace_regexp {
66+
.ace_dark.ace-mongosh .ace_string.ace_regexp {
6767
color: ${supportColor};
6868
}
69-
.ace-mongosh .ace_variable.ace_class {
69+
.ace_dark.ace-mongosh .ace_variable.ace_class {
7070
color: ${classesColor};
7171
}
72-
.ace-mongosh .ace_constant.ace_buildin {
72+
.ace_dark.ace-mongosh .ace_constant.ace_buildin {
7373
color: ${literalsColor};
7474
}
75-
.ace-mongosh .ace_support.ace_function {
75+
.ace_dark.ace-mongosh .ace_support.ace_function {
7676
color: ${literalsColor};
7777
}
78-
.ace-mongosh .ace_comment {
78+
.ace_dark.ace-mongosh .ace_comment {
7979
color: ${commentsColor};
8080
font-style: italic;
8181
}
82-
.ace-mongosh .ace_variable {
82+
.ace_dark.ace-mongosh .ace_variable {
8383
color: ${variablesColor};
8484
}
85-
.ace-mongosh .ace_variable.ace_instance {
85+
.ace_dark.ace-mongosh .ace_variable.ace_instance {
8686
color: ${variablesColor};
8787
}
88-
.ace-mongosh .ace_paren {
88+
.ace_dark.ace-mongosh .ace_paren {
8989
font-weight: normal;
9090
}
9191
`;
9292

9393
const autocompleteCss = `
94-
.ace-mongosh.ace_editor.ace_autocomplete {
94+
.ace_dark.ace-mongosh.ace_editor.ace_autocomplete {
9595
box-sizing: border-box;
9696
border: 1px solid ${borderColor};
9797
background-color: ${backgroundColor};
9898
box-shadow: 0 5px 8px 0 rgba(0,0,0,0.5);
9999
color: ${commentsColor};
100+
line-height: 24px;
100101
}
101102
102-
.ace-mongosh.ace_editor.ace_autocomplete .ace_completion-highlight {
103+
.ace_dark.ace-mongosh.ace_editor.ace_autocomplete .ace_completion-highlight {
103104
color: ${foregroundColor};
104105
text-shadow: none;
105106
font-weight: bold;
106107
}
107108
108-
.ace-mongosh.ace_editor.ace_autocomplete .ace_marker-layer .ace_active-line {
109+
.ace_dark.ace-mongosh.ace_editor.ace_autocomplete .ace_marker-layer .ace_active-line {
109110
background-color: ${activeLineColor};
110111
}
111112
`;

‎packages/browser-repl/src/components/editor.tsx‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
11
import React, { Component } from 'react';
22
import AceEditor from 'react-ace';
3+
import type { IAceEditor } from 'react-ace/lib/types';
4+
import 'ace-builds';
5+
import 'ace-builds/webpack-resolver';
6+
import tools from 'ace-builds/src-noconflict/ext-language_tools';
7+
import 'ace-builds/src-noconflict/mode-javascript';
38
import { Autocompleter } from '@mongosh/browser-runtime-core';
49
import { AceAutocompleterAdapter } from './ace-autocompleter-adapter';
5-
6-
import 'brace/ext/language_tools';
7-
import 'brace/mode/javascript';
810
import './ace-theme';
911

10-
import ace from 'brace';
11-
const tools = ace.acequire('ace/ext/language_tools');
12-
1312
const noop = (): void => {};
1413

1514
interface EditorProps {
@@ -22,7 +21,7 @@ interface EditorProps {
2221
onClearCommand(): void | Promise<void>;
2322
onSigInt(): Promise<boolean>;
2423
operationInProgress: boolean;
25-
setInputRef?(ref: { editor?: HTMLElement }): void;
24+
setInputRef?(ref: { editor?: IAceEditor }): void;
2625
value: string;
2726
}
2827

@@ -100,7 +99,7 @@ export class Editor extends Component<EditorProps> {
10099
mode="javascript"
101100
ref={(ref: AceEditor | null): void => {
102101
if (this.props.setInputRef && ref !== null) {
103-
this.props.setInputRef(ref as { editor?: HTMLElement });
102+
this.props.setInputRef(ref as { editor?: IAceEditor });
104103
}
105104
}}
106105
theme="mongosh"

‎packages/browser-repl/src/components/shell-input.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
import Icon from '@leafygreen-ui/icon';
2-
import { Autocompleter } from '@mongosh/browser-runtime-core';
31
import classnames from 'classnames';
42
import React, { Component } from 'react';
3+
import { IAceEditor } from 'react-ace/lib/types';
4+
import Icon from '@leafygreen-ui/icon';
5+
import { Autocompleter } from '@mongosh/browser-runtime-core';
56
import { Editor } from './editor';
67
import ShellLoader from './shell-loader';
78
import { LineWithIcon } from './utils/line-with-icon';
@@ -15,7 +16,7 @@ interface ShellInputProps {
1516
onInput?(code: string): void | Promise<void>;
1617
operationInProgress?: boolean;
1718
prompt?: string;
18-
setInputRef?(ref: { editor?: HTMLElement }): void;
19+
setInputRef?(ref: { editor?: IAceEditor }): void;
1920
onSigInt?(): Promise<boolean>;
2021
}
2122

‎packages/browser-repl/src/components/shell.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
1-
import React, { Component } from 'react';
21
import classnames from 'classnames';
3-
import { PasswordPrompt } from './password-prompt';
4-
import { ShellInput } from './shell-input';
5-
import { ShellOutput, ShellOutputEntry } from './shell-output';
2+
import React, { Component } from 'react';
3+
import { IAceEditor } from 'react-ace/lib/types';
64
import type { Runtime } from '@mongosh/browser-runtime-core';
75
import { changeHistory } from '@mongosh/history';
86
import type { WorkerRuntime } from '@mongosh/node-runtime-worker-thread';
7+
import { PasswordPrompt } from './password-prompt';
8+
import { ShellInput } from './shell-input';
9+
import { ShellOutput, ShellOutputEntry } from './shell-output';
910

1011
const styles = require('./shell.less');
1112

@@ -96,7 +97,7 @@ export class Shell extends Component<ShellProps, ShellState> {
9697

9798
private shellInputElement: HTMLElement | null = null;
9899
private shellInputRef?: {
99-
editor?: HTMLElement;
100+
editor?: IAceEditor
100101
};
101102
private onFinishPasswordPrompt: ((input: string) => void) = noop;
102103
private onCancelPasswordPrompt: (() => void) = noop;
@@ -344,7 +345,7 @@ export class Shell extends Component<ShellProps, ShellState> {
344345
onClearCommand={this.onClearCommand}
345346
onInput={this.onInput}
346347
operationInProgress={this.state.operationInProgress}
347-
setInputRef={(ref: { editor?: HTMLElement }): void => {
348+
setInputRef={(ref: { editor?: IAceEditor }): void => {
348349
this.shellInputRef = ref;
349350
}}
350351
onSigInt={this.onSigInt}

‎packages/browser-repl/src/iframe-runtime/iframe-interpreter-environment.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,9 @@ export class IframeInterpreterEnvironment implements InterpreterEnvironment {
88

99
constructor(window: Window) {
1010
this.window = window;
11+
// we don't want window.prompt to confuse the shell into thinking a custom
12+
// prompt was set
13+
this.sloppyEval('delete window.prompt');
1114
}
1215

1316
sloppyEval(code: string): ContextValue {

‎packages/service-provider-server/package-lock.json‎

Lines changed: 9 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)