Integrating Acrolinx sidebar into Atom

sidebar-package-view.js

'use babel';

export default class SidebarPackageView {

  constructor(serializedState) {
    // Create root element
    this.element = document.createElement('div');
    this.element.classList.add('sidebar-package');

    const sidebar = document.createElement('div');
    sidebar.id = "sidebarContainer";
    this.element.appendChild(sidebar);
  }

  // Returns an object that can be retrieved when package is activated
  serialize() {}

  // Tear down any state and detach
  destroy() {
    this.element.remove();

  }

  getElement() {
    return this.element;
  }

}

sidebar-package.js

'use babel';

import SidebarPackageView from './sidebar-package-view';
import { CompositeDisposable } from 'atom';
import AcrolinxPlugin from './acrolinx-sidebar-integration';

export default {

  sidebarPackageView: null,
  modalPanel: null,
  subscriptions: null,

  activate(state) {
    this.sidebarPackageView = new SidebarPackageView(state.sidebarPackageViewState);
    this.modalPanel = atom.workspace.addModalPanel({
      item: this.sidebarPackageView.getElement(),
      visible: false
    });

    // Events subscribed to in atom's system can be easily cleaned up with a CompositeDisposable
    this.subscriptions = new CompositeDisposable();

    // Register command that toggles this view
    this.subscriptions.add(atom.commands.add('atom-workspace', {
      'sidebar-package:toggle': () => this.toggle()
    }));

  },

  deactivate() {
    this.modalPanel.destroy();
    this.subscriptions.dispose();
    this.sidebarPackageView.destroy();
  },

  serialize() {
    return {
      sidebarPackageViewState: this.sidebarPackageView.serialize()
    };
  },

  toggle() {
    var basicConf = {
      sidebarContainerId: 'sidebarContainer',

      //See: https://cdn.rawgit.com/acrolinx/acrolinx-sidebar-demo/v0.3.37/doc/pluginDoc/interfaces/_plugin_interfaces_.initparameters.html
      serverAddress: 'https://test-ssl.acrolinx.com/',
      clientSignature: 'SW50ZWdyYXRpb25EZXZlbG9wbWVudERlbW9Pbmx5'
    }

    var acrolinxPlugin = new acrolinx.plugins.AcrolinxPlugin(basicConf);

   // Create an adapter for an editable div.
   // Alternative: new acrolinx.plugins.adapter.ContentEditableAdapter({element: document.getElementById('editor')})
   var adapter = new acrolinx.plugins.adapter.ContentEditableAdapter({editorId: 'editor'});

   // Register the single adapter to the main Acrolinx plugin.
   acrolinxPlugin.registerAdapter(adapter);

   acrolinxPlugin.init();

   return (
      this.modalPanel.isVisible() ?
      this.modalPanel.hide() :
      this.modalPanel.show()
    );

  }

};