@ckeditor/ckeditor5-ui 28.0.0 → 30.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-ui",
-  "version": "28.0.0",
+  "version": "30.0.0",
   "description": "The UI framework and standard UI library of CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -11,28 +11,27 @@
   ],
   "main": "src/index.js",
   "dependencies": {
-    "@ckeditor/ckeditor5-utils": "^28.0.0",
-    "ckeditor5": "^28.0.0",
+    "@ckeditor/ckeditor5-utils": "^30.0.0",
+    "@ckeditor/ckeditor5-core": "^30.0.0",
     "lodash-es": "^4.17.15"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-basic-styles": "^28.0.0",
-    "@ckeditor/ckeditor5-block-quote": "^28.0.0",
-    "@ckeditor/ckeditor5-core": "^28.0.0",
-    "@ckeditor/ckeditor5-editor-balloon": "^28.0.0",
-    "@ckeditor/ckeditor5-editor-classic": "^28.0.0",
-    "@ckeditor/ckeditor5-engine": "^28.0.0",
-    "@ckeditor/ckeditor5-enter": "^28.0.0",
-    "@ckeditor/ckeditor5-essentials": "^28.0.0",
-    "@ckeditor/ckeditor5-heading": "^28.0.0",
-    "@ckeditor/ckeditor5-image": "^28.0.0",
-    "@ckeditor/ckeditor5-link": "^28.0.0",
-    "@ckeditor/ckeditor5-list": "^28.0.0",
-    "@ckeditor/ckeditor5-mention": "^28.0.0",
-    "@ckeditor/ckeditor5-paragraph": "^28.0.0",
-    "@ckeditor/ckeditor5-horizontal-line": "^28.0.0",
-    "@ckeditor/ckeditor5-table": "^28.0.0",
-    "@ckeditor/ckeditor5-typing": "^28.0.0"
+    "@ckeditor/ckeditor5-basic-styles": "^30.0.0",
+    "@ckeditor/ckeditor5-block-quote": "^30.0.0",
+    "@ckeditor/ckeditor5-editor-balloon": "^30.0.0",
+    "@ckeditor/ckeditor5-editor-classic": "^30.0.0",
+    "@ckeditor/ckeditor5-engine": "^30.0.0",
+    "@ckeditor/ckeditor5-enter": "^30.0.0",
+    "@ckeditor/ckeditor5-essentials": "^30.0.0",
+    "@ckeditor/ckeditor5-heading": "^30.0.0",
+    "@ckeditor/ckeditor5-image": "^30.0.0",
+    "@ckeditor/ckeditor5-link": "^30.0.0",
+    "@ckeditor/ckeditor5-list": "^30.0.0",
+    "@ckeditor/ckeditor5-mention": "^30.0.0",
+    "@ckeditor/ckeditor5-paragraph": "^30.0.0",
+    "@ckeditor/ckeditor5-horizontal-line": "^30.0.0",
+    "@ckeditor/ckeditor5-table": "^30.0.0",
+    "@ckeditor/ckeditor5-typing": "^30.0.0"
   },
   "engines": {
     "node": ">=12.0.0",
@@ -50,6 +49,7 @@
   "files": [
     "lang",
     "src",
-    "theme"
+    "theme",
+    "ckeditor5-metadata.json"
   ]
 }

package/src/button/buttonview.js

@@ -184,7 +184,7 @@ export default class ButtonView extends View {
 		this.children.add( this.tooltipView );
 		this.children.add( this.labelView );
 
-		if ( this.withKeystroke ) {
+		if ( this.withKeystroke && this.keystroke ) {
 			this.children.add( this.keystrokeView );
 		}
 	}

package/src/dropdown/button/splitbuttonview.js

@@ -47,6 +47,7 @@ export default class SplitButtonView extends View {
 		const bind = this.bindTemplate;
 
 		// Implement the Button interface.
+		this.set( 'class' );
 		this.set( 'icon' );
 		this.set( 'isEnabled', true );
 		this.set( 'isOn', false );
@@ -111,6 +112,7 @@ export default class SplitButtonView extends View {
 				class: [
 					'ck',
 					'ck-splitbutton',
+					bind.to( 'class' ),
 					bind.if( 'isVisible', 'ck-hidden', value => !value ),
 					this.arrowView.bindTemplate.if( 'isOn', 'ck-splitbutton_open' )
 				]

package/src/index.js

@@ -34,6 +34,8 @@ export { default as FocusCycler } from './focuscycler';
 export { default as IconView } from './icon/iconview';
 export { default as InputTextView } from './inputtext/inputtextview';
 
+export { default as IframeView } from './iframe/iframeview';
+
 export { default as LabelView } from './label/labelview';
 export { default as LabeledFieldView } from './labeledfield/labeledfieldview';
 export * from './labeledfield/utils';

package/src/notification/notification.js

@@ -9,7 +9,7 @@
 
 /* globals window */
 
-import { ContextPlugin } from 'ckeditor5/src/core';
+import ContextPlugin from '@ckeditor/ckeditor5-core/src/contextplugin';
 
 /**
  * The Notification plugin.

package/src/panel/balloon/balloonpanelview.js

@@ -232,7 +232,8 @@ export default class BalloonPanelView extends View {
 				defaultPositions.northArrowSouthMiddleWest,
 				defaultPositions.northArrowSouthMiddleEast,
 				defaultPositions.northArrowSouthWest,
-				defaultPositions.northArrowSouthEast
+				defaultPositions.northArrowSouthEast,
+				defaultPositions.viewportStickyNorth
 			],
 			limiter: defaultLimiterElement,
 			fitInViewport: true
@@ -244,9 +245,11 @@ export default class BalloonPanelView extends View {
 		// so it is better to use int values.
 		const left = parseInt( optimalPosition.left );
 		const top = parseInt( optimalPosition.top );
-		const position = optimalPosition.name;
 
-		Object.assign( this, { top, left, position } );
+		const { name: position, config = {} } = optimalPosition;
+		const { withArrow = true } = config;
+
+		Object.assign( this, { top, left, position, withArrow } );
 	}
 
 	/**
@@ -401,7 +404,7 @@ function getDomElement( object ) {
  *		      \|/
  *	    >|-----|<---------------- horizontal offset
  *
- * @default 30
+ * @default 25
  * @member {Number} module:ui/panel/balloon/balloonpanelview~BalloonPanelView.arrowHorizontalOffset
  */
 BalloonPanelView.arrowHorizontalOffset = 25;
@@ -420,11 +423,35 @@ BalloonPanelView.arrowHorizontalOffset = 25;
  *		-------------------------------
  *		                       ^
  *
- * @default 15
+ * @default 10
  * @member {Number} module:ui/panel/balloon/balloonpanelview~BalloonPanelView.arrowVerticalOffset
  */
 BalloonPanelView.arrowVerticalOffset = 10;
 
+/**
+ * A vertical offset of the balloon panel from the edge of the viewport if sticky.
+ * It helps in accessing toolbar buttons underneath the balloon panel.
+ *
+ *		  +---------------------------------------------------+
+ *		  |                      Target                       |
+ *		  |                                                   |
+ *		  |                            /-- vertical offset    |
+ *		+-----------------------------V-------------------------+
+ *		| Toolbar            +-------------+                    |
+ *		+--------------------|   Balloon   |--------------------+
+ *		| |                  +-------------+                  | |
+ *		| |                                                   | |
+ *		| |                                                   | |
+ *		| |                                                   | |
+ *		| +---------------------------------------------------+ |
+ *		|                        Viewport                       |
+ *		+-------------------------------------------------------+
+ *
+ * @default 20
+ * @member {Number} module:ui/panel/balloon/balloonpanelview~BalloonPanelView.stickyVerticalOffset
+ */
+BalloonPanelView.stickyVerticalOffset = 20;
+
 /**
  * Function used to calculate the optimal position for the balloon.
  *
@@ -702,6 +729,22 @@ BalloonPanelView._getOptimalPosition = getOptimalPosition;
  *		|     Balloon     |
  *		+-----------------+
  *
+ * * `viewportStickyNorth`
+ *
+ *		    +---------------------------+
+ *		    |        [ Target ]         |
+ *		    |                           |
+ *		+-----------------------------------+
+ *		|   |    +-----------------+    |   |
+ *		|   |    |     Balloon     |    |   |
+ *		|   |    +-----------------+    |   |
+ *		|   |                           |   |
+ *		|   |                           |   |
+ *		|   |                           |   |
+ *		|   |                           |   |
+ *		|   +---------------------------+   |
+ *		|             Viewport              |
+ *		+-----------------------------------+
  *
  * See {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView#attachTo}.
  *
@@ -710,7 +753,8 @@ BalloonPanelView._getOptimalPosition = getOptimalPosition;
  * The name that the position function returns will be reflected in the balloon panel's class that
  * controls the placement of the "arrow". See {@link #position} to learn more.
  *
- * @member {Object} module:ui/panel/balloon/balloonpanelview~BalloonPanelView.defaultPositions
+ * @member {Object.<String,module:utils/dom/position~positioningFunction>}
+ * module:ui/panel/balloon/balloonpanelview~BalloonPanelView.defaultPositions
  */
 BalloonPanelView.defaultPositions = {
 
@@ -791,6 +835,7 @@ BalloonPanelView.defaultPositions = {
 		left: targetRect.right - ( balloonRect.width * .25 ) - BalloonPanelView.arrowHorizontalOffset,
 		name: 'arrow_smw'
 	} ),
+
 	northEastArrowSouth: ( targetRect, balloonRect ) => ( {
 		top: getNorthTop( targetRect, balloonRect ),
 		left: targetRect.right - balloonRect.width / 2,
@@ -808,6 +853,7 @@ BalloonPanelView.defaultPositions = {
 		left: targetRect.right - balloonRect.width + BalloonPanelView.arrowHorizontalOffset,
 		name: 'arrow_se'
 	} ),
+
 	// ------- South west
 
 	southWestArrowNorthWest: ( targetRect, balloonRect ) => ( {
@@ -901,8 +947,24 @@ BalloonPanelView.defaultPositions = {
 		top: getSouthTop( targetRect, balloonRect ),
 		left: targetRect.right - balloonRect.width + BalloonPanelView.arrowHorizontalOffset,
 		name: 'arrow_ne'
-	} )
+	} ),
+
+	// ------- Sticky
+
+	viewportStickyNorth: ( targetRect, balloonRect, viewportRect ) => {
+		if ( !targetRect.getIntersection( viewportRect ) ) {
+			return null;
+		}
 
+		return {
+			top: viewportRect.top + BalloonPanelView.stickyVerticalOffset,
+			left: targetRect.left + targetRect.width / 2 - balloonRect.width / 2,
+			name: 'arrowless',
+			config: {
+				withArrow: false
+			}
+		};
+	}
 };
 
 // Returns the top coordinate for positions starting with `north*`.

package/src/panel/balloon/contextualballoon.js

@@ -7,7 +7,7 @@
  * @module ui/panel/balloon/contextualballoon
  */
 
-import { Plugin } from 'ckeditor5/src/core';
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import BalloonPanelView from './balloonpanelview';
 import View from '../../view';
 import ButtonView from '../../button/buttonview';
@@ -498,11 +498,18 @@ export default class ContextualBalloon extends Plugin {
 	_getBalloonPosition() {
 		let position = Array.from( this._visibleStack.values() ).pop().position;
 
-		// Use the default limiter if none has been specified.
-		if ( position && !position.limiter ) {
+		if ( position ) {
+			// Use the default limiter if none has been specified.
+			if ( !position.limiter ) {
+				// Don't modify the original options object.
+				position = Object.assign( {}, position, {
+					limiter: this.positionLimiter
+				} );
+			}
+
 			// Don't modify the original options object.
 			position = Object.assign( {}, position, {
-				limiter: this.positionLimiter
+				viewportOffsetConfig: this.editor.config.get( 'ui.viewportOffset' )
 			} );
 		}
 

package/src/panel/sticky/stickypanelview.js

@@ -80,7 +80,11 @@ export default class StickyPanelView extends View {
 		 * either using `position: fixed` or `position: sticky`, which would cover the
 		 * sticky panel or vice–versa (depending on the `z-index` hierarchy).
 		 *
-		 * @readonly
+		 * Bound to {@link module:core/editor/editorui~EditorUI#viewportOffset `EditorUI#viewportOffset`}.
+		 *
+		 * If {@link module:core/editor/editorconfig~EditorConfig#ui `EditorConfig#ui.viewportOffset.top`} is defined, then
+		 * it will override the default value.
+		 *
 		 * @observable
 		 * @default 0
 		 * @member {Number} #viewportTopOffset

package/src/toolbar/balloon/balloontoolbar.js

@@ -7,7 +7,7 @@
  * @module ui/toolbar/balloon/balloontoolbar
  */
 
-import { Plugin } from 'ckeditor5/src/core';
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import ContextualBalloon from '../../panel/balloon/contextualballoon';
 import ToolbarView from '../toolbarview';
 import BalloonPanelView from '../../panel/balloon/balloonpanelview.js';

package/src/toolbar/block/blocktoolbar.js

@@ -9,7 +9,8 @@
 
 /* global window */
 
-import { Plugin, icons } from 'ckeditor5/src/core';
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import pilcrow from '@ckeditor/ckeditor5-core/theme/icons/pilcrow.svg';
 
 import BlockButtonView from './blockbuttonview';
 import BalloonPanelView from '../../panel/balloon/balloonpanelview';
@@ -273,7 +274,7 @@ export default class BlockToolbar extends Plugin {
 
 		buttonView.set( {
 			label: t( 'Edit block' ),
-			icon: icons.pilcrow,
+			icon: pilcrow,
 			withText: false
 		} );
 

package/src/toolbar/toolbarview.js

@@ -20,7 +20,7 @@ import global from '@ckeditor/ckeditor5-utils/src/dom/global';
 import { createDropdown, addToolbarToDropdown } from '../dropdown/utils';
 import { logWarning } from '@ckeditor/ckeditor5-utils/src/ckeditorerror';
 import normalizeToolbarConfig from './normalizetoolbarconfig';
-import { icons } from 'ckeditor5/src/core';
+import threeVerticalDots from '@ckeditor/ckeditor5-core/theme/icons/three-vertical-dots.svg';
 
 import '../../theme/components/toolbar/toolbar.css';
 
@@ -935,7 +935,7 @@ class DynamicGrouping {
 			label: t( 'Show more items' ),
 			tooltip: true,
 			tooltipPosition: locale.uiLanguageDirection === 'rtl' ? 'se' : 'sw',
-			icon: icons.threeVerticalDots
+			icon: threeVerticalDots
 		} );
 
 		// 1:1 pass–through binding.