[Drag & drop + Balloon block, intro] Change the default icon

[Witoso]

We plan to change the default icon of the Balloon block editor. The new icon will be more recognizable as a drag handle.

• The default one should be ⠿, 
• On hover, add information, something along “Drag to move”.
• It should be configurable.

Internal figma.

If you'd like to see this improvement implemented, add a 👍 reaction to this post.

[Witoso]

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

☝️ possible configuration approach.

[pszczesniak]

Got a questions about the button of the Balloon block editor:

• should the label (tooltip shown on hover) also mention about edit possibility? for example Click to edit block / drag to move or something similar, cause now it will covers two functionality at once,
• what kind of cursor should it be on hover? Should it stay as default as it is now or maybe change it into grab?

cc @dagdzi , @oleq

WDYT about multi-line tooltip?

[pszczesniak]

@oleq could you explain why here 👇

 https://github.com/ckeditor/ckeditor5/blob/52231a24d8e2721e91d589d58cdf921557660899/packages/ckeditor5-ui/src/toolbar/toolbarview.ts#L50:L58 we got this list cropped instead of using all existing icons?

We want to use this icon list as a predefined list for configuration/customizing the icon of Balloon Block Editor toolbar.

[dagdzi]

@pszczesniak

I think in this case displaying information about two functionalities in the tooltip is better than displaying only one of them (because when we have information only about one functionality it kind of suggests that the other functionality is not present).

In the case of the cursor, maybe the solution is to change it to grab cursor only when grabbing and otherwise have default one?

[pszczesniak]

In the case of the cursor, maybe the solution is to change it to grab cursor only when grabbing and otherwise have default one?

@dagdzi was thinking about same thing also, but this will be moved as a follow-up i think 🙂 Thank You!

[oleq]

https://github.com/ckeditor/ckeditor5/blob/52231a24d8e2721e91d589d58cdf921557660899/packages/ckeditor5-ui/src/toolbar/toolbarview.ts#L50:L58 we got this list cropped instead of using all existing icons?

Because then, all production builds of all editors would get bloated with dozens of bulky icons that would only be used by like 5% of users and increase the size of distributed packages by many kilobytes. It's a usability vs. size kind of trade-off.

What we could do is make all built-in icons (all icons in a specific production build) available at some central point so at least they could be re-used across features. If you think this is a good idea, please vote for #12496.

[godai78]

@Witoso - is this configurable they way you put it?

Also, I believe the configuration part should rather be added here: https://ckeditor.com/docs/ckeditor5/latest/features/toolbar/blocktoolbar.html#configuration