Plugin overview
There are numerous ways you can add functionality to the . This guide will give you an understanding of what a plugin is and the basic structure of a plugin.
Most of what you can see in the are plugins. Even text styles are small plugins. In the image below you can see a basic overview of the different parts of the UI and where plugins can be added.

For a more practical step by step instructions on how to get started using the skeleton DevKit plugin see the quickstart guide.
The skeleton plugin will add a plugin to the sidebar with a few simple UI components. If you look at our Devkit skeleton plugin you will find the main plugin source in the
src
directory.src/
scss/
index.scss
index.js
DevKitPackage.js
DevKitComponent.js
The index.js file is the starting point. When loaded this file will call
registerPlugin()
in the which register the plugin package.import {DevkitPackage} from './DevKitPackage'
import {registerPlugin} from 'writer'
(() => {
// Register the plugin with the Writer when registerPlugin() is available
if (registerPlugin) {
registerPlugin(DevkitPackage)
}
else {
console.error('Register method not yet available')
}
})()
The package defines a
configure()
function. This function is called by the after the plugin has been loaded and registered successfully. As parameters you get a config
object which has all the methods you need to register components, commands, tools, keyboard shortcuts, translation labels and what not. In essences, the config
object is what allows you to define all the bits and pieces of your plugin and define where they should go in the .The DevKit skeleton package imports a sass/css file and a its own UI component, the
DevKitComponent
, which is added to the sidebar using config.addToSidebar()
. It also registers a translation label using config.addLabel()
.import './scss/index.scss'
import {DevKitComponent} from './DevKitComponent'
const DevKitPackage = {
name: 'npwriterdevkit',
id: 'se.infomaker.npwriterdevkit',
configure: function(configurator, pluginConfig) {
configurator.addToSidebar('main', pluginConfig, DevKitComponent)
configurator.addLabel('Devkit plugin loaded', {
en: 'Devkit plugin loaded',
sv: 'Devkit plugin inläst'
})
}
}
export {DevKitPackage}
User interface components are built using the React like Substance components. You will see this again and again in both tools, content objects, popovers and all other UI components you will define. The provides a few basic UI components and an API to manipulate most aspects of the and article data.
The DevKit skeleton plugin imports a
Component
from the substance
module which all UI components inherit from. It also imports a UIButton
and the api
from the writer
module.The most important method is the
render()
method. See the DevKit skeleton for the complete source.import {Component} from 'substance'
import {UIButton, api} from 'writer'
class DevKitComponent extends Component {
render($$) {
const el = $$('div').addClass('devkit')
const button = $$(UIButton, {
label: 'Click me'
})
.on('click', () => {
this.increaseClickCount()
})
el.append([
$$('h2').append(
this.getLabel('Devkit plugin loaded')
),
$$('p').append(
`You have clicked ${this.state.clickCount} times`
),
button
])
return el
}
increaseClickCount() {
// ...
}
export {DevKitComponent}
}
Last modified 28d ago