Moroboxai-editor-react NPM

moroboxai-editor-react

Embeddable code editor for coding AIs for MoroboxAI in React.

Installation

Using npm:

npm install moroboxai-editor-react --save

Or:

git clone https://github.com/moroboxai/moroboxai-editor-react.git
cd moroboxai-editor-react
npm i
npm run build

Usage

Setup a simple React app with:

npx create-react-app my-app --template typescript

Add moroboxai-editor-react as a dependency:

cd my-app
npm install moroboxai-editor-react --save

Replace src/App.tsx with:

import './App.css';
import Editor from 'moroboxai-editor-react';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Editor
          value={'function foo() {\n  console.log("foo");\n}\n'}
          width="500px"
          height="400px"/>
      </header>
    </div>
  );
}

export default App;

Build and start a local server to see the result:

npm run build
npm run start

Playground

This package provides a minimal React app under the playground directory for playing with and testing the library.

You can run the playground locally on port 3000 with:

git clone https://github.com/moroboxai/moroboxai-editor-react.git
cd moroboxai-editor-react
npm i
cd playground
npm i
npm run dev

If you want to change something in the library, go to moroboxai-editor-react/src/..., the library will be automatically re-built and the playground will use the latest build

Props

Name	Type	Default	Description
language	string	javascript	Selected language
value	string		Initial content of the editor
width	string		Width of the `div` element
height	string		Height of the `div` element
className	string		Class name for the `div` container
onLoad	func	noop	Signature: function(value: string) => void Function called when the Load button is clicked
onUnload	func	noop	Signature: function() => void Function called when the Unload button is clicked