Skip to content

Client and server support for saving and synchonizing Ace editor contents.

License

Notifications You must be signed in to change notification settings

cs125-illinois/mace

Repository files navigation

@cs125/mace

npm Docker Image Version (latest by date) License: MIT

React TypeScript support for synchronizing Ace browser editors.

Install

npm i @cs125/mace # client
docker pull cs125/mace # server

Use

For a complete example of how to use @cs125/mace please see the example in the repository.

First, wrap your app in the <MaceProvider /> component, configured to point at your server (if you are using one):

const App: React.FC = () => {
  return (
    <MaceProvider server={yourMaceServer} googleToken={yourGoogleToken}>
      <RestOfYourApp />
    </MaceProvider>
  )
}

Inside the <MaceProvider /> you can use the <MaceEditor /> component as a drop-in replacement for the <AceEditor /> component provided by react-ace. The only difference is that you need to provide an id prop uniquely identifying each editor instance. Generating those IDs is up to you. One way is to generate unique IDs such as UUIDs and save them with the page contents. Another approach is to generate a unique ID that is a combination of the initial editor contents and its position on the page.

Demo

Visit the demo here.

About

Client and server support for saving and synchonizing Ace editor contents.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published