Ui

User interface manipulation and handling

showNotification(name, title, message, sticky)

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

Parameters

Param	Type	Description
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	Required - Optional, default false, if true notification stays till user closes it

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

Param	Type	Description
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

Param	Type	Default	Description
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	"\"light\""	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

Param	Type	Description
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

Param	Type	Default	Description
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

Param	Type	Description
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

Param	Type	Default	Description
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

Param	Type	Description
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

Param	Type	Description
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