@ckeditor/ckeditor5-editor-inline
Advanced tools
@ckeditor/ckeditor5-editor-inline - npm Package Compare versions
Comparing version 17.0.0 to 18.0.0
| Changelog | ||
| ========= | ||
| ## [18.0.0](https://github.com/ckeditor/ckeditor5-editor-inline/compare/v17.0.0...v18.0.0) (2020-03-19) | ||
| ### MAJOR BREAKING CHANGES | ||
| * From now on, the inline toolbar groups overflowing items by default. This behavior can be disabled by setting the [`config.toolbar.shouldNotGroupWhenFull`](https://ckeditor.com/docs/ckeditor5/latest/api/module_ui_toolbar_toolbarview-ToolbarOptions.html#member-shouldGroupWhenFull) configuration option to `true`. | ||
| ### Features | ||
| * The inline editor toolbar should group items when its width exceeds the editable’s width (see [ckeditor/ckeditor5#5597](https://github.com/ckeditor/ckeditor5/issues/5597)). ([1c5746c](https://github.com/ckeditor/ckeditor5-editor-inline/commit/1c5746c)) | ||
| ## [17.0.0](https://github.com/ckeditor/ckeditor5-editor-inline/compare/v16.0.0...v17.0.0) (2020-02-19) | ||
@@ -5,0 +16,0 @@ |
| { | ||
| "name": "@ckeditor/ckeditor5-editor-inline", | ||
| "version": "17.0.0", | ||
| "version": "18.0.0", | ||
| "description": "Inline editor implementation for CKEditor 5.", | ||
@@ -12,15 +12,15 @@ "keywords": [ | ||
| "dependencies": { | ||
| "@ckeditor/ckeditor5-core": "^17.0.0", | ||
| "@ckeditor/ckeditor5-engine": "^17.0.0", | ||
| "@ckeditor/ckeditor5-ui": "^17.0.0", | ||
| "@ckeditor/ckeditor5-utils": "^17.0.0", | ||
| "@ckeditor/ckeditor5-core": "^18.0.0", | ||
| "@ckeditor/ckeditor5-engine": "^18.0.0", | ||
| "@ckeditor/ckeditor5-ui": "^18.0.0", | ||
| "@ckeditor/ckeditor5-utils": "^18.0.0", | ||
| "lodash-es": "^4.17.10" | ||
| }, | ||
| "devDependencies": { | ||
| "@ckeditor/ckeditor5-basic-styles": "^17.0.0", | ||
| "@ckeditor/ckeditor5-enter": "^17.0.0", | ||
| "@ckeditor/ckeditor5-heading": "^17.0.0", | ||
| "@ckeditor/ckeditor5-paragraph": "^17.0.0", | ||
| "@ckeditor/ckeditor5-typing": "^17.0.0", | ||
| "@ckeditor/ckeditor5-undo": "^17.0.0", | ||
| "@ckeditor/ckeditor5-basic-styles": "^18.0.0", | ||
| "@ckeditor/ckeditor5-enter": "^18.0.0", | ||
| "@ckeditor/ckeditor5-heading": "^18.0.0", | ||
| "@ckeditor/ckeditor5-paragraph": "^18.0.0", | ||
| "@ckeditor/ckeditor5-typing": "^18.0.0", | ||
| "@ckeditor/ckeditor5-undo": "^18.0.0", | ||
| "eslint": "^5.5.0", | ||
@@ -27,0 +27,0 @@ "eslint-config-ckeditor5": "^2.0.0", |
@@ -67,3 +67,3 @@ /** | ||
| this.data.processor = new HtmlDataProcessor(); | ||
| this.data.processor = new HtmlDataProcessor( this.data.viewDocument ); | ||
@@ -77,3 +77,7 @@ this.model.document.createRoot(); | ||
| const view = new InlineEditorUIView( this.locale, this.editing.view, this.sourceElement ); | ||
| const shouldToolbarGroupWhenFull = !this.config.get( 'toolbar.shouldNotGroupWhenFull' ); | ||
| const view = new InlineEditorUIView( this.locale, this.editing.view, this.sourceElement, { | ||
| shouldToolbarGroupWhenFull | ||
| } ); | ||
| this.ui = new InlineEditorUI( this, view ); | ||
@@ -80,0 +84,0 @@ |
@@ -14,3 +14,8 @@ /** | ||
| import ToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarview'; | ||
| import Rect from '@ckeditor/ckeditor5-utils/src/dom/rect'; | ||
| import ResizeObserver from '@ckeditor/ckeditor5-utils/src/dom/resizeobserver'; | ||
| import toUnit from '@ckeditor/ckeditor5-utils/src/dom/tounit'; | ||
| const toPx = toUnit( 'px' ); | ||
| /** | ||
@@ -29,4 +34,8 @@ * Inline editor UI view. Uses an nline editable and a floating toolbar. | ||
| * {@link module:ui/editableui/editableuiview~EditableUIView}. Otherwise, the given element will be used. | ||
| * @param {Object} [options={}] Configuration options for the view instance. | ||
| * @param {Boolean} [options.shouldToolbarGroupWhenFull] When set `true` enables automatic items grouping | ||
| * in the main {@link module:editor-inline/inlineeditoruiview~InlineEditorUIView#toolbar toolbar}. | ||
| * See {@link module:ui/toolbar/toolbarview~ToolbarOptions#shouldGroupWhenFull} to learn more. | ||
| */ | ||
| constructor( locale, editingView, editableElement ) { | ||
| constructor( locale, editingView, editableElement, options = {} ) { | ||
| super( locale ); | ||
@@ -40,3 +49,5 @@ | ||
| */ | ||
| this.toolbar = new ToolbarView( locale ); | ||
| this.toolbar = new ToolbarView( locale, { | ||
| shouldGroupWhenFull: options.shouldToolbarGroupWhenFull | ||
| } ); | ||
@@ -139,2 +150,13 @@ /** | ||
| this.editable = new InlineEditableUIView( locale, editingView, editableElement ); | ||
| /** | ||
| * An instance of the resize observer that helps dynamically determine the geometry of the toolbar | ||
| * and manage items that do not fit into a single row. | ||
| * | ||
| * **Note:** Created in {@link #render}. | ||
| * | ||
| * @private | ||
| * @member {module:utils/dom/resizeobserver~ResizeObserver} | ||
| */ | ||
| this._resizeObserver = null; | ||
| } | ||
@@ -151,5 +173,28 @@ | ||
| this.panel.content.add( this.toolbar ); | ||
| const options = this.toolbar.options; | ||
| // Set toolbar's max-width on the initialization and update it on the editable resize, | ||
| // if 'shouldToolbarGroupWhenFull' in config is set to 'true'. | ||
| if ( options.shouldGroupWhenFull ) { | ||
| const editableElement = this.editable.element; | ||
| this._resizeObserver = new ResizeObserver( editableElement, () => { | ||
| this.toolbar.maxWidth = toPx( new Rect( editableElement ).width ); | ||
| } ); | ||
| } | ||
| } | ||
| /** | ||
| * @inheritDoc | ||
| */ | ||
| destroy() { | ||
| super.destroy(); | ||
| if ( this._resizeObserver ) { | ||
| this._resizeObserver.destroy(); | ||
| } | ||
| } | ||
| /** | ||
| * Determines the panel top position of the {@link #panel} in {@link #panelPositions}. | ||
@@ -156,0 +201,0 @@ * |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by6.97%
37922
- Lines of code
- increased by7.44%
592
Dependency changes
+ Added@ckeditor/ckeditor5-core@18.0.0(transitive)
+ Added@ckeditor/ckeditor5-engine@18.0.0(transitive)
+ Added@ckeditor/ckeditor5-ui@18.0.0(transitive)
+ Added@ckeditor/ckeditor5-utils@18.0.0(transitive)
- Removed@ckeditor/ckeditor5-core@17.0.0(transitive)
- Removed@ckeditor/ckeditor5-engine@17.0.0(transitive)
- Removed@ckeditor/ckeditor5-ui@17.0.0(transitive)
- Removed@ckeditor/ckeditor5-utils@17.0.0(transitive)