Skip to content

Commit

Permalink
Docs: updating block toolbar guide.
Browse files Browse the repository at this point in the history
  • Loading branch information
godai78 committed Sep 26, 2023
1 parent 93c8bd0 commit cf039bf
Show file tree
Hide file tree
Showing 2 changed files with 15 additions and 2 deletions.
2 changes: 1 addition & 1 deletion docs/updating/update-to-40.md
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ Last but not least, content styles have been updated with this release, which me
We have changed the default {@link features/blocktoolbar Balloon Block editor toolbar} indicator icon from the pilcrow icon (``) to the braille pattern dots icon (``). The new icon better corresponds to the dual function of the indicator, which may be used to both invoke the balloon toolbar and to drag to content block around.

While `` is now a default, the icon can still be configured by the integrator, for example:
<!-- add this to balloon toolbar config guide-->

```js
blockToolbar: {
items: [
Expand Down
15 changes: 14 additions & 1 deletion packages/ckeditor5-ui/docs/features/blocktoolbar.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ The block toolbar plugin provides an additional [configurable](#configuration) t

## Additional feature information

To access the block toolbar, you need to click the button with a paragraph mark (or pilcrow &ndash; &#182;) on the left-hand side of the content area (the gutter). The button appears next to the selected block element (e.g. a paragraph), following the caret as the user edits the content and navigates the document.
To access the block toolbar, you need to click the button with braille pattern dots icon (``) on the left-hand side of the content area (the gutter). The button appears next to the selected block element (e.g. a paragraph), following the caret as the user edits the content and navigates the document.

The block toolbar complements the {@link installation/getting-started/predefined-builds#balloon-editor balloon editor} where it falls short, for example when you must insert some content (like an image), but the selection is collapsed, so you cannot access the toolbar. You can read more about it in the {@link installation/getting-started/predefined-builds#balloon-block-editor balloon block editor overview}.

Expand Down Expand Up @@ -51,6 +51,19 @@ If you plan to run the editor in a right–to–left (RTL) language, keep in min
}
```

Before the v40.0.0 release of CKEditor 5, the block toolbar used the pilcrow icon (¶) as a placeholder. This was changed to braille pattern dots icon (``) as a default. If you want to use a different icon, you can configure it easily, for example:

```js
blockToolbar: {
items: [
'bold',
'italic',
'link'
],
icon: 'pilcrow' // or SVG.
},
```

## Installation

<info-box hint>
Expand Down

0 comments on commit cf039bf

Please sign in to comment.