@codecademy/codebytes 0.2.1-alpha.f45f38.0 → 0.3.0

package/CHANGELOG.md

@@ -3,11 +3,12 @@
 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.f45f38.0](https://github.com/Codecademy/client-modules/compare/@codecademy/codebytes@0.2.0...@codecademy/codebytes@0.2.1-alpha.f45f38.0) (2022-01-11)
+## [0.3.0](https://github.com/Codecademy/client-modules/compare/@codecademy/codebytes@0.2.0...@codecademy/codebytes@0.3.0) (2022-01-12)
 
-**Note:** Version bump only for package @codecademy/codebytes
 
+### Features
 
+* **Codebytes:** add simple monaco editor disc 353 ([#16](https://github.com/Codecademy/client-modules/issues/16)) ([eec98ba](https://github.com/Codecademy/client-modules/commit/eec98ba9aad45f07fb5f3417e3da1e1935985deb))
 
 
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@codecademy/codebytes",
   "description": "Codebytes Code Editor",
-  "version": "0.2.1-alpha.f45f38.0",
+  "version": "0.3.0",
   "author": "Codecademy Engineering <dev@codecademy.com>",
   "sideEffects": [
     "**/*.css",
@@ -26,7 +26,6 @@
     "@codecademy/variance": "*",
     "@emotion/react": "^11.4.0",
     "@emotion/styled": "^11.3.0",
-    "@loadable/component": "^5.13.1",
     "@monaco-editor/react": "4.3.1",
     "monaco-editor": ">= 0.25.0 < 1",
     "react-resize-observer": "1.1.1"
@@ -44,11 +43,10 @@
     "@emotion/jest": "^11.3.0",
     "@testing-library/dom": "^7.31.2",
     "@testing-library/react": "^11.0.4",
-    "@types/loadable__component": "^5.13.2",
-    "monaco-editor-webpack-plugin": "1.9.1"
+    "@types/loadable__component": "^5.13.2"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "783fed789d9754d46535c05f38b2a8a8185aa298"
+  "gitHead": "7845d303c2191ed8d56b06edbd6aae9741d68aeb"
 }

package/src/MonacoEditor/index.tsx

@@ -3,16 +3,14 @@
 // We are working on a monaco package in client-modules that has more configuration around themes and languages
 // 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 ReactMonacoEditor, { OnMount } from '@monaco-editor/react';
+import { editor } from 'monaco-editor/esm/vs/editor/editor.api';
 import React, { useCallback, useRef } from 'react';
 import ResizeObserver from 'react-resize-observer';
 
 import { dark } from './theme';
 import { Monaco } from './types';
 
-const ReactMonacoEditor = loadable(() => import('@monaco-editor/react'));
-
 export type SimpleMonacoEditorProps = {
   value: string;
   language: string;
@@ -26,7 +24,7 @@ export const SimpleMonacoEditor: React.FC<SimpleMonacoEditorProps> = ({
   language,
   onChange,
 }) => {
-  const editorRef = useRef<any>(null);
+  const editorRef = useRef<editor.IStandaloneCodeEditor | null>(null);
   const editorWillMount = useCallback(
     (editor: ThemedEditor, monaco: Monaco) => {
       editorRef.current = editor;
@@ -39,7 +37,7 @@ export const SimpleMonacoEditor: React.FC<SimpleMonacoEditorProps> = ({
     <>
       <ResizeObserver
         onResize={({ height, width }) => {
-          editorRef.current?.editor?.layout({
+          editorRef.current?.layout({
             height,
             width,
           });
@@ -49,7 +47,7 @@ export const SimpleMonacoEditor: React.FC<SimpleMonacoEditorProps> = ({
         onMount={editorWillMount}
         onChange={onChange}
         options={{ minimap: { enabled: false } }}
-        theme="dark"
+        theme="vs-dark"
         value={value}
         language={language}
       />

package/src/editor.tsx

@@ -6,7 +6,6 @@ import {
   ToolTip,
 } from '@codecademy/gamut';
 import { CopyIcon } from '@codecademy/gamut-icons';
-import { colors } from '@codecademy/gamut-styles';
 import styled from '@emotion/styled';
 import React, { useState } from 'react';
 
@@ -25,7 +24,7 @@ const Output = styled.pre<{ hasError: boolean }>`
   overflow: auto;
   ${({ hasError, theme }) => `
   color: ${hasError ? theme.colors.orange : theme.colors.white};
-  background-color: ${colors['gray-900']};
+  background-color: ${theme.colors['navy-900']};
 `}
 `;
 

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);