atlassian-editorkit

EditorKit

Purpose

Providing the basic tooling and structure to create new EditorKit components.

EditorKit does this by exposing a set of tasks to aid the development.

Usage

Install EditorKit as a dev dependency of your project:

npm install atlassian-editorkit --save-dev

Available tasks

• sandbox - Starts a server on port 1988 with an editor instance and your plugin integrated to it
• build - build files using typescript
• compile - builds typescript file
• typings - install typings that are used on editorkit dependencies
• lint - lint files on the repo
• test - run tests
• dev - watch, lint, test and build files upon file change

Using the binary

./node_modules/.bin/editorkit --$CMD

Adding as a npm run task

Modify the scripts section of your package.json

example of a modified package.json:

{
  ...
  scripts: {
    ...
    'sandbox': 'editorkit --sandbox',
    'build': 'editorkit --build',
    'compile': 'editorkit --compile',
    'typings': 'editorkit --typings',
    'lint': 'editorkit --lint',
    'test': 'editorkit --test',
    'dev': 'editorkit --dev'
  }
}

Then execute your tasks:

npm run sandbox

Component Creation

EditorKit components should have their entry points defined on src/index.js. And they should export a class in the following form:

example src/index/js:

class MyPlugin {
  constructor(EditorKITInstance) {
    // initialize your plugin here
    ...
  }

  detach(EditorKITInstance) {
    // called to allow your plugin to do cleanups
    ...
  }
}

module.exports = MyPlugin;

Configuring prosemirror default initializer settings

Sometimes you may want to overwrite default prosemirror settings such as schema to do so you can supply a static 'configure()' method on your Plugin, and output of it will be used as the initialization settings for prosemirror.

this will be called prior to prosemirror being initialized and the output of configure should be a configuration object to be used to instantiate prosemirror.

example:

class MyPlugin {
  ...
}

MyPlugin.configure = function(settings) {
  ...
  settings.foo = bar;
  return settings;
};

module.exports = MyPlugin;