Skip to content
This repository has been archived by the owner on Jun 26, 2020. It is now read-only.

Introduce the widget toolbar repository #54

Merged
merged 27 commits into from
Sep 20, 2018
Merged

Introduce the widget toolbar repository #54

merged 27 commits into from
Sep 20, 2018

Conversation

ma2ciek
Copy link
Contributor

@ma2ciek ma2ciek commented Sep 18, 2018

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:

@coveralls
Copy link

coveralls commented Sep 18, 2018

Coverage Status

Coverage remained the same at 100.0% when pulling 031e370 on t/ckeditor5-ui/442 into 74ed902 on master.

* }
* }
*/
export default class WidgetToolbar extends Plugin {
Copy link

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.

import BalloonPanelView from '@ckeditor/ckeditor5-ui/src/panel/balloon/balloonpanelview';
import { isWidget } from './utils';

const defaultBalloonClassName = 'ck-toolbar-container';
Copy link

@pjasiun pjasiun Sep 19, 2018

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.

Copy link
Member

@Reinmar Reinmar left a 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.

*
* @param {String} toolbarId Toolbar identificator.
*/
deregister( toolbarId ) {
Copy link

@pjasiun pjasiun Sep 19, 2018

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.

Copy link
Contributor Author

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.

Copy link
Member

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.

@ma2ciek
Copy link
Contributor Author

ma2ciek commented Sep 19, 2018

whenVisible sounds wrong. Like: "do this something when the toolbar is visible". If anything it should be visibleWhen (like we discussed in ckeditor/ckeditor5-ui#442 (comment)) or showWhen.

Right, my bad. I reverted it to the correct form 👍

} );
} );

describe( 'deregister', () => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

deregister()

} );
} );

describe( 'isRegistered', () => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

isRegistered()

@ma2ciek ma2ciek changed the title Introduce a factory for widget toolbars Introduce the widget toolbar repository Sep 19, 2018
view: toolbar.view,
position: getBalloonPositionData( this.editor ),
balloonClassName: toolbar.balloonClassName,
} );
Copy link

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

Copy link

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.

Copy link
Contributor Author

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 ) )

Copy link
Contributor Author

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.

Copy link

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?

Copy link
Contributor Author

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.

Copy link
Contributor Author

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.

*
* widgetToolbarRepository.add( {
* toolbarItems: editor.config.get( 'image.toolbar' )
* visibleWhen: isImageWidgetSelected
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Need to be updated.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed.

* const editor = this.editor;
* const widgetToolbarRepository = editor.plugins.get( WidgetToolbarRepository );
*
* widgetToolbarRepository.register( {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Missing toolbar name.

* `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
Copy link
Member

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.

import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
import CKEditorError from '@ckeditor/ckeditor5-utils/src/ckeditorerror';

describe( 'WidgetToolbar', () => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Outdated.

Copy link
Member

@Reinmar Reinmar left a 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.


/**
* Widget toolbar repository plugin. A central point for creating widget toolbars. This plugin handles the whole
* toolbar rendering process and exposes concise API.
Copy link
Member

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:

@ma2ciek
Copy link
Contributor Author

ma2ciek commented Sep 19, 2018

I've checked and docs should be fine now.

* const widgetToolbarRepository = editor.plugins.get( WidgetToolbarRepository );
*
* widgetToolbarRepository.register( 'image', {
* toolbarItems: editor.config.get( 'image.toolbar' ),
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe just items?

Copy link
Contributor Author

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.

Copy link

@pjasiun pjasiun Sep 20, 2018

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.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done.


toolbarView.fillFromConfig( toolbarItems, editor.ui.componentFactory );

if ( this._toolbars.has( toolbarId ) ) {
Copy link

@pjasiun pjasiun Sep 19, 2018

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.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Implement a balloon toolbar factory
4 participants