Skip to main content

Notebook

The notebook widget focuses on usability and is designed to be as simple as possible to bring a familiar editing experience to regular users. It is based on Tiptap.dev and supports most of its features.

Editing​

When the permissions of the user allows it, you can enter the editing of the text by clicking the following button in the top right.

You can then decide to save your changes or cancel them to exit editing, using the buttons placed in the same location.

Notebook toolbar functions​

The notebook offers a variaty of functions to edit the text and more.

Common text formatting​

FunctionDescription
BoldMakes the selected text bold
ItalicTilts the selected text
StrikethroughPuts a bar through the selected text
Color textChanges the color of the text
Colored highlight textHighlights the text with a chosen color
CodeElevates the text to a box
Clear formattingErases any of the preceding function's effects on the selected text

Heading​

Choose a heading size for the line, making the text bigger. Working like titles and sub-titles.

Text Alignement​

Select the alignement on the line. Left, center or right.

Misc functions​

Blockquote​

Puts the current line in a quoting block.

Horizontal line​

Adds a line that goes from the far right to the far left as a separator.

Lists​

Bullet lists​

Simple list with a dot preceding each element.

Ordered lists​

List with numbers preceding each element.

Check lists​

List with a checkbox on each element.

Indentation changes​

When you are currently in a list of any sort, the last 2 buttons will appear and will allow you to change the indentation of the current list item.

Insert functions​

The first buttons is to insert a link, or edit an existing link. The link will be applied on the selected text.

Pasting a link directly into the text will automatically put the link anchor on it too.

The second button will remove the link while leaving the text intact.

This is the modal for the link, The little button in the textbox can be clicked to make the link open in a new tab.

Image controls​

Source​

You can use a normal link to an image or you can also use locally stored images.

Width​

The aspect ratio will always be respected, so only the width field is necessary. You can provide a value in a plain number or you can also use percents to have your image size dynamically change on different screens.

Table​

This last control allows you to add a table, for which you can determine the number of columns and row before inserting it.

Clicking that button while in a table will delete it.

Table controls​

While in a table, further controls will appear to help edit the table.

The first one will color the background of the selected cells.

The second will merge selected cells.

All the following ones are for editing the wize of the table:

  • Add column on the right
  • Add column on the left
  • Delete Column
  • Add row on top
  • Add row below
  • Delete Row

Adding the widget​

Please check out our documentation on how to add a widget.

Configuration​

Both media requests widget have the same configurations.

ConfigurationDescriptionValuesDefault Value
Show the toolbar to help you write markdownUpon editing, enables a toolbar at the top with document editing functions.yes / noyes
Allow check in read only modeAllows the ability to check the boxes from checklists outside of editingyes / noyes