From 489a0c1a2ac402ece6b4ac65f590b4d7c7941d90 Mon Sep 17 00:00:00 2001
From: Bana Malik <bana@codecademy.com>
Date: Fri, 17 Dec 2021 17:38:06 -0500
Subject: [PATCH 01/19] working version

---
 packages/codebytes/src/consts.ts   |  15 +++
 packages/codebytes/src/drawers.tsx | 128 +++++++++++++++++++++++
 packages/codebytes/src/editor.tsx  | 161 ++++++++++++++++++++++++++++-
 packages/codebytes/src/index.tsx   |   7 ++
 packages/codebytes/tsconfig.json   |   2 +-
 5 files changed, 308 insertions(+), 5 deletions(-)
 create mode 100644 packages/codebytes/src/consts.ts
 create mode 100644 packages/codebytes/src/drawers.tsx

diff --git a/packages/codebytes/src/consts.ts b/packages/codebytes/src/consts.ts
new file mode 100644
index 000000000..8dbd6f3a9
--- /dev/null
+++ b/packages/codebytes/src/consts.ts
@@ -0,0 +1,15 @@
+// key = language param to send to snippets service
+// val = label in language selection drop down
+export const languageOptions = {
+    '': 'Select your language',
+    cpp: 'C++',
+    csharp: 'C#',
+    golang: 'Go',
+    javascript: 'JavaScript',
+    php: 'PHP',
+    python: 'Python 3',
+    ruby: 'Ruby',
+    scheme: 'Scheme',
+  };
+  
+  export type languageOption = keyof typeof languageOptions;
\ No newline at end of file
diff --git a/packages/codebytes/src/drawers.tsx b/packages/codebytes/src/drawers.tsx
new file mode 100644
index 000000000..7fb0d76c5
--- /dev/null
+++ b/packages/codebytes/src/drawers.tsx
@@ -0,0 +1,128 @@
+import { FlexBox, IconButton } from '@codecademy/gamut';
+import {
+  ArrowChevronLeftIcon,
+  ArrowChevronRightIcon,
+} from '@codecademy/gamut-icons';
+import styled from '@emotion/styled';
+import React, { useState } from 'react';
+
+const DrawerLabel = styled.span`
+  padding: 0.875rem 0.5rem;
+`;
+
+const LeftDrawerIcon = styled(ArrowChevronLeftIcon)<{ open?: boolean }>`
+  transition: transform 0.2s ease-in-out;
+`;
+const RightDrawerIcon = LeftDrawerIcon.withComponent(ArrowChevronRightIcon);
+
+const Drawer = styled(FlexBox)<{ open?: boolean; hideOnClose?: boolean }>`
+  position: relative;
+  ${({ open, hideOnClose }) => `
+    flex-basis: ${open ? '100%' : '0%'};
+    ${!open && hideOnClose ? 'visibility: hidden;' : ''}
+    transition: flex-basis 0.2s ${
+      open ? 'ease-out' : 'ease-in, visibility 0s 0.2s'
+    };
+
+    ${LeftDrawerIcon}, ${RightDrawerIcon} {
+      transform: rotateZ(${open ? '0' : '180'}deg)};
+    }
+  `}
+`;
+
+export type DrawersProps = {
+  leftChild: React.ReactNode;
+  rightChild: React.ReactNode;
+};
+
+export const Drawers: React.FC<DrawersProps> = ({ leftChild, rightChild }) => {
+  const [show, setShow] = useState<'left' | 'right' | 'both'>('both');
+
+  let buttonLabelL = 'hide code';
+  let buttonLabelR = 'hide output';
+
+  if (show === 'left') {
+    buttonLabelL = buttonLabelR = 'show output';
+  } else if (show === 'right') {
+    buttonLabelL = buttonLabelR = 'show code';
+  }
+
+  return (
+    <>
+      <FlexBox>
+        <Drawer
+          open={show !== 'right'}
+          alignItems="center"
+          flexWrap="nowrap"
+          textAlign="left"
+          borderRight="1"
+          borderColor="gray-900"
+          px="8"
+        >
+          <IconButton
+            icon={LeftDrawerIcon}
+            variant="secondary"
+            size="small"
+            onClick={() =>
+              setShow((state) => (state === 'both' ? 'right' : 'both'))
+            }
+            aria-label={buttonLabelL}
+            aria-controls="code-drawer"
+            aria-expanded={show !== 'right'}
+          />
+          <DrawerLabel id="code-drawer-label">Code</DrawerLabel>
+        </Drawer>
+        <Drawer
+          open={show !== 'left'}
+          alignItems="center"
+          flexWrap="nowrap"
+          justifyContent="flex-end"
+          px="8"
+        >
+          <DrawerLabel id="output-drawer-label">Output</DrawerLabel>
+          <IconButton
+            icon={RightDrawerIcon}
+            variant="secondary"
+            size="small"
+            onClick={() =>
+              setShow((state) => (state === 'both' ? 'left' : 'both'))
+            }
+            aria-label={buttonLabelR}
+            aria-controls="output-drawer"
+            aria-expanded={show !== 'left'}
+          />
+        </Drawer>
+      </FlexBox>
+      <FlexBox
+        flexGrow={1}
+        borderY="1"
+        borderColor="gray-900"
+        alignItems="stretch"
+        overflow="hidden"
+      >
+        <Drawer
+          hideOnClose
+          id="code-drawer"
+          aria-labelledby="code-drawer-label"
+          open={show !== 'right'}
+          flexGrow={0}
+          overflow="hidden"
+          borderColor="gray-900"
+          borderStyleRight="solid"
+          borderWidthRight="thin"
+        >
+          {leftChild}
+        </Drawer>
+        <Drawer
+          hideOnClose
+          id="output-drawer"
+          aria-labelledby="output-drawer-label"
+          open={show !== 'left'}
+          overflow="hidden"
+        >
+          {rightChild}
+        </Drawer>
+      </FlexBox>
+    </>
+  );
+};
diff --git a/packages/codebytes/src/editor.tsx b/packages/codebytes/src/editor.tsx
index 39710e871..cbde378a5 100644
--- a/packages/codebytes/src/editor.tsx
+++ b/packages/codebytes/src/editor.tsx
@@ -1,10 +1,163 @@
-import React from 'react';
+import {
+  FillButton,
+  FlexBox,
+  Spinner,
+  TextButton,
+  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 type { languageOption } from './consts';
+import { Drawers } from './drawers';
+
+const Output = styled.pre<{ hasError: boolean }>`
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0 1rem;
+  font-family: Monaco;
+  font-size: 0.875rem;
+  overflow: auto;
+  ${({ hasError }) => `
+  color: ${hasError ? theme.colors.orange : theme.colors.white};
+  background-color: ${theme.colors['gray-900']};
+`}
+`;
+
+const CopyIconStyled = styled(CopyIcon)`
+  margin-right: 0.5rem;
+`;
+
+const DOCKER_SIGTERM = 143;
 
 type EditorProps = {
+  hideCopyButton: boolean;
+  language: languageOption;
   text: string;
-  onChange: (text: string) => void;
+  // eslint-disable-next-line react/no-unused-prop-types
+  onChange: (text: string) => void /* Will use in upcoming pr */;
+  onCopy?: (text: string, language: string) => void;
 };
 
-export const Editor: React.FC<EditorProps> = ({ text, onChange }) => {
-  return <textarea value={text} onChange={(e) => onChange(e.target.value)} />;
+interface Response {
+  stderr: string;
+  stdout: string;
+  exit_code: number;
+}
+
+export const Editor: React.FC<EditorProps> = ({
+  language,
+  text,
+  hideCopyButton,
+  onCopy,
+}) => {
+  const [output, setOutput] = useState('');
+  const [status, setStatus] = useState<'ready' | 'waiting' | 'error'>('ready');
+  const [isCodeByteCopied, setIsCodeByteCopied] = useState(false);
+  const onCopyClick = () => {
+    if (!isCodeByteCopied) {
+      navigator.clipboard
+        .writeText(text)
+        // eslint-disable-next-line no-console
+        .catch(() => console.error('Failed to copy'));
+      onCopy?.(
+        text,
+        language
+      ); /* TODO: pass in onCopyBBCodeblock behavior from static sites */
+      setIsCodeByteCopied(true);
+    }
+  };
+
+  const setErrorStatusAndOutput = (message: string) => {
+    setOutput(message);
+    setStatus('error');
+  };
+
+  const handleSubmit = () => {
+    if (text.trim().length === 0) {
+      return;
+    }
+    const data = {
+      language,
+      code: text,
+    };
+    setStatus('waiting');
+    setOutput('');
+
+    const snippetsEndpoint =
+      'https://' + process.env.GATSBY_CONTAINER_API_BASE + '/snippets';
+
+    fetch(snippetsEndpoint, {
+      method: 'POST',
+      body: JSON.stringify(data),
+      headers: {
+        'x-codecademy-user-id': 'codebytes-anon-user',
+      },
+    })
+      .then((res) => res.json())
+      .then((response: Response) => {
+        if (response.stderr.length > 0) {
+          setErrorStatusAndOutput(response.stderr);
+        } else if (response.exit_code === DOCKER_SIGTERM) {
+          setErrorStatusAndOutput(
+            'Your code took too long to return a result. Double check your code for any issues and try again!'
+          );
+        } else if (response.exit_code !== 0) {
+          setErrorStatusAndOutput('An unknown error occured.');
+        } else {
+          setOutput(response.stdout);
+          setStatus('ready');
+        }
+      })
+      .catch((error) => {
+        setErrorStatusAndOutput('Error: ' + error);
+      });
+  };
+
+  return (
+    <>
+      <h1>Hi</h1>
+      <Drawers
+        leftChild={<div>Simple Monaco Editor Placeholder</div>}
+        rightChild={
+          <Output hasError={status === 'error'} aria-live="polite">
+            {output}
+          </Output>
+        }
+      />
+      <FlexBox
+        justifyContent={hideCopyButton ? 'flex-end' : 'space-between'}
+        pl="8"
+      >
+        {!hideCopyButton ? (
+          <ToolTip
+            id="codebyte-copied"
+            alignment="top-right"
+            mode="dark"
+            target={
+              <TextButton
+                variant="secondary"
+                onClick={onCopyClick}
+                onBlur={() => setIsCodeByteCopied(false)}
+              >
+                <CopyIconStyled aria-hidden="true" /> Copy Codebyte
+              </TextButton>
+            }
+          >
+            {isCodeByteCopied ? (
+              <span role="alert">Copied!</span>
+            ) : (
+              <span>Copy to your clipboard</span>
+            )}
+          </ToolTip>
+        ) : null}
+        <FillButton onClick={handleSubmit}>
+          {status === 'waiting' ? <Spinner /> : 'Run'}
+        </FillButton>
+      </FlexBox>
+    </>
+  );
 };
diff --git a/packages/codebytes/src/index.tsx b/packages/codebytes/src/index.tsx
index 1bf458e9e..2ac2df9c5 100644
--- a/packages/codebytes/src/index.tsx
+++ b/packages/codebytes/src/index.tsx
@@ -1,13 +1,18 @@
 import React, { useState } from 'react';
 
+import { languageOption } from './consts';
 import { Editor } from './editor';
 
 export interface CodeByteEditorProps {
   text: string;
+  language: languageOption;
+  hideCopyButton: boolean;
 }
 
 export const CodeByteEditor: React.FC<CodeByteEditorProps> = ({
   text: initialText,
+  language,
+  hideCopyButton,
 }) => {
   const [text, setText] = useState<string>(initialText);
   return (
@@ -17,6 +22,8 @@ export const CodeByteEditor: React.FC<CodeByteEditorProps> = ({
         onChange={(newText: string) => {
           setText(newText);
         }}
+        hideCopyButton={hideCopyButton}
+        language={language}
       />
     </>
   );
diff --git a/packages/codebytes/tsconfig.json b/packages/codebytes/tsconfig.json
index 3625d95a0..7263f4278 100644
--- a/packages/codebytes/tsconfig.json
+++ b/packages/codebytes/tsconfig.json
@@ -1,4 +1,4 @@
 {
   "extends": "../../tsconfig.json",
   "include": ["../../typings/*.d.ts", "./src/**/*.ts", "./src/**/*.tsx"]
-}
+}
\ No newline at end of file

From f61ddd91ee51517b7c35a3f89f81a22f32082f0b Mon Sep 17 00:00:00 2001
From: Bana Malik <bana@codecademy.com>
Date: Fri, 17 Dec 2021 18:03:59 -0500
Subject: [PATCH 02/19] update to include gamut styles

---
 packages/codebytes/src/editor.tsx             |  5 ++--
 .../stories/CodeByteEditor.stories.mdx        | 27 +++++++++++++++++--
 2 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/packages/codebytes/src/editor.tsx b/packages/codebytes/src/editor.tsx
index cbde378a5..ef222f727 100644
--- a/packages/codebytes/src/editor.tsx
+++ b/packages/codebytes/src/editor.tsx
@@ -15,7 +15,7 @@ import { Drawers } from './drawers';
 
 const Output = styled.pre<{ hasError: boolean }>`
   width: 100%;
-  height: 100%;
+  height: 20rem;
   margin: 0;
   padding: 0 1rem;
   font-family: Monaco;
@@ -119,9 +119,8 @@ export const Editor: React.FC<EditorProps> = ({
 
   return (
     <>
-      <h1>Hi</h1>
       <Drawers
-        leftChild={<div>Simple Monaco Editor Placeholder</div>}
+        leftChild={<div>{text}</div>}
         rightChild={
           <Output hasError={status === 'error'} aria-live="polite">
             {output}
diff --git a/packages/styleguide/stories/CodeByteEditor.stories.mdx b/packages/styleguide/stories/CodeByteEditor.stories.mdx
index afbc1e971..f247c0557 100644
--- a/packages/styleguide/stories/CodeByteEditor.stories.mdx
+++ b/packages/styleguide/stories/CodeByteEditor.stories.mdx
@@ -1,5 +1,12 @@
 import { CodeByteEditor } from '@codecademy/codebytes/src';
 import { Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
+import { AppWrapper } from '@codecademy/gamut';
+import {
+  createEmotionCache,
+  GamutProvider,
+  theme,
+} from '@codecademy/gamut-styles';
+import { AssetProvider } from '@codecademy/gamut-styles/dist/AssetProvider';
 
 <Meta
   title="CodeByteEditor"
@@ -12,7 +19,23 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
 />
 
 <Canvas>
-  <Story name="default" args={{ text: 'This is example input for a codebyte' }}>
-    {(args) => <CodeByteEditor {...args} />}
+  <Story
+    name="default"
+    args={{
+      text:
+        'Lorem Ipsum is simply dummy text of the printing and typesetting industry',
+    }}
+  >
+    {(args) => (
+      <GamutProvider
+        cache={createEmotionCache({ container: document.head })}
+        theme={theme}
+      >
+        <AssetProvider />
+        <AppWrapper>
+          <CodeByteEditor {...args} />
+        </AppWrapper>
+      </GamutProvider>
+    )}
   </Story>
 </Canvas>

From a90a11a5aad78d9137f18e9a2ab5762d54ef6ad7 Mon Sep 17 00:00:00 2001
From: Bana Malik <bana@codecademy.com>
Date: Sun, 19 Dec 2021 23:07:16 -0500
Subject: [PATCH 03/19] add simple code editor

---
 packages/codebytes/package.json               | 11 +++-
 .../codebytes/src/MonacoEditor/colorsDark.ts  | 54 ++++++++++++++++
 packages/codebytes/src/MonacoEditor/index.tsx | 53 +++++++++++++++
 packages/codebytes/src/MonacoEditor/theme.ts  | 64 +++++++++++++++++++
 packages/codebytes/src/MonacoEditor/types.ts  |  1 +
 packages/codebytes/src/editor.tsx             | 13 +++-
 packages/styleguide/.storybook/main.ts        | 10 ++-
 .../stories/CodeByteEditor.stories.mdx        |  1 +
 yarn.lock                                     | 59 ++++++++++++++++-
 9 files changed, 257 insertions(+), 9 deletions(-)
 create mode 100644 packages/codebytes/src/MonacoEditor/colorsDark.ts
 create mode 100644 packages/codebytes/src/MonacoEditor/index.tsx
 create mode 100644 packages/codebytes/src/MonacoEditor/theme.ts
 create mode 100644 packages/codebytes/src/MonacoEditor/types.ts

diff --git a/packages/codebytes/package.json b/packages/codebytes/package.json
index c59ae3f00..8688afff5 100644
--- a/packages/codebytes/package.json
+++ b/packages/codebytes/package.json
@@ -24,8 +24,11 @@
     "@codecademy/gamut-icons": "*",
     "@codecademy/gamut-styles": "*",
     "@emotion/react": "^11.4.0",
-    "@emotion/styled": "^11.3.0"
-  },
+    "@emotion/styled": "^11.3.0",
+    "@loadable/component": "^5.13.1",
+    "react-monaco-editor": "0.34.0",
+    "react-resize-observer": "1.1.1",
+    "monaco-editor": "0.20.0"  },
   "scripts": {
     "verify": "tsc --noEmit",
     "build:compile": "babel ./src --out-dir ./dist --copy-files --extensions \".ts,.tsx\"",
@@ -38,7 +41,9 @@
   "devDependencies": {
     "@emotion/jest": "^11.3.0",
     "@testing-library/dom": "^7.31.2",
-    "@testing-library/react": "^11.0.4"
+    "@testing-library/react": "^11.0.4",
+    "@types/loadable__component": "^5.13.2",
+    "monaco-editor-webpack-plugin": "1.9.1"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/codebytes/src/MonacoEditor/colorsDark.ts b/packages/codebytes/src/MonacoEditor/colorsDark.ts
new file mode 100644
index 000000000..0b176d2c3
--- /dev/null
+++ b/packages/codebytes/src/MonacoEditor/colorsDark.ts
@@ -0,0 +1,54 @@
+// DO NOT CHANGE ANYTHING HERE
+// This file is part of the Codebytes MVP and only includes basic configuration around theming for the SimpleMonacoEditor component
+// 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 { colors, editorColors } from '@codecademy/gamut-styles';
+
+const darkTheme = {
+  blue: editorColors.blue,
+  deepPurple: editorColors.deepPurple,
+  gray: editorColors.gray,
+  green: editorColors.green,
+  orange: editorColors.orange,
+  purple: editorColors.purple,
+  red: editorColors.red,
+  white: colors.white,
+  yellow: editorColors.yellow,
+};
+
+export const syntax = {
+  attribute: darkTheme.green,
+  annotation: darkTheme.red,
+  atom: darkTheme.deepPurple,
+  basic: darkTheme.white,
+  comment: darkTheme.gray,
+  constant: darkTheme.orange,
+  decoration: darkTheme.red,
+  invalid: darkTheme.red,
+  key: darkTheme.blue,
+  keyword: darkTheme.purple,
+  number: darkTheme.red,
+  operator: darkTheme.red,
+  predefined: darkTheme.white,
+  property: darkTheme.red,
+  regexp: darkTheme.green,
+  string: darkTheme.yellow,
+  tag: darkTheme.red,
+  text: darkTheme.orange,
+  value: darkTheme.yellow,
+  variable: darkTheme.green,
+};
+
+export const ui = {
+  background: '#211E2F',
+  text: darkTheme.white,
+  indent: {
+    active: '#393b41',
+    inactive: '#494b51',
+  },
+};
+
+export type SyntaxColors = typeof syntax;
+
+export type UIColors = typeof ui;
\ No newline at end of file
diff --git a/packages/codebytes/src/MonacoEditor/index.tsx b/packages/codebytes/src/MonacoEditor/index.tsx
new file mode 100644
index 000000000..0eb184708
--- /dev/null
+++ b/packages/codebytes/src/MonacoEditor/index.tsx
@@ -0,0 +1,53 @@
+// DO NOT CHANGE ANYTHING HERE
+// This component is part of the Codebytes MVP and only includes basic configuration around theming
+// 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 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;
+};
+
+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');
+  }, []);
+  return (
+    <>
+      <ResizeObserver
+        onResize={({ height, width }) => {
+          editorRef.current?.editor?.layout({
+            height,
+            width,
+          });
+        }}
+      />
+      <ReactMonacoEditor
+        ref={editorRef}
+        editorWillMount={editorWillMount}
+        onChange={onChange}
+        options={{ minimap: { enabled: false } }}
+        theme="dark"
+        value={value}
+        language={language}
+      />
+    </>
+  );
+};
diff --git a/packages/codebytes/src/MonacoEditor/theme.ts b/packages/codebytes/src/MonacoEditor/theme.ts
new file mode 100644
index 000000000..6155f1368
--- /dev/null
+++ b/packages/codebytes/src/MonacoEditor/theme.ts
@@ -0,0 +1,64 @@
+// DO NOT CHANGE ANYTHING HERE
+// This file is part of the Codebytes MVP and only includes basic configuration around theming for the SimpleMonacoEditor component
+// 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 type * as monaco from 'monaco-editor';
+
+import * as darkColors from './colorsDark';
+
+const c = (color: string) => color.substr(1);
+
+const theme = ({
+  ui,
+  syntax,
+}: {
+  ui: darkColors.UIColors;
+  syntax: darkColors.SyntaxColors;
+}): monaco.editor.IStandaloneThemeData => ({
+  base: 'vs-dark',
+  inherit: true,
+  rules: [
+    // Base
+    { token: '', foreground: c(syntax.basic) },
+    { token: 'regexp', foreground: c(syntax.regexp) },
+    { token: 'annotation', foreground: c(syntax.annotation) },
+    { token: 'type', foreground: c(syntax.annotation) },
+    { token: 'doctype', foreground: c(syntax.comment) },
+    { token: 'delimiter', foreground: c(syntax.decoration) },
+    { token: 'invalid', foreground: c(syntax.invalid) },
+    { token: 'emphasis', fontStyle: 'italic' },
+    { token: 'strong', fontStyle: 'bold' },
+    { token: 'variable', foreground: c(syntax.variable) },
+    { token: 'variable.predefined', foreground: c(syntax.variable) },
+    { token: 'constant', foreground: c(syntax.constant) },
+    { token: 'comment', foreground: c(syntax.comment) },
+    { token: 'number', foreground: c(syntax.number) },
+    { token: 'number.hex', foreground: c(syntax.number) },
+    { token: 'keyword.directive', foreground: c(syntax.comment) },
+    { token: 'include', foreground: c(syntax.comment) },
+    { token: 'key', foreground: c(syntax.property) },
+    { token: 'attribute.name', foreground: c(syntax.attribute) },
+    { token: 'attribute.name-numeric', foreground: c(syntax.string) },
+    { token: 'attribute.value', foreground: c(syntax.property) },
+    { token: 'attribute.value.number', foreground: c(syntax.number) },
+    { token: 'string', foreground: c(syntax.string) },
+    { token: 'string.yaml', foreground: c(syntax.string) },
+    { token: 'tag', foreground: c(syntax.tag) },
+    { token: 'tag.id.jade', foreground: c(syntax.tag) },
+    { token: 'tag.class.jade', foreground: c(syntax.tag) },
+    { token: 'metatag', foreground: c(syntax.comment) },
+    { token: 'attribute.value.unit', foreground: c(syntax.string) },
+    { token: 'keyword', foreground: c(syntax.keyword) },
+    { token: 'keyword.flow', foreground: c(syntax.keyword) },
+  ],
+  colors: {
+    'editor.background': ui.background,
+    'editor.foreground': ui.text,
+    'editorIndentGuide.background': ui.indent.inactive,
+    'editorIndentGuide.activeBackground': ui.indent.active,
+    'editorWhitespace.foreground': syntax.comment,
+  },
+});
+
+export const dark = theme(darkColors);
\ No newline at end of file
diff --git a/packages/codebytes/src/MonacoEditor/types.ts b/packages/codebytes/src/MonacoEditor/types.ts
new file mode 100644
index 000000000..669c3ae02
--- /dev/null
+++ b/packages/codebytes/src/MonacoEditor/types.ts
@@ -0,0 +1 @@
+export type Monaco = typeof import('monaco-editor');
\ No newline at end of file
diff --git a/packages/codebytes/src/editor.tsx b/packages/codebytes/src/editor.tsx
index ef222f727..2641cf4ec 100644
--- a/packages/codebytes/src/editor.tsx
+++ b/packages/codebytes/src/editor.tsx
@@ -12,6 +12,7 @@ import React, { useState } from 'react';
 
 import type { languageOption } from './consts';
 import { Drawers } from './drawers';
+import { SimpleMonacoEditor } from './MonacoEditor';
 
 const Output = styled.pre<{ hasError: boolean }>`
   width: 100%;
@@ -37,8 +38,7 @@ type EditorProps = {
   hideCopyButton: boolean;
   language: languageOption;
   text: string;
-  // eslint-disable-next-line react/no-unused-prop-types
-  onChange: (text: string) => void /* Will use in upcoming pr */;
+  onChange: (text: string) => void;
   onCopy?: (text: string, language: string) => void;
 };
 
@@ -53,6 +53,7 @@ export const Editor: React.FC<EditorProps> = ({
   text,
   hideCopyButton,
   onCopy,
+  onChange,
 }) => {
   const [output, setOutput] = useState('');
   const [status, setStatus] = useState<'ready' | 'waiting' | 'error'>('ready');
@@ -120,7 +121,13 @@ export const Editor: React.FC<EditorProps> = ({
   return (
     <>
       <Drawers
-        leftChild={<div>{text}</div>}
+        leftChild={
+          <SimpleMonacoEditor
+            value={text}
+            language={language}
+            onChange={onChange}
+          />
+        }
         rightChild={
           <Output hasError={status === 'error'} aria-live="polite">
             {output}
diff --git a/packages/styleguide/.storybook/main.ts b/packages/styleguide/.storybook/main.ts
index 6f3b4c083..a074c38ea 100644
--- a/packages/styleguide/.storybook/main.ts
+++ b/packages/styleguide/.storybook/main.ts
@@ -1,5 +1,6 @@
 const path = require('path');
 const { configs } = require('@codecademy/webpack-config');
+const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
 
 // https://github.com/storybookjs/storybook/issues/12262#issuecomment-681953346
 // make a shallow copy of an object, rejecting keys that match /emotion/
@@ -30,8 +31,11 @@ module.exports = {
   },
 
   webpackFinal: (config: any) => {
+    const commonRules = configs.css().module.rules; /* Codecademy configs */
     config.module.rules = config.module.rules.concat(
-      configs.css().module.rules
+      [{...commonRules[0], include: [
+        /node_modules\/@codecademy/
+      ]}, commonRules[1]],
     );
 
     config.resolve = {
@@ -40,5 +44,9 @@ module.exports = {
     };
 
     return config;
+
+    
   },
+
+
 };
diff --git a/packages/styleguide/stories/CodeByteEditor.stories.mdx b/packages/styleguide/stories/CodeByteEditor.stories.mdx
index f247c0557..24c0a3bb1 100644
--- a/packages/styleguide/stories/CodeByteEditor.stories.mdx
+++ b/packages/styleguide/stories/CodeByteEditor.stories.mdx
@@ -24,6 +24,7 @@ import { AssetProvider } from '@codecademy/gamut-styles/dist/AssetProvider';
     args={{
       text:
         'Lorem Ipsum is simply dummy text of the printing and typesetting industry',
+      language: 'javascript',
     }}
   >
     {(args) => (
diff --git a/yarn.lock b/yarn.lock
index def3e863f..363928a22 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1934,7 +1934,7 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.1.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.13", "@babel/runtime@^7.8.7":
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.13", "@babel/runtime@^7.7.7", "@babel/runtime@^7.8.7":
   version "7.16.5"
   resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.5.tgz#7f3e34bf8bdbbadf03fbb7b1ea0d929569c9487a"
   integrity sha512-TXWihFIS3Pyv5hzR7j6ihmeLkZfrXGxAr5UfSl8CHf+6q/wpiYDkUau0czckpYG8QmnCIuPpdLtuA9VmuGGyMA==
@@ -3399,6 +3399,15 @@
     npmlog "^4.1.2"
     write-file-atomic "^2.3.0"
 
+"@loadable/component@^5.13.1":
+  version "5.15.2"
+  resolved "https://registry.npmjs.org/@loadable/component/-/component-5.15.2.tgz#b6c418d592e0a64f16b1d614ca9d3b1443d3b498"
+  integrity sha512-ryFAZOX5P2vFkUdzaAtTG88IGnr9qxSdvLRvJySXcUA4B4xVWurUNADu3AnKPksxOZajljqTrDEDcYjeL4lvLw==
+  dependencies:
+    "@babel/runtime" "^7.7.7"
+    hoist-non-react-statics "^3.3.1"
+    react-is "^16.12.0"
+
 "@mdx-js/loader@^1.6.22":
   version "1.6.22"
   resolved "https://registry.npmjs.org/@mdx-js/loader/-/loader-1.6.22.tgz#d9e8fe7f8185ff13c9c8639c048b123e30d322c4"
@@ -4831,6 +4840,13 @@
   resolved "https://registry.npmjs.org/@types/konami-code-js/-/konami-code-js-0.8.0.tgz#dd7b3bd23266d0d1c6bfcad870232b1a3788a883"
   integrity sha512-7fhuggz5XuuQJxWhVL/5i3oQEQ80jjp3yvwaWlwNjFbM40BELnzV4qKeyPDLtjsHC9NG6E7XT22epH9eDZC3zg==
 
+"@types/loadable__component@^5.13.2":
+  version "5.13.4"
+  resolved "https://registry.npmjs.org/@types/loadable__component/-/loadable__component-5.13.4.tgz#a4646b2406b1283efac1a9d9485824a905b33d4a"
+  integrity sha512-YhoCCxyuvP2XeZNbHbi8Wb9EMaUJuA2VGHxJffcQYrJKIKSkymJrhbzsf9y4zpTmr5pExAAEh5hbF628PAZ8Dg==
+  dependencies:
+    "@types/react" "*"
+
 "@types/lodash@4.14.168":
   version "4.14.168"
   resolved "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.168.tgz#fe24632e79b7ade3f132891afff86caa5e5ce008"
@@ -5014,6 +5030,20 @@
     "@types/prop-types" "*"
     csstype "^3.0.2"
 
+"@types/react@^15.x || ^16.x":
+  version "16.14.21"
+  resolved "https://registry.npmjs.org/@types/react/-/react-16.14.21.tgz#35199b21a278355ec7a3c40003bd6a334bd4ae4a"
+  integrity sha512-rY4DzPKK/4aohyWiDRHS2fotN5rhBSK6/rz1X37KzNna9HJyqtaGAbq9fVttrEPWF5ywpfIP1ITL8Xi2QZn6Eg==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
+"@types/scheduler@*":
+  version "0.16.2"
+  resolved "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
+  integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
+
 "@types/source-list-map@*":
   version "0.1.2"
   resolved "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz#0078836063ffaf17412349bba364087e0ac02ec9"
@@ -13355,6 +13385,18 @@ modify-values@^1.0.0:
   resolved "https://registry.npmjs.org/modify-values/-/modify-values-1.0.1.tgz#b3939fa605546474e3e3e3c63d64bd43b4ee6022"
   integrity sha512-xV2bxeN6F7oYjZWTe/YPAy6MN2M+sL4u/Rlm2AHCIVGfo2p1yGmBHQ6vHehl4bRTZBdHu3TSkWdYgkwpYzAGSw==
 
+monaco-editor-webpack-plugin@1.9.1:
+  version "1.9.1"
+  resolved "https://registry.npmjs.org/monaco-editor-webpack-plugin/-/monaco-editor-webpack-plugin-1.9.1.tgz#eb4bbb1c5e5bfb554541c1ae1542e74c2a9f43fd"
+  integrity sha512-x7fx1w3i/uwZERIgztHAAK3VQMsL8+ku0lFXXbO81hKDg8IieACqjGEa2mqEueg0c/fX+wd0oI+75wB19KJAsA==
+  dependencies:
+    loader-utils "^1.2.3"
+
+monaco-editor@0.20.0:
+  version "0.20.0"
+  resolved "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.20.0.tgz#5d5009343a550124426cb4d965a4d27a348b4dea"
+  integrity sha512-hkvf4EtPJRMQlPC3UbMoRs0vTAFAYdzFQ+gpMb8A+9znae1c43q8Mab9iVsgTcg/4PNiLGGn3SlDIa8uvK1FIQ==
+
 moo@^0.5.0:
   version "0.5.1"
   resolved "https://registry.npmjs.org/moo/-/moo-0.5.1.tgz#7aae7f384b9b09f620b6abf6f74ebbcd1b65dbc4"
@@ -15541,7 +15583,7 @@ react-is@17.0.2, react-is@^17.0.2:
   resolved "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
-react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.6:
+react-is@^16.12.0, react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.6:
   version "16.13.1"
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -15556,6 +15598,14 @@ react-lifecycles-compat@^3.0.4:
   resolved "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
+react-monaco-editor@0.34.0:
+  version "0.34.0"
+  resolved "https://registry.npmjs.org/react-monaco-editor/-/react-monaco-editor-0.34.0.tgz#14ec8b10d448bf11f85f711ab9d91117bc46b3b8"
+  integrity sha512-XoGgTMVcdrMQr1yJM7/SDfG5wLkET2An2DME1mUvOYZRHJlqfPDEkaF3eP60dRxBGztkqqQgQNdkEOJCCxEuFQ==
+  dependencies:
+    "@types/react" "^15.x || ^16.x"
+    prop-types "^15.7.2"
+
 react-player@^2.3.1:
   version "2.9.0"
   resolved "https://registry.npmjs.org/react-player/-/react-player-2.9.0.tgz#ef7fe7073434087565f00ff219824e1e02c4b046"
@@ -15608,6 +15658,11 @@ react-remove-scroll@^2.4.1:
     use-callback-ref "^1.2.3"
     use-sidecar "^1.0.1"
 
+react-resize-observer@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/react-resize-observer/-/react-resize-observer-1.1.1.tgz#641dfa2e0f4bd2549a8ab4bbbaf43b68f3dcaf76"
+  integrity sha512-3R+90Hou90Mr3wJYc+unsySC8Pn91V4nmjO32NKvUvjphRUbq9HisyLg7bDyGBE7xlMrrM6Fax7iNQaFdc/FYA==
+
 react-select@^4.3.0:
   version "4.3.1"
   resolved "https://registry.npmjs.org/react-select/-/react-select-4.3.1.tgz#389fc07c9bc7cf7d3c377b7a05ea18cd7399cb81"

From db68a2145ad8f1d8aaffdbe55297e925d76b1e3c Mon Sep 17 00:00:00 2001
From: Bana Malik <bana@codecademy.com>
Date: Mon, 20 Dec 2021 21:35:27 -0500
Subject: [PATCH 04/19] add editor container styles

---
 packages/codebytes/src/index.tsx | 44 ++++++++++++++++++++++++++------
 1 file changed, 36 insertions(+), 8 deletions(-)

diff --git a/packages/codebytes/src/index.tsx b/packages/codebytes/src/index.tsx
index 2ac2df9c5..7b8a7769d 100644
--- a/packages/codebytes/src/index.tsx
+++ b/packages/codebytes/src/index.tsx
@@ -1,3 +1,7 @@
+import { Box, IconButton } from '@codecademy/gamut';
+import { FaviconIcon } from '@codecademy/gamut-icons';
+import { Background, system } from '@codecademy/gamut-styles';
+import styled from '@emotion/styled';
 import React, { useState } from 'react';
 
 import { languageOption } from './consts';
@@ -9,6 +13,18 @@ export interface CodeByteEditorProps {
   hideCopyButton: boolean;
 }
 
+const EditorContainer = styled(Background)(
+  system.css({
+    border: '1',
+    borderColor: 'gray-900',
+    display: 'flex',
+    flexDirection: 'column',
+    height: '400px',
+    width: '688px',
+    overflow: 'hidden',
+  })
+);
+
 export const CodeByteEditor: React.FC<CodeByteEditorProps> = ({
   text: initialText,
   language,
@@ -17,14 +33,26 @@ export const CodeByteEditor: React.FC<CodeByteEditorProps> = ({
   const [text, setText] = useState<string>(initialText);
   return (
     <>
-      <Editor
-        text={text}
-        onChange={(newText: string) => {
-          setText(newText);
-        }}
-        hideCopyButton={hideCopyButton}
-        language={language}
-      />
+      <EditorContainer bg="black" as="main">
+        <Box borderBottom="1" borderColor="gray-900" py="4" pl="8">
+          <IconButton
+            icon={FaviconIcon}
+            variant="secondary"
+            href="https://www.codecademy.com/"
+            target="_blank"
+            rel="noreferrer"
+            aria-label="visit codecademy.com"
+          />
+        </Box>
+        <Editor
+          text={text}
+          onChange={(newText: string) => {
+            setText(newText);
+          }}
+          hideCopyButton={hideCopyButton}
+          language={language}
+        />
+      </EditorContainer>
     </>
   );
 };

From 19caf837e319a1be3d0e7fa4dcbaf3590ac6516b Mon Sep 17 00:00:00 2001
From: Bana Malik <bana@codecademy.com>
Date: Mon, 20 Dec 2021 21:56:25 -0500
Subject: [PATCH 05/19] fix prettier issues

---
 packages/codebytes/src/consts.ts | 24 ++++++++++++------------
 packages/codebytes/tsconfig.json |  2 +-
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/packages/codebytes/src/consts.ts b/packages/codebytes/src/consts.ts
index 8dbd6f3a9..18064b9c4 100644
--- a/packages/codebytes/src/consts.ts
+++ b/packages/codebytes/src/consts.ts
@@ -1,15 +1,15 @@
 // key = language param to send to snippets service
 // val = label in language selection drop down
 export const languageOptions = {
-    '': 'Select your language',
-    cpp: 'C++',
-    csharp: 'C#',
-    golang: 'Go',
-    javascript: 'JavaScript',
-    php: 'PHP',
-    python: 'Python 3',
-    ruby: 'Ruby',
-    scheme: 'Scheme',
-  };
-  
-  export type languageOption = keyof typeof languageOptions;
\ No newline at end of file
+  '': 'Select your language',
+  cpp: 'C++',
+  csharp: 'C#',
+  golang: 'Go',
+  javascript: 'JavaScript',
+  php: 'PHP',
+  python: 'Python 3',
+  ruby: 'Ruby',
+  scheme: 'Scheme',
+};
+
+export type languageOption = keyof typeof languageOptions;
diff --git a/packages/codebytes/tsconfig.json b/packages/codebytes/tsconfig.json
index 7263f4278..3625d95a0 100644
--- a/packages/codebytes/tsconfig.json
+++ b/packages/codebytes/tsconfig.json
@@ -1,4 +1,4 @@
 {
   "extends": "../../tsconfig.json",
   "include": ["../../typings/*.d.ts", "./src/**/*.ts", "./src/**/*.tsx"]
-}
\ No newline at end of file
+}

From 9d702d0683f70b75867fa8578a3be2dfb77e9589 Mon Sep 17 00:00:00 2001
From: Bana Malik <bana@codecademy.com>
Date: Mon, 20 Dec 2021 22:42:29 -0500
Subject: [PATCH 06/19] pass onCopy from parent

---
 packages/codebytes/src/editor.tsx | 6 ++++--
 packages/codebytes/src/index.tsx  | 7 +++++--
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/codebytes/src/editor.tsx b/packages/codebytes/src/editor.tsx
index ef222f727..06bb0b204 100644
--- a/packages/codebytes/src/editor.tsx
+++ b/packages/codebytes/src/editor.tsx
@@ -38,7 +38,9 @@ type EditorProps = {
   language: languageOption;
   text: string;
   // eslint-disable-next-line react/no-unused-prop-types
-  onChange: (text: string) => void /* Will use in upcoming pr */;
+  onChange: (
+    text: string
+  ) => void /* TODO: Add onChange behavior in DISC-353 */;
   onCopy?: (text: string, language: string) => void;
 };
 
@@ -66,7 +68,7 @@ export const Editor: React.FC<EditorProps> = ({
       onCopy?.(
         text,
         language
-      ); /* TODO: pass in onCopyBBCodeblock behavior from static sites */
+      ); /* TODO: pass in onCopyBBCodeblock behavior from the future version we migrate to Next.js  */
       setIsCodeByteCopied(true);
     }
   };
diff --git a/packages/codebytes/src/index.tsx b/packages/codebytes/src/index.tsx
index 7b8a7769d..78927e90c 100644
--- a/packages/codebytes/src/index.tsx
+++ b/packages/codebytes/src/index.tsx
@@ -11,6 +11,7 @@ export interface CodeByteEditorProps {
   text: string;
   language: languageOption;
   hideCopyButton: boolean;
+  onCopy?: (text: string, language: string) => void;
 }
 
 const EditorContainer = styled(Background)(
@@ -29,6 +30,7 @@ export const CodeByteEditor: React.FC<CodeByteEditorProps> = ({
   text: initialText,
   language,
   hideCopyButton,
+  onCopy,
 }) => {
   const [text, setText] = useState<string>(initialText);
   return (
@@ -45,12 +47,13 @@ export const CodeByteEditor: React.FC<CodeByteEditorProps> = ({
           />
         </Box>
         <Editor
+          language={language}
           text={text}
+          hideCopyButton={hideCopyButton}
           onChange={(newText: string) => {
             setText(newText);
           }}
-          hideCopyButton={hideCopyButton}
-          language={language}
+          onCopy={onCopy}
         />
       </EditorContainer>
     </>

From 7cd95893279b1693d34ee49c42c6cf6c1f750640 Mon Sep 17 00:00:00 2001
From: Bana Malik <bana@codecademy.com>
Date: Tue, 21 Dec 2021 16:07:40 -0500
Subject: [PATCH 07/19] use isIframeProp

---
 packages/codebytes/package.json   |  1 +
 packages/codebytes/src/editor.tsx |  6 ++---
 packages/codebytes/src/index.tsx  | 38 +++++++++++++++++++++----------
 packages/styleguide/package.json  |  1 +
 yarn.lock                         |  2 +-
 5 files changed, 32 insertions(+), 16 deletions(-)

diff --git a/packages/codebytes/package.json b/packages/codebytes/package.json
index 8688afff5..3667e90f8 100644
--- a/packages/codebytes/package.json
+++ b/packages/codebytes/package.json
@@ -23,6 +23,7 @@
     "@codecademy/gamut": "*",
     "@codecademy/gamut-icons": "*",
     "@codecademy/gamut-styles": "*",
+    "@codecademy/variance": "*",
     "@emotion/react": "^11.4.0",
     "@emotion/styled": "^11.3.0",
     "@loadable/component": "^5.13.1",
diff --git a/packages/codebytes/src/editor.tsx b/packages/codebytes/src/editor.tsx
index c1e6360b6..eb3a433b4 100644
--- a/packages/codebytes/src/editor.tsx
+++ b/packages/codebytes/src/editor.tsx
@@ -16,7 +16,7 @@ import { SimpleMonacoEditor } from './MonacoEditor';
 
 const Output = styled.pre<{ hasError: boolean }>`
   width: 100%;
-  height: 20rem;
+  height: 100%;
   margin: 0;
   padding: 0 1rem;
   font-family: Monaco;
@@ -91,8 +91,8 @@ export const Editor: React.FC<EditorProps> = ({
     setStatus('waiting');
     setOutput('');
 
-    const snippetsEndpoint =
-      'https://' + process.env.GATSBY_CONTAINER_API_BASE + '/snippets';
+    const snippetsEndpoint = 'https://staging-propeller.cc-le-cf.com/snippets';
+    /* Confirm with web plat re: where we want to store secrets */
 
     fetch(snippetsEndpoint, {
       method: 'POST',
diff --git a/packages/codebytes/src/index.tsx b/packages/codebytes/src/index.tsx
index 78927e90c..f7f83e3e1 100644
--- a/packages/codebytes/src/index.tsx
+++ b/packages/codebytes/src/index.tsx
@@ -1,6 +1,7 @@
 import { Box, IconButton } from '@codecademy/gamut';
 import { FaviconIcon } from '@codecademy/gamut-icons';
-import { Background, system } from '@codecademy/gamut-styles';
+import { Background, states, system } from '@codecademy/gamut-styles';
+import { StyleProps } from '@codecademy/variance';
 import styled from '@emotion/styled';
 import React, { useState } from 'react';
 
@@ -12,18 +13,30 @@ export interface CodeByteEditorProps {
   language: languageOption;
   hideCopyButton: boolean;
   onCopy?: (text: string, language: string) => void;
+  isIFrame?: boolean;
 }
 
-const EditorContainer = styled(Background)(
-  system.css({
-    border: '1',
-    borderColor: 'gray-900',
-    display: 'flex',
-    flexDirection: 'column',
-    height: '400px',
-    width: '688px',
-    overflow: 'hidden',
-  })
+const editorStates = states({
+  isIFrame: { height: '100vh' },
+});
+
+const editorBaseStyles = system.css({
+  border: '1',
+  borderColor: 'gray-900',
+  display: 'flex',
+  flexDirection: 'column',
+  height: '400px',
+  width: '688px',
+  overflow: 'hidden',
+});
+
+export interface EditorStyleProps
+  extends StyleProps<typeof editorBaseStyles>,
+    StyleProps<typeof editorStates> {}
+
+const EditorContainer = styled(Background)<EditorStyleProps>(
+  editorBaseStyles,
+  editorStates
 );
 
 export const CodeByteEditor: React.FC<CodeByteEditorProps> = ({
@@ -31,11 +44,12 @@ export const CodeByteEditor: React.FC<CodeByteEditorProps> = ({
   language,
   hideCopyButton,
   onCopy,
+  isIFrame = false,
 }) => {
   const [text, setText] = useState<string>(initialText);
   return (
     <>
-      <EditorContainer bg="black" as="main">
+      <EditorContainer bg="black" as="main" isIFrame={isIFrame}>
         <Box borderBottom="1" borderColor="gray-900" py="4" pl="8">
           <IconButton
             icon={FaviconIcon}
diff --git a/packages/styleguide/package.json b/packages/styleguide/package.json
index cbe400c43..d08d7df79 100644
--- a/packages/styleguide/package.json
+++ b/packages/styleguide/package.json
@@ -18,6 +18,7 @@
     "@babel/core": "^7.13.10",
     "@codecademy/gamut": "^42.1.1",
     "@codecademy/webpack-config": "^6.0.0",
+    "@codecademy/variance": "*",
     "@emotion/cache": "^11.4.0",
     "@emotion/react": "^11.4.0",
     "@emotion/styled": "^11.3.0",
diff --git a/yarn.lock b/yarn.lock
index 363928a22..06c9d8ba4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2115,7 +2115,7 @@
     react-use "^15.3.8"
     sanitize-markdown "^2.6.6"
 
-"@codecademy/variance@^0.19.0":
+"@codecademy/variance@*", "@codecademy/variance@^0.19.0":
   version "0.19.0"
   resolved "https://registry.npmjs.org/@codecademy/variance/-/variance-0.19.0.tgz#7cdef433caca52a300ab71e1a36e0cf70276138c"
   integrity sha512-5cPVt1cJWU3BwZgs/q3HMAClQqYnVgnR5FhXrA3sTq3wrb+cQSbxz2MIBzWP3nCyB0maMGzkUBPsNPRauySklQ==

From f7fcbbb416930bd0d00b022ae1826d00f2ed3f71 Mon Sep 17 00:00:00 2001
From: Bana Malik <bana@codecademy.com>
Date: Tue, 21 Dec 2021 17:00:40 -0500
Subject: [PATCH 08/19] pass down snippets base url from parent

---
 packages/codebytes/src/editor.tsx | 5 +++--
 packages/codebytes/src/index.tsx  | 3 +++
 packages/styleguide/.env.local    | 1 +
 3 files changed, 7 insertions(+), 2 deletions(-)
 create mode 100644 packages/styleguide/.env.local

diff --git a/packages/codebytes/src/editor.tsx b/packages/codebytes/src/editor.tsx
index eb3a433b4..e784782df 100644
--- a/packages/codebytes/src/editor.tsx
+++ b/packages/codebytes/src/editor.tsx
@@ -43,6 +43,7 @@ type EditorProps = {
     text: string
   ) => void /* TODO: Add onChange behavior in DISC-353 */;
   onCopy?: (text: string, language: string) => void;
+  snippetsBaseUrl?: string;
 };
 
 interface Response {
@@ -57,6 +58,7 @@ export const Editor: React.FC<EditorProps> = ({
   hideCopyButton,
   onCopy,
   onChange,
+  snippetsBaseUrl,
 }) => {
   const [output, setOutput] = useState('');
   const [status, setStatus] = useState<'ready' | 'waiting' | 'error'>('ready');
@@ -91,8 +93,7 @@ export const Editor: React.FC<EditorProps> = ({
     setStatus('waiting');
     setOutput('');
 
-    const snippetsEndpoint = 'https://staging-propeller.cc-le-cf.com/snippets';
-    /* Confirm with web plat re: where we want to store secrets */
+    const snippetsEndpoint = 'https://' + snippetsBaseUrl + '/snippets';
 
     fetch(snippetsEndpoint, {
       method: 'POST',
diff --git a/packages/codebytes/src/index.tsx b/packages/codebytes/src/index.tsx
index f7f83e3e1..acca8626c 100644
--- a/packages/codebytes/src/index.tsx
+++ b/packages/codebytes/src/index.tsx
@@ -14,6 +14,7 @@ export interface CodeByteEditorProps {
   hideCopyButton: boolean;
   onCopy?: (text: string, language: string) => void;
   isIFrame?: boolean;
+  snippetsBaseUrl?: string;
 }
 
 const editorStates = states({
@@ -45,6 +46,7 @@ export const CodeByteEditor: React.FC<CodeByteEditorProps> = ({
   hideCopyButton,
   onCopy,
   isIFrame = false,
+  snippetsBaseUrl = process.env.CONTAINER_API_BASE,
 }) => {
   const [text, setText] = useState<string>(initialText);
   return (
@@ -68,6 +70,7 @@ export const CodeByteEditor: React.FC<CodeByteEditorProps> = ({
             setText(newText);
           }}
           onCopy={onCopy}
+          snippetsBaseUrl={snippetsBaseUrl}
         />
       </EditorContainer>
     </>
diff --git a/packages/styleguide/.env.local b/packages/styleguide/.env.local
new file mode 100644
index 000000000..5bef1d4df
--- /dev/null
+++ b/packages/styleguide/.env.local
@@ -0,0 +1 @@
+CONTAINER_API_BASE=staging-propeller.cc-le-cf.com
\ No newline at end of file

From 8efb881e8329adbbe16f8347d55fcea18c8812d3 Mon Sep 17 00:00:00 2001
From: Bana Malik <bana@codecademy.com>
Date: Mon, 3 Jan 2022 16:43:58 -0500
Subject: [PATCH 09/19] simple monaco editor

---
 packages/codebytes/src/editor.tsx |  2 +-
 packages/codebytes/src/index.tsx  | 49 ++++++++++++++++---------------
 packages/codebytes/src/theme.d.ts |  5 ++++
 3 files changed, 31 insertions(+), 25 deletions(-)
 create mode 100644 packages/codebytes/src/theme.d.ts

diff --git a/packages/codebytes/src/editor.tsx b/packages/codebytes/src/editor.tsx
index e784782df..a61928bfe 100644
--- a/packages/codebytes/src/editor.tsx
+++ b/packages/codebytes/src/editor.tsx
@@ -140,7 +140,7 @@ export const Editor: React.FC<EditorProps> = ({
       />
       <FlexBox
         justifyContent={hideCopyButton ? 'flex-end' : 'space-between'}
-        pl="8"
+        pl={8}
       >
         {!hideCopyButton ? (
           <ToolTip
diff --git a/packages/codebytes/src/index.tsx b/packages/codebytes/src/index.tsx
index acca8626c..116a71873 100644
--- a/packages/codebytes/src/index.tsx
+++ b/packages/codebytes/src/index.tsx
@@ -15,6 +15,7 @@ export interface CodeByteEditorProps {
   onCopy?: (text: string, language: string) => void;
   isIFrame?: boolean;
   snippetsBaseUrl?: string;
+  onTextChange?: (text: string) => void;
 }
 
 const editorStates = states({
@@ -22,7 +23,7 @@ const editorStates = states({
 });
 
 const editorBaseStyles = system.css({
-  border: '1',
+  border: 1,
   borderColor: 'gray-900',
   display: 'flex',
   flexDirection: 'column',
@@ -47,33 +48,33 @@ export const CodeByteEditor: React.FC<CodeByteEditorProps> = ({
   onCopy,
   isIFrame = false,
   snippetsBaseUrl = process.env.CONTAINER_API_BASE,
+  onTextChange,
 }) => {
   const [text, setText] = useState<string>(initialText);
   return (
-    <>
-      <EditorContainer bg="black" as="main" isIFrame={isIFrame}>
-        <Box borderBottom="1" borderColor="gray-900" py="4" pl="8">
-          <IconButton
-            icon={FaviconIcon}
-            variant="secondary"
-            href="https://www.codecademy.com/"
-            target="_blank"
-            rel="noreferrer"
-            aria-label="visit codecademy.com"
-          />
-        </Box>
-        <Editor
-          language={language}
-          text={text}
-          hideCopyButton={hideCopyButton}
-          onChange={(newText: string) => {
-            setText(newText);
-          }}
-          onCopy={onCopy}
-          snippetsBaseUrl={snippetsBaseUrl}
+    <EditorContainer bg="black" as="main" isIFrame={isIFrame}>
+      <Box borderBottom={1} borderColor="gray-900" py={4} pl={8}>
+        <IconButton
+          icon={FaviconIcon}
+          variant="secondary"
+          href="https://www.codecademy.com/"
+          target="_blank"
+          rel="noreferrer"
+          aria-label="visit codecademy.com"
         />
-      </EditorContainer>
-    </>
+      </Box>
+      <Editor
+        language={language}
+        text={text}
+        hideCopyButton={hideCopyButton}
+        onChange={(newText: string) => {
+          setText(newText);
+          onTextChange?.(newText);
+        }}
+        onCopy={onCopy}
+        snippetsBaseUrl={snippetsBaseUrl}
+      />
+    </EditorContainer>
   );
 };
 
diff --git a/packages/codebytes/src/theme.d.ts b/packages/codebytes/src/theme.d.ts
new file mode 100644
index 000000000..a4ba600e8
--- /dev/null
+++ b/packages/codebytes/src/theme.d.ts
@@ -0,0 +1,5 @@
+import { CoreTheme } from '@codecademy/gamut-styles';
+
+declare module '@emotion/react' {
+  export interface Theme extends CoreTheme {}
+}
\ No newline at end of file

From f54667127ca47f444b20a6b9cf028c6c778bd6eb Mon Sep 17 00:00:00 2001
From: Bana Malik <bana@codecademy.com>
Date: Mon, 3 Jan 2022 16:52:14 -0500
Subject: [PATCH 10/19] update tslint for scale

---
 packages/codebytes/package.json   |  1 +
 packages/codebytes/src/editor.tsx |  3 +-
 packages/codebytes/src/index.tsx  | 84 +++++++++++++++++++------------
 packages/codebytes/src/theme.d.ts |  5 ++
 packages/styleguide/package.json  |  1 +
 5 files changed, 60 insertions(+), 34 deletions(-)
 create mode 100644 packages/codebytes/src/theme.d.ts

diff --git a/packages/codebytes/package.json b/packages/codebytes/package.json
index c59ae3f00..09ef61c51 100644
--- a/packages/codebytes/package.json
+++ b/packages/codebytes/package.json
@@ -23,6 +23,7 @@
     "@codecademy/gamut": "*",
     "@codecademy/gamut-icons": "*",
     "@codecademy/gamut-styles": "*",
+    "@codecademy/variance": "*",
     "@emotion/react": "^11.4.0",
     "@emotion/styled": "^11.3.0"
   },
diff --git a/packages/codebytes/src/editor.tsx b/packages/codebytes/src/editor.tsx
index 06bb0b204..136d3e387 100644
--- a/packages/codebytes/src/editor.tsx
+++ b/packages/codebytes/src/editor.tsx
@@ -15,7 +15,7 @@ import { Drawers } from './drawers';
 
 const Output = styled.pre<{ hasError: boolean }>`
   width: 100%;
-  height: 20rem;
+  height: 100%;
   margin: 0;
   padding: 0 1rem;
   font-family: Monaco;
@@ -42,6 +42,7 @@ type EditorProps = {
     text: string
   ) => void /* TODO: Add onChange behavior in DISC-353 */;
   onCopy?: (text: string, language: string) => void;
+  snippetsBaseUrl?: string;
 };
 
 interface Response {
diff --git a/packages/codebytes/src/index.tsx b/packages/codebytes/src/index.tsx
index 78927e90c..116a71873 100644
--- a/packages/codebytes/src/index.tsx
+++ b/packages/codebytes/src/index.tsx
@@ -1,6 +1,7 @@
 import { Box, IconButton } from '@codecademy/gamut';
 import { FaviconIcon } from '@codecademy/gamut-icons';
-import { Background, system } from '@codecademy/gamut-styles';
+import { Background, states, system } from '@codecademy/gamut-styles';
+import { StyleProps } from '@codecademy/variance';
 import styled from '@emotion/styled';
 import React, { useState } from 'react';
 
@@ -12,18 +13,32 @@ export interface CodeByteEditorProps {
   language: languageOption;
   hideCopyButton: boolean;
   onCopy?: (text: string, language: string) => void;
+  isIFrame?: boolean;
+  snippetsBaseUrl?: string;
+  onTextChange?: (text: string) => void;
 }
 
-const EditorContainer = styled(Background)(
-  system.css({
-    border: '1',
-    borderColor: 'gray-900',
-    display: 'flex',
-    flexDirection: 'column',
-    height: '400px',
-    width: '688px',
-    overflow: 'hidden',
-  })
+const editorStates = states({
+  isIFrame: { height: '100vh' },
+});
+
+const editorBaseStyles = system.css({
+  border: 1,
+  borderColor: 'gray-900',
+  display: 'flex',
+  flexDirection: 'column',
+  height: '400px',
+  width: '688px',
+  overflow: 'hidden',
+});
+
+export interface EditorStyleProps
+  extends StyleProps<typeof editorBaseStyles>,
+    StyleProps<typeof editorStates> {}
+
+const EditorContainer = styled(Background)<EditorStyleProps>(
+  editorBaseStyles,
+  editorStates
 );
 
 export const CodeByteEditor: React.FC<CodeByteEditorProps> = ({
@@ -31,32 +46,35 @@ export const CodeByteEditor: React.FC<CodeByteEditorProps> = ({
   language,
   hideCopyButton,
   onCopy,
+  isIFrame = false,
+  snippetsBaseUrl = process.env.CONTAINER_API_BASE,
+  onTextChange,
 }) => {
   const [text, setText] = useState<string>(initialText);
   return (
-    <>
-      <EditorContainer bg="black" as="main">
-        <Box borderBottom="1" borderColor="gray-900" py="4" pl="8">
-          <IconButton
-            icon={FaviconIcon}
-            variant="secondary"
-            href="https://www.codecademy.com/"
-            target="_blank"
-            rel="noreferrer"
-            aria-label="visit codecademy.com"
-          />
-        </Box>
-        <Editor
-          language={language}
-          text={text}
-          hideCopyButton={hideCopyButton}
-          onChange={(newText: string) => {
-            setText(newText);
-          }}
-          onCopy={onCopy}
+    <EditorContainer bg="black" as="main" isIFrame={isIFrame}>
+      <Box borderBottom={1} borderColor="gray-900" py={4} pl={8}>
+        <IconButton
+          icon={FaviconIcon}
+          variant="secondary"
+          href="https://www.codecademy.com/"
+          target="_blank"
+          rel="noreferrer"
+          aria-label="visit codecademy.com"
         />
-      </EditorContainer>
-    </>
+      </Box>
+      <Editor
+        language={language}
+        text={text}
+        hideCopyButton={hideCopyButton}
+        onChange={(newText: string) => {
+          setText(newText);
+          onTextChange?.(newText);
+        }}
+        onCopy={onCopy}
+        snippetsBaseUrl={snippetsBaseUrl}
+      />
+    </EditorContainer>
   );
 };
 
diff --git a/packages/codebytes/src/theme.d.ts b/packages/codebytes/src/theme.d.ts
new file mode 100644
index 000000000..a4ba600e8
--- /dev/null
+++ b/packages/codebytes/src/theme.d.ts
@@ -0,0 +1,5 @@
+import { CoreTheme } from '@codecademy/gamut-styles';
+
+declare module '@emotion/react' {
+  export interface Theme extends CoreTheme {}
+}
\ No newline at end of file
diff --git a/packages/styleguide/package.json b/packages/styleguide/package.json
index cbe400c43..d08d7df79 100644
--- a/packages/styleguide/package.json
+++ b/packages/styleguide/package.json
@@ -18,6 +18,7 @@
     "@babel/core": "^7.13.10",
     "@codecademy/gamut": "^42.1.1",
     "@codecademy/webpack-config": "^6.0.0",
+    "@codecademy/variance": "*",
     "@emotion/cache": "^11.4.0",
     "@emotion/react": "^11.4.0",
     "@emotion/styled": "^11.3.0",

From ddee0b12a97cf21718f0c54b89d285b113365914 Mon Sep 17 00:00:00 2001
From: Bana Malik <bana@codecademy.com>
Date: Mon, 3 Jan 2022 18:25:23 -0500
Subject: [PATCH 11/19] incorporate review feedback

---
 .gitignore                         |  3 ++
 packages/codebytes/src/api.ts      | 25 +++++++++++++
 packages/codebytes/src/drawers.tsx | 48 +++++++++++++------------
 packages/codebytes/src/editor.tsx  | 57 +++++++++++-------------------
 packages/codebytes/src/index.tsx   | 25 +++++++------
 yarn.lock                          |  2 +-
 6 files changed, 88 insertions(+), 72 deletions(-)
 create mode 100644 packages/codebytes/src/api.ts

diff --git a/.gitignore b/.gitignore
index f1c498a5a..1b1ce6991 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,8 @@
 .DS_Store
 
+# Env
+.env.*
+
 # Logs
 logs
 *.log
diff --git a/packages/codebytes/src/api.ts b/packages/codebytes/src/api.ts
new file mode 100644
index 000000000..4f17a61bf
--- /dev/null
+++ b/packages/codebytes/src/api.ts
@@ -0,0 +1,25 @@
+import type { languageOption } from './consts';
+
+  interface Response {
+    stderr: string;
+    stdout: string;
+    exit_code: number;
+  }
+  
+  interface PostSnippetData {
+    language: languageOption;
+    code: string;
+  }
+
+  export const postSnippet = async (data: PostSnippetData, snippetsBaseUrl?: string): Promise<Response> => {
+    const snippetsEndpoint = `https://${snippetsBaseUrl}/snippets`;
+
+    const response = await fetch(snippetsEndpoint, {
+      method: 'POST',
+      body: JSON.stringify(data),
+      headers: {
+        'x-codecademy-user-id': 'codebytes-anon-user',
+      },
+    });
+    return response.json();
+  };
diff --git a/packages/codebytes/src/drawers.tsx b/packages/codebytes/src/drawers.tsx
index 7fb0d76c5..1c42fb439 100644
--- a/packages/codebytes/src/drawers.tsx
+++ b/packages/codebytes/src/drawers.tsx
@@ -19,7 +19,7 @@ const Drawer = styled(FlexBox)<{ open?: boolean; hideOnClose?: boolean }>`
   position: relative;
   ${({ open, hideOnClose }) => `
     flex-basis: ${open ? '100%' : '0%'};
-    ${!open && hideOnClose ? 'visibility: hidden;' : ''}
+    visibility: ${!open && hideOnClose ? 'hidden' : 'visible'};
     transition: flex-basis 0.2s ${
       open ? 'ease-out' : 'ease-in, visibility 0s 0.2s'
     };
@@ -36,48 +36,52 @@ export type DrawersProps = {
 };
 
 export const Drawers: React.FC<DrawersProps> = ({ leftChild, rightChild }) => {
-  const [show, setShow] = useState<'left' | 'right' | 'both'>('both');
+  const [open, setOpen] = useState<'left' | 'right' | 'both'>('both');
 
-  let buttonLabelL = 'hide code';
-  let buttonLabelR = 'hide output';
+  let ariaLabelCodeButton = 'hide code';
+  let ariaLabelOutputButton = 'hide output';
+  let isLeftOpen = false;
+  let isRightOpen = false;
 
-  if (show === 'left') {
-    buttonLabelL = buttonLabelR = 'show output';
-  } else if (show === 'right') {
-    buttonLabelL = buttonLabelR = 'show code';
+  if (open === 'left') {
+    ariaLabelCodeButton = ariaLabelOutputButton = 'show output';
+    isLeftOpen = true;
+  } else if (open === 'right') {
+    ariaLabelCodeButton = ariaLabelOutputButton = 'show code';
+    isRightOpen = true;
   }
 
   return (
     <>
       <FlexBox>
         <Drawer
-          open={show !== 'right'}
+          open={!isRightOpen}
           alignItems="center"
           flexWrap="nowrap"
           textAlign="left"
-          borderRight="1"
+          borderRight={1}
           borderColor="gray-900"
-          px="8"
+          px={8}
         >
           <IconButton
             icon={LeftDrawerIcon}
             variant="secondary"
             size="small"
             onClick={() =>
-              setShow((state) => (state === 'both' ? 'right' : 'both'))
+              setOpen((state) => (state === 'both' ? 'right' : 'both'))
             }
-            aria-label={buttonLabelL}
+            aria-label={ariaLabelCodeButton}
             aria-controls="code-drawer"
-            aria-expanded={show !== 'right'}
+            aria-expanded={!isRightOpen}
           />
           <DrawerLabel id="code-drawer-label">Code</DrawerLabel>
         </Drawer>
         <Drawer
-          open={show !== 'left'}
+          open={!isLeftOpen}
           alignItems="center"
           flexWrap="nowrap"
           justifyContent="flex-end"
-          px="8"
+          px={8}
         >
           <DrawerLabel id="output-drawer-label">Output</DrawerLabel>
           <IconButton
@@ -85,17 +89,17 @@ export const Drawers: React.FC<DrawersProps> = ({ leftChild, rightChild }) => {
             variant="secondary"
             size="small"
             onClick={() =>
-              setShow((state) => (state === 'both' ? 'left' : 'both'))
+              setOpen((state) => (state === 'both' ? 'left' : 'both'))
             }
-            aria-label={buttonLabelR}
+            aria-label={ariaLabelOutputButton}
             aria-controls="output-drawer"
-            aria-expanded={show !== 'left'}
+            aria-expanded={!isLeftOpen}
           />
         </Drawer>
       </FlexBox>
       <FlexBox
         flexGrow={1}
-        borderY="1"
+        borderY={1}
         borderColor="gray-900"
         alignItems="stretch"
         overflow="hidden"
@@ -104,7 +108,7 @@ export const Drawers: React.FC<DrawersProps> = ({ leftChild, rightChild }) => {
           hideOnClose
           id="code-drawer"
           aria-labelledby="code-drawer-label"
-          open={show !== 'right'}
+          open={!isRightOpen}
           flexGrow={0}
           overflow="hidden"
           borderColor="gray-900"
@@ -117,7 +121,7 @@ export const Drawers: React.FC<DrawersProps> = ({ leftChild, rightChild }) => {
           hideOnClose
           id="output-drawer"
           aria-labelledby="output-drawer-label"
-          open={show !== 'left'}
+          open={!isLeftOpen}
           overflow="hidden"
         >
           {rightChild}
diff --git a/packages/codebytes/src/editor.tsx b/packages/codebytes/src/editor.tsx
index 136d3e387..b86bfbed3 100644
--- a/packages/codebytes/src/editor.tsx
+++ b/packages/codebytes/src/editor.tsx
@@ -10,6 +10,7 @@ import { theme } from '@codecademy/gamut-styles';
 import styled from '@emotion/styled';
 import React, { useState } from 'react';
 
+import { postSnippet } from './api';
 import type { languageOption } from './consts';
 import { Drawers } from './drawers';
 
@@ -45,17 +46,12 @@ type EditorProps = {
   snippetsBaseUrl?: string;
 };
 
-interface Response {
-  stderr: string;
-  stdout: string;
-  exit_code: number;
-}
-
 export const Editor: React.FC<EditorProps> = ({
   language,
   text,
   hideCopyButton,
   onCopy,
+  snippetsBaseUrl,
 }) => {
   const [output, setOutput] = useState('');
   const [status, setStatus] = useState<'ready' | 'waiting' | 'error'>('ready');
@@ -79,7 +75,7 @@ export const Editor: React.FC<EditorProps> = ({
     setStatus('error');
   };
 
-  const handleSubmit = () => {
+  const handleSubmit = async () => {
     if (text.trim().length === 0) {
       return;
     }
@@ -90,34 +86,23 @@ export const Editor: React.FC<EditorProps> = ({
     setStatus('waiting');
     setOutput('');
 
-    const snippetsEndpoint =
-      'https://' + process.env.GATSBY_CONTAINER_API_BASE + '/snippets';
-
-    fetch(snippetsEndpoint, {
-      method: 'POST',
-      body: JSON.stringify(data),
-      headers: {
-        'x-codecademy-user-id': 'codebytes-anon-user',
-      },
-    })
-      .then((res) => res.json())
-      .then((response: Response) => {
-        if (response.stderr.length > 0) {
-          setErrorStatusAndOutput(response.stderr);
-        } else if (response.exit_code === DOCKER_SIGTERM) {
-          setErrorStatusAndOutput(
-            'Your code took too long to return a result. Double check your code for any issues and try again!'
-          );
-        } else if (response.exit_code !== 0) {
-          setErrorStatusAndOutput('An unknown error occured.');
-        } else {
-          setOutput(response.stdout);
-          setStatus('ready');
-        }
-      })
-      .catch((error) => {
-        setErrorStatusAndOutput('Error: ' + error);
-      });
+    try {
+      const response = await postSnippet(data, snippetsBaseUrl);
+      if (response.stderr.length > 0) {
+        setErrorStatusAndOutput(response.stderr);
+      } else if (response.exit_code === DOCKER_SIGTERM) {
+        setErrorStatusAndOutput(
+          'Your code took too long to return a result. Double check your code for any issues and try again!'
+        );
+      } else if (response.exit_code !== 0) {
+        setErrorStatusAndOutput('An unknown error occured.');
+      } else {
+        setOutput(response.stdout);
+        setStatus('ready');
+      }
+    } catch (error) {
+      setErrorStatusAndOutput('Error: ' + error);
+    }
   };
 
   return (
@@ -132,7 +117,7 @@ export const Editor: React.FC<EditorProps> = ({
       />
       <FlexBox
         justifyContent={hideCopyButton ? 'flex-end' : 'space-between'}
-        pl="8"
+        pl={8}
       >
         {!hideCopyButton ? (
           <ToolTip
diff --git a/packages/codebytes/src/index.tsx b/packages/codebytes/src/index.tsx
index 116a71873..1589b7cf4 100644
--- a/packages/codebytes/src/index.tsx
+++ b/packages/codebytes/src/index.tsx
@@ -8,16 +8,6 @@ import React, { useState } from 'react';
 import { languageOption } from './consts';
 import { Editor } from './editor';
 
-export interface CodeByteEditorProps {
-  text: string;
-  language: languageOption;
-  hideCopyButton: boolean;
-  onCopy?: (text: string, language: string) => void;
-  isIFrame?: boolean;
-  snippetsBaseUrl?: string;
-  onTextChange?: (text: string) => void;
-}
-
 const editorStates = states({
   isIFrame: { height: '100vh' },
 });
@@ -27,11 +17,10 @@ const editorBaseStyles = system.css({
   borderColor: 'gray-900',
   display: 'flex',
   flexDirection: 'column',
-  height: '400px',
-  width: '688px',
+  height: '25rem',
+  width: '43rem',
   overflow: 'hidden',
 });
-
 export interface EditorStyleProps
   extends StyleProps<typeof editorBaseStyles>,
     StyleProps<typeof editorStates> {}
@@ -41,6 +30,16 @@ const EditorContainer = styled(Background)<EditorStyleProps>(
   editorStates
 );
 
+export interface CodeByteEditorProps {
+  text: string;
+  language: languageOption;
+  hideCopyButton: boolean;
+  onCopy?: (text: string, language: string) => void;
+  isIFrame?: boolean;
+  snippetsBaseUrl?: string;
+  onTextChange?: (text: string) => void;
+}
+
 export const CodeByteEditor: React.FC<CodeByteEditorProps> = ({
   text: initialText,
   language,
diff --git a/yarn.lock b/yarn.lock
index def3e863f..85c7f2112 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2115,7 +2115,7 @@
     react-use "^15.3.8"
     sanitize-markdown "^2.6.6"
 
-"@codecademy/variance@^0.19.0":
+"@codecademy/variance@*", "@codecademy/variance@^0.19.0":
   version "0.19.0"
   resolved "https://registry.npmjs.org/@codecademy/variance/-/variance-0.19.0.tgz#7cdef433caca52a300ab71e1a36e0cf70276138c"
   integrity sha512-5cPVt1cJWU3BwZgs/q3HMAClQqYnVgnR5FhXrA3sTq3wrb+cQSbxz2MIBzWP3nCyB0maMGzkUBPsNPRauySklQ==

From 675361b86eb5fd9b7605c6adfe0069de2b426ef5 Mon Sep 17 00:00:00 2001
From: Bana Malik <bana@codecademy.com>
Date: Mon, 3 Jan 2022 18:40:01 -0500
Subject: [PATCH 12/19] fix prettier issues

---
 packages/codebytes/src/api.ts     | 45 ++++++++++++++++---------------
 packages/codebytes/src/theme.d.ts |  2 +-
 2 files changed, 25 insertions(+), 22 deletions(-)

diff --git a/packages/codebytes/src/api.ts b/packages/codebytes/src/api.ts
index 4f17a61bf..c55d2dd39 100644
--- a/packages/codebytes/src/api.ts
+++ b/packages/codebytes/src/api.ts
@@ -1,25 +1,28 @@
 import type { languageOption } from './consts';
 
-  interface Response {
-    stderr: string;
-    stdout: string;
-    exit_code: number;
-  }
-  
-  interface PostSnippetData {
-    language: languageOption;
-    code: string;
-  }
+interface Response {
+  stderr: string;
+  stdout: string;
+  exit_code: number;
+}
 
-  export const postSnippet = async (data: PostSnippetData, snippetsBaseUrl?: string): Promise<Response> => {
-    const snippetsEndpoint = `https://${snippetsBaseUrl}/snippets`;
+interface PostSnippetData {
+  language: languageOption;
+  code: string;
+}
 
-    const response = await fetch(snippetsEndpoint, {
-      method: 'POST',
-      body: JSON.stringify(data),
-      headers: {
-        'x-codecademy-user-id': 'codebytes-anon-user',
-      },
-    });
-    return response.json();
-  };
+export const postSnippet = async (
+  data: PostSnippetData,
+  snippetsBaseUrl?: string
+): Promise<Response> => {
+  const snippetsEndpoint = `https://${snippetsBaseUrl}/snippets`;
+
+  const response = await fetch(snippetsEndpoint, {
+    method: 'POST',
+    body: JSON.stringify(data),
+    headers: {
+      'x-codecademy-user-id': 'codebytes-anon-user',
+    },
+  });
+  return response.json();
+};
diff --git a/packages/codebytes/src/theme.d.ts b/packages/codebytes/src/theme.d.ts
index a4ba600e8..e2a52671b 100644
--- a/packages/codebytes/src/theme.d.ts
+++ b/packages/codebytes/src/theme.d.ts
@@ -2,4 +2,4 @@ import { CoreTheme } from '@codecademy/gamut-styles';
 
 declare module '@emotion/react' {
   export interface Theme extends CoreTheme {}
-}
\ No newline at end of file
+}

From 263a187092b6ab22db2d288325f9236a18a62e21 Mon Sep 17 00:00:00 2001
From: Bana Malik <bana@codecademy.com>
Date: Tue, 4 Jan 2022 11:40:03 -0500
Subject: [PATCH 13/19] default snippets endpoint to empty string

---
 packages/codebytes/src/editor.tsx                      | 5 +----
 packages/codebytes/src/index.tsx                       | 4 ++--
 packages/styleguide/stories/CodeByteEditor.stories.mdx | 1 +
 3 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/packages/codebytes/src/editor.tsx b/packages/codebytes/src/editor.tsx
index b86bfbed3..49529fba0 100644
--- a/packages/codebytes/src/editor.tsx
+++ b/packages/codebytes/src/editor.tsx
@@ -62,10 +62,7 @@ export const Editor: React.FC<EditorProps> = ({
         .writeText(text)
         // eslint-disable-next-line no-console
         .catch(() => console.error('Failed to copy'));
-      onCopy?.(
-        text,
-        language
-      ); /* TODO: pass in onCopyBBCodeblock behavior from the future version we migrate to Next.js  */
+      onCopy?.(text, language);
       setIsCodeByteCopied(true);
     }
   };
diff --git a/packages/codebytes/src/index.tsx b/packages/codebytes/src/index.tsx
index 1589b7cf4..3168266ff 100644
--- a/packages/codebytes/src/index.tsx
+++ b/packages/codebytes/src/index.tsx
@@ -36,7 +36,7 @@ export interface CodeByteEditorProps {
   hideCopyButton: boolean;
   onCopy?: (text: string, language: string) => void;
   isIFrame?: boolean;
-  snippetsBaseUrl?: string;
+  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. */;
   onTextChange?: (text: string) => void;
 }
 
@@ -46,7 +46,7 @@ export const CodeByteEditor: React.FC<CodeByteEditorProps> = ({
   hideCopyButton,
   onCopy,
   isIFrame = false,
-  snippetsBaseUrl = process.env.CONTAINER_API_BASE,
+  snippetsBaseUrl = '',
   onTextChange,
 }) => {
   const [text, setText] = useState<string>(initialText);
diff --git a/packages/styleguide/stories/CodeByteEditor.stories.mdx b/packages/styleguide/stories/CodeByteEditor.stories.mdx
index f247c0557..90b886b79 100644
--- a/packages/styleguide/stories/CodeByteEditor.stories.mdx
+++ b/packages/styleguide/stories/CodeByteEditor.stories.mdx
@@ -24,6 +24,7 @@ import { AssetProvider } from '@codecademy/gamut-styles/dist/AssetProvider';
     args={{
       text:
         'Lorem Ipsum is simply dummy text of the printing and typesetting industry',
+      snippetsBaseUrl: process.env.CONTAINER_API_BASE,
     }}
   >
     {(args) => (

From d8f87b0549453927df6e9d3fc7478a295152f99b Mon Sep 17 00:00:00 2001
From: Bana Malik <bana@codecademy.com>
Date: Wed, 5 Jan 2022 13:38:22 -0500
Subject: [PATCH 14/19] use rem

---
 packages/codebytes/src/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/codebytes/src/index.tsx b/packages/codebytes/src/index.tsx
index 048fd5f9f..46cbb33ae 100644
--- a/packages/codebytes/src/index.tsx
+++ b/packages/codebytes/src/index.tsx
@@ -27,8 +27,8 @@ const editorBaseStyles = system.css({
   borderColor: 'gray-900',
   display: 'flex',
   flexDirection: 'column',
-  height: '400px',
-  width: '688px',
+  height: '25rem',
+  width: '43rem',
   overflow: 'hidden',
 });
 export interface EditorStyleProps

From 7386df0f2d7f5f851e012b0e3c48dc4327231d33 Mon Sep 17 00:00:00 2001
From: Bana Malik <bana@codecademy.com>
Date: Wed, 5 Jan 2022 13:50:58 -0500
Subject: [PATCH 15/19] update example text

---
 packages/codebytes/src/MonacoEditor/index.tsx          | 2 +-
 packages/styleguide/stories/CodeByteEditor.stories.mdx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/codebytes/src/MonacoEditor/index.tsx b/packages/codebytes/src/MonacoEditor/index.tsx
index 0eb184708..1e0307da6 100644
--- a/packages/codebytes/src/MonacoEditor/index.tsx
+++ b/packages/codebytes/src/MonacoEditor/index.tsx
@@ -46,7 +46,7 @@ export const SimpleMonacoEditor: React.FC<SimpleMonacoEditorProps> = ({
         options={{ minimap: { enabled: false } }}
         theme="dark"
         value={value}
-        language={language}
+        language="language"
       />
     </>
   );
diff --git a/packages/styleguide/stories/CodeByteEditor.stories.mdx b/packages/styleguide/stories/CodeByteEditor.stories.mdx
index 3178b8f76..0177046b1 100644
--- a/packages/styleguide/stories/CodeByteEditor.stories.mdx
+++ b/packages/styleguide/stories/CodeByteEditor.stories.mdx
@@ -1,5 +1,4 @@
 import { CodeByteEditor } from '@codecademy/codebytes/src';
-import { Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
 import { AppWrapper } from '@codecademy/gamut';
 import {
   createEmotionCache,
@@ -7,6 +6,7 @@ import {
   theme,
 } from '@codecademy/gamut-styles';
 import { AssetProvider } from '@codecademy/gamut-styles/dist/AssetProvider';
+import { Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
 
 <Meta
   title="CodeByteEditor"
@@ -23,7 +23,7 @@ import { AssetProvider } from '@codecademy/gamut-styles/dist/AssetProvider';
     name="default"
     args={{
       text:
-        'Lorem Ipsum is simply dummy text of the printing and typesetting industry',
+        'console.log("Welcome to the Codebytes Editor!");',
       language: 'javascript',
       snippetsBaseUrl: process.env.CONTAINER_API_BASE,
     }}

From 01015e9958e58d164862cb5f22a3651e9e805fb1 Mon Sep 17 00:00:00 2001
From: Bana Malik <bana@codecademy.com>
Date: Wed, 5 Jan 2022 15:23:13 -0500
Subject: [PATCH 16/19] use language prop

---
 packages/codebytes/src/MonacoEditor/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/codebytes/src/MonacoEditor/index.tsx b/packages/codebytes/src/MonacoEditor/index.tsx
index 1e0307da6..0eb184708 100644
--- a/packages/codebytes/src/MonacoEditor/index.tsx
+++ b/packages/codebytes/src/MonacoEditor/index.tsx
@@ -46,7 +46,7 @@ export const SimpleMonacoEditor: React.FC<SimpleMonacoEditorProps> = ({
         options={{ minimap: { enabled: false } }}
         theme="dark"
         value={value}
-        language="language"
+        language={language}
       />
     </>
   );

From 094d6b554424915dc74c115377342dd779505c7d Mon Sep 17 00:00:00 2001
From: Bana Malik <bana@codecademy.com>
Date: Wed, 5 Jan 2022 15:58:53 -0500
Subject: [PATCH 17/19] add language selection comp

---
 packages/codebytes/src/consts.ts              | 49 +++++++++++++++++++
 packages/codebytes/src/index.tsx              | 44 +++++++++++------
 packages/codebytes/src/languageSelection.tsx  | 46 +++++++++++++++++
 .../stories/CodeByteEditor.stories.mdx        | 24 ++++++++-
 4 files changed, 147 insertions(+), 16 deletions(-)
 create mode 100644 packages/codebytes/src/languageSelection.tsx

diff --git a/packages/codebytes/src/consts.ts b/packages/codebytes/src/consts.ts
index 18064b9c4..9115e7a8c 100644
--- a/packages/codebytes/src/consts.ts
+++ b/packages/codebytes/src/consts.ts
@@ -13,3 +13,52 @@ 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,
+};
diff --git a/packages/codebytes/src/index.tsx b/packages/codebytes/src/index.tsx
index 46cbb33ae..ab0260fbb 100644
--- a/packages/codebytes/src/index.tsx
+++ b/packages/codebytes/src/index.tsx
@@ -5,9 +5,11 @@ import { StyleProps } from '@codecademy/variance';
 import styled from '@emotion/styled';
 import React, { useState } from 'react';
 
-import { languageOption } from './consts';
+import { helloWorld, 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;
@@ -15,7 +17,8 @@ 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. */;
-  onTextChange?: (text: string) => void;
+  onTextChange?: ChangeHandler;
+  onLanguageChange?: ChangeHandler;
 }
 
 const editorStates = states({
@@ -42,14 +45,16 @@ const EditorContainer = styled(Background)<EditorStyleProps>(
 
 export const CodeByteEditor: React.FC<CodeByteEditorProps> = ({
   text: initialText,
-  language,
+  language: initialLanguage,
   hideCopyButton,
   onCopy,
   isIFrame = false,
   snippetsBaseUrl = '',
   onTextChange,
+  onLanguageChange,
 }) => {
   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}>
@@ -62,17 +67,28 @@ export const CodeByteEditor: React.FC<CodeByteEditorProps> = ({
           aria-label="visit codecademy.com"
         />
       </Box>
-      <Editor
-        language={language}
-        text={text}
-        hideCopyButton={hideCopyButton}
-        onChange={(newText: string) => {
-          setText(newText);
-          onTextChange?.(newText);
-        }}
-        onCopy={onCopy}
-        snippetsBaseUrl={snippetsBaseUrl}
-      />
+      {language ? (
+        <Editor
+          language={language}
+          text={text}
+          hideCopyButton={hideCopyButton}
+          onChange={(newText: string) => {
+            setText(newText);
+            onTextChange?.(newText, language);
+          }}
+          onCopy={onCopy}
+          snippetsBaseUrl={snippetsBaseUrl}
+        />
+      ) : (
+        <LanguageSelection
+          onChange={(newLanguage) => {
+            const newText: string = text || helloWorld[newLanguage] || '';
+            setLanguage(newLanguage);
+            setText(newText);
+            onLanguageChange?.(newText, newLanguage);
+          }}
+        />
+      )}
     </EditorContainer>
   );
 };
diff --git a/packages/codebytes/src/languageSelection.tsx b/packages/codebytes/src/languageSelection.tsx
new file mode 100644
index 000000000..fe01452d1
--- /dev/null
+++ b/packages/codebytes/src/languageSelection.tsx
@@ -0,0 +1,46 @@
+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>
+  );
+};
diff --git a/packages/styleguide/stories/CodeByteEditor.stories.mdx b/packages/styleguide/stories/CodeByteEditor.stories.mdx
index 0177046b1..33b57ce3a 100644
--- a/packages/styleguide/stories/CodeByteEditor.stories.mdx
+++ b/packages/styleguide/stories/CodeByteEditor.stories.mdx
@@ -20,11 +20,31 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
 
 <Canvas>
   <Story
-    name="default"
+    name="Language Provided"
+    args={{
+      text:
+        'console.log("Welcome to the Codebytes Editor!");',
+      snippetsBaseUrl: process.env.CONTAINER_API_BASE,
+      language: "javascript"
+    }}
+  >
+    {(args) => (
+      <GamutProvider
+        cache={createEmotionCache({ container: document.head })}
+        theme={theme}
+      >
+        <AssetProvider />
+        <AppWrapper>
+          <CodeByteEditor {...args} />
+        </AppWrapper>
+      </GamutProvider>
+    )}
+  </Story>
+  <Story
+    name="Language Not Provided"
     args={{
       text:
         'console.log("Welcome to the Codebytes Editor!");',
-      language: 'javascript',
       snippetsBaseUrl: process.env.CONTAINER_API_BASE,
     }}
   >

From 44039a1c21bb2daeef21d1983302189ab6c87b01 Mon Sep 17 00:00:00 2001
From: Bana Malik <bana@codecademy.com>
Date: Thu, 6 Jan 2022 13:44:09 -0500
Subject: [PATCH 18/19] tracking test

---
 packages/codebytes/src/index.tsx | 20 ++++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/packages/codebytes/src/index.tsx b/packages/codebytes/src/index.tsx
index ab0260fbb..136be332b 100644
--- a/packages/codebytes/src/index.tsx
+++ b/packages/codebytes/src/index.tsx
@@ -17,8 +17,14 @@ 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. */;
-  onTextChange?: ChangeHandler;
-  onLanguageChange?: ChangeHandler;
+  on: {
+    edit?: ChangeHandler;
+    copy?: () => void;
+    languageChange?: ChangeHandler;
+    run?: () => void;
+  };
+  // onTextChange?: ChangeHandler;
+  // onLanguageChange?: ChangeHandler;
 }
 
 const editorStates = states({
@@ -50,8 +56,9 @@ export const CodeByteEditor: React.FC<CodeByteEditorProps> = ({
   onCopy,
   isIFrame = false,
   snippetsBaseUrl = '',
-  onTextChange,
-  onLanguageChange,
+  // onTextChange,
+  // onLanguageChange,
+  on,
 }) => {
   const [text, setText] = useState<string>(initialText);
   const [language, setLanguage] = useState<languageOption>(initialLanguage);
@@ -74,7 +81,8 @@ export const CodeByteEditor: React.FC<CodeByteEditorProps> = ({
           hideCopyButton={hideCopyButton}
           onChange={(newText: string) => {
             setText(newText);
-            onTextChange?.(newText, language);
+            on.edit?.(newText, language);
+            // onTextChange?.(newText, language);
           }}
           onCopy={onCopy}
           snippetsBaseUrl={snippetsBaseUrl}
@@ -85,7 +93,7 @@ export const CodeByteEditor: React.FC<CodeByteEditorProps> = ({
             const newText: string = text || helloWorld[newLanguage] || '';
             setLanguage(newLanguage);
             setText(newText);
-            onLanguageChange?.(newText, newLanguage);
+            on.languageChange?.(newText, newLanguage);
           }}
         />
       )}

From e73e7549687ae316789faf97ecfcfef3a1901750 Mon Sep 17 00:00:00 2001
From: Bana Malik <bana@codecademy.com>
Date: Thu, 6 Jan 2022 16:45:50 -0500
Subject: [PATCH 19/19] tracking test

---
 packages/codebytes/src/editor.tsx | 14 ++++++++------
 packages/codebytes/src/index.tsx  | 32 +++++++++++++++----------------
 2 files changed, 24 insertions(+), 22 deletions(-)

diff --git a/packages/codebytes/src/editor.tsx b/packages/codebytes/src/editor.tsx
index 231c9f2f8..e02ae0c8f 100644
--- a/packages/codebytes/src/editor.tsx
+++ b/packages/codebytes/src/editor.tsx
@@ -6,10 +6,11 @@ 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';
 
+import { CodeBytesChangeHandlerMap } from '.';
 import { postSnippet } from './api';
 import type { languageOption } from './consts';
 import { Drawers } from './drawers';
@@ -23,9 +24,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']};
 `}
 `;
 
@@ -43,17 +44,17 @@ type EditorProps = {
   onChange: (
     text: string
   ) => void /* TODO: Add onChange behavior in DISC-353 */;
-  onCopy?: (text: string, language: string) => void;
   snippetsBaseUrl?: string;
+  on?: Pick<CodeBytesChangeHandlerMap, 'edit' | 'copy' | 'run'>;
 };
 
 export const Editor: React.FC<EditorProps> = ({
   language,
   text,
   hideCopyButton,
-  onCopy,
   onChange,
   snippetsBaseUrl,
+  on,
 }) => {
   const [output, setOutput] = useState('');
   const [status, setStatus] = useState<'ready' | 'waiting' | 'error'>('ready');
@@ -64,7 +65,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 +85,7 @@ export const Editor: React.FC<EditorProps> = ({
     };
     setStatus('waiting');
     setOutput('');
+    on?.run?.();
 
     try {
       const response = await postSnippet(data, snippetsBaseUrl);
diff --git a/packages/codebytes/src/index.tsx b/packages/codebytes/src/index.tsx
index 136be332b..158f5e38f 100644
--- a/packages/codebytes/src/index.tsx
+++ b/packages/codebytes/src/index.tsx
@@ -9,7 +9,18 @@ import { helloWorld, languageOption } from './consts';
 import { Editor } from './editor';
 import { LanguageSelection } from './languageSelection';
 
-type ChangeHandler = (text: string, language: languageOption) => void;
+export type CodeBytesChangeHandler = (
+  text: string,
+  language: languageOption
+) => void;
+
+export type CodeBytesChangeHandlerMap = {
+  logoClick?: () => void;
+  edit?: CodeBytesChangeHandler;
+  copy?: CodeBytesChangeHandler;
+  languageChange?: CodeBytesChangeHandler;
+  run?: () => void;
+};
 export interface CodeByteEditorProps {
   text: string;
   language: languageOption;
@@ -17,14 +28,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. */;
-  on: {
-    edit?: ChangeHandler;
-    copy?: () => void;
-    languageChange?: ChangeHandler;
-    run?: () => void;
-  };
-  // onTextChange?: ChangeHandler;
-  // onLanguageChange?: ChangeHandler;
+  on?: CodeBytesChangeHandlerMap;
 }
 
 const editorStates = states({
@@ -53,11 +57,8 @@ export const CodeByteEditor: React.FC<CodeByteEditorProps> = ({
   text: initialText,
   language: initialLanguage,
   hideCopyButton,
-  onCopy,
   isIFrame = false,
   snippetsBaseUrl = '',
-  // onTextChange,
-  // onLanguageChange,
   on,
 }) => {
   const [text, setText] = useState<string>(initialText);
@@ -81,10 +82,9 @@ export const CodeByteEditor: React.FC<CodeByteEditorProps> = ({
           hideCopyButton={hideCopyButton}
           onChange={(newText: string) => {
             setText(newText);
-            on.edit?.(newText, language);
-            // onTextChange?.(newText, language);
+            on?.edit?.(newText, language);
           }}
-          onCopy={onCopy}
+          on={on}
           snippetsBaseUrl={snippetsBaseUrl}
         />
       ) : (
@@ -93,7 +93,7 @@ export const CodeByteEditor: React.FC<CodeByteEditorProps> = ({
             const newText: string = text || helloWorld[newLanguage] || '';
             setLanguage(newLanguage);
             setText(newText);
-            on.languageChange?.(newText, newLanguage);
+            on?.languageChange?.(newText, newLanguage);
           }}
         />
       )}