React component for the CodeVideo IDE. Our first "nearly-complete" functionality component for replaying IDE sessions, complete with a file explorer, multiple editor tab support, and a terminal.
IT'S CRITICAL THIS SHIPS TO PRODUCTION ONLY AFTER CONFIRMING THERE ARE NO SSR ISSUES - MONACO IS INFAMOUS FOR SSR ISSUES!
Typically, this is caused by calling monaco.editor by accident, when the react ref globalMonacoRef.current.editor. can be used instead.
There is a Gatsby site (in this repo under the ./example folder) featuring the CodeVideoIDE component in various configurations.
In step mode using the arrow keys to navigate through steps:
https://codevideo.github.io/codevideo-ide-react/step
In replay mode, starting a full replay with sound as soon as the page is interacted with:
https://codevideo.github.io/codevideo-ide-react/replay
In replay mode compatible with puppeteer recording callbacks, starting a full replay with sound as soon as the page is interacted with:
https://codevideo.github.io/codevideo-ide-react/puppeteer
Install the package itself via npm:
npm install @fullstackcraftllc/codevideo-ide-reactEnsure that you include radix CSS in your project. For frameworks like Next.js, you can include this in the root of your project:
import "@radix-ui/themes/styles.css";For Gatsby, add this to your gatsby-browser.js and gatsby-ssr.js files:
require('@radix-ui/themes/styles.css');