Kodemo Editor

The Kodemo Editor is a React component that can be used to create or edit Kodemo documents. It includes includes a WYSIWYG text editor, tools for creating subjects and everything else needed to author documents.

You can use this component to host the editor on your own domain.

Installation

To use the editor, start by installing @kodemo/editor from npm using your favorite package manager.

Rendering the Editor

Now that we have access to the @kodemo/editor package, let's start setting up our editor. We're creating a new editor with no props here which means the editor will default to covering the full viewport and saving changes to local storage.

The KodemoEditor supports all of the same config options as the KodemoPlayer. If you'd like to learn more about those options, including how to adjust the size of the editor, see Config Options.

Store

The editor requires a store in order to load and persist documents. If no store is provide, the editor will create its own LocalStorageStore which persists changes locally in the browser.

If you want to provide your own store, you can pass it to the editor using the store prop. In our example we are creating an instance of the default store (LocalStorageStore) and passing it to the editor.

Custom Store

To control where the editor loads and saves data you can build your own custom store.

Your custom store needs to extend the Store class and implement two methods; load and save.

• The load method is used to fetch your document from storage.
• The save method is used to persist document changes to storage.

When saving, you can persist the current JSON document as a whole by calling getDocument and sending the resulting data to storage.

Sending the whole document each time there's a change gets slow when persisting large documents so we also provide JSON patches for more granular updates. These patches are available via the store's unsavedPatches property. The list of unsaved patches is automatically cleared after each save.

Learn more about JSON patches at jsonpatch.com.

Image Uploads

If you want editors to be able to upload images you will need to provide an upload handler. This is the function that will be responsible for uploading images from the editor to your asset server.

The upload function needs to match the type ImageUploadFunction and return an Asset.

Listening for Changes

If you want to stay updated when the document is edited you can bind a handler to onChange.

When a change is detected you can use the getDocument API method to read the current document JSON.