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.

Anatomy of a simple sidebar plugin

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

index.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')
    }
})()

DevKitPackage.js

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}

Read more about the Package file and configurator.

DevKitComponent.js

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