-
Notifications
You must be signed in to change notification settings - Fork 6
Introduce the widget toolbar repository #54
Conversation
a6dd351
to
c250edf
Compare
e075c16
to
39eba17
Compare
src/widgettoolbar.js
Outdated
* } | ||
* } | ||
*/ | ||
export default class WidgetToolbar extends Plugin { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Agree with @Reinmar that WidgetToolbarRepository
will be better.
src/widgettoolbar.js
Outdated
import BalloonPanelView from '@ckeditor/ckeditor5-ui/src/panel/balloon/balloonpanelview'; | ||
import { isWidget } from './utils'; | ||
|
||
const defaultBalloonClassName = 'ck-toolbar-container'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I would not define it as here. Just use a string in the method, especially since it is used once. KISS.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
whenVisible
sounds wrong. Like: "do this something when the toolbar is visible". If anything it should be visibleWhen
(like we discussed in https://github.com/ckeditor/ckeditor5-ui/issues/442#issuecomment-422719810) or showWhen
.
src/widgettoolbarrepository.js
Outdated
* | ||
* @param {String} toolbarId Toolbar identificator. | ||
*/ | ||
deregister( toolbarId ) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It should be deregister
or unregister
? Also, I think we do not need this method.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I was thinking about removing the toolbar on the destroy()
method. But it's questionable.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I also think we could remove these methods (deregister()
and isRegistered()
) for now. Unless any of them are used somewhere.
Right, my bad. I reverted it to the correct form 👍 |
tests/widgettoolbarrepository.js
Outdated
} ); | ||
} ); | ||
|
||
describe( 'deregister', () => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
deregister()
tests/widgettoolbarrepository.js
Outdated
} ); | ||
} ); | ||
|
||
describe( 'isRegistered', () => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
isRegistered()
view: toolbar.view, | ||
position: getBalloonPositionData( this.editor ), | ||
balloonClassName: toolbar.balloonClassName, | ||
} ); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I am not sure, but if the toolbar was already added to the balloon, shouldn't we just move it on top instead of adding it again? //cc @oleq
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I see that contextual balloon throw when you add the same view twice (https://github.com/ckeditor/ckeditor5-ui/blob/85920b547c5d20ab4fcc1d495b19498c23a692d8/src/panel/balloon/contextualballoon.js#L126). I think it will be saver to remove the view first in such case (if the view was already added but is not on the top) and then re-add it.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
So that's why there is else if ( !this._balloon.hasView( toolbar.view ) )
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
But maybe I don't see smth.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
So that's why there is else if ( !this._balloon.hasView( toolbar.view ) )
It means that if the view was already added but is not on top nothing happen (including no error). Is it correct?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
AFAIK yes 😄
We should reposition or show the view only if it's the most top view in the stack.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I've added a description of this method.
src/widgettoolbarrepository.js
Outdated
* | ||
* widgetToolbarRepository.add( { | ||
* toolbarItems: editor.config.get( 'image.toolbar' ) | ||
* visibleWhen: isImageWidgetSelected |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Need to be updated.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Fixed.
src/widgettoolbarrepository.js
Outdated
* const editor = this.editor; | ||
* const widgetToolbarRepository = editor.plugins.get( WidgetToolbarRepository ); | ||
* | ||
* widgetToolbarRepository.register( { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Missing toolbar name.
src/widgettoolbarrepository.js
Outdated
* `visibleWhen` function. Toolbar items are gathered from `toolbarItems` array. | ||
* The balloon's CSS class is by default `ck-toolbar-container` and may be override with the `balloonClassName` option. | ||
* | ||
* Note: This method should be called in the {@link module:core/plugin/Plugin~afterInit} to make sure that plugins for toolbar items |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Note: This method should be called in the {@link module:core/plugin/Plugin#afterInit `Plugin#afterInit()`} callback (or later) to make sure that the given toolbar items were already registered by other plugins.
tests/widgettoolbarrepository.js
Outdated
import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils'; | ||
import CKEditorError from '@ckeditor/ckeditor5-utils/src/ckeditorerror'; | ||
|
||
describe( 'WidgetToolbar', () => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Outdated.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Also, I miss a link to this plugin in docs/api/widget.md
.
Besides the above mentioned core functionalities, this package implements the following utils:
* The {@link module:widget/widgettoolbarrepository~WidgetToolbarRepository `WidgetToolbarRepository`} plugin which exposes a nice API for registering widget toolbars.
* A couple of helper functions for managing widgets in the {@link module:widget/utils `@ckeditor/ckeditor5-widget/utils`} module.
src/widgettoolbarrepository.js
Outdated
|
||
/** | ||
* Widget toolbar repository plugin. A central point for creating widget toolbars. This plugin handles the whole | ||
* toolbar rendering process and exposes concise API. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Widget toolbar repository plugin. A central point for registering widget toolbars. This plugin handles the whole
toolbar rendering process and exposes a concise API.
To add a toolbar for your widget use the {@link module:widget/widgettoolbarrepository~WidgetToolbarRepository#register `WidgetToolbarRepository#register()`} method.
The following example comes from the {@link module:image/imagetoolbar~ImageToolbar} plugin:
e864de8
to
e2cc5fc
Compare
I've checked and docs should be fine now. |
src/widgettoolbarrepository.js
Outdated
* const widgetToolbarRepository = editor.plugins.get( WidgetToolbarRepository ); | ||
* | ||
* widgetToolbarRepository.register( 'image', { | ||
* toolbarItems: editor.config.get( 'image.toolbar' ), |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Maybe just items
?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We can change it. I'm ok with both names.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Then change it. It is shorter and have the same meaning in this context.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done.
src/widgettoolbarrepository.js
Outdated
|
||
toolbarView.fillFromConfig( toolbarItems, editor.ui.componentFactory ); | ||
|
||
if ( this._toolbars.has( toolbarId ) ) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This check could be moved to the beginning of this method.
Suggested merge commit message (convention)
Feature: Introduced the widget toolbar repository. Closes ckeditor/ckeditor5#5486.
Additional information
After that change the following PRs can be merged: