@codecademy/codebytes 0.2.0 → 0.2.1-alpha.a29b64.0

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 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.a29b64.0](https://github.com/Codecademy/client-modules/compare/@codecademy/codebytes@0.2.0...@codecademy/codebytes@0.2.1-alpha.a29b64.0) (2022-01-04)
+
+**Note:** Version bump only for package @codecademy/codebytes
+
+
+
+
+
 ## [0.2.0](https://github.com/Codecademy/client-modules/compare/@codecademy/codebytes@0.1.0...@codecademy/codebytes@0.2.0) (2022-01-04)
 
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@codecademy/codebytes",
   "description": "Codebytes Code Editor",
-  "version": "0.2.0",
+  "version": "0.2.1-alpha.a29b64.0",
   "author": "Codecademy Engineering <dev@codecademy.com>",
   "sideEffects": [
     "**/*.css",
@@ -25,7 +25,11 @@
     "@codecademy/gamut-styles": "*",
     "@codecademy/variance": "*",
     "@emotion/react": "^11.4.0",
-    "@emotion/styled": "^11.3.0"
+    "@emotion/styled": "^11.3.0",
+    "@loadable/component": "^5.13.1",
+    "monaco-editor": "0.20.0",
+    "react-monaco-editor": "0.34.0",
+    "react-resize-observer": "1.1.1"
   },
   "scripts": {
     "verify": "tsc --noEmit",
@@ -39,10 +43,12 @@
   "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"
   },
-  "gitHead": "db6be3e2ec6108c6eddb25c04097ed959c67db76"
+  "gitHead": "44e6bad947fe2052d41347c37f3ae285f6f0248a"
 }

package/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;

package/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}
+      />
+    </>
+  );
+};

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

package/src/MonacoEditor/types.ts

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

package/src/editor.tsx

@@ -13,6 +13,7 @@ import React, { useState } from 'react';
 import { postSnippet } from './api';
 import type { languageOption } from './consts';
 import { Drawers } from './drawers';
+import { SimpleMonacoEditor } from './MonacoEditor';
 
 const Output = styled.pre<{ hasError: boolean }>`
   width: 100%;
@@ -51,6 +52,7 @@ export const Editor: React.FC<EditorProps> = ({
   text,
   hideCopyButton,
   onCopy,
+  onChange,
   snippetsBaseUrl,
 }) => {
   const [output, setOutput] = useState('');
@@ -105,7 +107,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}

package/src/index.tsx

@@ -8,6 +8,16 @@ 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 /* 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;
+}
+
 const editorStates = states({
   isIFrame: { height: '100vh' },
 });
@@ -17,8 +27,8 @@ const editorBaseStyles = system.css({
   borderColor: 'gray-900',
   display: 'flex',
   flexDirection: 'column',
-  height: '25rem',
-  width: '43rem',
+  height: '400px',
+  width: '688px',
   overflow: 'hidden',
 });
 export interface EditorStyleProps
@@ -30,16 +40,6 @@ 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 /* 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;
-}
-
 export const CodeByteEditor: React.FC<CodeByteEditorProps> = ({
   text: initialText,
   language,

package/src/theme.d.ts

@@ -1,5 +1,4 @@
 import { CoreTheme } from '@codecademy/gamut-styles';
-
 declare module '@emotion/react' {
   export interface Theme extends CoreTheme {}
 }