ak-editor-hipchat v2.12.4

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 in package.json)
• ES2015 (referenced by the jsnext:main field in package.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!