feat(Codebytes): add simple monaco editor disc 353 #16

BandanaKM · 2022-01-04T18:00:16Z

Overview

Feature: Migrate SimpleMonacoEditor to Codebytes in Client-Modules

PR Checklist

Related to JIRA ticket: DISC-353
I have run this code to verify it works

This pull request is part of a series of pull requests to migrate the codebytes UI to client modules. The component structure thus far is:

CodebyteEditor
   > Editor
       > Drawers 
           > SimpleMonacoEditor

This pull request migrates the MonacoEditor component exactly as it is and ensures that it runs code on the snippets endpoint. See original in static sites: https://github.com/codecademy-engineering/static-sites/tree/577de863974111b4021c2bec6f4b5d2b1684a3c8/src/templates/CodeByteEditor/MonacoEditor
Ensures that SimpleMonacoEditor css styles work nicely for Storybook. This is what the comment on main.ts was about. (This took some effort to figure out, even though it's a small change)

Some notes:

I opted to use a local version of SimpleMonacoEditor as we do in the original Codebytes. If in the future, we want to import the one from gamut, we can handle as a Tech Investment item. Alex began some of this work in the past and has an existing RFC that Web Plat was going to inherit, but would add more scope to a project that is already multiphased.
Tests for the full Codebytes component to come at the end.

PR Checklist

To see the component locally:

Checkout the branch. In the root, run "yarn start". This will start the storybook server. Visit http://localhost:6006/
You can now run code in the story. :)

packages/styleguide/.storybook/main.ts

packages/codebytes/src/MonacoEditor/colorsDark.ts

packages/codebytes/package.json

packages/codebytes/src/index.tsx

packages/codebytes/package.json

borisonr · 2022-01-10T16:35:37Z

packages/codebytes/src/editor.tsx

+  ${({ hasError, theme }) => `
  color: ${hasError ? theme.colors.orange : theme.colors.white};
-  background-color: ${theme.colors['gray-900']};
+  background-color: ${colors['gray-900']};


i forget which we prefer theme.colors or importing colors directly but we should go with one instead of both :)
(we use theme.colors in the row above)

Yeah, this is a really interesting one! The theme.colors['gray-900'], is different color than the ${colors['gray-900']}. We need the color that comes up in ${colors['gray-900']} but, yeah, colors is definitely deprecated. I'll shoot a message to @dreamwasp and see what the best approach is for a deprecated color?

oh thats not great. definitely should loop in gamut team for this

spoke to cass, the new color is ${theme.colors['navy-900']}, so we're covered!

packages/codebytes/src/MonacoEditor/index.tsx

aionate0812 · 2022-01-10T22:49:31Z

packages/codebytes/package.json

-    "react-monaco-editor": "0.34.0",
+    "@monaco-editor/react": "4.3.1",
    "react-resize-observer": "1.1.1",
    "monaco-editor": "0.20.0"


since we are working with the latest version of @monaco-editor/react it may be worth updating the monaco-editor version as well

https://github.com/suren-atoyan/monaco-react/blob/cd924806506646e2270ade2df896b3603f1c3f30/package.json#L36

awesome, thank you for the heads up!

@aionate0812 The amazing thing is that I wasn't getting syntax highlighting before, but with the package updates, I am 🎉

BandanaKM · 2022-01-11T18:53:46Z

packages/codebytes/src/MonacoEditor/index.tsx

+        onMount={editorWillMount}
+        onChange={onChange}
+        options={{ minimap: { enabled: false } }}
+        theme="vs-dark"


This resolved some of the flashing issues we were seeing earlier. It's using monaco's built in dark theme initially, before we add a custom dark theme. In line with how the component currently works.

packages/codebytes/package.json

aionate0812 · 2022-01-11T20:35:32Z

packages/codebytes/src/MonacoEditor/index.tsx

+import { dark } from './theme';
+import { Monaco } from './types';
+
+const ReactMonacoEditor = loadable(() => import('@monaco-editor/react'));


not sure how this may play with Next.js as it uses dynamic imports instead

Best solution here might be to keep this as a normal import, and have the parent component decide to use dynamic imports (next.js) or loadable (monolith) when calling the CodeByteEditor. Updating to this approach for now.

borisonr · 2022-01-11T21:38:32Z

packages/styleguide/.env.local

@@ -0,0 +1 @@
+CONTAINER_API_BASE=propeller.cc-le-cf.com


why are we using the prod endpoint in local? and can you set up the staging and prod ones too?

@borisonr jake mentioned that since this is open source, then we want users to only be aware of our prod endpoint, not our staging one.

if we really do want to set up a staging endpoint here, which we would only need once we build a gamut-like storybook experience on a server, we'd probably need to do this in circleci or github actions. else, it's not essential.

for the current purposes, i think this covers what we need! cc'ing @jakemhiller to get some more input, too!

(eventually, the parent/container calling codebytes will pass in a staging/prod endpoint of its own)

thats fine! but maybe we dont call this file local then? just have one env file

totally reasonable!

borisonr

we're getting so close!!

codecademydev · 2022-01-11T22:17:50Z

📬Published Alpha Packages:

@codecademy/codebytes@0.2.1-alpha.4f65b1.0
@codecademy/styleguide@0.2.1-alpha.4f65b1.0

* origin/main: chore(release): publish chore: bumped codebytes to next version (#25) Revert "add yarn build task for codebytes (#23)" (#24) add yarn build task for codebytes (#23) chore(release): publish feat(Codebytes): Refactor tracking in Codebytes (#19) chore(release): publish feat(Codebytes): move language selection component disc 354 (#17) chore(release): publish feat(Codebytes): add simple monaco editor disc 353 (#16) chore(release): publish feat(Codebytes): add editor and drawers disc 351 (#14) chore(release): publish feat(Tracking): add search id param to userclick data chore(release): publish feat(Codebytes): move codebytes parent disc 351 (#11) chore(release): publish fix(tracking): remove navigator.sendBeacon .bind and add try/catch

BandanaKM added 15 commits December 17, 2021 17:38

working version

489a0c1

update to include gamut styles

f61ddd9

add simple code editor

a90a11a

add editor container styles

db68a21

fix prettier issues

19caf83

pass onCopy from parent

9d702d0

formatting

7cb1098

use isIframeProp

7cd9589

pass down snippets base url from parent

f7fcbbb

simple monaco editor

8efb881

update tslint for scale

f546671

incorporate review feedback

ddee0b1

fix prettier issues

675361b

default snippets endpoint to empty string

263a187

resolve merge conflicts

d70fea1

BandanaKM requested review from a team and songstephen as code owners January 4, 2022 18:00

BandanaKM requested review from thedoomshine and removed request for a team January 4, 2022 18:00

BandanaKM marked this pull request as draft January 4, 2022 18:00

Base automatically changed from bm-add-editor-and-drawers-disc-351 to main January 4, 2022 19:22

BandanaKM commented Jan 4, 2022

View reviewed changes

packages/styleguide/.storybook/main.ts Outdated Show resolved Hide resolved

BandanaKM added 4 commits January 4, 2022 16:26

resolve merge conflicts

a29b647

use rem

d8f87b0

update example text

7386df0

use language prop

01015e9

JoshuaKGoldberg reviewed Jan 6, 2022

View reviewed changes

packages/codebytes/src/MonacoEditor/colorsDark.ts Show resolved Hide resolved

JoshuaKGoldberg reviewed Jan 6, 2022

View reviewed changes

packages/codebytes/package.json Outdated Show resolved Hide resolved

JoshuaKGoldberg reviewed Jan 6, 2022

View reviewed changes

packages/codebytes/src/index.tsx Show resolved Hide resolved

use colors gray

33f7ab3

BandanaKM requested review from a team, aionate0812, dougyd92 and j10sanders and removed request for a team January 7, 2022 04:40

aionate0812 reviewed Jan 10, 2022

View reviewed changes

packages/codebytes/package.json Outdated Show resolved Hide resolved

borisonr reviewed Jan 10, 2022

View reviewed changes

use monaco-editor/react package

f3c23df

aionate0812 reviewed Jan 10, 2022

View reviewed changes

packages/codebytes/src/MonacoEditor/index.tsx Outdated Show resolved Hide resolved

aionate0812 reviewed Jan 10, 2022

View reviewed changes

BandanaKM added 3 commits January 10, 2022 21:41

update monaco editor package version

5c3ffca

remove comments

f45f382

fix typings

1ed659b

BandanaKM commented Jan 11, 2022

View reviewed changes

BandanaKM added 3 commits January 11, 2022 14:01

remove gitignore

808d0db

use theme navy

b5af7ab

fix linting issues

73a4d07

BandanaKM requested review from aionate0812 and borisonr January 11, 2022 19:46

aionate0812 reviewed Jan 11, 2022

View reviewed changes

packages/codebytes/package.json Outdated Show resolved Hide resolved

aionate0812 reviewed Jan 11, 2022

View reviewed changes

update dependencies

8c2c055

borisonr reviewed Jan 11, 2022

View reviewed changes

rename env

4f65b1b

borisonr approved these changes Jan 11, 2022

View reviewed changes

BandanaKM merged commit eec98ba into main Jan 12, 2022

BandanaKM deleted the bm-add-simple-monaco-editor-disc-353 branch January 12, 2022 16:16

BandanaKM restored the bm-add-simple-monaco-editor-disc-353 branch January 12, 2022 16:18

		@@ -0,0 +1 @@
		CONTAINER_API_BASE=propeller.cc-le-cf.com

feat(Codebytes): add simple monaco editor disc 353 #16

feat(Codebytes): add simple monaco editor disc 353 #16

Uh oh!

Conversation

BandanaKM commented Jan 4, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Overview

PR Checklist

PR Checklist

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

borisonr Jan 10, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

borisonr left a comment

Choose a reason for hiding this comment

Uh oh!

codecademydev commented Jan 11, 2022

📬Published Alpha Packages:

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

BandanaKM commented Jan 4, 2022 •

edited

Loading

borisonr Jan 10, 2022 •

edited

Loading