UNICEF Material Slate

AddCommentButton

import { AddCommentButton } from '@unicef/material-slate

Toolbar button for adding comments.

The button is disabled on collapse.

ToolbarButton

BoldButton

import { BoldButton } from '@unicef/material-slate

Toolbar button for bold text mark

ToolbarButton

BulletedListButton

import { BulletedListButton } from '@unicef/material-slate

Toolbar button for underlined text mark

ToolbarButton

ButtonSeparator

import { ButtonSeparator } from '@unicef/material-slate

Toolbar button separator.

Displays an horizontal line. Use it for separating groups of buttons.

CodeButton

import { CodeButton } from '@unicef/material-slate

Toolbar button for adding code mono-spaced text mark

ToolbarButton

EndnoteButton

import { EndnoteButton } from '@unicef/material-slate

Toolbar button for adding endnotes

ToolbarButton

ItalicButton

import { ItalicButton } from '@unicef/material-slate

Toolbar button for italic text mark

ToolbarButton

LinkButton

import { LinkButton } from '@unicef/material-slate

Toolbar button for adding links

ToolbarButton

Prop name	Type	Default	Description
`onMouseDown`	func		onMouseDown : disable the simple dialog and let's you add your own dialog And gives the onMouseDown event

NumberedListButton

import { NumberedListButton } from '@unicef/material-slate

Toolbar button for numbered list block

ToolbarButton

StrikethroughButton

import { StrikethroughButton } from '@unicef/material-slate

Toolbar button for strike through text mark

ToolbarButton

import { ToolbarButton } from '@unicef/material-slate

ToolbarButton is the base button for any button on the toolbars. It requires the type of action to perform and the format that will be added.

It displays a tooltip text on hover. If tooltip text is not passed as a prop it will use the capitalized text of the format

Prop name	Type	Default	Description
`format`	string	Required	The string that identifies the format of the block or mark to be added. For example: `bold`, `header1`...
`disableOnCollapse`	bool	`false`	If true, disables the button when there is no text selected or the editor has no focus. Disable a button means that button cannot be clicked. Use either disableOnSelection or disableOnCollapse, but not both.
`disableOnSelection`	bool	`false`	If true, disables the button if there is a text selected on the editor. Disable a button means that the button cannot be clicked. Use either disableOnSelection or disableOnCollapse, but not both.
`disabled`	bool		Unconditionally disables the button Disable a button means that the button cannot be clicked (note it is not the opposite of isActive)
`icon`	object	Shape	Instance a component. The icon that will be displayed. Typically an icon from @material-ui/icons
`isActive`	func		When a button is active it means the button is highlighted. For example, if in current position of the cursor, the text is bold, the bold button should be active. isActive is a function that returns true/false to indicate the status of the mark/block. Set this function if you need to handle anything other than standard mark or blocks.
`onMouseDown`	func		On mouse down event is passed up to the parent with props that can be deconstructed in {editor, event, mark/block}
`placement`	string	`top`	Location where the tooltip will appear. It can be `top`, `bottom`, `left`, `right`. Defaults to top.
`tooltip`	string		Text displayed on the button tooltip. By Default it is the capitalized `format` string. For instance, `bold` is displayed as `Bold`.
`type`	string		Toolbar button has the option of adding to the editor value marks and blocks. `mark` can be added to the editor value when you want to add something like `bold`, `italic`... Marks are rendered into HTML in `renderLeaf` of `MaterialEditable` `block` to be added to the editor `value` when the button is pressed. For example: `header1`, `numbered-list`... `renderElement` of the `RichEditable` component will need to handle the actual conversion from mark to HTML/Component on render time. If you don't want to add a mark or a block do not set the prop or use whatever string. You can perform the action the button triggers using onMouseDown().

UnderlinedButton

import { UnderlinedButton } from '@unicef/material-slate

Toolbar button for underlined text mark

ToolbarButton

CharCounter

import { CharCounter } from '@unicef/material-slate

CharCounter for editor It displays the number characters in the editor

If maxChars = 200, charLength = 90 Ex: 90/200 characters will display in the counter
When maxChars is undefined, charLength = 90 Ex: 90 characters will be displayed Char counter will be displayed with error color, when CharLength exceeds maxChars

Prop name	Type	Default	Description
`maxChars`	number		To display maximum characters in counter - If maxChars = 200, charLength = 90 `Ex: 90/200 characters` will display in the counter - When maxChars is undefined, charLength = 90 `Ex: 90 characters` will be displayed

WordCounter

import { WordCounter } from '@unicef/material-slate

WordCounter for editor It displays the number words, below the editor

If maxWords = 200, wordsLength = 90 Ex: 90/200 words will display in the counter
When maxWords is undefined, wordsLength = 90 Ex: 90 words will be displayed Word counter will be displayed with error color, when wordLength exceeds maxWords

Prop name	Type	Default	Description
`maxWords`	number		To display maximum words in counter - If maxWords = 200, wordsLength = 90 `Ex: 90/200 words` will display in the counter - When maxWords is undefined, wordsLength = 90 `Ex: 90 words` will be displayed

CommentElement

import { CommentElement } from '@unicef/material-slate

Renders a Comment. 1. Adds blueish background to the text the comment wraps 2. On hover displays the comment.

If onClick is passed, it is called if the text wrapped by the comment is clicked.

Expects the element object passed as prop to have element.data.body to display the comment text.

EndnoteElement

import { EndnoteElement } from '@unicef/material-slate

Displays a super index text with the index number of the endnote. A tooltip with the content of the endnote is displayed if the user hovers the endnote.

Expects the element prop to have element.data.value the text of the endnote (string) and element.data.index the index number fo the endnote.

If onClick prop is set it is called if user clicks the tex

SimpleDialog

import { SimpleDialog } from '@unicef/material-slate

Simple dialog box with a text field and two buttons Cancel and Save. Three props need to be set:

onCancel called when the cancel button is pressed ,
onSave called when the save button is pressed
open, boolean that indicates if the dialog is displayed (true) or not (false)

Prop name	Type	Default	Description
`onCancel`	func	Required	Called whe the Cancel button is pressed
`onSave`	func	Required	Called when the save button is pressed
`open`	bool	Required	If it is true, it displays the dialog window.
`defaultValue`	string		Default value displayed on the textfield.
`format`	string		Format of the element to be added/edited. For example: bold, italic, comment, link, endnote Just required if you use the same dialog for different type of nodes.
`label`	string		Label of the textfield
`title`	string		Title of the dialog window

HoveringToolbar

import { HoveringToolbar } from '@unicef/material-slate

A hovering toolbar that is, a toolbar that appears over a selected text, and only when there is a selection.

If no children are provided it displays the following buttons: Bold, italic, underlined, strike through and code.

Children will typically be ToolbarButton.

import { Toolbar } from '@unicef/material-slate

Toolbar that appears on the top of the editor.

It accepts any content as children. If no children are set it displays by default the following buttons: Bold, italic, underline, strike through, code, bulleted list and numbered list

MaterialEditable

import { MaterialEditable } from '@unicef/material-slate

Wrapper of Slate Editable

Prop name	Type	Default	Description
`className`	string		To style and override the existing class
`hotkeys`	object	Shape	Additional hotkeys to be added other than default. Object of the form `{'mod+k': {type: 'mark', value: 'italic'} defaultHotkeys can be disallowed by passing hotkeys as null
`onHotKey`	func		Event tht will be triggered in case a hotkey is detected It has one single argument that can be deconstructed in `{event, editor, hotkey, pressedKeys, hotkeys}`
`placeholder`	string	`Type some text...`	Text to display when there are no contents on the editor. Default" "Type some text..."
`renderElement`	func		Called when an element needs to be rendered
`renderLeaf`	func		Called when a leaf needs to be rendered

MaterialSlate

import { MaterialSlate } from '@unicef/material-slate

Rich Slate

It is the provider of the useSlate hook.

Prop name	Type	Default	Description
`editor`	object	Required	editor created using createRichEditor()
`value`	object[]	Required	content to display in the editor
`className`	string		class to override and style the slate
`focusClassName`	string		className to apply when the editor has focus
`onChange`	func		Called every time there is a change on the value

MaterialEditor

import { MaterialEditor } from '@unicef/material-slate