@codecademy/codebytes 0.2.1-alpha.7386df.0 → 0.2.1-alpha.808d0d.0

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-### [0.2.1-alpha.7386df.0](https://github.com/Codecademy/client-modules/compare/@codecademy/codebytes@0.2.0...@codecademy/codebytes@0.2.1-alpha.7386df.0) (2022-01-05)
+### [0.2.1-alpha.808d0d.0](https://github.com/Codecademy/client-modules/compare/@codecademy/codebytes@0.2.0...@codecademy/codebytes@0.2.1-alpha.808d0d.0) (2022-01-11)
 
 **Note:** Version bump only for package @codecademy/codebytes
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@codecademy/codebytes",
   "description": "Codebytes Code Editor",
-  "version": "0.2.1-alpha.7386df.0",
+  "version": "0.2.1-alpha.808d0d.0",
   "author": "Codecademy Engineering <dev@codecademy.com>",
   "sideEffects": [
     "**/*.css",
@@ -27,8 +27,8 @@
     "@emotion/react": "^11.4.0",
     "@emotion/styled": "^11.3.0",
     "@loadable/component": "^5.13.1",
-    "monaco-editor": "0.20.0",
-    "react-monaco-editor": "0.34.0",
+    "@monaco-editor/react": "4.3.1",
+    "monaco-editor": ">= 0.25.0 < 1",
     "react-resize-observer": "1.1.1"
   },
   "scripts": {
@@ -50,5 +50,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b46e91d88ac0844c7f4d71856806785aab64cdc6"
+  "gitHead": "263768f9ce1f6e3f97404bc46d560268eece40c2"
 }

package/src/MonacoEditor/colorsDark.ts

@@ -51,4 +51,4 @@ export const ui = {
 
 export type SyntaxColors = typeof syntax;
 
-export type UIColors = typeof ui;
+export type UIColors = typeof ui;

package/src/MonacoEditor/index.tsx

@@ -4,14 +4,15 @@
 // Monaco as a shared package RFC https://www.notion.so/codecademy/Monaco-editor-as-a-shared-package-1f4484db165b4abc8394c3556451ef6a
 
 import loadable from '@loadable/component';
+import { OnMount } from '@monaco-editor/react';
+import { editor } from 'monaco-editor/esm/vs/editor/editor.api';
 import React, { useCallback, useRef } from 'react';
-import MonacoEditor from 'react-monaco-editor';
 import ResizeObserver from 'react-resize-observer';
 
 import { dark } from './theme';
 import { Monaco } from './types';
 
-const ReactMonacoEditor = loadable(() => import('react-monaco-editor'));
+const ReactMonacoEditor = loadable(() => import('@monaco-editor/react'));
 
 export type SimpleMonacoEditorProps = {
   value: string;
@@ -19,34 +20,39 @@ export type SimpleMonacoEditorProps = {
   onChange?: (value: string) => void;
 };
 
+type ThemedEditor = Parameters<OnMount>[0];
+
 export const SimpleMonacoEditor: React.FC<SimpleMonacoEditorProps> = ({
   value,
   language,
   onChange,
 }) => {
-  const editorRef = useRef<MonacoEditor>(null);
-  const editorWillMount = useCallback((monaco: Monaco) => {
-    monaco.editor.defineTheme('dark', dark);
-    monaco.editor.setTheme('dark');
-  }, []);
+  const editorRef = useRef<editor.IStandaloneCodeEditor | null>(null);
+  const editorWillMount = useCallback(
+    (editor: ThemedEditor, monaco: Monaco) => {
+      editorRef.current = editor;
+      monaco.editor.defineTheme('dark', dark);
+      monaco.editor.setTheme('dark');
+    },
+    []
+  );
   return (
     <>
       <ResizeObserver
         onResize={({ height, width }) => {
-          editorRef.current?.editor?.layout({
+          editorRef.current?.layout({
             height,
             width,
           });
         }}
       />
       <ReactMonacoEditor
-        ref={editorRef}
-        editorWillMount={editorWillMount}
+        onMount={editorWillMount}
         onChange={onChange}
         options={{ minimap: { enabled: false } }}
-        theme="dark"
+        theme="vs-dark"
         value={value}
-        language="language"
+        language={language}
       />
     </>
   );

package/src/MonacoEditor/theme.ts

@@ -61,4 +61,4 @@ const theme = ({
   },
 });
 
-export const dark = theme(darkColors);
+export const dark = theme(darkColors);

package/src/MonacoEditor/types.ts

@@ -1 +1 @@
-export type Monaco = typeof import('monaco-editor');
+export type Monaco = typeof import('monaco-editor');

package/src/editor.tsx

@@ -6,7 +6,7 @@ import {
   ToolTip,
 } from '@codecademy/gamut';
 import { CopyIcon } from '@codecademy/gamut-icons';
-import { theme } from '@codecademy/gamut-styles';
+import { colors } from '@codecademy/gamut-styles';
 import styled from '@emotion/styled';
 import React, { useState } from 'react';
 
@@ -23,9 +23,9 @@ const Output = styled.pre<{ hasError: boolean }>`
   font-family: Monaco;
   font-size: 0.875rem;
   overflow: auto;
-  ${({ hasError }) => `
+  ${({ hasError, theme }) => `
   color: ${hasError ? theme.colors.orange : theme.colors.white};
-  background-color: ${theme.colors['gray-900']};
+  background-color: ${colors['gray-900']};
 `}
 `;
 
@@ -39,10 +39,7 @@ type EditorProps = {
   hideCopyButton: boolean;
   language: languageOption;
   text: string;
-  // eslint-disable-next-line react/no-unused-prop-types
-  onChange: (
-    text: string
-  ) => void /* TODO: Add onChange behavior in DISC-353 */;
+  onChange: (text: string) => void;
   onCopy?: (text: string, language: string) => void;
   snippetsBaseUrl?: string;
 };

package/src/index.tsx

@@ -46,7 +46,7 @@ export const CodeByteEditor: React.FC<CodeByteEditorProps> = ({
   hideCopyButton,
   onCopy,
   isIFrame = false,
-  snippetsBaseUrl = '',
+  snippetsBaseUrl = process.env.CONTAINER_API_BASE,
   onTextChange,
 }) => {
   const [text, setText] = useState<string>(initialText);