Atlassian Editor component for HipChat


stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
Minified + gzip package size for @atlaskit/editor-hipchat in KB


AtlasKit component registry Commitizen friendly semantic-release Report an issue


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 @atlaskit/editor-hipchat component with code examples.


Install from NPM:

npm install @atlaskit/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.


The editor is built as a React component that can be used directly in a JSX file.


import React, { Component } from 'react';
import Editor from '@atlaskit/editor-hipchat';

class Page extends Component {
  render() {
    return (

  handleSave = (editor) => {
    alert(`Saved with HipChat storage object value: ${editor.value}`);

Don't forget to add these polyfills to your product build if you're using emoji or mentions in the editor and you want to target older browsers:

Editor API

import Editor from '@atlaskit/editor-hipchat';


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[]

errorReporter?: ErrorReportingHandler

If you're using some error reporting service/tool in your product you can help Atlassian Editor track and store its own errors inside your error reporting service. Provide "errorReporter" property to the Editor component and describe "captureMessage" and "captureException" methods for this.

// if you're using Sentry
import * as Raven from 'raven';

// this is optional, use it only for TS support
import { ErrorReportingHandler, ErrorReporterTags } from '@atlaskit/editor-core';

  .config(DSN_URI, { release: RELEASE_VERSION })

class ErrorReporter implements ErrorReportingHandler {
  captureMessage(msg: string, tags?: ErrorReporterTags) {
    Raven.captureMessage(msg, { ...tags, module: 'editor' });

  captureException(err: Error, tags?: ErrorReporterTags) {
    Raven.captureException(err, { ...tags, module: 'editor' });

const errorReporter = new ErrorReporter();

export default (
  <Editor errorReporter={errorReporter}/>

* Please note that this module could have dependencies that are governed by the Atlassian Design Guidelines license which will be automatically included on install. Each dependency has a license file that indicates whether the Atlassian Design Guidelines license applies.

We're here to help!

Let us know what you think of our components and docs, your feedback is really important for us.

Are you in trouble? Read through our contribution guidelines and raise an issue to us.

