Loading Acrolix sidebar into atom


#1

I’m trying to integrate Acrolinx sidebar into Atom. This is where the instructions to integrate: https://cdn.rawgit.com/acrolinx/acrolinx-sidebar-demo/master/doc/pluginDoc/index.html

When I run the package, I’m greeted with this error: C:\Users\github\sidebar-package\lib\acrolinx-sidebar-integration.js:22246 Refused to load the stylesheet ‘https://sidebar-classic.acrolinx-cloud.com/v14/prod/styles/e74fe7af.index.css’ because it violates the following Content Security Policy directive: “style-src ‘self’ ‘unsafe-inline’”.

Same error for scripts.

Here is the code:

'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()
);

}

};

View:

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

}

I’ve also pasted the code in gist here: https://gist.github.com/anonymous/dda70ac0a9213f5071c433d669a439b3

Is this a limitation with Atom? How can I workaround this error?