' +
'
' +
'' +
diff --git a/packages/ckeditor5-media-embed/theme/mediaembedediting.css b/packages/ckeditor5-media-embed/theme/mediaembedediting.css
index 62a30c0abcd..b551168903c 100644
--- a/packages/ckeditor5-media-embed/theme/mediaembedediting.css
+++ b/packages/ckeditor5-media-embed/theme/mediaembedediting.css
@@ -3,8 +3,6 @@
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
*/
-@import "@ckeditor/ckeditor5-ui/theme/components/tooltip/mixins/_tooltip.css";
-
.ck-media__wrapper {
& .ck-media__placeholder {
display: flex;
@@ -12,17 +10,11 @@
align-items: center;
& .ck-media__placeholder__url {
- @mixin ck-tooltip_enabled;
-
/* Otherwise the URL will overflow when the content is very narrow. */
max-width: 100%;
position: relative;
- &:hover {
- @mixin ck-tooltip_visible;
- }
-
& .ck-media__placeholder__url__text {
overflow: hidden;
display: block;
diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkactions.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkactions.css
index 532e9bdba45..af659e6daf3 100644
--- a/packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkactions.css
+++ b/packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkactions.css
@@ -3,7 +3,6 @@
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
*/
-@import "@ckeditor/ckeditor5-ui/theme/components/tooltip/mixins/_tooltip.css";
@import "@ckeditor/ckeditor5-ui/theme/mixins/_unselectable.css";
@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
@import "../mixins/_focus.css";
diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/panel/balloonpanel.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/panel/balloonpanel.css
index 281ff7e955f..95841554067 100644
--- a/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/panel/balloonpanel.css
+++ b/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/panel/balloonpanel.css
@@ -7,6 +7,7 @@
@import "../../../mixins/_shadow.css";
:root {
+ --ck-balloon-border-width: 1px;
--ck-balloon-arrow-offset: 2px;
--ck-balloon-arrow-height: 10px;
--ck-balloon-arrow-half-width: 8px;
@@ -20,7 +21,7 @@
min-height: 15px;
background: var(--ck-color-panel-background);
- border: 1px solid var(--ck-color-panel-border);
+ border: var(--ck-balloon-border-width) solid var(--ck-color-panel-border);
&.ck-balloon-panel_with-arrow {
&::before,
@@ -39,11 +40,12 @@
&::before {
border-color: transparent transparent var(--ck-color-panel-border) transparent;
+ margin-top: calc( -1 * var(--ck-balloon-border-width) );
}
&::after {
border-color: transparent transparent var(--ck-color-panel-background) transparent;
- margin-top: var(--ck-balloon-arrow-offset);
+ margin-top: calc( var(--ck-balloon-arrow-offset) - var(--ck-balloon-border-width) );
}
}
@@ -56,11 +58,46 @@
&::before {
border-color: var(--ck-color-panel-border) transparent transparent;
filter: drop-shadow(var(--ck-balloon-arrow-drop-shadow));
+ margin-bottom: calc( -1 * var(--ck-balloon-border-width) );
}
&::after {
border-color: var(--ck-color-panel-background) transparent transparent transparent;
- margin-bottom: var(--ck-balloon-arrow-offset);
+ margin-bottom: calc( var(--ck-balloon-arrow-offset) - var(--ck-balloon-border-width) );
+ }
+ }
+
+ &[class*="arrow_e"] {
+ &::before,
+ &::after {
+ border-width: var(--ck-balloon-arrow-half-width) 0 var(--ck-balloon-arrow-half-width) var(--ck-balloon-arrow-height);
+ }
+
+ &::before {
+ border-color: transparent transparent transparent var(--ck-color-panel-border);
+ margin-right: calc( -1 * var(--ck-balloon-border-width) );
+ }
+
+ &::after {
+ border-color: transparent transparent transparent var(--ck-color-panel-background);
+ margin-right: calc( var(--ck-balloon-arrow-offset) - var(--ck-balloon-border-width) );
+ }
+ }
+
+ &[class*="arrow_w"] {
+ &::before,
+ &::after {
+ border-width: var(--ck-balloon-arrow-half-width) var(--ck-balloon-arrow-height) var(--ck-balloon-arrow-half-width) 0;
+ }
+
+ &::before {
+ border-color: transparent var(--ck-color-panel-border) transparent transparent;
+ margin-left: calc( -1 * var(--ck-balloon-border-width) );
+ }
+
+ &::after {
+ border-color: transparent var(--ck-color-panel-background) transparent transparent;
+ margin-left: calc( var(--ck-balloon-arrow-offset) - var(--ck-balloon-border-width) );
}
}
@@ -149,4 +186,22 @@
top: calc(-1 * var(--ck-balloon-arrow-height));
}
}
+
+ &.ck-balloon-panel_arrow_e {
+ &::before,
+ &::after {
+ right: calc(-1 * var(--ck-balloon-arrow-height));
+ margin-top: calc(-1 * var(--ck-balloon-arrow-half-width));
+ top: 50%;
+ }
+ }
+
+ &.ck-balloon-panel_arrow_w {
+ &::before,
+ &::after {
+ left: calc(-1 * var(--ck-balloon-arrow-height));
+ margin-top: calc(-1 * var(--ck-balloon-arrow-half-width));
+ top: 50%;
+ }
+ }
}
diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/tooltip/tooltip.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/tooltip/tooltip.css
index 10e476972a4..7388252a5e1 100644
--- a/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/tooltip/tooltip.css
+++ b/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/tooltip/tooltip.css
@@ -5,190 +5,26 @@
@import "../../../mixins/_rounded.css";
-:root {
- --ck-tooltip-arrow-size: 5px;
-}
-
-.ck.ck-tooltip {
- left: 50%;
+.ck.ck-balloon-panel.ck-tooltip {
+ --ck-balloon-border-width: 0px;
+ --ck-balloon-arrow-offset: 0px;
+ --ck-balloon-arrow-half-width: 4px;
+ --ck-balloon-arrow-height: 4px;
+ --ck-color-panel-background: var(--ck-color-tooltip-background);
- /*
- * Prevent blurry tooltips in LoDPI environments.
- * See https://github.com/ckeditor/ckeditor5/issues/1802.
- */
- top: 0;
-
- /*
- * For the transition to work, the tooltip must be controlled
- * using visibility+opacity. A delay prevents a "tooltip avalanche"
- * i.e. when scanning the toolbar with mouse cursor.
- */
- transition: opacity .2s ease-in-out .2s;
+ padding: 0 var(--ck-spacing-medium);
& .ck-tooltip__text {
- @mixin ck-rounded-corners;
-
font-size: .9em;
line-height: 1.5;
color: var(--ck-color-tooltip-text);
- padding: var(--ck-spacing-small) var(--ck-spacing-medium);
- background: var(--ck-color-tooltip-background);
- position: relative;
- left: -50%;
-
- &::after {
- /*
- * For the transition to work, the tooltip must be controlled
- * using visibility+opacity. A delay prevents a "tooltip avalanche"
- * i.e. when scanning the toolbar with mouse cursor.
- */
- transition: opacity .2s ease-in-out .2s;
- border-style: solid;
- left: 50%;
- }
- }
-
- /**
- * A class that displays the tooltip south of the element.
- *
- * [element]
- * ^
- * +-----------+
- * | Tooltip |
- * +-----------+
- */
- &.ck-tooltip_s,
- &.ck-tooltip_sw,
- &.ck-tooltip_se {
- bottom: calc(-1 * var(--ck-tooltip-arrow-size));
- transform: translateY( 100% );
-
- & .ck-tooltip__text::after {
- /* 1px addresses gliches in rendering causing gap between the triangle and the text */
- top: calc(-1 * var(--ck-tooltip-arrow-size) + 1px);
- transform: translateX( -50% );
- border-color: transparent transparent var(--ck-color-tooltip-background) transparent;
- border-width: 0 var(--ck-tooltip-arrow-size) var(--ck-tooltip-arrow-size) var(--ck-tooltip-arrow-size);
- }
- }
-
- /**
- * A class that displays the tooltip south-west of the element.
- *
- * [element]
- * ^
- * +-----------+
- * | Tooltip |
- * +-----------+
- */
-
- &.ck-tooltip_sw {
- right: 50%;
- left: auto;
-
- & .ck-tooltip__text {
- left: auto;
- right: calc( -2 * var(--ck-tooltip-arrow-size));
- }
-
- & .ck-tooltip__text::after {
- left: auto;
- right: 0;
- }
}
- /**
- * A class that displays the tooltip south-east of the element.
- *
- * [element]
- * ^
- * +-----------+
- * | Tooltip |
- * +-----------+
- */
- &.ck-tooltip_se {
- left: 50%;
- right: auto;
-
- & .ck-tooltip__text {
- right: auto;
- left: calc( -2 * var(--ck-tooltip-arrow-size));
- }
-
- & .ck-tooltip__text::after {
- right: auto;
- left: 0;
- transform: translateX( 50% );
- }
- }
-
- /**
- * A class that displays the tooltip north of the element.
- *
- * +-----------+
- * | Tooltip |
- * +-----------+
- * V
- * [element]
- */
- &.ck-tooltip_n {
- top: calc(-1 * var(--ck-tooltip-arrow-size));
- transform: translateY( -100% );
-
- & .ck-tooltip__text::after {
- bottom: calc(-1 * var(--ck-tooltip-arrow-size));
- transform: translateX( -50% );
- border-color: var(--ck-color-tooltip-background) transparent transparent transparent;
- border-width: var(--ck-tooltip-arrow-size) var(--ck-tooltip-arrow-size) 0 var(--ck-tooltip-arrow-size);
- }
- }
-
- /**
- * A class that displays the tooltip east of the element.
- *
- * +----------+
- * [element] < | east |
- * +----------+
- */
- &.ck-tooltip_e {
- left: calc(100% + var(--ck-tooltip-arrow-size));
- top: 50%;
-
- & .ck-tooltip__text {
- left: 0;
- transform: translateY( -50% );
-
- &::after {
- left: calc(-1 * var(--ck-tooltip-arrow-size));
- top: calc(50% - 1 * var(--ck-tooltip-arrow-size));
- border-color: transparent var(--ck-color-tooltip-background) transparent transparent;
- border-width: var(--ck-tooltip-arrow-size) var(--ck-tooltip-arrow-size) var(--ck-tooltip-arrow-size) 0;
- }
- }
- }
-
- /**
- * A class that displays the tooltip west of the element.
- *
- * +----------+
- * | west | > [element]
- * +----------+
- */
- &.ck-tooltip_w {
- right: calc(100% + var(--ck-tooltip-arrow-size));
- left: auto;
- top: 50%;
-
- & .ck-tooltip__text {
- left: 0;
- transform: translateY( -50% );
+ /* Reset balloon panel styles */
+ box-shadow: none;
- &::after {
- left: 100%;
- top: calc(50% - 1 * var(--ck-tooltip-arrow-size));
- border-color: transparent transparent transparent var(--ck-color-tooltip-background);
- border-width: var(--ck-tooltip-arrow-size) 0 var(--ck-tooltip-arrow-size) var(--ck-tooltip-arrow-size);
- }
- }
+ /* Hide the default shadow of the .ck-balloon-panel tip */
+ &::before {
+ display: none;
}
}
diff --git a/packages/ckeditor5-ui/package.json b/packages/ckeditor5-ui/package.json
index fd75e0872cc..3d0b4ca99d4 100644
--- a/packages/ckeditor5-ui/package.json
+++ b/packages/ckeditor5-ui/package.json
@@ -23,6 +23,8 @@
"@ckeditor/ckeditor5-engine": "^35.0.1",
"@ckeditor/ckeditor5-enter": "^35.0.1",
"@ckeditor/ckeditor5-essentials": "^35.0.1",
+ "@ckeditor/ckeditor5-font": "^35.0.1",
+ "@ckeditor/ckeditor5-find-and-replace": "^35.0.1",
"@ckeditor/ckeditor5-heading": "^35.0.1",
"@ckeditor/ckeditor5-image": "^35.0.1",
"@ckeditor/ckeditor5-link": "^35.0.1",
diff --git a/packages/ckeditor5-ui/src/button/button.jsdoc b/packages/ckeditor5-ui/src/button/button.jsdoc
index 7de7f354350..3f848431de2 100644
--- a/packages/ckeditor5-ui/src/button/button.jsdoc
+++ b/packages/ckeditor5-ui/src/button/button.jsdoc
@@ -51,8 +51,8 @@
*/
/**
- * (Optional) The position of the tooltip. See {@link module:ui/tooltip/tooltipview~TooltipView#position}
- * to learn more about the available position values.
+ * (Optional) The position of the tooltip. See {@link module:ui/tooltipmanager~TooltipManager}
+ * to learn more about the tooltip system.
*
* **Note:** It makes sense only when the {@link #tooltip `tooltip` attribute} is defined.
*
diff --git a/packages/ckeditor5-ui/src/button/buttonview.js b/packages/ckeditor5-ui/src/button/buttonview.js
index 269bc482ebc..b4d44bcc34a 100644
--- a/packages/ckeditor5-ui/src/button/buttonview.js
+++ b/packages/ckeditor5-ui/src/button/buttonview.js
@@ -9,7 +9,6 @@
import View from '../view';
import IconView from '../icon/iconview';
-import TooltipView from '../tooltip/tooltipview';
import uid from '@ckeditor/ckeditor5-utils/src/uid';
import { getEnvKeystrokeText } from '@ckeditor/ckeditor5-utils/src/keyboard';
@@ -71,14 +70,6 @@ export default class ButtonView extends View {
*/
this.children = this.createCollection();
- /**
- * Tooltip of the button view. It is configurable using the {@link #tooltip tooltip attribute}.
- *
- * @readonly
- * @member {module:ui/tooltip/tooltipview~TooltipView} #tooltipView
- */
- this.tooltipView = this._createTooltipView();
-
/**
* Label of the button view. It is configurable using the {@link #label label attribute}.
*
@@ -119,7 +110,7 @@ export default class ButtonView extends View {
* @see #_getTooltipString
* @private
* @observable
- * @member {Boolean} #_tooltipString
+ * @member {String|undefined} #_tooltipString
*/
this.bind( '_tooltipString' ).to(
this, 'tooltip',
@@ -146,7 +137,9 @@ export default class ButtonView extends View {
tabindex: bind.to( 'tabindex' ),
'aria-labelledby': `ck-editor__aria-label_${ ariaLabelUid }`,
'aria-disabled': bind.if( 'isEnabled', true, value => !value ),
- 'aria-pressed': bind.to( 'isOn', value => this.isToggleable ? String( !!value ) : false )
+ 'aria-pressed': bind.to( 'isOn', value => this.isToggleable ? String( !!value ) : false ),
+ 'data-cke-tooltip-text': bind.to( '_tooltipString' ),
+ 'data-cke-tooltip-position': bind.to( 'tooltipPosition' )
},
children: this.children,
@@ -189,7 +182,6 @@ export default class ButtonView extends View {
this.children.add( this.iconView );
}
- this.children.add( this.tooltipView );
this.children.add( this.labelView );
if ( this.withKeystroke && this.keystroke ) {
@@ -204,22 +196,6 @@ export default class ButtonView extends View {
this.element.focus();
}
- /**
- * Creates a {@link module:ui/tooltip/tooltipview~TooltipView} instance and binds it with button
- * attributes.
- *
- * @private
- * @returns {module:ui/tooltip/tooltipview~TooltipView}
- */
- _createTooltipView() {
- const tooltipView = new TooltipView();
-
- tooltipView.bind( 'text' ).to( this, '_tooltipString' );
- tooltipView.bind( 'position' ).to( this, 'tooltipPosition' );
-
- return tooltipView;
- }
-
/**
* Creates a label view instance and binds it with button attributes.
*
@@ -284,7 +260,7 @@ export default class ButtonView extends View {
}
/**
- * Gets the text for the {@link #tooltipView} from the combination of
+ * Gets the text for the tooltip from the combination of
* {@link #tooltip}, {@link #label} and {@link #keystroke} attributes.
*
* @private
diff --git a/packages/ckeditor5-ui/src/dropdown/button/splitbuttonview.js b/packages/ckeditor5-ui/src/dropdown/button/splitbuttonview.js
index 93b8a79f089..1f3d538e547 100644
--- a/packages/ckeditor5-ui/src/dropdown/button/splitbuttonview.js
+++ b/packages/ckeditor5-ui/src/dropdown/button/splitbuttonview.js
@@ -222,7 +222,10 @@ export default class SplitButtonView extends View {
arrowView.extendTemplate( {
attributes: {
- class: 'ck-splitbutton__arrow',
+ class: [
+ 'ck-splitbutton__arrow'
+ ],
+ 'data-cke-tooltip-disabled': bind.to( 'isOn' ),
'aria-haspopup': true,
'aria-expanded': bind.to( 'isOn', value => String( value ) )
}
diff --git a/packages/ckeditor5-ui/src/dropdown/dropdownview.js b/packages/ckeditor5-ui/src/dropdown/dropdownview.js
index 541009dd241..e9a7b7b05c6 100644
--- a/packages/ckeditor5-ui/src/dropdown/dropdownview.js
+++ b/packages/ckeditor5-ui/src/dropdown/dropdownview.js
@@ -194,7 +194,8 @@ export default class DropdownView extends View {
attributes: {
class: [
'ck-dropdown__button'
- ]
+ ],
+ 'data-cke-tooltip-disabled': bind.to( 'isOpen' )
}
} );
diff --git a/packages/ckeditor5-ui/src/index.js b/packages/ckeditor5-ui/src/index.js
index 338f1b74075..8aee05054b1 100644
--- a/packages/ckeditor5-ui/src/index.js
+++ b/packages/ckeditor5-ui/src/index.js
@@ -53,7 +53,7 @@ export { default as BalloonPanelView } from './panel/balloon/balloonpanelview';
export { default as ContextualBalloon } from './panel/balloon/contextualballoon';
export { default as StickyPanelView } from './panel/sticky/stickypanelview';
-export { default as TooltipView } from './tooltip/tooltipview';
+export { default as TooltipManager } from './tooltipmanager';
export { default as Template } from './template';
export { default as ToolbarView } from './toolbar/toolbarview';
diff --git a/packages/ckeditor5-ui/src/panel/balloon/balloonpanelview.js b/packages/ckeditor5-ui/src/panel/balloon/balloonpanelview.js
index 8e61367f3ad..a0663383e6d 100644
--- a/packages/ckeditor5-ui/src/panel/balloon/balloonpanelview.js
+++ b/packages/ckeditor5-ui/src/panel/balloon/balloonpanelview.js
@@ -392,60 +392,74 @@ function getDomElement( object ) {
}
/**
- * A horizontal offset of the arrow tip from the edge of the balloon. Controlled by CSS.
- *
- * +-----|---------...
- * | |
- * | |
- * | |
- * | |
- * +--+ | +------...
- * \ | /
- * \|/
- * >|-----|<---------------- horizontal offset
+ * A side offset of the arrow tip from the edge of the balloon. Controlled by CSS.
+ *
+ * ┌───────────────────────┐
+ * │ │
+ * │ Balloon │
+ * │ Content │
+ * │ │
+ * └──+ +───────────────┘
+ * | \ /
+ * | \/
+ * >┼─────┼< ─────────────────────── side offset
+ *
*
* @default 25
- * @member {Number} module:ui/panel/balloon/balloonpanelview~BalloonPanelView.arrowHorizontalOffset
+ * @member {Number} module:ui/panel/balloon/balloonpanelview~BalloonPanelView.arrowSideOffset
*/
-BalloonPanelView.arrowHorizontalOffset = 25;
+BalloonPanelView.arrowSideOffset = 25;
/**
- * A vertical offset of the arrow from the edge of the balloon. Controlled by CSS.
- *
- * +-------------...
- * |
- * |
- * | /-- vertical offset
- * | V
- * +--+ +-----... ---------
- * \ / |
- * \/ |
- * -------------------------------
- * ^
+ * A height offset of the arrow from the edge of the balloon. Controlled by CSS.
+ *
+ * ┌───────────────────────┐
+ * │ │
+ * │ Balloon │
+ * │ Content │ ╱-- arrow height offset
+ * │ │ V
+ * └──+ +───────────────┘ --- ─┼───────
+ * \ / │
+ * \/ │
+ * ────────────────────────────────┼───────
+ * ^
+ *
+ *
+ * >┼────┼< arrow height offset
+ * │ │
+ * │ ┌────────────────────────┐
+ * │ │ │
+ * │ ╱ │
+ * │ ╱ Balloon │
+ * │ ╲ Content │
+ * │ ╲ │
+ * │ │ │
+ * │ └────────────────────────┘
+ *
*
* @default 10
- * @member {Number} module:ui/panel/balloon/balloonpanelview~BalloonPanelView.arrowVerticalOffset
+ * @member {Number} module:ui/panel/balloon/balloonpanelview~BalloonPanelView.arrowHeightOffset
*/
-BalloonPanelView.arrowVerticalOffset = 10;
+BalloonPanelView.arrowHeightOffset = 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 |
- * +-------------------------------------------------------+
+ * ┌───────────────────────────────────────────────────┐
+ * │ Target │
+ * │ │
+ * │ /── vertical offset │
+ * ┌─────────────────────────────V─────────────────────────┐
+ * │ Toolbar ┌─────────────┐ │
+ * ├────────────────────│ Balloon │────────────────────┤
+ * │ │ └─────────────┘ │ │
+ * │ │ │ │
+ * │ │ │ │
+ * │ │ │ │
+ * │ └───────────────────────────────────────────────────┘ │
+ * │ Viewport │
+ * └───────────────────────────────────────────────────────┘
*
* @default 20
* @member {Number} module:ui/panel/balloon/balloonpanelview~BalloonPanelView.stickyVerticalOffset
@@ -697,7 +711,7 @@ BalloonPanelView._getOptimalPosition = getOptimalPosition;
* +-----------------+
* | Balloon |
* +-----------------+
-* * `southEastArrowNorthMiddleWest`
+ * * `southEastArrowNorthMiddleWest`
*
* [ Target ]
* ^
@@ -729,6 +743,28 @@ BalloonPanelView._getOptimalPosition = getOptimalPosition;
* | Balloon |
* +-----------------+
*
+ *
+ *
+ * **West**
+ *
+ * * `westArrowEast`
+ *
+ * +-----------------+
+ * | Balloon |>[ Target ]
+ * +-----------------+
+ *
+ * **East**
+ *
+ * * `eastArrowWest`
+ *
+ * +-----------------+
+ * [ Target ]<| Balloon |
+ * +-----------------+
+ *
+ *
+ *
+ * **Sticky**
+ *
* * `viewportStickyNorth`
*
* +---------------------------+
@@ -768,11 +804,11 @@ BalloonPanelView.defaultPositions = generatePositions();
* @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}
+ * @param {Number} [options.sideOffset] A custom side offset (in pixels) of each position. If
+ * not specified, {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView.arrowSideOffset 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}
+ * @param {Number} [options.heightOffset] A custom height offset (in pixels) of each position. If
+ * not specified, {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView.arrowHeightOffset 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}
@@ -783,8 +819,8 @@ BalloonPanelView.defaultPositions = generatePositions();
* @returns {Object..*
' +
- `` +
- `${ expectedUrl }` +
- '' +
- 'Open media in new tab' +
- '' +
+ '' +
+ `${ expectedUrl }` +
'' +
'Tooltip positions (hover to test)
+
+
+
+S
+ N
+ E
+ W
+ SW
+ SE
+ S: far left
+ S: far right
+Tooltips in editor
+ +
+
+ 
+ Caption
+
+
+
+Heading 1
+Paragraph
+Bold Italic Link
+-
+
- UL List item 1 +
- UL List item 2 +
-
+
- OL List item 1 +
- OL List item 2 +
+ ++Quote
++
+- Quoted UL List item 1
+- Quoted UL List item 2
+Quote
+
Tooltips in editor with scrollable parent
+ +
+
+
+
diff --git a/packages/ckeditor5-ui/tests/manual/tooltip/tooltip.js b/packages/ckeditor5-ui/tests/manual/tooltip/tooltip.js
new file mode 100644
index 00000000000..9b34ee4e49b
--- /dev/null
+++ b/packages/ckeditor5-ui/tests/manual/tooltip/tooltip.js
@@ -0,0 +1,69 @@
+/**
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/* globals console, window, document, CKEditorInspector */
+
+import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
+
+import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
+import ListProperties from '@ckeditor/ckeditor5-list/src/listproperties';
+import FontColor from '@ckeditor/ckeditor5-font/src/fontcolor';
+import FindAndReplace from '@ckeditor/ckeditor5-find-and-replace/src/findandreplace';
+
+initEditor( '#editor' );
+initEditor( '#editor-scrollable-parent' );
+
+function initEditor( elementId ) {
+ ClassicEditor
+ .create( document.querySelector( elementId ), {
+ plugins: [ ArticlePluginSet, ListProperties, FontColor, FindAndReplace ],
+ toolbar: [
+ 'heading',
+ '|',
+ 'bold',
+ 'italic',
+ 'link',
+ '|',
+ 'fontColor',
+ '|',
+ 'bulletedList',
+ 'numberedList',
+ '|',
+ 'outdent',
+ 'indent',
+ '|',
+ 'blockQuote',
+ 'insertTable',
+ 'mediaEmbed',
+ '|',
+ 'findAndReplace',
+ '|',
+ 'undo',
+ 'redo'
+ ],
+ image: {
+ toolbar: [ 'imageStyle:inline', 'imageStyle:block', 'imageStyle:side', '|', 'imageTextAlternative' ]
+ },
+ table: {
+ contentToolbar: [
+ 'tableColumn',
+ 'tableRow',
+ 'mergeTableCells'
+ ]
+ }
+ } )
+ .then( editor => {
+ if ( !window.editors ) {
+ window.editors = {};
+ }
+
+ window.editors[ elementId ] = editor;
+
+ CKEditorInspector.attach( { [ elementId ]: editor } );
+ } )
+ .catch( err => {
+ console.error( err.stack );
+ } );
+}
diff --git a/packages/ckeditor5-ui/tests/manual/tooltip/tooltip.md b/packages/ckeditor5-ui/tests/manual/tooltip/tooltip.md
new file mode 100644
index 00000000000..53e0fa6e04d
--- /dev/null
+++ b/packages/ckeditor5-ui/tests/manual/tooltip/tooltip.md
@@ -0,0 +1,32 @@
+# Tooltip playground
+
+This manual test allows testing various tooltip scenarios in the UI (testing `TooltipManager`).
+
+## Tooltip positions
+
+1. Hover each box (N, S, E, etc.).
+2. A tooltip should show up at a position corresponding to the name of the box.
+3. Make sure tooltip arrows ("tips") are always centered with respect to the box.
+
+## Tooltips in the editor
+
+### With mouse
+
+1. Hover various editor buttons to display their tooltips.
+2. Tooltips should show up after a delay.
+3. There should always be a single tooltip at a time on a web page.
+4. Make sure that moving mouse between buttons quickly does not result in orphaned tooltips attached to elements no longer being hovered.
+
+### With keyboard
+
+1. Use `Alt+F10` to focus the toolbar and navigate it using the keyboard.
+2. Tooltips should show up when items are focused and hide when they get blurred.
+3. Moving mouse to another toolbar item should hide a tooltip attached to the item focused using the keyboard (and vice-versa).
+
+## Tooltips when editor has a scrollable ancestor
+
+1. Make any tooltip show up using either mouse or keyboard.
+2. Scroll the box.
+3. The tooltip should hide and not return.
+
+Repeat the same scenario but scroll the entire webpage (not just the box containing the editor). The tooltip should remain visible in this case.
diff --git a/packages/ckeditor5-ui/tests/panel/balloon/balloonpanelview.js b/packages/ckeditor5-ui/tests/panel/balloon/balloonpanelview.js
index 6544d3663de..2d3a208294a 100644
--- a/packages/ckeditor5-ui/tests/panel/balloon/balloonpanelview.js
+++ b/packages/ckeditor5-ui/tests/panel/balloon/balloonpanelview.js
@@ -350,7 +350,7 @@ describe( 'BalloonPanelView', () => {
view.attachTo( { target, limiter } );
- expect( view.top ).to.equal( BalloonPanelView.arrowVerticalOffset );
+ expect( view.top ).to.equal( BalloonPanelView.arrowHeightOffset );
expect( view.left ).to.equal( -100 );
positionedAncestor.remove();
@@ -375,7 +375,7 @@ describe( 'BalloonPanelView', () => {
view.attachTo( { target, limiter } );
- expect( view.top ).to.equal( BalloonPanelView.arrowVerticalOffset + 100 );
+ expect( view.top ).to.equal( BalloonPanelView.arrowHeightOffset + 100 );
expect( view.left ).to.equal( 0 );
positionedAncestor.remove();
@@ -726,8 +726,8 @@ describe( 'BalloonPanelView', () => {
beforeEach( () => {
positions = BalloonPanelView.defaultPositions;
- arrowHOffset = BalloonPanelView.arrowHorizontalOffset;
- arrowVOffset = BalloonPanelView.arrowVerticalOffset;
+ arrowHOffset = BalloonPanelView.arrowSideOffset;
+ arrowVOffset = BalloonPanelView.arrowHeightOffset;
viewportRect = new Rect( {
top: 0,
@@ -758,7 +758,7 @@ describe( 'BalloonPanelView', () => {
} );
it( 'should have a proper length', () => {
- expect( Object.keys( positions ) ).to.have.length( 31 );
+ expect( Object.keys( positions ) ).to.have.length( 33 );
} );
// ------- North
@@ -1013,6 +1013,26 @@ describe( 'BalloonPanelView', () => {
} );
} );
+ // ------- West
+
+ it( 'should define the "westArrowEast" position', () => {
+ expect( positions.westArrowEast( targetRect, balloonRect ) ).to.deep.equal( {
+ top: 125,
+ left: 50 - arrowVOffset,
+ name: 'arrow_e'
+ } );
+ } );
+
+ // ------- East
+
+ it( 'should define the "eastArrowWest" position', () => {
+ expect( positions.eastArrowWest( targetRect, balloonRect ) ).to.deep.equal( {
+ top: 125,
+ left: 200 + arrowVOffset,
+ name: 'arrow_w'
+ } );
+ } );
+
// ------- Sticky
it( 'should define the "viewportStickyNorth" position and return null if not sticky', () => {
@@ -1135,9 +1155,9 @@ describe( 'BalloonPanelView', () => {
}
} );
- it( 'should respect the "horizontalOffset" option', () => {
+ it( 'should respect the "sideOffset" option', () => {
const generatedPositions = generatePositions( {
- horizontalOffset: BalloonPanelView.arrowHorizontalOffset + 100
+ sideOffset: BalloonPanelView.arrowSideOffset + 100
} );
for ( const name in generatedPositions ) {
@@ -1155,20 +1175,30 @@ describe( 'BalloonPanelView', () => {
}
} );
- it( 'should respect the "verticalOffset" option', () => {
+ it( 'should respect the "heightOffset" option', () => {
const generatedPositions = generatePositions( {
- verticalOffset: BalloonPanelView.arrowVerticalOffset + 100
+ heightOffset: BalloonPanelView.arrowHeightOffset + 100
} );
for ( const name in generatedPositions ) {
const generatedResult = generatedPositions[ name ]( targetRect, balloonRect, viewportRect );
- if ( name.match( /^south/ ) ) {
+ if ( name.startsWith( 'south' ) ) {
generatedResult.top -= 100;
- } else if ( name.match( /^north/ ) ) {
+ }
+
+ if ( name.startsWith( 'north' ) ) {
generatedResult.top += 100;
}
+ if ( name.startsWith( 'west' ) ) {
+ generatedResult.left += 100;
+ }
+
+ if ( name.startsWith( 'east' ) ) {
+ generatedResult.left -= 100;
+ }
+
const defaultResult = defaultPositions[ name ]( targetRect, balloonRect, viewportRect );
expect( generatedResult ).to.deep.equal( defaultResult, name );
diff --git a/packages/ckeditor5-ui/tests/tooltip/tooltipmanager.js b/packages/ckeditor5-ui/tests/tooltip/tooltipmanager.js
new file mode 100644
index 00000000000..c8e7d8daded
--- /dev/null
+++ b/packages/ckeditor5-ui/tests/tooltip/tooltipmanager.js
@@ -0,0 +1,842 @@
+/**
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/* global document, MouseEvent, Event */
+
+import View from '../../src/view';
+import BalloonPanelView from '../../src/panel/balloon/balloonpanelview';
+import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
+import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
+import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
+
+import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor';
+import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
+import TooltipManager from '../../src/tooltipmanager';
+
+describe( 'TooltipManager', () => {
+ let editor, element, tooltipManager;
+
+ const utils = getUtils();
+
+ testUtils.createSinonSandbox();
+
+ beforeEach( async () => {
+ // TooltipManager is a singleton shared across editor instances. If any other test didn't
+ // kill its editor, this will affect assertions in tests here.
+ TooltipManager._editors = new Set();
+
+ element = document.createElement( 'div' );
+ document.body.appendChild( element );
+
+ editor = await ClassicTestEditor.create( element, {
+ plugins: [ Paragraph, Bold, Italic ],
+ balloonToolbar: [ 'bold', 'italic' ]
+ } );
+
+ tooltipManager = editor.ui.tooltipManager;
+ } );
+
+ afterEach( async () => {
+ await editor.destroy();
+
+ element.remove();
+ } );
+
+ describe( 'constructor()', () => {
+ describe( 'singleton', () => {
+ it( 'should be created once for all editor instances', async () => {
+ const secondEditor = await ClassicTestEditor.create( element, {
+ plugins: [ Paragraph, Bold, Italic ],
+ balloonToolbar: [ 'bold', 'italic' ]
+ } );
+
+ expect( editor.ui.tooltipManager ).to.equal( secondEditor.ui.tooltipManager );
+
+ await secondEditor.destroy();
+ } );
+ } );
+
+ it( 'should have #tooltipTextView', () => {
+ expect( tooltipManager.tooltipTextView ).to.be.instanceOf( View );
+ expect( tooltipManager.tooltipTextView.text ).to.equal( '' );
+ expect( Array.from( tooltipManager.tooltipTextView.element.classList ) ).to.have.members( [ 'ck', 'ck-tooltip__text' ] );
+ } );
+
+ it( 'should have #balloonPanelView', () => {
+ expect( tooltipManager.balloonPanelView ).to.be.instanceOf( BalloonPanelView );
+ expect( tooltipManager.balloonPanelView.class ).to.equal( 'ck-tooltip' );
+ expect( tooltipManager.balloonPanelView.content.first ).to.equal( tooltipManager.tooltipTextView );
+ } );
+ } );
+
+ describe( 'destroy()', () => {
+ describe( 'singleton', () => {
+ it( 'should no be destroyed until the last editor instance gets destroyed', async () => {
+ const secondEditor = await ClassicTestEditor.create( element, {
+ plugins: [ Paragraph, Bold, Italic ],
+ balloonToolbar: [ 'bold', 'italic' ]
+ } );
+
+ const stopListeningSpy = sinon.spy( editor.ui.tooltipManager, 'stopListening' );
+
+ await editor.destroy();
+
+ sinon.assert.calledOnce( stopListeningSpy );
+ sinon.assert.calledWithExactly( stopListeningSpy.firstCall, editor.ui );
+
+ await secondEditor.destroy();
+
+ sinon.assert.calledWithExactly( stopListeningSpy.secondCall, secondEditor.ui );
+ sinon.assert.calledWithExactly( stopListeningSpy.thirdCall );
+ } );
+ } );
+
+ it( 'should unpin the #balloonPanelView', () => {
+ const unpinSpy = sinon.spy( tooltipManager.balloonPanelView, 'unpin' );
+
+ tooltipManager.destroy( editor );
+
+ sinon.assert.calledOnce( unpinSpy );
+ } );
+
+ it( 'should destroy #balloonPanelView', () => {
+ const destroySpy = sinon.spy( tooltipManager.balloonPanelView, 'destroy' );
+
+ tooltipManager.destroy( editor );
+
+ sinon.assert.calledOnce( destroySpy );
+ } );
+
+ it( 'should stop listening to events', () => {
+ const stopListeningSpy = sinon.spy( tooltipManager, 'stopListening' );
+
+ tooltipManager.destroy( editor );
+
+ sinon.assert.called( stopListeningSpy );
+ } );
+
+ it( 'should cancel any queued pinning', () => {
+ const cancelSpy = sinon.spy( tooltipManager._pinTooltipDebounced, 'cancel' );
+
+ tooltipManager.destroy( editor );
+
+ sinon.assert.called( cancelSpy );
+ } );
+ } );
+
+ describe( 'displaying tooltips', () => {
+ let clock, elements, pinSpy, unpinSpy, defaultPositions;
+
+ beforeEach( () => {
+ clock = sinon.useFakeTimers();
+ defaultPositions = TooltipManager.defaultBalloonPositions;
+
+ elements = getElementsWithTooltips( {
+ a: {
+ text: 'A'
+ },
+
+ b: {
+ text: 'B'
+ },
+
+ disabled: {
+ text: 'DISABLED',
+ isDisabled: true
+ },
+
+ customClass: {
+ text: 'CUSTOM_CLASS',
+ class: 'foo-bar'
+ },
+
+ unrelated: {},
+
+ positionS: {
+ text: 'POSITION_S',
+ position: 's'
+ },
+
+ positionN: {
+ text: 'POSITION_N',
+ position: 'n'
+ },
+
+ positionE: {
+ text: 'POSITION_E',
+ position: 'e'
+ },
+
+ positionW: {
+ text: 'POSITION_W',
+ position: 'w'
+ },
+
+ positionSW: {
+ text: 'POSITION_SW',
+ position: 'sw'
+ },
+
+ positionSE: {
+ text: 'POSITION_SE',
+ position: 'se'
+ }
+ } );
+
+ pinSpy = sinon.spy( tooltipManager.balloonPanelView, 'pin' );
+ unpinSpy = sinon.spy( tooltipManager.balloonPanelView, 'unpin' );
+ } );
+
+ afterEach( () => {
+ destroyElements( elements );
+ clock.restore();
+ } );
+
+ describe( 'on mouseenter', () => {
+ it( 'should not work for elements that have no descendant with the data-attribute', () => {
+ utils.dispatchMouseEnter( elements.unrelated );
+ utils.waitForTheTooltipToShow( clock );
+
+ sinon.assert.notCalled( pinSpy );
+ } );
+
+ it( 'should not work if an element already has a tooltip', () => {
+ utils.dispatchMouseEnter( elements.a );
+ utils.waitForTheTooltipToShow( clock );
+
+ utils.dispatchMouseEnter( elements.a );
+ utils.waitForTheTooltipToShow( clock );
+
+ sinon.assert.calledOnce( pinSpy );
+ } );
+
+ it( 'should not work for elements with a data-cke-tooltip-disabled attribute', () => {
+ utils.dispatchMouseEnter( elements.disabled );
+ utils.waitForTheTooltipToShow( clock );
+
+ sinon.assert.notCalled( pinSpy );
+ } );
+
+ describe( 'when all conditions are met', () => {
+ it( 'should unpin the tooltip first', () => {
+ utils.dispatchMouseEnter( elements.a );
+ utils.waitForTheTooltipToShow( clock );
+
+ sinon.assert.callOrder( unpinSpy, pinSpy );
+ } );
+
+ it( 'should pin a tooltip with a delay', () => {
+ utils.dispatchMouseEnter( elements.a );
+
+ sinon.assert.notCalled( pinSpy );
+
+ utils.waitForTheTooltipToShow( clock );
+
+ sinon.assert.calledOnce( pinSpy );
+ sinon.assert.calledWith( pinSpy, {
+ target: elements.a,
+ positions: sinon.match.array
+ } );
+ } );
+
+ it( 'should pin just a single tooltip (singleton)', async () => {
+ const secondEditor = await ClassicTestEditor.create( element, {
+ plugins: [ Paragraph, Bold, Italic ],
+ balloonToolbar: [ 'bold', 'italic' ]
+ } );
+
+ utils.dispatchMouseEnter( elements.a );
+ utils.waitForTheTooltipToShow( clock );
+
+ sinon.assert.calledOnce( pinSpy );
+ expect( Array.from( document.querySelectorAll( '.ck-tooltip' ) ) ).to.have.length( 1 );
+
+ await secondEditor.destroy();
+ } );
+
+ it( 'should add a custom class to the #balloonPanelView if specified in the data attribute', () => {
+ expect( tooltipManager.balloonPanelView.class ).to.equal( 'ck-tooltip' );
+
+ utils.dispatchMouseEnter( elements.customClass );
+ utils.waitForTheTooltipToShow( clock );
+
+ sinon.assert.calledOnce( pinSpy );
+ expect( tooltipManager.balloonPanelView.class ).to.equal( 'ck-tooltip foo-bar' );
+
+ utils.dispatchMouseEnter( elements.a );
+ utils.waitForTheTooltipToShow( clock );
+
+ sinon.assert.calledTwice( pinSpy );
+ expect( tooltipManager.balloonPanelView.class ).to.equal( 'ck-tooltip' );
+ } );
+
+ it( 'should show up for the last element the mouse entered (last element has tooltip)', () => {
+ utils.dispatchMouseEnter( elements.a );
+ utils.dispatchMouseEnter( elements.b );
+
+ utils.waitForTheTooltipToShow( clock );
+
+ sinon.assert.calledOnce( pinSpy );
+ sinon.assert.calledWith( pinSpy, {
+ target: elements.b,
+ positions: sinon.match.array
+ } );
+ } );
+
+ it( 'should show up for the first element the mouse entered (last element has no tooltip)', () => {
+ utils.dispatchMouseEnter( elements.a );
+ utils.dispatchMouseEnter( elements.unrelated );
+
+ utils.waitForTheTooltipToShow( clock );
+
+ sinon.assert.calledOnce( pinSpy );
+ sinon.assert.calledWith( pinSpy, {
+ target: elements.a,
+ positions: sinon.match.array
+ } );
+ } );
+ } );
+ } );
+
+ describe( 'on focus', () => {
+ it( 'should not work for elements that have no descendant with the data-attribute', () => {
+ utils.dispatchFocus( elements.unrelated );
+ utils.waitForTheTooltipToShow( clock );
+
+ sinon.assert.notCalled( pinSpy );
+ } );
+
+ it( 'should not work if an element already has a tooltip', () => {
+ utils.dispatchFocus( elements.a );
+ utils.waitForTheTooltipToShow( clock );
+
+ utils.dispatchFocus( elements.a );
+ utils.waitForTheTooltipToShow( clock );
+
+ sinon.assert.calledOnce( pinSpy );
+ } );
+
+ it( 'should not work for elements with a data-cke-tooltip-disabled', () => {
+ utils.dispatchFocus( elements.disabled );
+ utils.waitForTheTooltipToShow( clock );
+
+ sinon.assert.notCalled( pinSpy );
+ } );
+
+ describe( 'when all conditions are met', () => {
+ it( 'should unpin the tooltip first', () => {
+ utils.dispatchFocus( elements.a );
+ utils.waitForTheTooltipToShow( clock );
+
+ sinon.assert.callOrder( unpinSpy, pinSpy );
+ } );
+
+ it( 'should pin a tooltip with a delay', () => {
+ utils.dispatchFocus( elements.a );
+
+ sinon.assert.notCalled( pinSpy );
+
+ utils.waitForTheTooltipToShow( clock );
+
+ sinon.assert.calledOnce( pinSpy );
+ sinon.assert.calledWith( pinSpy, {
+ target: elements.a,
+ positions: sinon.match.array
+ } );
+ } );
+
+ it( 'should add a custom class to the #balloonPanelView if specified in the data attribute', () => {
+ expect( tooltipManager.balloonPanelView.class ).to.equal( 'ck-tooltip' );
+
+ utils.dispatchFocus( elements.customClass );
+ utils.waitForTheTooltipToShow( clock );
+
+ sinon.assert.calledOnce( pinSpy );
+ expect( tooltipManager.balloonPanelView.class ).to.equal( 'ck-tooltip foo-bar' );
+
+ utils.dispatchFocus( elements.a );
+ utils.waitForTheTooltipToShow( clock );
+
+ sinon.assert.calledTwice( pinSpy );
+ expect( tooltipManager.balloonPanelView.class ).to.equal( 'ck-tooltip' );
+ } );
+
+ it( 'should show up for the last element the mouse entered (last element has tooltip)', () => {
+ utils.dispatchFocus( elements.a );
+ utils.dispatchFocus( elements.b );
+
+ utils.waitForTheTooltipToShow( clock );
+
+ sinon.assert.calledOnce( pinSpy );
+ sinon.assert.calledWith( pinSpy, {
+ target: elements.b,
+ positions: sinon.match.array
+ } );
+ } );
+
+ it( 'should show up for the first element the mouse entered (last element has no tooltip)', () => {
+ utils.dispatchFocus( elements.a );
+ utils.dispatchFocus( elements.unrelated );
+
+ utils.waitForTheTooltipToShow( clock );
+
+ sinon.assert.calledOnce( pinSpy );
+ sinon.assert.calledWith( pinSpy, {
+ target: elements.a,
+ positions: sinon.match.array
+ } );
+ } );
+ } );
+ } );
+
+ it( 'should put the #balloonPanelView in the body collection once on demand', () => {
+ expect( tooltipManager.balloonPanelView.element ).to.be.null;
+
+ utils.dispatchMouseEnter( elements.a );
+ utils.waitForTheTooltipToShow( clock );
+
+ expect( editor.ui.view.body.has( tooltipManager.balloonPanelView ) ).to.be.true;
+
+ utils.dispatchMouseEnter( elements.b );
+ utils.waitForTheTooltipToShow( clock );
+
+ expect( editor.ui.view.body.has( tooltipManager.balloonPanelView ) ).to.be.true;
+ } );
+
+ describe( 'translation of position name into BalloonPanelView positioning function', () => {
+ it( 'should be defined for "s" position', () => {
+ utils.dispatchMouseEnter( elements.positionS );
+ utils.waitForTheTooltipToShow( clock );
+
+ sinon.assert.calledOnce( pinSpy );
+ sinon.assert.calledWith( pinSpy, {
+ target: elements.positionS,
+ positions: [
+ defaultPositions.southArrowNorth,
+ defaultPositions.southArrowNorthEast,
+ defaultPositions.southArrowNorthWest
+ ]
+ } );
+ } );
+
+ it( 'should be defined for "n" position', () => {
+ utils.dispatchMouseEnter( elements.positionN );
+ utils.waitForTheTooltipToShow( clock );
+
+ sinon.assert.calledOnce( pinSpy );
+ sinon.assert.calledWith( pinSpy, {
+ target: elements.positionN,
+ positions: [
+ defaultPositions.northArrowSouth
+ ]
+ } );
+ } );
+
+ it( 'should be defined for "e" position', () => {
+ utils.dispatchMouseEnter( elements.positionE );
+ utils.waitForTheTooltipToShow( clock );
+
+ sinon.assert.calledOnce( pinSpy );
+ sinon.assert.calledWith( pinSpy, {
+ target: elements.positionE,
+ positions: [
+ defaultPositions.eastArrowWest
+ ]
+ } );
+ } );
+
+ it( 'should be defined for "w" position', () => {
+ utils.dispatchMouseEnter( elements.positionW );
+ utils.waitForTheTooltipToShow( clock );
+
+ sinon.assert.calledOnce( pinSpy );
+ sinon.assert.calledWith( pinSpy, {
+ target: elements.positionW,
+ positions: [
+ defaultPositions.westArrowEast
+ ]
+ } );
+ } );
+
+ it( 'should be defined for "sw" position', () => {
+ utils.dispatchMouseEnter( elements.positionSW );
+ utils.waitForTheTooltipToShow( clock );
+
+ sinon.assert.calledOnce( pinSpy );
+ sinon.assert.calledWith( pinSpy, {
+ target: elements.positionSW,
+ positions: [
+ defaultPositions.southArrowNorthEast
+ ]
+ } );
+ } );
+
+ it( 'should be defined for "se" position', () => {
+ utils.dispatchMouseEnter( elements.positionSE );
+ utils.waitForTheTooltipToShow( clock );
+
+ sinon.assert.calledOnce( pinSpy );
+ sinon.assert.calledWith( pinSpy, {
+ target: elements.positionSE,
+ positions: [
+ defaultPositions.southArrowNorthWest
+ ]
+ } );
+ } );
+ } );
+ } );
+
+ describe( 'hiding tooltips', () => {
+ let clock, elements, pinSpy, unpinSpy;
+
+ beforeEach( () => {
+ clock = sinon.useFakeTimers();
+
+ elements = getElementsWithTooltips( {
+ a: {
+ text: 'A'
+ },
+
+ b: {
+ text: 'B'
+ },
+
+ childOfA: {
+ text: 'CHILD_OF_A'
+ },
+
+ unrelated: {}
+ } );
+
+ pinSpy = sinon.spy( tooltipManager.balloonPanelView, 'pin' );
+
+ elements.a.appendChild( elements.childOfA );
+ } );
+
+ afterEach( () => {
+ destroyElements( elements );
+ clock.restore();
+ } );
+
+ describe( 'on mouseleave', () => {
+ it( 'should not work for unrelated event targets such as DOM document', () => {
+ utils.dispatchMouseEnter( elements.a );
+ utils.waitForTheTooltipToShow( clock );
+
+ sinon.assert.calledOnce( pinSpy );
+
+ unpinSpy = sinon.spy( tooltipManager.balloonPanelView, 'unpin' );
+ utils.dispatchMouseLeave( document );
+
+ sinon.assert.notCalled( unpinSpy );
+ } );
+
+ it( 'should not work if the tooltip is currently pinned and the event target is different than the current element', () => {
+ utils.dispatchMouseEnter( elements.a );
+ utils.waitForTheTooltipToShow( clock );
+
+ sinon.assert.calledOnce( pinSpy );
+
+ unpinSpy = sinon.spy( tooltipManager.balloonPanelView, 'unpin' );
+ utils.dispatchMouseLeave( elements.b );
+
+ sinon.assert.notCalled( unpinSpy );
+ } );
+
+ it( 'should not work if the tooltip is not visible and leaving an element that has nothing to do with tooltips', () => {
+ unpinSpy = sinon.spy( tooltipManager.balloonPanelView, 'unpin' );
+ utils.dispatchMouseLeave( elements.unrelated );
+
+ sinon.assert.notCalled( unpinSpy );
+ } );
+
+ it( 'should unpin the tooltip when moving from one element with a tooltip to another element with a tooltip quickly' +
+ 'before the tooltip shows for the first tooltip (cancellin the queued pinning)', () => {
+ utils.dispatchMouseEnter( elements.a );
+
+ unpinSpy = sinon.spy( tooltipManager.balloonPanelView, 'unpin' );
+ utils.dispatchMouseLeave( elements.childOfA, elements.a );
+
+ sinon.assert.calledOnce( unpinSpy );
+
+ utils.waitForTheTooltipToShow( clock );
+ sinon.assert.notCalled( pinSpy );
+ } );
+
+ it( 'should immediatelly unpin the tooltip otherwise', () => {
+ utils.dispatchMouseEnter( elements.a );
+ utils.waitForTheTooltipToShow( clock );
+
+ sinon.assert.calledOnce( pinSpy );
+
+ unpinSpy = sinon.spy( tooltipManager.balloonPanelView, 'unpin' );
+ utils.dispatchMouseLeave( elements.a );
+
+ sinon.assert.calledOnce( unpinSpy );
+ } );
+ } );
+
+ describe( 'on blur', () => {
+ it( 'should not work if a tooltip is pinned but blur ocurred in an unrelated place', () => {
+ utils.dispatchMouseEnter( elements.a );
+ utils.waitForTheTooltipToShow( clock );
+
+ sinon.assert.calledOnce( pinSpy );
+
+ unpinSpy = sinon.spy( tooltipManager.balloonPanelView, 'unpin' );
+ utils.dispatchBlur( elements.unrelated );
+
+ sinon.assert.notCalled( unpinSpy );
+ } );
+
+ it( 'should unpin if the tooltip was pinned and the blur ocurred on the same element', () => {
+ utils.dispatchMouseEnter( elements.a );
+ utils.waitForTheTooltipToShow( clock );
+
+ sinon.assert.calledOnce( pinSpy );
+
+ unpinSpy = sinon.spy( tooltipManager.balloonPanelView, 'unpin' );
+ utils.dispatchBlur( elements.a );
+
+ sinon.assert.calledOnce( unpinSpy );
+ } );
+
+ it( 'should unpin if the tooltip was not pinned (cancels the queued pinning)', () => {
+ unpinSpy = sinon.spy( tooltipManager.balloonPanelView, 'unpin' );
+ utils.dispatchBlur( elements.unrelated );
+
+ sinon.assert.calledOnce( unpinSpy );
+ } );
+ } );
+
+ describe( 'on scroll', () => {
+ it( 'should not unpin the tooltip if not pinned in the first place', () => {
+ unpinSpy = sinon.spy( tooltipManager.balloonPanelView, 'unpin' );
+ utils.dispatchScroll( elements.a );
+
+ sinon.assert.notCalled( unpinSpy );
+ } );
+
+ it( 'should not unpin the tooltip if the scrolled element is a common ancestor of the #balloonPanelView ' +
+ 'and the element with tooltip', () => {
+ utils.dispatchMouseEnter( elements.a );
+ utils.waitForTheTooltipToShow( clock );
+
+ sinon.assert.calledOnce( pinSpy );
+
+ unpinSpy = sinon.spy( tooltipManager.balloonPanelView, 'unpin' );
+ utils.dispatchScroll( document );
+
+ sinon.assert.notCalled( unpinSpy );
+ } );
+
+ it( 'should unpin if the scrolled element does not contain the #balloonPanelView', () => {
+ utils.dispatchMouseEnter( elements.childOfA );
+ utils.waitForTheTooltipToShow( clock );
+
+ sinon.assert.calledOnce( pinSpy );
+
+ unpinSpy = sinon.spy( tooltipManager.balloonPanelView, 'unpin' );
+ utils.dispatchScroll( elements.a );
+
+ sinon.assert.calledOnce( unpinSpy );
+ } );
+
+ it( 'should unpin if the scrolled element does not contain the current element with a tooltip', () => {
+ utils.dispatchMouseEnter( elements.a );
+ utils.waitForTheTooltipToShow( clock );
+
+ sinon.assert.calledOnce( pinSpy );
+
+ unpinSpy = sinon.spy( tooltipManager.balloonPanelView, 'unpin' );
+ utils.dispatchScroll( elements.unrelated );
+
+ sinon.assert.calledOnce( unpinSpy );
+ } );
+ } );
+ } );
+
+ describe( 'updating tooltip position on EditorUI#update', () => {
+ let clock, elements, pinSpy, unpinSpy;
+
+ beforeEach( () => {
+ clock = sinon.useFakeTimers();
+
+ elements = getElementsWithTooltips( {
+ a: {
+ text: 'A'
+ }
+ } );
+
+ pinSpy = sinon.spy( tooltipManager.balloonPanelView, 'pin' );
+ } );
+
+ afterEach( () => {
+ destroyElements( elements );
+ clock.restore();
+ } );
+
+ it( 'should start when the tooltip gets pinned', () => {
+ utils.dispatchMouseEnter( elements.a );
+
+ editor.ui.update();
+ sinon.assert.notCalled( pinSpy );
+
+ utils.waitForTheTooltipToShow( clock );
+
+ sinon.assert.calledOnce( pinSpy );
+ sinon.assert.calledWith( pinSpy.firstCall, {
+ target: elements.a,
+ positions: sinon.match.array
+ } );
+
+ editor.ui.update();
+ sinon.assert.calledTwice( pinSpy );
+ sinon.assert.calledWith( pinSpy.secondCall, {
+ target: elements.a,
+ positions: sinon.match.array
+ } );
+ } );
+
+ it( 'should work for all editors (singleton)', async () => {
+ const secondEditor = await ClassicTestEditor.create( element, {
+ plugins: [ Paragraph, Bold, Italic ],
+ balloonToolbar: [ 'bold', 'italic' ]
+ } );
+
+ expect( editor.ui.tooltipManager ).to.equal( secondEditor.ui.tooltipManager );
+
+ utils.dispatchMouseEnter( elements.a );
+
+ editor.ui.update();
+ sinon.assert.notCalled( pinSpy );
+
+ utils.waitForTheTooltipToShow( clock );
+
+ sinon.assert.calledOnce( pinSpy );
+
+ editor.ui.update();
+ sinon.assert.calledTwice( pinSpy );
+
+ await secondEditor.destroy();
+ } );
+
+ it( 'should stop when the tooltip gets unpinned', () => {
+ utils.dispatchMouseEnter( elements.a );
+ utils.waitForTheTooltipToShow( clock );
+
+ sinon.assert.calledOnce( pinSpy );
+
+ editor.ui.update();
+ sinon.assert.calledTwice( pinSpy );
+
+ utils.dispatchMouseLeave( elements.a );
+
+ editor.ui.update();
+ sinon.assert.calledTwice( pinSpy );
+ } );
+
+ it( 'should unpin the tooltip when the target element disappeared', () => {
+ utils.dispatchMouseEnter( elements.a );
+ utils.waitForTheTooltipToShow( clock );
+
+ sinon.assert.calledOnce( pinSpy );
+ unpinSpy = sinon.spy( tooltipManager.balloonPanelView, 'unpin' );
+
+ elements.a.style.display = 'none';
+
+ editor.ui.update();
+ sinon.assert.calledOnce( pinSpy );
+ sinon.assert.calledOnce( unpinSpy );
+ } );
+
+ it( 'should unpin the tooltip when the target element was removed from DOM', () => {
+ utils.dispatchMouseEnter( elements.a );
+ utils.waitForTheTooltipToShow( clock );
+
+ sinon.assert.calledOnce( pinSpy );
+ unpinSpy = sinon.spy( tooltipManager.balloonPanelView, 'unpin' );
+
+ elements.a.remove();
+
+ editor.ui.update();
+ sinon.assert.calledOnce( pinSpy );
+ sinon.assert.calledOnce( unpinSpy );
+ } );
+ } );
+
+ describe( '#defaultPositions', () => {
+ it( 'should be defined', () => {
+
+ } );
+ } );
+} );
+
+function getElementsWithTooltips( definitions ) {
+ const elements = {};
+
+ for ( const name in definitions ) {
+ const element = document.createElement( 'div' );
+ const def = definitions[ name ];
+
+ if ( def.text ) {
+ element.dataset.ckeTooltipText = def.text;
+ }
+
+ if ( def.position ) {
+ element.dataset.ckeTooltipPosition = def.position;
+ }
+
+ if ( def.class ) {
+ element.dataset.ckeTooltipClass = def.class;
+ }
+
+ if ( def.isDisabled ) {
+ element.setAttribute( 'data-cke-tooltip-disabled', 'true' );
+ }
+
+ element.id = name;
+
+ document.body.appendChild( element );
+
+ elements[ name ] = element;
+ }
+
+ return elements;
+}
+
+function destroyElements( elements ) {
+ for ( const name in elements ) {
+ elements[ name ].remove();
+ }
+}
+
+function getUtils() {
+ return {
+ waitForTheTooltipToShow: clock => {
+ clock.tick( 650 );
+ },
+
+ dispatchMouseEnter: element => {
+ element.dispatchEvent( new MouseEvent( 'mouseenter' ) );
+ },
+
+ dispatchMouseLeave: ( element, relatedTarget ) => {
+ element.dispatchEvent( new MouseEvent( 'mouseleave', { relatedTarget } ) );
+ },
+
+ dispatchFocus: element => {
+ element.dispatchEvent( new Event( 'focus' ) );
+ },
+
+ dispatchBlur: element => {
+ element.dispatchEvent( new Event( 'blur' ) );
+ },
+
+ dispatchScroll: element => {
+ element.dispatchEvent( new Event( 'scroll' ) );
+ }
+ };
+}
diff --git a/packages/ckeditor5-ui/tests/tooltip/tooltipview.js b/packages/ckeditor5-ui/tests/tooltip/tooltipview.js
deleted file mode 100644
index 38d9256cc48..00000000000
--- a/packages/ckeditor5-ui/tests/tooltip/tooltipview.js
+++ /dev/null
@@ -1,69 +0,0 @@
-/**
- * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-
-import TooltipView from '../../src/tooltip/tooltipview';
-
-describe( 'TooltipView', () => {
- let view, text;
-
- beforeEach( () => {
- view = new TooltipView();
- view.render();
- text = view.element.firstChild;
- } );
-
- describe( 'constructor()', () => {
- it( 'should create element from template', () => {
- expect( view.element.tagName ).to.equal( 'SPAN' );
- expect( view.element.classList.contains( 'ck' ) ).to.be.true;
- expect( view.element.classList.contains( 'ck-tooltip' ) ).to.be.true;
- expect( view.element.childNodes ).to.have.length( 1 );
-
- expect( text.tagName ).to.equal( 'SPAN' );
- expect( text.classList.contains( 'ck' ) ).to.be.true;
- expect( text.classList.contains( 'ck-tooltip__text' ) ).to.be.true;
- } );
-
- it( 'should set default #position', () => {
- expect( view.position ).to.equal( 's' );
- } );
- } );
-
- describe( 'DOM bindings', () => {
- beforeEach( () => {
- view.text = 'foo';
- } );
-
- describe( 'text content', () => {
- it( 'should react on view#text', () => {
- expect( text.textContent ).to.equal( 'foo' );
-
- view.text = 'baz';
-
- expect( text.textContent ).to.equal( 'baz' );
- } );
- } );
-
- describe( 'class', () => {
- it( 'should react on view#text', () => {
- expect( view.element.classList.contains( 'ck-hidden' ) ).to.be.false;
-
- view.text = '';
-
- expect( view.element.classList.contains( 'ck-hidden' ) ).to.be.true;
- } );
-
- it( 'should react on view#position', () => {
- expect( view.element.classList.contains( 'ck-tooltip_n' ) ).to.be.false;
- expect( view.element.classList.contains( 'ck-tooltip_s' ) ).to.be.true;
-
- view.position = 'n';
-
- expect( view.element.classList.contains( 'ck-tooltip_n' ) ).to.be.true;
- expect( view.element.classList.contains( 'ck-tooltip_s' ) ).to.be.false;
- } );
- } );
- } );
-} );
diff --git a/packages/ckeditor5-ui/theme/components/button/button.css b/packages/ckeditor5-ui/theme/components/button/button.css
index 920fad0f63c..4a34f5541f6 100644
--- a/packages/ckeditor5-ui/theme/components/button/button.css
+++ b/packages/ckeditor5-ui/theme/components/button/button.css
@@ -4,12 +4,10 @@
*/
@import "../../mixins/_unselectable.css";
-@import "../tooltip/mixins/_tooltip.css";
.ck.ck-button,
a.ck.ck-button {
@mixin ck-unselectable;
- @mixin ck-tooltip_enabled;
position: relative;
display: inline-flex;
@@ -30,13 +28,4 @@ a.ck.ck-button {
&:not(.ck-button_with-text) {
justify-content: center;
}
-
- &:hover {
- @mixin ck-tooltip_visible;
- }
-
- /* Get rid of the native focus outline around the tooltip when focused (but not :hover). */
- &:focus:not(:hover) {
- @mixin ck-tooltip_disabled;
- }
}
diff --git a/packages/ckeditor5-ui/theme/components/dropdown/dropdown.css b/packages/ckeditor5-ui/theme/components/dropdown/dropdown.css
index ee146a8ddc2..c7cc50b0c1f 100644
--- a/packages/ckeditor5-ui/theme/components/dropdown/dropdown.css
+++ b/packages/ckeditor5-ui/theme/components/dropdown/dropdown.css
@@ -3,8 +3,6 @@
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
*/
-@import "../tooltip/mixins/_tooltip.css";
-
:root {
--ck-dropdown-max-width: 75vw;
}
@@ -21,19 +19,9 @@
/* Dropdown button should span horizontally, e.g. in vertical toolbars */
& .ck-button.ck-dropdown__button {
width: 100%;
-
- /* Disable main button's tooltip when the dropdown is open. Otherwise the panel may
- partially cover the tooltip */
- &.ck-on {
- @mixin ck-tooltip_disabled;
- }
}
& .ck-dropdown__panel {
- /* This is to get rid of flickering when the tooltip is shown under the panel,
- which looks like the panel moves vertically a pixel down and up. */
- -webkit-backface-visibility: hidden;
-
display: none;
z-index: var(--ck-z-modal);
max-width: var(--ck-dropdown-max-width);
diff --git a/packages/ckeditor5-ui/theme/components/dropdown/splitbutton.css b/packages/ckeditor5-ui/theme/components/dropdown/splitbutton.css
index 8eb016bf1af..75123e2dc3f 100644
--- a/packages/ckeditor5-ui/theme/components/dropdown/splitbutton.css
+++ b/packages/ckeditor5-ui/theme/components/dropdown/splitbutton.css
@@ -3,8 +3,6 @@
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
*/
-@import "../tooltip/mixins/_tooltip.css";
-
.ck.ck-splitbutton {
/* Enable font size inheritance, which allows fluid UI scaling. */
font-size: inherit;
@@ -12,10 +10,5 @@
& .ck-splitbutton__action:focus {
z-index: calc(var(--ck-z-default) + 1);
}
-
- /* Disable tooltips for the buttons when the button is "open" */
- &.ck-splitbutton_open > .ck-button {
- @mixin ck-tooltip_disabled;
- }
}
diff --git a/packages/ckeditor5-ui/theme/components/tooltip/mixins/_tooltip.css b/packages/ckeditor5-ui/theme/components/tooltip/mixins/_tooltip.css
deleted file mode 100644
index 3811dd95f3c..00000000000
--- a/packages/ckeditor5-ui/theme/components/tooltip/mixins/_tooltip.css
+++ /dev/null
@@ -1,54 +0,0 @@
-/*
- * Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-
-/**
- * Enables the tooltip, which is the tooltip is in DOM but
- * not yet displayed.
- */
-@define-mixin ck-tooltip_enabled {
- & .ck-tooltip {
- display: block;
-
- /*
- * Don't display tooltips in devices which don't support :hover.
- * In fact, it's all about iOS, which forces user to click UI elements twice to execute
- * the primary action, when tooltips are enabled.
- *
- * Q: OK, but why not the following query?
- *
- * @media (hover) {
- * display: block;
- * }
- *
- * A: Because FF does not support it and it would completely disable tooltips
- * in that browser.
- *
- * More in https://github.com/ckeditor/ckeditor5/issues/920.
- */
- @media (hover:none) {
- display: none;
- }
- }
-}
-
-/**
- * Disables the tooltip making it disappear from DOM.
- */
-@define-mixin ck-tooltip_disabled {
- & .ck-tooltip {
- display: none;
- }
-}
-
-/**
- * Shows the tooltip, which is already in DOM.
- * Requires `ck-tooltip_enabled` first.
- */
-@define-mixin ck-tooltip_visible {
- & .ck-tooltip {
- visibility: visible;
- opacity: 1;
- }
-}
diff --git a/packages/ckeditor5-ui/theme/components/tooltip/tooltip.css b/packages/ckeditor5-ui/theme/components/tooltip/tooltip.css
index b3044eaee55..0b43693216f 100644
--- a/packages/ckeditor5-ui/theme/components/tooltip/tooltip.css
+++ b/packages/ckeditor5-ui/theme/components/tooltip/tooltip.css
@@ -3,32 +3,9 @@
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
*/
-.ck.ck-tooltip,
-.ck.ck-tooltip .ck-tooltip__text::after {
- position: absolute;
-
- /* Without this, hovering the tooltip could keep it visible. */
+.ck.ck-balloon-panel.ck-tooltip {
+ /* Keep tooltips transparent for any interactions. */
pointer-events: none;
- /* This is to get rid of flickering when transitioning opacity in Chrome.
- It's weird but it works. */
- -webkit-backface-visibility: hidden;
-}
-
-.ck.ck-tooltip {
- /* Tooltip is hidden by default. */
- visibility: hidden;
- opacity: 0;
- display: none;
- z-index: var(--ck-z-modal);
-
- & .ck-tooltip__text {
- display: inline-block;
-
- &::after {
- content: "";
- width: 0;
- height: 0;
- }
- }
+ z-index: calc( var(--ck-z-modal) + 100 );
}
diff --git a/packages/ckeditor5-watchdog/src/utils/getsubnodes.js b/packages/ckeditor5-watchdog/src/utils/getsubnodes.js
index bca9c677488..3a1fcd4b9be 100644
--- a/packages/ckeditor5-watchdog/src/utils/getsubnodes.js
+++ b/packages/ckeditor5-watchdog/src/utils/getsubnodes.js
@@ -84,6 +84,12 @@ function shouldNodeBeSkipped( node ) {
node === undefined ||
node === null ||
+ // This flag is meant to exclude singletons shared across editor instances. So when an error is thrown in one editor,
+ // the other editors connected through the reference to the same singleton are not restarted. This is a temporary workaround
+ // until a better solution is found.
+ // More in https://github.com/ckeditor/ckeditor5/issues/12292.
+ node._watchdogExcluded === true ||
+
// Skip native DOM objects, e.g. Window, nodes, events, etc.
node instanceof EventTarget ||
node instanceof Event
+
+
+ Caption
+
+
+Heading 1
+Paragraph
+Bold Italic Link
+-
+
- UL List item 1 +
- UL List item 2 +
-
+
- OL List item 1 +
- OL List item 2 +
+ ++Quote
++
+- Quoted UL List item 1
+- Quoted UL List item 2
+Quote
+