react-python-editor

Moocfi Python Editor

React Python Editor is a React component that provides an in-browser editing and running environment for Python code. The editor is based on Pyodide python runtime environment that is run using webworkers.

Usage

Install with npm i react-python-editor.

The editor component can be used in a following way:

import { ProgrammingExercise } from "moocfi-python-editor"

const App = () => {
  // ...

  return (
    <ProgrammingExercise
      organization="organization-slug"
      course="course-name"
      exercise="exercise-name"
      userId="user-id"
      token="user-token"
    />
  )
}

Required properties:

• organization, course and exercise Define which TMC exercise will be loaded.
• userId and token are used to identify the current user.

Optional properties:

• debug Show and log debug information if set to true.
• language Editor's localization. Currently supports en (default) and fi.
• height Height of the editor. Defaults to 400px.
• outputHeight Maximum height of the output content in pixels.
• onExerciseDetailsChange Callback function that provides details about the exercise. These details vary by user.

Setting up the project

• Clone the project on GitHub
• Go to the project root directory and run npm ci & npm run encode:worker
• Go to the example directory and run npm ci

Running the project

To run the project in example environment, go to the example directory and run npm start.

If you make any changes to the worker, you will always need to run the encode:worker command again.

License

This project is licensed under either of

• Apache License, Version 2.0, (LICENSE or https://www.apache.org/licenses/LICENSE-2.0)
• MIT license, (LICENSE-MIT or https://opensource.org/licenses/MIT)

at your option.