Extending the UI

Inkdrop's UI is built on top of React. You can add your own React components to Inkdrop by invoking Layout Manager and Component Manager APIs.

Registering and unregistering a React component

To add your React components, you first have to register them to the component registry. Then, the registered components can be added to layouts. Below example registers MyDialog class to the component registry and adds it to modal layout so that you can show it as a modal view.

module.exports = {
  activate() {
    inkdrop.components.registerClass(MyDialog)
    inkdrop.layouts.addComponentToLayout('modal', 'MyDialog')
  },

  deactivate() {
    inkdrop.layouts.removeComponentFromLayout('modal', 'MyDialog')
    inkdrop.components.deleteClass(MyDialog)
  }
}

This is described in detail in the Word Count plugin walkthrough.

Available layouts can be found here.

Examples

Take a look at the example plugin which adds bars and buttons, replacing the default note list item view with custom one, etc. Here is a screenshot:

We will explore along with this example to learn how to add components to each layout.

Showing a custom dialog

• Example: LayoutExampleMessageDialog

Inkdrop provides MessageDialog component so that you can easily create a custom dialog like so:

render() {
  const MessageDialog = inkdrop.components.getComponentClass('MessageDialog')
  return (
    <MessageDialog ref={el => (this.dialogRef = el)} title="LayoutExample">
      LayoutExample was toggled!
    </MessageDialog>
  )
}

Inserting a view into the main layout

• Example: LayoutExampleLeftMostBar

It inserts a component into 'main:full' layout.

Adding a sidebar menu item

• Example: LayoutExampleSidebarMenuItem

Adding a view into the editor layout

• Example: LayoutExampleEditorLeftPane
• Example: LayoutExampleEditorRightPane

Adding an editor header button

• Example: LayoutExampleEditorHeaderItem

Adding an editor toolbar button

• Example: LayoutExampleEditorToolbarButton

Adding an editor statusbar item

• Example: LayoutExampleEditorStatusBarItem

Replacing the note list item view

• Example: LayoutExampleNoteListItemView

Inkdrop uses a custom component registered as 'CustomNoteListItemView' in the component registry. To register your component as custom note list item view:

inkdrop.components.registerClass(
  LayoutExampleNoteListItemView,
  'CustomNoteListItemView'
)

Don't forget to unregister it when your plugin is deactivated:

inkdrop.components.deleteClass(
  LayoutExampleNoteListItemView.default,
  'CustomNoteListItemView'
)