@ckeditor/ckeditor5-ui 31.0.0 → 31.1.0

package/lang/translations/uz.po

@@ -0,0 +1,105 @@
+# Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+#
+#                                     !!! IMPORTANT !!!
+#
+#         Before you edit this file, please keep in mind that contributing to the project
+#                translations is possible ONLY via the Transifex online service.
+#
+#         To submit your translations, visit https://www.transifex.com/ckeditor/ckeditor5.
+#
+#                   To learn more, check out the official contributor's guide:
+#     https://ckeditor.com/docs/ckeditor5/latest/framework/guides/contributing/contributing.html
+#
+msgid ""
+msgstr ""
+"Language-Team: Uzbek (https://www.transifex.com/ckeditor/teams/11143/uz/)\n"
+"Language: uz\n"
+"Plural-Forms: nplurals=1; plural=0;\n"
+
+msgctxt "Title of the CKEditor5 editor."
+msgid "Rich Text Editor, %0"
+msgstr "Tahrirlovchi, %0"
+
+msgctxt "Title of the CKEditor5 editor."
+msgid "Rich Text Editor"
+msgstr "Tahrirlovchi"
+
+msgctxt "Label of the block toolbar icon (a block toolbar is displayed next to each paragraph, heading, list item, etc. and contains e.g. block formatting options)"
+msgid "Edit block"
+msgstr "Blokni tahrirlash"
+
+msgctxt "Label for a button showing the next thing (tab, page, etc.)."
+msgid "Next"
+msgstr "Keyingi"
+
+msgctxt "Label for a button showing the previous thing (tab, page, etc.)."
+msgid "Previous"
+msgstr "Oldingi"
+
+msgctxt "Label used by assistive technologies describing a generic editor toolbar."
+msgid "Editor toolbar"
+msgstr "Tahrirlovchi asboblar paneli"
+
+msgctxt "Label used by assistive technologies describing a toolbar displayed inside a dropdown."
+msgid "Dropdown toolbar"
+msgstr "Ochiladigan asboblar paneli"
+
+msgctxt "Label of a button that applies a black color in color pickers."
+msgid "Black"
+msgstr "Qora"
+
+msgctxt "Label of a button that applies a dim grey color in color pickers."
+msgid "Dim grey"
+msgstr "To'q kulrang"
+
+msgctxt "Label of a button that applies a grey color in color pickers."
+msgid "Grey"
+msgstr "Kulrang"
+
+msgctxt "Label of a button that applies a light grey color in color pickers."
+msgid "Light grey"
+msgstr "Och kulrang"
+
+msgctxt "Label of a button that applies a white color in color pickers."
+msgid "White"
+msgstr "Oq"
+
+msgctxt "Label of a button that applies a red color in color pickers."
+msgid "Red"
+msgstr "Qizil"
+
+msgctxt "Label of a button that applies a orange color in color pickers."
+msgid "Orange"
+msgstr "To'q sariq"
+
+msgctxt "Label of a button that applies a yellow color in color pickers."
+msgid "Yellow"
+msgstr "Sariq"
+
+msgctxt "Label of a button that applies a light green color in color pickers."
+msgid "Light green"
+msgstr "Och yashil"
+
+msgctxt "Label of a button that applies a green color in color pickers."
+msgid "Green"
+msgstr "Yashil"
+
+msgctxt "Label of a button that applies a aquamarine color in color pickers."
+msgid "Aquamarine"
+msgstr "Akuamarin"
+
+msgctxt "Label of a button that applies a turquoise color in color pickers."
+msgid "Turquoise"
+msgstr "Turkuaz"
+
+msgctxt "Label of a button that applies a light blue color in color pickers."
+msgid "Light blue"
+msgstr "Moviy"
+
+msgctxt "Label of a button that applies a blue color in color pickers."
+msgid "Blue"
+msgstr "Ko'k"
+
+msgctxt "Label of a button that applies a purple color in color pickers."
+msgid "Purple"
+msgstr "Siyohrang"

package/package.json

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

package/src/colorgrid/colorgridview.js

@@ -176,6 +176,16 @@ export default class ColorGridView extends View {
 		this.keystrokes.listenTo( this.element );
 	}
 
+	/**
+	 * @inheritDoc
+	 */
+	destroy() {
+		super.destroy();
+
+		this.focusTracker.destroy();
+		this.keystrokes.destroy();
+	}
+
 	/**
 	 * Fired when the `ColorTileView` for the picked item is executed.
 	 *

package/src/dropdown/button/splitbuttonview.js

@@ -155,6 +155,16 @@ export default class SplitButtonView extends View {
 		} );
 	}
 
+	/**
+	 * @inheritDoc
+	 */
+	destroy() {
+		super.destroy();
+
+		this.focusTracker.destroy();
+		this.keystrokes.destroy();
+	}
+
 	/**
 	 * Focuses the {@link #actionView#element} of the action part of split button.
 	 */

package/src/inputtext/inputtextview.js

@@ -160,6 +160,15 @@ export default class InputTextView extends View {
 		} );
 	}
 
+	/**
+	 * @inheritDoc
+	 */
+	destroy() {
+		super.destroy();
+
+		this.focusTracker.destroy();
+	}
+
 	/**
 	 * Moves the focus to the input and selects the value.
 	 */

package/src/list/listview.js

@@ -109,6 +109,16 @@ export default class ListView extends View {
 		this.keystrokes.listenTo( this.element );
 	}
 
+	/**
+	 * @inheritDoc
+	 */
+	destroy() {
+		super.destroy();
+
+		this.focusTracker.destroy();
+		this.keystrokes.destroy();
+	}
+
 	/**
 	 * Focuses the first focusable in {@link #items}.
 	 */

package/src/panel/balloon/balloonpanelview.js

@@ -750,239 +750,303 @@ BalloonPanelView._getOptimalPosition = getOptimalPosition;
  *
  * Positioning functions must be compatible with {@link module:utils/dom/position~Position}.
  *
+ * Default positioning functions with customized offsets can be generated using
+ * {@link module:ui/panel/balloon/balloonpanelview~generatePositions}.
+ *
  * 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.<String,module:utils/dom/position~positioningFunction>}
  * module:ui/panel/balloon/balloonpanelview~BalloonPanelView.defaultPositions
  */
-BalloonPanelView.defaultPositions = {
-
-	// ------- North west
-
-	northWestArrowSouthWest: ( targetRect, balloonRect ) => ( {
-		top: getNorthTop( targetRect, balloonRect ),
-		left: targetRect.left - BalloonPanelView.arrowHorizontalOffset,
-		name: 'arrow_sw'
-	} ),
-
-	northWestArrowSouthMiddleWest: ( targetRect, balloonRect ) => ( {
-		top: getNorthTop( targetRect, balloonRect ),
-		left: targetRect.left - ( balloonRect.width * .25 ) - BalloonPanelView.arrowHorizontalOffset,
-		name: 'arrow_smw'
-	} ),
-
-	northWestArrowSouth: ( targetRect, balloonRect ) => ( {
-		top: getNorthTop( targetRect, balloonRect ),
-		left: targetRect.left - balloonRect.width / 2,
-		name: 'arrow_s'
-	} ),
-
-	northWestArrowSouthMiddleEast: ( targetRect, balloonRect ) => ( {
-		top: getNorthTop( targetRect, balloonRect ),
-		left: targetRect.left - ( balloonRect.width * .75 ) + BalloonPanelView.arrowHorizontalOffset,
-		name: 'arrow_sme'
-	} ),
-
-	northWestArrowSouthEast: ( targetRect, balloonRect ) => ( {
-		top: getNorthTop( targetRect, balloonRect ),
-		left: targetRect.left - balloonRect.width + BalloonPanelView.arrowHorizontalOffset,
-		name: 'arrow_se'
-	} ),
-
-	// ------- North
-
-	northArrowSouthWest: ( targetRect, balloonRect ) => ( {
-		top: getNorthTop( targetRect, balloonRect ),
-		left: targetRect.left + targetRect.width / 2 - BalloonPanelView.arrowHorizontalOffset,
-		name: 'arrow_sw'
-	} ),
-
-	northArrowSouthMiddleWest: ( targetRect, balloonRect ) => ( {
-		top: getNorthTop( targetRect, balloonRect ),
-		left: targetRect.left + targetRect.width / 2 - ( balloonRect.width * .25 ) - BalloonPanelView.arrowHorizontalOffset,
-		name: 'arrow_smw'
-	} ),
-
-	northArrowSouth: ( targetRect, balloonRect ) => ( {
-		top: getNorthTop( targetRect, balloonRect ),
-		left: targetRect.left + targetRect.width / 2 - balloonRect.width / 2,
-		name: 'arrow_s'
-	} ),
-
-	northArrowSouthMiddleEast: ( targetRect, balloonRect ) => ( {
-		top: getNorthTop( targetRect, balloonRect ),
-		left: targetRect.left + targetRect.width / 2 - ( balloonRect.width * .75 ) + BalloonPanelView.arrowHorizontalOffset,
-		name: 'arrow_sme'
-	} ),
-
-	northArrowSouthEast: ( targetRect, balloonRect ) => ( {
-		top: getNorthTop( targetRect, balloonRect ),
-		left: targetRect.left + targetRect.width / 2 - balloonRect.width + BalloonPanelView.arrowHorizontalOffset,
-		name: 'arrow_se'
-	} ),
-
-	// ------- North east
-
-	northEastArrowSouthWest: ( targetRect, balloonRect ) => ( {
-		top: getNorthTop( targetRect, balloonRect ),
-		left: targetRect.right - BalloonPanelView.arrowHorizontalOffset,
-		name: 'arrow_sw'
-	} ),
-
-	northEastArrowSouthMiddleWest: ( targetRect, balloonRect ) => ( {
-		top: getNorthTop( targetRect, balloonRect ),
-		left: targetRect.right - ( balloonRect.width * .25 ) - BalloonPanelView.arrowHorizontalOffset,
-		name: 'arrow_smw'
-	} ),
-
-	northEastArrowSouth: ( targetRect, balloonRect ) => ( {
-		top: getNorthTop( targetRect, balloonRect ),
-		left: targetRect.right - balloonRect.width / 2,
-		name: 'arrow_s'
-	} ),
-
-	northEastArrowSouthMiddleEast: ( targetRect, balloonRect ) => ( {
-		top: getNorthTop( targetRect, balloonRect ),
-		left: targetRect.right - ( balloonRect.width * .75 ) + BalloonPanelView.arrowHorizontalOffset,
-		name: 'arrow_sme'
-	} ),
-
-	northEastArrowSouthEast: ( targetRect, balloonRect ) => ( {
-		top: getNorthTop( targetRect, balloonRect ),
-		left: targetRect.right - balloonRect.width + BalloonPanelView.arrowHorizontalOffset,
-		name: 'arrow_se'
-	} ),
-
-	// ------- South west
-
-	southWestArrowNorthWest: ( targetRect, balloonRect ) => ( {
-		top: getSouthTop( targetRect, balloonRect ),
-		left: targetRect.left - BalloonPanelView.arrowHorizontalOffset,
-		name: 'arrow_nw'
-	} ),
-
-	southWestArrowNorthMiddleWest: ( targetRect, balloonRect ) => ( {
-		top: getSouthTop( targetRect, balloonRect ),
-		left: targetRect.left - ( balloonRect.width * .25 ) - BalloonPanelView.arrowHorizontalOffset,
-		name: 'arrow_nmw'
-	} ),
-
-	southWestArrowNorth: ( targetRect, balloonRect ) => ( {
-		top: getSouthTop( targetRect, balloonRect ),
-		left: targetRect.left - balloonRect.width / 2,
-		name: 'arrow_n'
-	} ),
-
-	southWestArrowNorthMiddleEast: ( targetRect, balloonRect ) => ( {
-		top: getSouthTop( targetRect, balloonRect ),
-		left: targetRect.left - ( balloonRect.width * .75 ) + BalloonPanelView.arrowHorizontalOffset,
-		name: 'arrow_nme'
-	} ),
-
-	southWestArrowNorthEast: ( targetRect, balloonRect ) => ( {
-		top: getSouthTop( targetRect, balloonRect ),
-		left: targetRect.left - balloonRect.width + BalloonPanelView.arrowHorizontalOffset,
-		name: 'arrow_ne'
-	} ),
-
-	// ------- South
-
-	southArrowNorthWest: ( targetRect, balloonRect ) => ( {
-		top: getSouthTop( targetRect, balloonRect ),
-		left: targetRect.left + targetRect.width / 2 - BalloonPanelView.arrowHorizontalOffset,
-		name: 'arrow_nw'
-	} ),
-	southArrowNorthMiddleWest: ( targetRect, balloonRect ) => ( {
-		top: getSouthTop( targetRect, balloonRect ),
-		left: targetRect.left + targetRect.width / 2 - ( balloonRect.width * 0.25 ) - BalloonPanelView.arrowHorizontalOffset,
-		name: 'arrow_nmw'
-	} ),
-
-	southArrowNorth: ( targetRect, balloonRect ) => ( {
-		top: getSouthTop( targetRect, balloonRect ),
-		left: targetRect.left + targetRect.width / 2 - balloonRect.width / 2,
-		name: 'arrow_n'
-	} ),
-
-	southArrowNorthMiddleEast: ( targetRect, balloonRect ) => ( {
-		top: getSouthTop( targetRect, balloonRect ),
-		left: targetRect.left + targetRect.width / 2 - ( balloonRect.width * 0.75 ) + BalloonPanelView.arrowHorizontalOffset,
-		name: 'arrow_nme'
-	} ),
-
-	southArrowNorthEast: ( targetRect, balloonRect ) => ( {
-		top: getSouthTop( targetRect, balloonRect ),
-		left: targetRect.left + targetRect.width / 2 - balloonRect.width + BalloonPanelView.arrowHorizontalOffset,
-		name: 'arrow_ne'
-	} ),
-
-	// ------- South east
-
-	southEastArrowNorthWest: ( targetRect, balloonRect ) => ( {
-		top: getSouthTop( targetRect, balloonRect ),
-		left: targetRect.right - BalloonPanelView.arrowHorizontalOffset,
-		name: 'arrow_nw'
-	} ),
-
-	southEastArrowNorthMiddleWest: ( targetRect, balloonRect ) => ( {
-		top: getSouthTop( targetRect, balloonRect ),
-		left: targetRect.right - ( balloonRect.width * .25 ) - BalloonPanelView.arrowHorizontalOffset,
-		name: 'arrow_nmw'
-	} ),
-
-	southEastArrowNorth: ( targetRect, balloonRect ) => ( {
-		top: getSouthTop( targetRect, balloonRect ),
-		left: targetRect.right - balloonRect.width / 2,
-		name: 'arrow_n'
-	} ),
-
-	southEastArrowNorthMiddleEast: ( targetRect, balloonRect ) => ( {
-		top: getSouthTop( targetRect, balloonRect ),
-		left: targetRect.right - ( balloonRect.width * .75 ) + BalloonPanelView.arrowHorizontalOffset,
-		name: 'arrow_nme'
-	} ),
-
-	southEastArrowNorthEast: ( targetRect, balloonRect ) => ( {
-		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;
-		}
+BalloonPanelView.defaultPositions = generatePositions();
 
-		return {
-			top: viewportRect.top + BalloonPanelView.stickyVerticalOffset,
+/**
+ * Returns available {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView}
+ * {@link module:utils/dom/position~positioningFunction positioning functions} adjusted by the specific offsets.
+ *
+ * @protected
+ * @param {Object} [options] Options to generate positions. If not specified, this helper will simply return
+ * {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView.defaultPositions}.
+ * @param {Number} [options.horizontalOffset] A custom horizontal offset (in pixels) of each position. If
+ * not specified, {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView.arrowHorizontalOffset the default value}
+ * will be used.
+ * @param {Number} [options.verticalOffset] A custom vertical offset (in pixels) of each position. If
+ * not specified, {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView.arrowVerticalOffset the default value}
+ * will be used.
+ * @param {Number} [options.stickyVerticalOffset] A custom offset (in pixels) of the `viewportStickyNorth` positioning function.
+ * If not specified, {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView.stickyVerticalOffset the default value}
+ * will be used.
+ * @param {Object} [options.config] Additional configuration of the balloon balloon panel view.
+ * Currently only {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView#withArrow} is supported. Learn more
+ * about {@link module:utils/dom/position~positioningFunction positioning functions}.
+ * @returns {Object.<String,module:utils/dom/position~positioningFunction>}
+ */
+export function generatePositions( {
+	horizontalOffset = BalloonPanelView.arrowHorizontalOffset,
+	verticalOffset = BalloonPanelView.arrowVerticalOffset,
+	stickyVerticalOffset = BalloonPanelView.stickyVerticalOffset,
+	config
+} = {} ) {
+	return {
+		// ------- North west
+
+		northWestArrowSouthWest: ( targetRect, balloonRect ) => ( {
+			top: getNorthTop( targetRect, balloonRect ),
+			left: targetRect.left - horizontalOffset,
+			name: 'arrow_sw',
+			...( config && { config } )
+		} ),
+
+		northWestArrowSouthMiddleWest: ( targetRect, balloonRect ) => ( {
+			top: getNorthTop( targetRect, balloonRect ),
+			left: targetRect.left - ( balloonRect.width * .25 ) - horizontalOffset,
+			name: 'arrow_smw',
+			...( config && { config } )
+		} ),
+
+		northWestArrowSouth: ( targetRect, balloonRect ) => ( {
+			top: getNorthTop( targetRect, balloonRect ),
+			left: targetRect.left - balloonRect.width / 2,
+			name: 'arrow_s',
+			...( config && { config } )
+		} ),
+
+		northWestArrowSouthMiddleEast: ( targetRect, balloonRect ) => ( {
+			top: getNorthTop( targetRect, balloonRect ),
+			left: targetRect.left - ( balloonRect.width * .75 ) + horizontalOffset,
+			name: 'arrow_sme',
+			...( config && { config } )
+		} ),
+
+		northWestArrowSouthEast: ( targetRect, balloonRect ) => ( {
+			top: getNorthTop( targetRect, balloonRect ),
+			left: targetRect.left - balloonRect.width + horizontalOffset,
+			name: 'arrow_se',
+			...( config && { config } )
+		} ),
+
+		// ------- North
+
+		northArrowSouthWest: ( targetRect, balloonRect ) => ( {
+			top: getNorthTop( targetRect, balloonRect ),
+			left: targetRect.left + targetRect.width / 2 - horizontalOffset,
+			name: 'arrow_sw',
+			...( config && { config } )
+		} ),
+
+		northArrowSouthMiddleWest: ( targetRect, balloonRect ) => ( {
+			top: getNorthTop( targetRect, balloonRect ),
+			left: targetRect.left + targetRect.width / 2 - ( balloonRect.width * .25 ) - horizontalOffset,
+			name: 'arrow_smw',
+			...( config && { config } )
+		} ),
+
+		northArrowSouth: ( targetRect, balloonRect ) => ( {
+			top: getNorthTop( targetRect, balloonRect ),
+			left: targetRect.left + targetRect.width / 2 - balloonRect.width / 2,
+			name: 'arrow_s',
+			...( config && { config } )
+		} ),
+
+		northArrowSouthMiddleEast: ( targetRect, balloonRect ) => ( {
+			top: getNorthTop( targetRect, balloonRect ),
+			left: targetRect.left + targetRect.width / 2 - ( balloonRect.width * .75 ) + horizontalOffset,
+			name: 'arrow_sme',
+			...( config && { config } )
+		} ),
+
+		northArrowSouthEast: ( targetRect, balloonRect ) => ( {
+			top: getNorthTop( targetRect, balloonRect ),
+			left: targetRect.left + targetRect.width / 2 - balloonRect.width + horizontalOffset,
+			name: 'arrow_se',
+			...( config && { config } )
+		} ),
+
+		// ------- North east
+
+		northEastArrowSouthWest: ( targetRect, balloonRect ) => ( {
+			top: getNorthTop( targetRect, balloonRect ),
+			left: targetRect.right - horizontalOffset,
+			name: 'arrow_sw',
+			...( config && { config } )
+		} ),
+
+		northEastArrowSouthMiddleWest: ( targetRect, balloonRect ) => ( {
+			top: getNorthTop( targetRect, balloonRect ),
+			left: targetRect.right - ( balloonRect.width * .25 ) - horizontalOffset,
+			name: 'arrow_smw',
+			...( config && { config } )
+		} ),
+
+		northEastArrowSouth: ( targetRect, balloonRect ) => ( {
+			top: getNorthTop( targetRect, balloonRect ),
+			left: targetRect.right - balloonRect.width / 2,
+			name: 'arrow_s',
+			...( config && { config } )
+		} ),
+
+		northEastArrowSouthMiddleEast: ( targetRect, balloonRect ) => ( {
+			top: getNorthTop( targetRect, balloonRect ),
+			left: targetRect.right - ( balloonRect.width * .75 ) + horizontalOffset,
+			name: 'arrow_sme',
+			...( config && { config } )
+		} ),
+
+		northEastArrowSouthEast: ( targetRect, balloonRect ) => ( {
+			top: getNorthTop( targetRect, balloonRect ),
+			left: targetRect.right - balloonRect.width + horizontalOffset,
+			name: 'arrow_se',
+			...( config && { config } )
+		} ),
+
+		// ------- South west
+
+		southWestArrowNorthWest: ( targetRect, balloonRect ) => ( {
+			top: getSouthTop( targetRect, balloonRect ),
+			left: targetRect.left - horizontalOffset,
+			name: 'arrow_nw',
+			...( config && { config } )
+		} ),
+
+		southWestArrowNorthMiddleWest: ( targetRect, balloonRect ) => ( {
+			top: getSouthTop( targetRect, balloonRect ),
+			left: targetRect.left - ( balloonRect.width * .25 ) - horizontalOffset,
+			name: 'arrow_nmw',
+			...( config && { config } )
+		} ),
+
+		southWestArrowNorth: ( targetRect, balloonRect ) => ( {
+			top: getSouthTop( targetRect, balloonRect ),
+			left: targetRect.left - balloonRect.width / 2,
+			name: 'arrow_n',
+			...( config && { config } )
+		} ),
+
+		southWestArrowNorthMiddleEast: ( targetRect, balloonRect ) => ( {
+			top: getSouthTop( targetRect, balloonRect ),
+			left: targetRect.left - ( balloonRect.width * .75 ) + horizontalOffset,
+			name: 'arrow_nme',
+			...( config && { config } )
+		} ),
+
+		southWestArrowNorthEast: ( targetRect, balloonRect ) => ( {
+			top: getSouthTop( targetRect, balloonRect ),
+			left: targetRect.left - balloonRect.width + horizontalOffset,
+			name: 'arrow_ne',
+			...( config && { config } )
+		} ),
+
+		// ------- South
+
+		southArrowNorthWest: ( targetRect, balloonRect ) => ( {
+			top: getSouthTop( targetRect, balloonRect ),
+			left: targetRect.left + targetRect.width / 2 - horizontalOffset,
+			name: 'arrow_nw',
+			...( config && { config } )
+		} ),
+
+		southArrowNorthMiddleWest: ( targetRect, balloonRect ) => ( {
+			top: getSouthTop( targetRect, balloonRect ),
+			left: targetRect.left + targetRect.width / 2 - ( balloonRect.width * 0.25 ) - horizontalOffset,
+			name: 'arrow_nmw',
+			...( config && { config } )
+		} ),
+
+		southArrowNorth: ( targetRect, balloonRect ) => ( {
+			top: getSouthTop( targetRect, balloonRect ),
 			left: targetRect.left + targetRect.width / 2 - balloonRect.width / 2,
-			name: 'arrowless',
-			config: {
-				withArrow: false
+			name: 'arrow_n',
+			...( config && { config } )
+		} ),
+
+		southArrowNorthMiddleEast: ( targetRect, balloonRect ) => ( {
+			top: getSouthTop( targetRect, balloonRect ),
+			left: targetRect.left + targetRect.width / 2 - ( balloonRect.width * 0.75 ) + horizontalOffset,
+			name: 'arrow_nme',
+			...( config && { config } )
+		} ),
+
+		southArrowNorthEast: ( targetRect, balloonRect ) => ( {
+			top: getSouthTop( targetRect, balloonRect ),
+			left: targetRect.left + targetRect.width / 2 - balloonRect.width + horizontalOffset,
+			name: 'arrow_ne',
+			...( config && { config } )
+		} ),
+
+		// ------- South east
+
+		southEastArrowNorthWest: ( targetRect, balloonRect ) => ( {
+			top: getSouthTop( targetRect, balloonRect ),
+			left: targetRect.right - horizontalOffset,
+			name: 'arrow_nw',
+			...( config && { config } )
+		} ),
+
+		southEastArrowNorthMiddleWest: ( targetRect, balloonRect ) => ( {
+			top: getSouthTop( targetRect, balloonRect ),
+			left: targetRect.right - ( balloonRect.width * .25 ) - horizontalOffset,
+			name: 'arrow_nmw',
+			...( config && { config } )
+		} ),
+
+		southEastArrowNorth: ( targetRect, balloonRect ) => ( {
+			top: getSouthTop( targetRect, balloonRect ),
+			left: targetRect.right - balloonRect.width / 2,
+			name: 'arrow_n',
+			...( config && { config } )
+		} ),
+
+		southEastArrowNorthMiddleEast: ( targetRect, balloonRect ) => ( {
+			top: getSouthTop( targetRect, balloonRect ),
+			left: targetRect.right - ( balloonRect.width * .75 ) + horizontalOffset,
+			name: 'arrow_nme',
+			...( config && { config } )
+		} ),
+
+		southEastArrowNorthEast: ( targetRect, balloonRect ) => ( {
+			top: getSouthTop( targetRect, balloonRect ),
+			left: targetRect.right - balloonRect.width + horizontalOffset,
+			name: 'arrow_ne',
+			...( config && { config } )
+		} ),
+
+		// ------- Sticky
+
+		viewportStickyNorth: ( targetRect, balloonRect, viewportRect ) => {
+			if ( !targetRect.getIntersection( viewportRect ) ) {
+				return null;
 			}
-		};
-	}
-};
 
-// Returns the top coordinate for positions starting with `north*`.
-//
-// @private
-// @param {utils/dom/rect~Rect} targetRect A rect of the target.
-// @param {utils/dom/rect~Rect} elementRect A rect of the balloon.
-// @returns {Number}
-function getNorthTop( targetRect, balloonRect ) {
-	return targetRect.top - balloonRect.height - BalloonPanelView.arrowVerticalOffset;
-}
+			return {
+				top: viewportRect.top + stickyVerticalOffset,
+				left: targetRect.left + targetRect.width / 2 - balloonRect.width / 2,
+				name: 'arrowless',
+				config: {
+					withArrow: false,
+					...config
+				}
+			};
+		}
+	};
+
+	// Returns the top coordinate for positions starting with `north*`.
+	//
+	// @private
+	// @param {utils/dom/rect~Rect} targetRect A rect of the target.
+	// @param {utils/dom/rect~Rect} elementRect A rect of the balloon.
+	// @returns {Number}
+	function getNorthTop( targetRect, balloonRect ) {
+		return targetRect.top - balloonRect.height - verticalOffset;
+	}
 
-// Returns the top coordinate for positions starting with `south*`.
-//
-// @private
-// @param {utils/dom/rect~Rect} targetRect A rect of the target.
-// @param {utils/dom/rect~Rect} elementRect A rect of the balloon.
-// @returns {Number}
-function getSouthTop( targetRect ) {
-	return targetRect.bottom + BalloonPanelView.arrowVerticalOffset;
+	// Returns the top coordinate for positions starting with `south*`.
+	//
+	// @private
+	// @param {utils/dom/rect~Rect} targetRect A rect of the target.
+	// @param {utils/dom/rect~Rect} elementRect A rect of the balloon.
+	// @returns {Number}
+	function getSouthTop( targetRect ) {
+		return targetRect.bottom + verticalOffset;
+	}
 }

package/src/panel/balloon/contextualballoon.js

@@ -170,6 +170,17 @@ export default class ContextualBalloon extends Plugin {
 		this._fakePanelsView = this._createFakePanelsView();
 	}
 
+	/**
+	 * @inheritDoc
+	 */
+	destroy() {
+		super.destroy();
+
+		this.view.destroy();
+		this._rotatorView.destroy();
+		this._fakePanelsView.destroy();
+	}
+
 	/**
 	 * Returns `true` when the given view is in one of the stacks. Otherwise returns `false`.
 	 *
@@ -628,6 +639,15 @@ class RotatorView extends View {
 		this.focusTracker.add( this.element );
 	}
 
+	/**
+	 * @inheritDoc
+	 */
+	destroy() {
+		super.destroy();
+
+		this.focusTracker.destroy();
+	}
+
 	/**
 	 * Shows a given view.
 	 *

package/src/toolbar/balloon/balloontoolbar.js

@@ -10,13 +10,14 @@
 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';
+import BalloonPanelView, { generatePositions } from '../../panel/balloon/balloonpanelview.js';
 import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
 import Rect from '@ckeditor/ckeditor5-utils/src/dom/rect';
 import normalizeToolbarConfig from '../normalizetoolbarconfig';
 import { debounce } from 'lodash-es';
 import ResizeObserver from '@ckeditor/ckeditor5-utils/src/dom/resizeobserver';
 import toUnit from '@ckeditor/ckeditor5-utils/src/dom/tounit';
+import { env, global } from '@ckeditor/ckeditor5-utils';
 
 const toPx = toUnit( 'px' );
 
@@ -300,7 +301,7 @@ export default class BalloonToolbar extends Plugin {
 					return rangeRects[ rangeRects.length - 1 ];
 				}
 			},
-			positions: getBalloonPositions( isBackward )
+			positions: this._getBalloonPositions( isBackward )
 		};
 	}
 
@@ -345,39 +346,51 @@ export default class BalloonToolbar extends Plugin {
 	 * @protected
 	 * @event _selectionChangeDebounced
 	 */
-}
 
-// Returns toolbar positions for the given direction of the selection.
-//
-// @private
-// @param {Boolean} isBackward
-// @returns {Array.<module:utils/dom/position~Position>}
-function getBalloonPositions( isBackward ) {
-	const defaultPositions = BalloonPanelView.defaultPositions;
-
-	return isBackward ? [
-		defaultPositions.northWestArrowSouth,
-		defaultPositions.northWestArrowSouthWest,
-		defaultPositions.northWestArrowSouthEast,
-		defaultPositions.northWestArrowSouthMiddleEast,
-		defaultPositions.northWestArrowSouthMiddleWest,
-		defaultPositions.southWestArrowNorth,
-		defaultPositions.southWestArrowNorthWest,
-		defaultPositions.southWestArrowNorthEast,
-		defaultPositions.southWestArrowNorthMiddleWest,
-		defaultPositions.southWestArrowNorthMiddleEast
-	] : [
-		defaultPositions.southEastArrowNorth,
-		defaultPositions.southEastArrowNorthEast,
-		defaultPositions.southEastArrowNorthWest,
-		defaultPositions.southEastArrowNorthMiddleEast,
-		defaultPositions.southEastArrowNorthMiddleWest,
-		defaultPositions.northEastArrowSouth,
-		defaultPositions.northEastArrowSouthEast,
-		defaultPositions.northEastArrowSouthWest,
-		defaultPositions.northEastArrowSouthMiddleEast,
-		defaultPositions.northEastArrowSouthMiddleWest
-	];
+	/**
+	 * Returns toolbar positions for the given direction of the selection.
+	 *
+	 * @private
+	 * @param {Boolean} isBackward
+	 * @returns {Array.<module:utils/dom/position~Position>}
+	 */
+	_getBalloonPositions( isBackward ) {
+		const isSafariIniOS = env.isSafari && env.isiOS;
+
+		// https://github.com/ckeditor/ckeditor5/issues/7707
+		const positions = isSafariIniOS ? generatePositions( {
+			// 20px when zoomed out. Less then 20px when zoomed in; the "radius" of the native selection handle gets
+			// smaller as the user zooms in. No less than the default v-offset, though.
+			verticalOffset: Math.max(
+				BalloonPanelView.arrowVerticalOffset,
+				Math.round( 20 / global.window.visualViewport.scale )
+			)
+		} ) : BalloonPanelView.defaultPositions;
+
+		return isBackward ? [
+			positions.northWestArrowSouth,
+			positions.northWestArrowSouthWest,
+			positions.northWestArrowSouthEast,
+			positions.northWestArrowSouthMiddleEast,
+			positions.northWestArrowSouthMiddleWest,
+			positions.southWestArrowNorth,
+			positions.southWestArrowNorthWest,
+			positions.southWestArrowNorthEast,
+			positions.southWestArrowNorthMiddleWest,
+			positions.southWestArrowNorthMiddleEast
+		] : [
+			positions.southEastArrowNorth,
+			positions.southEastArrowNorthEast,
+			positions.southEastArrowNorthWest,
+			positions.southEastArrowNorthMiddleEast,
+			positions.southEastArrowNorthMiddleWest,
+			positions.northEastArrowSouth,
+			positions.northEastArrowSouthEast,
+			positions.northEastArrowSouthWest,
+			positions.northEastArrowSouthMiddleEast,
+			positions.northEastArrowSouthMiddleWest
+		];
+	}
 }
 
 // Returns "true" when the selection has multiple ranges and each range contains a selectable element

package/src/toolbar/toolbarview.js

@@ -259,6 +259,8 @@ export default class ToolbarView extends View {
 	 */
 	destroy() {
 		this._behavior.destroy();
+		this.focusTracker.destroy();
+		this.keystrokes.destroy();
 
 		return super.destroy();
 	}