Toolbar‐Items

Toolbar-Items

ToolbarItems are a central key in SypEditor. Initially they are ConfigurationEntrys and are later rendered into ToolbarItems, which are used internally. This section should give a short overview of all types of ToolbarItems, that are available. Please note: There might be more ToolbarItems via extensions, that are added. The section Included extensions will only list the shipped extensions within syp-editor, which are not loaded out of the box.

Default ToolbarItems

The default ToolbarItems, can be used without loading a single extension. They are the central functionality of syp-editor and are therefor automatically loaded.

SypEditorButton

Type: button

This element is a general button-element. When clicked it will trigger a specific command with arguments. Its active-state is determined when the editor-instance consider its parameter name as active.

Parameters:

Parameter	Type	Description
text	string|null	Text inserted into the button
icon	string|null	Icon name for icon to be inserted into button, needs iconProvider in addition
iconProvider	string|null	Provider for icon
iconAttributes	any|null	Additional attributes for the icon provider when generating the icon
name	string|null	Name of node for checking the active-state, if it should get checked. You'll find the name of a node in its specific documentation in the example for isActive(), e.g. for links it can be found here and link would be the name
attributes	any|null	An additional set of attributes, which can be handed over to the command for checking the active-state. Useful for checks like the checks of headings and their respective levels. In the case of heading attributes would be { level: X }
command	string	Command on editor-instance that should be triggered when clicking. It will run the command on a chain after editor.chain().focus(). The command could be e.g. toggleBold for setting bold, see its documentation here
argument	any|null	Additional argument for the command, when run. This is useful for commands like headings. Here the command would need an array like for its check with the level: { level: X }
disable	boolean, default: false	Option if the button should get disabled when the item is not active. Useful for commands like redo/undo etc.

Example:

({
  type: 'button',
  icon: 'h4',
  iconProvider: 'fontawesome5',
  text: 'Heading 4',
  name: 'heading',
  attributes: { level: 4 },
  command: 'toggleHeading',
  argument: { level: 4 }
} as ButtonConfigurationEntry)

Note: With pure Javascript you won't need to cast your entries and can use just json-objects.

SypEditorDropdown

Type: dropdown

This element is a dropdown-element. When clicked it will collapse and show the item within it. You can only put buttons or non collapseable items into it. Dropdown-elements therefore can't contain other dropdowns or groups.

Parameters:

Parameter	Type	Description
text	string|null	Text inserted into the dropdown collapse button
icon	string|null	Icon name for icon to be inserted into the dropdown collapse button, needs iconProvider in addition
iconProvider	string|null	Provider for icon
iconAttributes	any|null	Additional attributes for the icon provider when generating the icon
elements	ConfigurationEntry[]	List with ConfigurationEntries, which will be displayed within the collapsed dropdown.

Example:

new DropdownConfigurationEntry(
  [
    ({
      type: 'button',
      icon: 'h1',
      iconProvider: 'fontawesome5',
      text: 'Heading 1',
      name: 'heading',
      attributes: { level: 1 },
      command: 'toggleHeading',
      argument: { level: 1 }
    } as ButtonConfigurationEntry),
    ({
      type: 'button',
      icon: 'h2',
      iconProvider: 'fontawesome5',
      text: 'Heading 2',
      name: 'heading',
      attributes: { level: 2 },
      command: 'toggleHeading',
      argument: { level: 2 }
    } as ButtonConfigurationEntry),
    ({
      type: 'button',
      icon: 'h3',
      iconProvider: 'fontawesome5',
      text: 'Heading 3',
      name: 'heading',
      attributes: { level: 3 },
      command: 'toggleHeading',
      argument: { level: 3 }
    } as ButtonConfigurationEntry),
  ],
  null,
  'heading',
  'fontawesome5'
)

Note: With pure Javascript you won't need to cast your entries and can use just json-objects.

SypEditorGroup

Type: group

This element is a group-element and combines multiple elements into a group. Group elements will get rendered via css as a group and wont break apart in the responsive design. If the last element would overlap all elements in the group would go onto the next line.

Parameters:

Parameter	Type	Description
elements	ConfigurationEntry[]	List with ConfigurationEntries, which will be displayed within the group. Groups can't contain other groups.

Example:

new GroupConfigurationEntry(
  [
    ({
      type: 'button',
      icon: 'undo',
      iconProvider: 'fontawesome5',
      name: 'undo',
      command: 'undo',
      disable: true
    } as ButtonConfigurationEntry),
    ({
      type: 'button',
      icon: 'redo',
      iconProvider: 'fontawesome5',
      name: 'redo',
      command: 'redo',
      disable: true
    } as ButtonConfigurationEntry)
  ]
)

Note: With pure Javascript you won't need to cast your entries and can use just json-objects.

SypEditorSeparator

Type: group

This element is a divider-element and just adds a vertical line. It can be used between groups to divide them from each other. The separator can't handle any actions.

Example:

{
  type: 'separator'
}

Included Extensions

SypEditorLink

Type: link

This elements add a dropout with an input field for a link and a delete-button in this dropout to remove the link. This extension is very focused on adding specifically links and is therefore just included via the SypEditorLinkExtension.

To include the extension you need to add following to the syp-editor setup:

import { SypEditorLinkExtension } from '@syntaxphoenix/syp-editor'

const sypEditor = new SypEditor(
  element,
  tiptapEditor,
  {
    elementExtensions: [
      new SypEditorLinkExtension()
    ],
    ...
  }
);

Parameters:

Parameter	Type	Description
text	string|null	Text inserted into the collapse-button for the dropout
icon	string|null	Icon name for icon to be inserted into the collapse-button for the dropout, needs iconProvider in addition
iconProvider	string|null	Provider for icon
iconAttributes	any|null	Additional attributes for the icon provider when generating the icon
iconSubmitBtn	string|null	Icon name for icon to be inserted into the submit-button within dropout, needs iconProvider in addition
iconProviderSubmitBtn	string|null	Provider for icon of the submit-button
iconAttributesSubmitBtn	any|null	Additional attributes for the icon provider when generating the icon for the submit-button
iconDeleteBtn	string|null	Icon name for icon to be inserted into the delete-button within dropout, needs iconProvider in addition
iconProviderDeleteBtn	string|null	Provider for icon of the delete-button
iconAttributesDeleteBtn	any|null	Additional attributes for the icon provider when generating the icon for the delete-button

Example:

({
  type: 'link',
  icon: 'link',
  iconProvider: 'fontawesome5',
  iconSubmitBtn: 'paper-plane',
  iconProviderSubmitBtn: 'fontawesome5',
  iconDeleteBtn: 'trash',
  iconProviderDeleteBtn: 'fontawesome5'
} as LinkConfigurationEntry)

Note: With pure Javascript you won't need to cast your entries and can use just json-objects.