Editor Configuration
Contents
Editor Configuration#
You can customize how volto-slate
editor behaves and its features.
These are controlled from the config.js
settings.
slate.toolbarButtons
#
This setting contains the default enabled Slate inlineToolbar
buttons.
config.settings.slate.toolbarButtons = [
'bold',
'italic',
'strikethrough',
'link',
...
];
slate.buttons
#
The Slate toolbar button components.
settings.slate.buttons = [
...settings.slate.buttons,
'block-quote': <BlockButton ... />
];
slate.expandedToolbarButtons
#
The toolbar buttons rendered in ExpandedToolbar
.
slate.expandedToolbarButtons = [...(slate.expandedToolbarButtons || []), LINK];
slate.contextToolbarButtons
#
These components are rendered in the toolbar on demand, as configured by plugins for a given context or value.
By default, it takes the value of toolbarButtonIcon
.
slate.contextToolbarButtons = [
...(state.contextToolbarButtons || []),
(props) => <ToolBarButtonComponent /> || null,
];
slate.elementToolbarButtons
#
Each Element
node type available in the editor can be configured to have specific toolbar buttons shown above the element of that type when it contains the selection.
slate.elementToolbarButtons = [
...(slate.elementToolbarButtons || []),
(props) => <ElementButtonComponent /> || null,
];
slate.persistentHelpers
#
A set of components that are always rendered, unlike the button variety. They make it possible to orchestrate form-based editing of components.
slate.persistentHelpers = [
...(slate.persistentHelpers || []),
(props) => <MyPersistantComponent /> || null,
];
slate.extensions
#
The Slate editor is "decorated" with the capabilities from this list.
slate.extensions = [
...(slate.extensions || []),
insertData,
isInline,
normalizeNode,
];
slate.hotkeys
#
Shortcut keys pertaining to a feature from a plugin or behavior.
slate.hotkeys = {
...slate.hotkeys,
'mod+b': { format: 'strong', type: 'inline' },
//more hotkeys, including from plugins!
};
slate.keyDownHandlers
#
Handle keyDown
events for the Slate editor.
slate.keyDownHandlers = { 'mod+b': () => {} };
slate.elements
#
Render View
and Edit
components for a particular Slate element that consumes deserialized or normalized data.
slate.elements = {
...(slate.elements || {}),
h1: ({ attributes, children }) => <h1 {...attributes}>{children}</h1>,
element: (props) => <ElementComponent {...props} mode="edit" />,
};
slate.htmlTagsToSlate
#
Transform HTML element tags to a Slate-compatible JSON structure.
slate.htmlTagsToSlate = {
...slate.htmlTagsToSlate,
B: bTagDeserializer,
element: elementDeserializer,
...
};
slate.nodeTypesToHighlight
#
Adds "highlight" decoration in the editor.
Used by the highlightByType
method.
slate.nodeTypesToHighlight.push(elementType);
slate.runtimeDecorators
#
These are "runtime" decorator functions. These are transient decorations that are applied in the editor. They are not persisted in the final value, so they are useful, for example, to highlight search results or a certain type of node.
slate.runtimeDecorators = [([node, path], ranges) => ranges];
slate.useLinkedHeadings
#
The setting slate.useLinkedHeadings
controls whether volto-slate
creates anchors for headings, such as h1
and h2
, in the editor.
The default setting is true
.
You can opt out of this feature by setting its value to false
.
slate.useLinkedHeadings = false
Changed in version Volto: 17.0.0-alpha.28
This feature is still enabled by default, but has a condition to show only for authenticated users.
blocks.initialBlocksFocus
#
Determine which type of block should be selected on edit.
blocks.initialBlocksFocus === {
<content type name>: <block type>
};
Disable selection of any block and prevent scrolling to a block:
blocks.initialBlocksFocus === null;