@cs125/helpable

@cs125/mace

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.