diff --git a/docs/how-to-customize-toolbars.md b/docs/how-to-customize-toolbars.md
index 06be7475f..6c7caaed3 100644
--- a/docs/how-to-customize-toolbars.md
+++ b/docs/how-to-customize-toolbars.md
@@ -2,6 +2,34 @@
## How to customize toolbars
+### Understanding Presets
+
+> **Important:** The editor uses two independent types of presets:
+
+1. **Editor Preset** (`MarkdownEditorPreset`) - Defines the set of extensions and functionality available in the WYSIWYG editor. Configured via the `preset` property when initializing the editor.
+ - Available values: `'zero'`, `'commonmark'`, `'default'`, `'yfm'`, `'full'`
+ - Example: `useMarkdownEditor({ preset: 'default' })`
+
+2. **Toolbar Preset** (`ToolbarsPreset`) - Defines which buttons appear in the toolbars and their order.
+ - Configured via the **optional** `toolbarsPreset` property in the `MarkdownEditorView` component
+ - Example: ``
+
+**How toolbar preset is determined:**
+
+- **If `toolbarsPreset` is NOT provided** – automatically uses the toolbar preset matching the editor preset name
+- **If `toolbarsPreset` is provided** – uses your custom toolbar configuration
+
+For example:
+```ts
+// Editor preset is 'default', toolbar preset is also 'default' (automatic)
+const editor = useMarkdownEditor({ preset: 'default' });
+
+
+// Editor preset is 'default', but toolbar preset is custom (override)
+const editor = useMarkdownEditor({ preset: 'default' });
+
+```
+
### Toolbar Types
The editor currently provides six types of toolbars:
@@ -19,7 +47,7 @@ More details can be found in [issue #508](https://github.com/gravity-ui/markdown
Starting from `@gravity-ui/markdown-editor@14.10.2`, all toolbars—except the selection-based and slash-triggered toolbars—are configured using a shared dictionary of items and arrays defining the order of those items.
-Base toolbar configurations are available in the `gravity-ui/markdown-editor` repository:
+Built-in **toolbar presets** are available in the `gravity-ui/markdown-editor` repository:
- [`zero`](https://github.com/gravity-ui/markdown-editor/blob/main/src/modules/toolbars/presets.ts#L109)
- [`commonmark`](https://github.com/gravity-ui/markdown-editor/blob/main/src/modules/toolbars/presets.ts#L128)
@@ -27,6 +55,8 @@ Base toolbar configurations are available in the `gravity-ui/markdown-editor` re
- [`yfm`](https://github.com/gravity-ui/markdown-editor/blob/main/src/modules/toolbars/presets.ts#L384)
- [`full`](https://github.com/gravity-ui/markdown-editor/blob/main/src/modules/toolbars/presets.ts#L517)
+> **Note:** These toolbar presets have the same names as editor presets for convenience. When you don't specify `toolbarsPreset`, the editor automatically selects the toolbar preset matching your editor preset name.
+
### Configuration Details
1. The `items` key contains a shared dictionary used across the four main toolbars.
@@ -36,23 +66,27 @@ Base toolbar configurations are available in the `gravity-ui/markdown-editor` re
### Example Configuration
-The `default` preset defines a shared `items` dictionary, specifies the display order in `orders`, and connects the corresponding extensions in the `extensions` section.
+The `default` **editor preset** defines a set of extensions, while the `default` **toolbar preset** defines the toolbar configuration:
-1. Extension set:
+1. **Editor preset** - Extension set:
[src/presets/default.ts#L10](https://github.com/gravity-ui/markdown-editor/blob/c1a23b649f2f69ad71a49989d66ba4a9224e40af/src/presets/default.ts#L10)
-2. Toolbar items dictionary:
+2. **Toolbar preset** - Toolbar items dictionary:
[src/modules/toolbars/presets.ts#L308](https://github.com/gravity-ui/markdown-editor/blob/c1a23b649f2f69ad71a49989d66ba4a9224e40af/src/modules/toolbars/presets.ts#L308)
-3. Toolbar order definition:
+3. **Toolbar preset** - Toolbar order definition:
[src/modules/toolbars/presets.ts#L316](https://github.com/gravity-ui/markdown-editor/blob/c1a23b649f2f69ad71a49989d66ba4a9224e40af/src/modules/toolbars/presets.ts#L316)
### Customizing the Toolbar
-The library provides a set of predefined presets that cannot be overridden directly. If none of the built-in presets suit your needs, you can define a custom toolbar configuration. Below is an example of how to do that:
+The library provides a set of predefined toolbar presets that cannot be overridden directly. If none of the built-in toolbar presets suit your needs, you can define a custom toolbar configuration. Below is an example of how to do that:
- [Live demo (custom preset)](https://preview.gravity-ui.com/md-editor/?path=/story/extensions-presets--custom)
- [Presets.stories.tsx#L30](https://github.com/gravity-ui/markdown-editor/blob/main/demo/stories/presets/Presets.stories.tsx#L30)
- [presets.ts#L21](https://github.com/gravity-ui/markdown-editor/blob/main/demo/stories/presets/presets.ts#L21)
+#### Step 1: Define your custom toolbar preset
+
+Create a `ToolbarsPreset` object with `items` and `orders`:
+
```ts
export const toolbarPresets: Record = {
custom: {
@@ -89,6 +123,29 @@ export const toolbarPresets: Record = {
};
```
+#### Step 2: Use your custom toolbar preset with the editor
+
+```ts
+import {useMarkdownEditor, MarkdownEditorView} from '@gravity-ui/markdown-editor';
+import {toolbarPresets} from './your-toolbar-presets';
+
+function MyEditor() {
+ // Initialize editor with an editor preset (defines functionality)
+ const editor = useMarkdownEditor({
+ preset: 'default', // or 'zero', 'commonmark', 'yfm', 'full'
+ });
+
+ return (
+
+ );
+}
+```
+
+> **Key point:** By providing `toolbarsPreset`, you override the default toolbar configuration. Without it, the editor would use the built-in `'default'` toolbar preset (matching the editor preset name).
+
### Conditional Toolbar Items
Sometimes you may want to display different sets of toolbar items depending on certain conditions—for example, user permissions. In such cases, you can implement a getter function that returns the appropriate toolbar configuration based on parameters. Example: