Ui

showNotification(name, title, message, [sticky], [level])

Show a notification, if Writer is used inside of Dashboard, the notification will be elevated and displayed through the Dashboard notification instead

Parameters

ParamTypeDefaultDescription

name

string

Required - The plugin ID of the plugin that sent the notification

title

string

Required - Notification title

message

string

Required - Notification message

sticky

boolean

false

Optional, default false, if true notification stays till user closes it

level

string

""info""

Optional, default info. success

Example

api.ui.showNotification(
   'plugin.id',
   'An insightful title',
   'And descriptive text',
   false
)

showArticleMessage(origin, id, options)

Display a message with static positioning at the top of the article. Can disallow closing, and can include buttons with callback functions.

Parameters

ParamTypeDescription

origin

string

Required - The plugin ID of the plugin that sent the article message

id

string

Required - Article message id

options

object

Required - Message options

options.message

string

Required - Article message message

options.allowClose

boolean

Required - Optional, default true, Allow the message to be closed

options.buttons

Array.<object>

Required - Optional - Array of button objects {label: string, onClick: function}

Example

api.ui.showArticleMessage('some.plugin.io', 'my-message-id', {
    message: 'This is important',
    buttons: [
        {
            label: 'Say hello',
            onClick: () => {
                // Do something
            }
        }
    ]
})

showDialog(contentComponent, props, options, [focusPrimary], [theme], [takeover], [cssClass], [clearSelection], [disableEscKey], [heading])

Display a dialog with the specified content.

Supported dialog actions:

`dialog:enablePrimaryBtn`Enables the primary button`dialog:disablePrimaryBtn`Disables the primary button

See: component/dialogComponent

Parameters

ParamTypeDefaultDescription

contentComponent

*

Required - A substance component or tool that will be rendered inside the dialog

props

Object

Required - A object that will be passed as props to contentComponent

options

Component.DialogComponent.Options

Required - Options passed to dialog

options.title

string

Dialog title

options.primary

string | boolean

Primary button caption, default is i18n representation of Ok, set to false to disable button

options.secondary

string | boolean

Secondary button caption, default is i18n representation of Cancel, set to false to disable button

options.tertiary

Array.<object>

Third button

tertiary.caption

string

Required - Button label

tertiary.callback

function

Callback when clicking button

focusPrimary

boolean

true

Focus on primary button on rendering

theme

string

"&quot;light&quot;"

Choose theme for dialog. Dark or light. Dark with light overlay and vice versa

takeover

boolean

false

When set to true got a full width and height modal

cssClass

string

Add css class to be append to modal for external styling

clearSelection

boolean

true

Remove cursor and selection in the writing area when modal is presented

disableEscKey

boolean

false

Disabled ESC key to close modal

heading

string

Apply additional heading. Should be handled in the compontent if it can.

Example

import {api} from 'writer'
import {ComponentShownInDialog} from './ComponentShownInDialog'

api.ui.showDialog(
  ComponentShownInDialog,
  {
      src: img.src,
      width: this.props.node.width,
      height: this.props.node.height,
      crops: this.props.node.crops,
      callback: this.setSoftcropData.bind(this)
  },
  {
      title: "This is my title for the dialog",
      primary: 'Save',
      secondary: 'Close',
      tertiary: [{
         caption: 'Remove',
         callback: () => {
             // Do something
         }
      }],
      takeover: true,
      theme: 'dark',
      cssClass: 'extra-css-class'
  }
)

showAuthDialog(authComponent, authProps, authOptions)

Display a Auth dialog (401/402) above any other dialogs.

Parameters

ParamTypeDescription

authComponent

*

Required - A substance component or tool that will be rendered inside the dialog

authProps

Object

Required - A object that will be passed as props to contentComponent

authOptions

Component.DialogComponent.Options

Required - Options passed to dialog

authOptions.title

string

Dialog title

authOptions.primary

string | boolean

Primary button caption, default is i18n representation of Ok, set to false to disable button

authOptions.secondary

string | boolean

Secondary button caption, default is i18n representation of Cancel, set to false to disable button

authOptions.tertiary

string | Object

Third button

authOptions.center

boolean

As default the dialog is centered over the editor area, set to true to center over the full writer

showMessageDialog(messages, cbContinue, cbCancel, [heading], [showTimestamp])

Display a number of messages and different options depending on the severity on each message. Messages can be of type info, warning or error.

If there are error messages the user will not be able to continue. If there are warnings the user can continue but suggested to cancel. If only info messages only a continue is possible.

Parameters

ParamTypeDefaultDescription

messages

array

Required - An array of message objects. Each object have the properties type (string: info, warning, error), plugin (string: the plugin name) and message (string)

cbContinue

function

Required - Callback function for when the user press continue

cbCancel

function

Required - Callback function for when the user press cancel

heading

string

Additional text to display above the messages

showTimestamp

boolean

true

Set to false to hide timestamp on error messages, not applicable on any other level

Example

import {api} from 'writer'

api.ui.showMessageDialog(
    [{
        type: 'info',
        message: 'Hello'
    }],
    () => {
        console.log('The user clicked continue!')
    },
    () => {
        console.warn('The user clicked cancel')
    }
)

showConfirmDialog(title, message, buttons)

Display a simple confirmation dialog

Parameters

ParamTypeDescription

title

string

Required - dialog heading

message

string

Required - dialog message

buttons

object

Required - object with primary/secondary objects for button specifics

Example

api.ui.showConfirmDialog(
     'Title-string',
     'Message string',
     {
         primary: {
             label: this.getLabel('Ok'),
             callback: () => { logic }
         },
         secondary: {
             label: this.getLabel('Cancel'),
             callback: () => { logic }
         }
     }
)

showBottomPanel(pluginName, component, [props], [sticky])

Renders a supplied component in a screen-wide panel which smoothly animates from the bottom of the screen.

Parameters

ParamTypeDefaultDescription

pluginName

string

Required - Name of plugin that called the function

component

string

Required - Component class to be rendered in the Panel

props

object

Object which is sent as props to the component class. Defaults to empty object.

sticky

boolean

false

Set to true to prevent Panel from closing when clicking outside of the Panel. Defaults to false.

Example

api.ui.showBottomPanel(
    'im-mycoolplugin',
    MyCoolComponent,
    {
        propName: 'propvalue
    },
    true
)

showOverlay(pluginName, component, [props])

Renders a supplied component in a "fullscreen" overlay.

Parameters

ParamTypeDescription

pluginName

string

Required - Name of plugin that called the function

component

string

Required - Component class to be rendered in the Overlay

props

object

Object which is sent as props to the component class. Defaults to empty object.

Example

api.ui.showOverlay(
    'im-mycoolplugin',
    MyCoolComponent,
    {
        propName: 'propvalue
    }
)

hideOverlay(pluginName)

Hides the overlay. Useful to call this in a component that rendered as and overlay component.

Parameters

ParamTypeDescription

pluginName

string

Required - Name of plugin that called the function

Example

api.ui.hideOverlay('im-mycoolplugin')

getComponent()

Deprecated

Deprecated, use import {UIComponent} from 'writer' statements for UIComponents instead

Last updated