Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use CodeMirror 6 in REPL #3014

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Conversation

JLHwung
Copy link
Contributor

@JLHwung JLHwung commented Nov 15, 2024

In this PR we migrate the CodeMirror from 5 to 6 for REPL.

New features from this upgrade:

  • Find-and-replace support for the input source.
  • Block level collapse-and-expand for both input source and output source

This is a vast rewrite of the CodeMirror bridging React component. Here are the UI tests I have performed manually:

  • preserveScrollPosition: Input a 300-line text, scroll the output to the bottom, change the input, the output should preserve the scroll position
  • lineWrapping: Input a 300-column text, toggle the "Line Wrap" option, the input should apply softwrap
  • readOnly: The output editor should be readonly
  • Dark theme: enable dark system theme, refresh the page, the REPL should provide a dark theme appearance

Preview link: https://deploy-preview-3014--babel.netlify.app/repl

@JLHwung JLHwung added the repl label Nov 15, 2024
Copy link

netlify bot commented Nov 15, 2024

Deploy Preview for babel-next ready!

Name Link
🔨 Latest commit 5dd2cf3
🔍 Latest deploy log https://app.netlify.com/sites/babel-next/deploys/6740e463064ed90008179526
😎 Deploy Preview https://deploy-preview-3014--babel-next.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.


type Props = {
autoFocus: boolean;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The autoFocus prop is removed because we are not using this prop.

Copy link

netlify bot commented Nov 15, 2024

Deploy Preview for babel ready!

Name Link
🔨 Latest commit 5dd2cf3
🔍 Latest deploy log https://app.netlify.com/sites/babel/deploys/6740e463edef13000892719a
😎 Deploy Preview https://deploy-preview-3014--babel.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

js/repl/CodeMirror.tsx Outdated Show resolved Hide resolved
}

injectGlobal({
".CodeMirror": {
height: "100% !important",
width: "100% !important",
WebkitOverflowScrolling: "touch",
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This CSS property is long obsolete.

@@ -30,7 +33,7 @@ export default function CodeMirrorPanel(props: Props) {
<CodeMirror
onChange={onChange}
options={{
...props.options,
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The fileSize option is not used by the codemirror component. So here we explicitly specify the passing-through options.

The CodeMirror component will be rendered directly within the parentRef.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant