Ak-editor-cq NPM

ak-editor-cq

This component provides a packaged version of the Atlassian Editor for use in Confluence Questions.

It's specific to CQ in that it:

has a schema that's compatible with Confluence's "storage format" (in shape)
provides encoding and decoding from Confluence's storage format

Try it out

Interact with a live demo of the ak-editor-cq component with code examples.

Installation

Install from NPM:

npm install --save ak-editor-cq

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-cq';

class Page extends Component {
  render() {
    return (
      <div>
        <Editor
          isExpandedByDefault
          onSave={this.handleSave}
        />
      </div>
    );
  }

  handleSave = (editor) => {
    alert(`Saved with value Confluence Storage value: ${editor.value}`);
  }
}

`Editor` API

import Editor from 'ak-editor-cq';

Props

`context?: 'default' | 'comment'`

Adjusts the "context" of the editor. This affects the UI of the editor by making it appropriate for the given situation.

`isExpandedByDefault?: boolean`

The initial "expanded" value. When the editor is expanded it can have content added by the user. The non-expanded mode renders a small placeholder field that when focused, will switch to the expanded mode.

`defaultValue?: string`

The initial value for the editor, in Confluence Storage format.

`onCancel?: (editor?: Editor) => void`

A callback triggered when the cancel button is pressed. The cancel button is only rendered if this prop is provided. Omitting this prop can be used to hide the button.

`onChange?: (editor?: Editor) => void`

A callback triggered when a content change is made.

`onSave?: (editor?: Editor) => void`

A callback triggered when the save button is pressed. The save button is only rendered if this prop is provided. Omitting this prop can be used to hide the button.

`placeholder?: string`

A string to use in the non-expanded placeholder, e.g. "What do you want to say?".

Methods / setters / getters

`focus(): void`

Focuses the the editor.

`clear(): void`

Clears the content from the editor, returning it to an empty state.

`isEmpty(): boolean`

Returns true if the editor content is empty.

`get value(): string | undefined`

Returns the value of the editor in Confluence Storage format. This getter computes the value on request, as such only access this getter when the value is actually required.