@cs125/helpable
TypeScript icon, indicating that this package has built-in type declarations

2021.12.1 • Public • Published

@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.

Readme

Keywords

none

Package Sidebar

Install

npm i @cs125/helpable

Weekly Downloads

0

Version

2021.12.1

License

none

Unpacked Size

33.8 kB

Total Files

8

Last publish

Collaborators

  • geoffrey.challen