@codecademy/codebytes 0.2.1-alpha.9c7a19.0 → 0.2.1-alpha.f45f38.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.9c7a19.0](https://github.com/Codecademy/client-modules/compare/@codecademy/codebytes@0.2.0...@codecademy/codebytes@0.2.1-alpha.9c7a19.0) (2022-01-07)
+### [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)
 
 **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.9c7a19.0",
+  "version": "0.2.1-alpha.f45f38.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": "68e61882dbe5cc620114d0637992a925471277d0"
+  "gitHead": "783fed789d9754d46535c05f38b2a8a8185aa298"
 }

package/src/MonacoEditor/index.tsx

@@ -4,14 +4,14 @@
 // 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 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,16 +19,22 @@ 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<any>(null);
+  const editorWillMount = useCallback(
+    (editor: ThemedEditor, monaco: Monaco) => {
+      editorRef.current = editor;
+      monaco.editor.defineTheme('dark', dark);
+      monaco.editor.setTheme('dark');
+    },
+    []
+  );
   return (
     <>
       <ResizeObserver
@@ -40,8 +46,7 @@ export const SimpleMonacoEditor: React.FC<SimpleMonacoEditorProps> = ({
         }}
       />
       <ReactMonacoEditor
-        ref={editorRef}
-        editorWillMount={editorWillMount}
+        onMount={editorWillMount}
         onChange={onChange}
         options={{ minimap: { enabled: false } }}
         theme="dark"

package/src/consts.ts

@@ -13,52 +13,3 @@ export const languageOptions = {
 };
 
 export type languageOption = keyof typeof languageOptions;
-
-export const validLanguages = Object.keys(languageOptions).filter(
-  (option) => !!option
-) as languageOption[];
-
-const cpp = `#include <iostream>
-int main() {
-  std::cout << "Hello world!";
-  return 0;
-}`;
-
-const csharp = `namespace HelloWorld {
-  class Hello {
-    static void Main(string[] args) {
-      System.Console.WriteLine("Hello world!");
-    }
-  }
-}`;
-
-const golang = `package main
-import "fmt"
-func main() {
-  fmt.Println("Hello world!")
-}`;
-
-const javascript = "console.log('Hello world!');";
-
-const php = `<?php
-  echo "Hello world!";
-?>`;
-
-const python = "print('Hello world!')";
-
-const ruby = 'puts "Hello world!"';
-
-const scheme = `(begin
-  (display "Hello world!")
-  (newline))`;
-
-export const helloWorld: { [key in languageOption]?: string } = {
-  cpp,
-  csharp,
-  golang,
-  javascript,
-  php,
-  python,
-  ruby,
-  scheme,
-};

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

@@ -5,11 +5,9 @@ import { StyleProps } from '@codecademy/variance';
 import styled from '@emotion/styled';
 import React, { useState } from 'react';
 
-import { helloWorld, languageOption } from './consts';
+import { languageOption } from './consts';
 import { Editor } from './editor';
-import { LanguageSelection } from './languageSelection';
 
-type ChangeHandler = (text: string, language: languageOption) => void;
 export interface CodeByteEditorProps {
   text: string;
   language: languageOption;
@@ -17,8 +15,7 @@ export interface CodeByteEditorProps {
   onCopy?: (text: string, language: string) => void;
   isIFrame?: boolean;
   snippetsBaseUrl?: string /* TODO in DISC-353: Determine best way to host and include snippets endpoint for both staging and production in both the monolith and next.js repo. */;
-  onEdit?: ChangeHandler;
-  onLanguageChange?: ChangeHandler;
+  onTextChange?: (text: string) => void;
 }
 
 const editorStates = states({
@@ -45,16 +42,14 @@ const EditorContainer = styled(Background)<EditorStyleProps>(
 
 export const CodeByteEditor: React.FC<CodeByteEditorProps> = ({
   text: initialText,
-  language: initialLanguage,
+  language,
   hideCopyButton,
   onCopy,
   isIFrame = false,
   snippetsBaseUrl = '',
-  onEdit,
-  onLanguageChange,
+  onTextChange,
 }) => {
   const [text, setText] = useState<string>(initialText);
-  const [language, setLanguage] = useState<languageOption>(initialLanguage);
   return (
     <EditorContainer bg="black" as="main" isIFrame={isIFrame}>
       <Box borderBottom={1} borderColor="gray-900" py={4} pl={8}>
@@ -67,34 +62,17 @@ export const CodeByteEditor: React.FC<CodeByteEditorProps> = ({
           aria-label="visit codecademy.com"
         />
       </Box>
-      {language ? (
-        <Editor
-          language={language}
-          text={text}
-          hideCopyButton={hideCopyButton}
-          onChange={(newText: string) => {
-            setText(newText);
-            onEdit?.(
-              newText,
-              language
-            ); /* TODO: in DISC-355 update component to use an object that contains all change handlers */
-          }}
-          onCopy={onCopy}
-          snippetsBaseUrl={snippetsBaseUrl}
-        />
-      ) : (
-        <LanguageSelection
-          onChange={(newLanguage) => {
-            const newText: string = text || helloWorld[newLanguage] || '';
-            setLanguage(newLanguage);
-            setText(newText);
-            onLanguageChange?.(
-              newText,
-              newLanguage
-            ); /* TODO: in DISC-355 update component to use an object that contains all change handlers */
-          }}
-        />
-      )}
+      <Editor
+        language={language}
+        text={text}
+        hideCopyButton={hideCopyButton}
+        onChange={(newText: string) => {
+          setText(newText);
+          onTextChange?.(newText);
+        }}
+        onCopy={onCopy}
+        snippetsBaseUrl={snippetsBaseUrl}
+      />
     </EditorContainer>
   );
 };

package/src/languageSelection.tsx

@@ -1,46 +0,0 @@
-import { Select } from '@codecademy/gamut';
-import { Background, themed } from '@codecademy/gamut-styles';
-import styled from '@emotion/styled';
-import React from 'react';
-
-import type { languageOption } from './consts';
-import { languageOptions } from './consts';
-
-const StyledSelect = styled(Select)`
-  margin-top: 1rem;
-  color: ${themed('colors.text')};
-
-  select {
-    color: ${themed('colors.text')};
-    background-color: ${themed('colors.black')};
-
-    &:hover,
-    &:active,
-    &:focus {
-      border-color: ${themed('colors.primary')};
-    }
-    &:focus {
-      box-shadow: inset 0 0 0 1px ${themed('colors.primary')};
-    }
-  }
-`;
-
-export type LanguageSelectionProps = {
-  onChange: (newLanguage: languageOption) => void;
-};
-
-export const LanguageSelection: React.FC<LanguageSelectionProps> = ({
-  onChange,
-}) => {
-  return (
-    <Background bg="black" flex={1} px={16} pt={48}>
-      What language do you want to write?
-      <StyledSelect
-        id="language-select"
-        aria-label="Select your language"
-        options={languageOptions}
-        onChange={(e) => onChange(e.target.value as languageOption)}
-      />
-    </Background>
-  );
-};