Negotiable Paleobotanist Missions

    This package has been deprecated

    Author message:

    This package has been deprecated and is no longer supported

    TypeScript icon, indicating that this package has built-in type declarations

    5.4.4 • Public • Published

    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.



    npm i @atlaskit/editor-hipchat

    DownloadsWeekly Downloads






    Last publish


    • atlaskit