Merge pull request #10736 from ckeditor/ck/7707-ios-native-selection-ui

Fix (ui): Changed the look and position of the `BalloonToolbar` in Safari on iOS to avoid a clash with native text selection handles. Closes #7707. Feature (utils): Introduced `env.isiOS` for detection of user agents running in iOS (see #7707). Internal (utils,minimap): Moved the `RectDrawer` dev helper from `ckeditor5-minimap` to `ckeditor5-utils`.
ckeditor · Nov 18, 2021 · 89b5315 · 89b5315
2 parents afa2d48 + f14c8c5
commit 89b5315
Show file tree

Hide file tree

Showing 10 changed files with 886 additions and 383 deletions.
diff --git a/packages/ckeditor5-minimap/src/minimap.js b/packages/ckeditor5-minimap/src/minimap.js
@@ -11,8 +11,6 @@ import { Plugin } from 'ckeditor5/src/core';
 import { global } from 'ckeditor5/src/utils';
 import MinimapView from './minimapview';
 import {
-	// @if CK_DEBUG_MINIMAP // RectDrawer,
-
 	cloneEditingViewDomRoot,
 	getClientHeight,
 	getDomElementRect,
@@ -21,6 +19,8 @@ import {
 	findClosestScrollableAncestor
 } from './utils';
 
+// @if CK_DEBUG_MINIMAP // import RectDrawer from '@ckeditor/ckeditor5-utils/tests/_utils/rectdrawer';
+
 import '../theme/minimap.css';
 
 /**

diff --git a/packages/ckeditor5-minimap/src/utils.js b/packages/ckeditor5-minimap/src/utils.js
@@ -140,124 +140,3 @@ export function findClosestScrollableAncestor( domElement ) {
 
 	return domElement;
 }
-
-/**
- * A helper class that makes it possible to visualize {@link module:utils/dom/rect~Rect rect objects}.
- *
- * TODO: Move this class to shared utils.
- *
- * @protected
- */
-export class RectDrawer {
-	/**
-	 * Draws a rect object on the screen.
-	 *
-	 *		const rect = new Rect( domElement );
-	 *
-	 *		// Simple usage.
-	 *		RectDrawer.draw( rect );
-	 *
-	 *		// With custom styles.
-	 *		RectDrawer.draw( rect, { outlineWidth: '3px', opacity: '.8' } );
-	 *
-	 *		// With custom styles and a name.
-	 *		RectDrawer.draw( rect, { outlineWidth: '3px', opacity: '.8' }, 'Main element' );
-	 *
-	 * **Note**: In most cases, drawing a rect should be preceded by {@link module:minimap/utils~RectDrawer.clear}.
-	 *
-	 * @static
-	 * @param {module:utils/dom/rect~Rect} rect The rect to be drawn.
-	 * @param {Object} [userStyles] An optional object with custom styles for the rect.
-	 * @param {String} [name] The optional name of the rect.
-	 */
-	static draw( rect, userStyles = {}, name ) {
-		if ( !RectDrawer._stylesElement ) {
-			RectDrawer._injectStyles();
-		}
-
-		const element = global.document.createElement( 'div' );
-
-		const rectGeometryStyles = {
-			top: `${ rect.top }px`,
-			left: `${ rect.left }px`,
-			width: `${ rect.width }px`,
-			height: `${ rect.height }px`
-		};
-
-		Object.assign( element.style, RectDrawer._defaultStyles, rectGeometryStyles, userStyles );
-
-		element.classList.add( 'ck-rect-preview' );
-
-		if ( name ) {
-			element.dataset.name = name;
-		}
-
-		global.document.body.appendChild( element );
-
-		this._domElements.push( element );
-	}
-
-	/**
-	 * Clears all previously {@link module:minimap/utils~RectDrawer.draw drawn} rects.
-	 *
-	 * @static
-	 */
-	static clear() {
-		for ( const element of this._domElements ) {
-			element.remove();
-		}
-
-		this._domElements.length = 0;
-	}
-
-	/**
-	 * @private
-	 * @static
-	 */
-	static _injectStyles() {
-		RectDrawer._stylesElement = global.document.createElement( 'style' );
-		RectDrawer._stylesElement.innerHTML = `
-			div.ck-rect-preview::after {
-				content: attr(data-name);
-				position: absolute;
-				left: 3px;
-				top: 3px;
-				font-family: monospace;
-				background: #000;
-				color: #fff;
-				font-size: 10px;
-				padding: 1px 3px;
-				pointer-events: none;
-			}
-		`;
-
-		global.document.head.appendChild( RectDrawer._stylesElement );
-	}
-}
-
-/**
- * @private
- * @member {Object} module:minimap/utils~RectDrawer._defaultStyles
- */
-RectDrawer._defaultStyles = {
-	position: 'fixed',
-	outlineWidth: '1px',
-	outlineStyle: 'solid',
-	outlineColor: 'blue',
-	outlineOffset: '-1px',
-	zIndex: 999,
-	opacity: .5,
-	pointerEvents: 'none'
-};
-
-/**
- * @private
- * @member {Array.<HTMLElement>} module:minimap/utils~RectDrawer._domElements
- */
-RectDrawer._domElements = [];
-
-/**
- * @private
- * @member {HTMLElement|null} module:minimap/utils~RectDrawer._stylesElement
- */
-RectDrawer._stylesElement = null;