@codecademy/codebytes 0.2.1-alpha.cfe771.0 → 0.2.1-alpha.f3c23d.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +1 -1
- package/package.json +3 -3
- package/src/MonacoEditor/index.tsx +15 -9
package/CHANGELOG.md
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
-
### [0.2.1-alpha.
|
|
6
|
+
### [0.2.1-alpha.f3c23d.0](https://github.com/Codecademy/client-modules/compare/@codecademy/codebytes@0.2.0...@codecademy/codebytes@0.2.1-alpha.f3c23d.0) (2022-01-10)
|
|
7
7
|
|
|
8
8
|
**Note:** Version bump only for package @codecademy/codebytes
|
|
9
9
|
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@codecademy/codebytes",
|
|
3
3
|
"description": "Codebytes Code Editor",
|
|
4
|
-
"version": "0.2.1-alpha.
|
|
4
|
+
"version": "0.2.1-alpha.f3c23d.0",
|
|
5
5
|
"author": "Codecademy Engineering <dev@codecademy.com>",
|
|
6
6
|
"sideEffects": [
|
|
7
7
|
"**/*.css",
|
|
@@ -27,8 +27,8 @@
|
|
|
27
27
|
"@emotion/react": "^11.4.0",
|
|
28
28
|
"@emotion/styled": "^11.3.0",
|
|
29
29
|
"@loadable/component": "^5.13.1",
|
|
30
|
+
"@monaco-editor/react": "4.3.1",
|
|
30
31
|
"monaco-editor": "0.20.0",
|
|
31
|
-
"react-monaco-editor": "0.34.0",
|
|
32
32
|
"react-resize-observer": "1.1.1"
|
|
33
33
|
},
|
|
34
34
|
"scripts": {
|
|
@@ -50,5 +50,5 @@
|
|
|
50
50
|
"publishConfig": {
|
|
51
51
|
"access": "public"
|
|
52
52
|
},
|
|
53
|
-
"gitHead": "
|
|
53
|
+
"gitHead": "5895d8746a933760d317cc5ec5e494ca7e7f8010"
|
|
54
54
|
}
|
|
@@ -4,14 +4,14 @@
|
|
|
4
4
|
// Monaco as a shared package RFC https://www.notion.so/codecademy/Monaco-editor-as-a-shared-package-1f4484db165b4abc8394c3556451ef6a
|
|
5
5
|
|
|
6
6
|
import loadable from '@loadable/component';
|
|
7
|
+
import { OnMount } from '@monaco-editor/react';
|
|
7
8
|
import React, { useCallback, useRef } from 'react';
|
|
8
|
-
import MonacoEditor from 'react-monaco-editor';
|
|
9
9
|
import ResizeObserver from 'react-resize-observer';
|
|
10
10
|
|
|
11
11
|
import { dark } from './theme';
|
|
12
12
|
import { Monaco } from './types';
|
|
13
13
|
|
|
14
|
-
const ReactMonacoEditor = loadable(() => import('
|
|
14
|
+
const ReactMonacoEditor = loadable(() => import('@monaco-editor/react'));
|
|
15
15
|
|
|
16
16
|
export type SimpleMonacoEditorProps = {
|
|
17
17
|
value: string;
|
|
@@ -19,16 +19,23 @@ export type SimpleMonacoEditorProps = {
|
|
|
19
19
|
onChange?: (value: string) => void;
|
|
20
20
|
};
|
|
21
21
|
|
|
22
|
+
type ThemedEditor = Parameters<OnMount>[0];
|
|
23
|
+
|
|
22
24
|
export const SimpleMonacoEditor: React.FC<SimpleMonacoEditorProps> = ({
|
|
23
25
|
value,
|
|
24
26
|
language,
|
|
25
27
|
onChange,
|
|
26
28
|
}) => {
|
|
27
|
-
|
|
28
|
-
const
|
|
29
|
-
|
|
30
|
-
monaco
|
|
31
|
-
|
|
29
|
+
/* The library doesn't export the required type for the editor and so we'll use any for now */
|
|
30
|
+
const editorRef = useRef<any>(null);
|
|
31
|
+
const editorWillMount = useCallback(
|
|
32
|
+
(editor: ThemedEditor, monaco: Monaco) => {
|
|
33
|
+
editorRef.current = editor;
|
|
34
|
+
monaco.editor.defineTheme('dark', dark);
|
|
35
|
+
monaco.editor.setTheme('dark');
|
|
36
|
+
},
|
|
37
|
+
[]
|
|
38
|
+
);
|
|
32
39
|
return (
|
|
33
40
|
<>
|
|
34
41
|
<ResizeObserver
|
|
@@ -40,8 +47,7 @@ export const SimpleMonacoEditor: React.FC<SimpleMonacoEditorProps> = ({
|
|
|
40
47
|
}}
|
|
41
48
|
/>
|
|
42
49
|
<ReactMonacoEditor
|
|
43
|
-
|
|
44
|
-
editorWillMount={editorWillMount}
|
|
50
|
+
onMount={editorWillMount}
|
|
45
51
|
onChange={onChange}
|
|
46
52
|
options={{ minimap: { enabled: false } }}
|
|
47
53
|
theme="dark"
|