Writer Plugin Node

There are many different types of Nodes built into Substance, e.g BlockNode, FileNode, TextBlock, Container, PropertyAnnotation, and probably more. Each Node-type has different utility and usage, but what they all have in common is their ability to transport data.

For simplicity this document will focus on the BlockNode. Check the Substance source code for information about all the other types.

Defining a Node

What's needed to define a Node is a schema for the Node's data structure. In its simplest form, a node inherits some functionality from a parent Node, and then defines its properties.

Simple BlockNode Example:

// MyAmazingBlockNode.js
import {BlockNode} from 'substance'

class MyAmazingBlockNode extends BlockNode {}

MyAmazingBlockNode.schema = {
    type: 'myamazingplugin',
    uuid: {type: 'string', optional: false},
    message: {type: 'string', optional: true},
    year: {type: 'number'},
    isCool: {type: 'boolean'}
}

export {MyAmazingBlockNode}

Once a Node is defined, and registered in the Package file, the Converter responsible for your plugin is able to import and export data from your Node and the underlying NewsML document.

Extending a Node with utility

Sometimes you might want to manipulate the data stored in the Node directly, or supply utility functions for your plugin which returns your data in a specific format. This is easily added to the defined Node class, and then accesses directly from the Component registered to that Node.

Node Utility Function Example:

// MyAmazingBlockNode.js
import {BlockNode} from 'substance'

class MyAmazingBlockNode extends BlockNode {

    safeMessage() {
        return this.message ? this.message : 'Oh dear, there is no message!' 
    }

}

MyAmazingBlockNode.schema = {
    type: 'myamazingplugin',
    message: {type: 'string', optional: true},
}

export {MyAmazingBlockNode}

// MyAmazingComponent.js
import {Component} from 'substance'

class MyAmazingComponent extends Component {

    render($$) {
        const {node} = this.props
        return $$('div').append(node.safeMessage())
    }
}

export {MyAmazingComponent}

results matching ""

    No results matching ""