ak-editor-hipchat
This component provides a packaged version of the Atlassian Editor for use in HipChat.
It's specific to HipChat in that it:
- has a schema that's compatible with HipChat's current "supported content" (e.g. no bold / italic / images / etc)
- provides encoding and decoding to HipChat's storage format (at the time of writing it's a slight variant of ProseMirror's
.toJSON()
)
Try it out
Interact with a live demo of the ak-editor-hipchat component with code examples.
Installation
Install from NPM:
npm install --save ak-editor-hipchat
Two flavours of JavaScript are published:
- ES5 (referenced by the
main
field inpackage.json
) - ES2015 (referenced by the
jsnext:main
field inpackage.json
)
If you're using webpack, adjust your resolve.packageMains
accordingly.
Usage
The editor is built as a React component that can be used directly in a JSX file.
Example:
import React, { Component } from 'react';
import Editor from 'ak-editor-hipchat';
class Page extends Component {
render() {
return (
<div>
<Editor
isExpandedByDefault
onSave={this.handleSave}
/>
</div>
);
}
handleSave = (editor) => {
alert(`Saved with HipChat storage object value: ${editor.value}`);
}
}
Editor
API
import Editor from 'ak-editor-hipchat';
Props
onSubmit?: (doc: Doc) => void
A callback triggered when enter (without shift) is pressed. The callback is passed a JavaScript object representing the document.
export type Doc = {
type: 'doc',
content?: any[]
}
Support and feedback
We're here to help!
Let us know what you think of our components and docs, your feedback is really important for us.
Community support
Ask a question in our forum.
Check if someone has already asked the same question before.
Create a support ticket
Are you in trouble? Let us know!