@codecademy/codebytes 0.2.1-alpha.3da9ab.0 → 0.2.1-alpha.5fb230.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.3da9ab.0](https://github.com/Codecademy/client-modules/compare/@codecademy/codebytes@0.2.0...@codecademy/codebytes@0.2.1-alpha.3da9ab.0) (2022-01-07)
+### [0.2.1-alpha.5fb230.0](https://github.com/Codecademy/client-modules/compare/@codecademy/codebytes@0.2.0...@codecademy/codebytes@0.2.1-alpha.5fb230.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.3da9ab.0",
+  "version": "0.2.1-alpha.5fb230.0",
   "author": "Codecademy Engineering <dev@codecademy.com>",
   "sideEffects": [
     "**/*.css",
@@ -26,9 +26,8 @@
     "@codecademy/variance": "*",
     "@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": {
@@ -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": "55fa9a0e726d555db29ddc01771ff7429e77549c"
+  "gitHead": "1d7c7131bb2c8e8147bf9927c71bb07816fa7c29"
 }

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

@@ -3,29 +3,30 @@
 // 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 ReactMonacoEditor, { 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'));
-
 export type SimpleMonacoEditorProps = {
   value: string;
   language: string;
   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) => {
+  const editorRef = useRef<editor.IStandaloneCodeEditor | null>(null);
+  const editorOnMount = useCallback((editor: ThemedEditor, monaco: Monaco) => {
+    editorRef.current = editor;
     monaco.editor.defineTheme('dark', dark);
     monaco.editor.setTheme('dark');
   }, []);
@@ -33,18 +34,17 @@ export const SimpleMonacoEditor: React.FC<SimpleMonacoEditorProps> = ({
     <>
       <ResizeObserver
         onResize={({ height, width }) => {
-          editorRef.current?.editor?.layout({
+          editorRef.current?.layout({
             height,
             width,
           });
         }}
       />
       <ReactMonacoEditor
-        ref={editorRef}
-        editorWillMount={editorWillMount}
+        onMount={editorOnMount}
         onChange={onChange}
         options={{ minimap: { enabled: false } }}
-        theme="dark"
+        theme="vs-dark"
         value={value}
         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,10 +6,10 @@ import {
   ToolTip,
 } from '@codecademy/gamut';
 import { CopyIcon } from '@codecademy/gamut-icons';
-import { theme } from '@codecademy/gamut-styles';
 import styled from '@emotion/styled';
 import React, { useState } from 'react';
 
+import { CodebytesChangeHandlerMap } from '.';
 import { postSnippet } from './api';
 import type { languageOption } from './consts';
 import { Drawers } from './drawers';
@@ -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: ${theme.colors['navy-900']};
 `}
 `;
 
@@ -39,11 +39,10 @@ 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 */;
-  onCopy?: (text: string, language: string) => void;
+  onChange: (text: string) => void;
+  on?: Pick<CodebytesChangeHandlerMap, 'copy' | 'run'>;
   snippetsBaseUrl?: string;
 };
 
@@ -51,7 +50,7 @@ export const Editor: React.FC<EditorProps> = ({
   language,
   text,
   hideCopyButton,
-  onCopy,
+  on,
   onChange,
   snippetsBaseUrl,
 }) => {
@@ -64,7 +63,7 @@ export const Editor: React.FC<EditorProps> = ({
         .writeText(text)
         // eslint-disable-next-line no-console
         .catch(() => console.error('Failed to copy'));
-      onCopy?.(text, language);
+      on?.copy?.(text, language);
       setIsCodeByteCopied(true);
     }
   };
@@ -84,6 +83,7 @@ export const Editor: React.FC<EditorProps> = ({
     };
     setStatus('waiting');
     setOutput('');
+    on?.run?.();
 
     try {
       const response = await postSnippet(data, snippetsBaseUrl);

package/src/index.tsx

@@ -9,16 +9,22 @@ import { helloWorld, languageOption } from './consts';
 import { Editor } from './editor';
 import { LanguageSelection } from './languageSelection';
 
-type ChangeHandler = (text: string, language: languageOption) => void;
+type CodebytesChangeHandler = (text: string, language: languageOption) => void;
+export type CodebytesChangeHandlerMap = {
+  logoClick?: () => void;
+  edit?: CodebytesChangeHandler;
+  languageChange?: CodebytesChangeHandler;
+  copy?: CodebytesChangeHandler;
+  run?: () => void;
+};
+
 export interface CodeByteEditorProps {
   text: string;
   language: languageOption;
   hideCopyButton: boolean;
-  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;
+  on?: CodebytesChangeHandlerMap;
 }
 
 const editorStates = states({
@@ -47,11 +53,9 @@ export const CodeByteEditor: React.FC<CodeByteEditorProps> = ({
   text: initialText,
   language: initialLanguage,
   hideCopyButton,
-  onCopy,
   isIFrame = false,
-  snippetsBaseUrl = '',
-  onEdit,
-  onLanguageChange,
+  on,
+  snippetsBaseUrl = process.env.CONTAINER_API_BASE,
 }) => {
   const [text, setText] = useState<string>(initialText);
   const [language, setLanguage] = useState<languageOption>(initialLanguage);
@@ -65,6 +69,7 @@ export const CodeByteEditor: React.FC<CodeByteEditorProps> = ({
           target="_blank"
           rel="noreferrer"
           aria-label="visit codecademy.com"
+          onClick={() => on?.logoClick?.()}
         />
       </Box>
       {language ? (
@@ -74,12 +79,9 @@ export const CodeByteEditor: React.FC<CodeByteEditorProps> = ({
           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 */
+            on?.edit?.(newText, language);
           }}
-          onCopy={onCopy}
+          on={on}
           snippetsBaseUrl={snippetsBaseUrl}
         />
       ) : (
@@ -88,10 +90,7 @@ export const CodeByteEditor: React.FC<CodeByteEditorProps> = ({
             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 */
+            on?.languageChange?.(newText, newLanguage);
           }}
         />
       )}

package/src/languageSelection.tsx

@@ -1,5 +1,5 @@
 import { Select } from '@codecademy/gamut';
-import { Background, themed } from '@codecademy/gamut-styles';
+import { Background } from '@codecademy/gamut-styles';
 import styled from '@emotion/styled';
 import React from 'react';
 
@@ -8,19 +8,18 @@ import { languageOptions } from './consts';
 
 const StyledSelect = styled(Select)`
   margin-top: 1rem;
-  color: ${themed('colors.text')};
-
+  color: ${({ theme }) => theme.colors.text};
   select {
-    color: ${themed('colors.text')};
-    background-color: ${themed('colors.black')};
+    color: ${({ theme }) => theme.colors.text};
+    background-color: ${({ theme }) => theme.colors.black};
 
     &:hover,
     &:active,
     &:focus {
-      border-color: ${themed('colors.primary')};
+      border-color: ${({ theme }) => theme.colors.primary};
     }
     &:focus {
-      box-shadow: inset 0 0 0 1px ${themed('colors.primary')};
+      box-shadow: inset 0 0 0 1px ${({ theme }) => theme.colors.primary};
     }
   }
 `;
@@ -34,7 +33,7 @@ export const LanguageSelection: React.FC<LanguageSelectionProps> = ({
 }) => {
   return (
     <Background bg="black" flex={1} px={16} pt={48}>
-      What language do you want to write?
+      Which language do you want to code in?
       <StyledSelect
         id="language-select"
         aria-label="Select your language"