Naviga Writer
6.3.3
6.3.3
  • Naviga Writer
  • Release notes
    • 6.3.3
    • 6.3.2
    • 6.3.1
    • 6.2.1
    • 6.2.0
    • 6.1.2
    • 6.1.1
    • 6.1.0
    • 6.0.0
    • 5.3.0
  • Introduction
    • Authoring
    • Developing
    • Publishing
    • User stories and reference cases
  • User Guide
    • Writer User Guide
      • The Content Area and Tabs
        • Help menu
        • Language menu
        • Article name
        • Writing teasers
        • Content area
        • Information
        • Search and replace words
        • History Button
        • Save and publish flow
        • Tabs
          • Meta Tab
            • Author
            • Channels
          • Integrations Tab
          • Image and Article search Tab
        • Locked article
      • Text management
      • Writer Keyboard Shortcuts
      • Personal Writer template
      • Channels to control access
      • Images User Guide
      • Common questions when starting using Writer
  • Admin Guide
    • Configuration files
    • Configurations Guide
    • Configuration of Writer templates
    • Publish Flow
      • Default configuration definitions
      • Starting part of the configuration
      • Publish flow config details
      • Configuration of calendarLocale
      • Preconditions for roles in the publish flow
    • Generic properties for Objects
      • Generic properties configuration
    • Image Services
      • Photo uploader
      • Binary Service Light
      • ImEngine
      • Imgix
    • Available Plugins
      • Naviga developed plugins
        • Plugins in earlier versions of Writer
      • Third-party plugins
  • Developer guide
    • Writer plugin development
      • Quickstart
      • Plugin overview
      • Creating an content object plugin
      • Validation and hooks
      • Interacting with external resources
    • Writer Plugin Building Blocks
      • Package
      • Component
      • Node
      • Converter
      • Events
    • Writer plugin style guide
      • CSS Guidelines
      • CSS variables, colors and fonts
      • UI Components
    • Tutorials
      • Popover & text analysis
      • Search & replace
      • Concept interaction
    • Infomaker NewsML
      • Overview
      • Document relations and types
      • Extensions XSD
      • NewsItem
      • ConceptItem
      • PlanningItem
      • Examples
        • NewsItem - Text
        • NewsItem - Picture
        • NewsItem - PDF
        • ConceptItem - Author
        • ConceptItem - Category
        • ConceptItem - Channel
        • ConceptItem - Content Profile
        • ConceptItem - Event
        • ConceptItem - Organisation
        • ConceptItem - Person
        • ConceptItem - Place (point)](point)](point)](point)](point)](point)](point)](point)](point)](point)]
        • ConceptItem - Place (polygon)](polygon)](polygon)](polygon)](polygon)](polygon)](polygon)](polygon)]
        • ConceptItem - Section
        • ConceptItem - Story
        • ConceptItem - Topic
        • PlanningItem
    • Media Enrichment
      • Images
  • API Reference
    • Writer Api
      • Api
      • Article
      • Browser
      • Concept
      • ConceptService
      • Document
      • Events
      • NewsItem
      • Router
      • Ui
      • Upload
      • User
      • settings
    • UI Components
      • UIAvatar
      • UIButton
      • UIByline
      • UICheckbox
      • UIChip
      • UIDatePicker
      • UIDatetimeFieldEditor
      • UIDropdown
      • UIFieldEditor
      • UIIconButton
      • UIInlineImage
      • UIPagination
      • UISelect
      • UITimePicker
      • UIToggle
      • UITooltip
      • UIInputText
      • UITextarea
Powered by GitBook
On this page
  • Anatomy of a simple sidebar plugin
  • index.js
  • DevKitPackage.js
  • DevKitComponent.js

Was this helpful?

  1. Developer guide
  2. Writer plugin development

Plugin overview

PreviousQuickstartNextCreating an content object plugin

Last updated 5 years ago

Was this helpful?

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

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}

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

For a more practical step by step instructions on how to get started using the skeleton DevKit plugin see .

See the for more details on Substance and the component model.

the quickstart guide
Read more about the Package file and configurator.
substance documentation and API reference
Plugin overview