Ver código fonte

Merge branch 'master' into t/ckeditor5-image/310

Marek Lewandowski 6 anos atrás
pai
commit
3d61f263ec

+ 12 - 12
packages/ckeditor5-widget/src/utils.js

@@ -11,7 +11,7 @@ import HighlightStack from './highlightstack';
 import IconView from '@ckeditor/ckeditor5-ui/src/icon/iconview';
 import env from '@ckeditor/ckeditor5-utils/src/env';
 
-import dragHandlerIcon from '../theme/icons/drag-handler.svg';
+import dragHandleIcon from '../theme/icons/drag-handle.svg';
 
 /**
  * CSS class added to each widget element.
@@ -85,7 +85,7 @@ export function isWidget( node ) {
  * @param {Object} [options={}]
  * @param {String|Function} [options.label] Element's label provided to the {@link ~setLabel} function. It can be passed as
  * a plain string or a function returning a string. It represents the widget for assistive technologies (like screen readers).
- * @param {Boolean} [options.hasSelectionHandler=false] If `true`, the widget will have a selection handler added.
+ * @param {Boolean} [options.hasSelectionHandle=false] If `true`, the widget will have a selection handle added.
  * @returns {module:engine/view/element~Element} Returns the same element.
  */
 /* eslint-enable max-len */
@@ -104,8 +104,8 @@ export function toWidget( element, writer, options = {} ) {
 		setLabel( element, options.label, writer );
 	}
 
-	if ( options.hasSelectionHandler ) {
-		addSelectionHandler( element, writer );
+	if ( options.hasSelectionHandle ) {
+		addSelectionHandle( element, writer );
 	}
 
 	setHighlightHandling(
@@ -355,19 +355,19 @@ function getFillerOffset() {
 	return null;
 }
 
-// Adds a drag handler to the widget.
+// Adds a drag handle to the widget.
 //
 // @param {module:engine/view/containerelement~ContainerElement}
 // @param {module:engine/view/downcastwriter~DowncastWriter} writer
-function addSelectionHandler( widgetElement, writer ) {
-	const selectionHandler = writer.createUIElement( 'div', { class: 'ck ck-widget__selection-handler' }, function( domDocument ) {
+function addSelectionHandle( widgetElement, writer ) {
+	const selectionHandle = writer.createUIElement( 'div', { class: 'ck ck-widget__selection-handle' }, function( domDocument ) {
 		const domElement = this.toDomElement( domDocument );
 
 		// Use the IconView from the ui library.
 		const icon = new IconView();
-		icon.set( 'content', dragHandlerIcon );
+		icon.set( 'content', dragHandleIcon );
 
-		// Render the icon view right away to append its #element to the selectionHandler DOM element.
+		// Render the icon view right away to append its #element to the selectionHandle DOM element.
 		icon.render();
 
 		domElement.appendChild( icon.element );
@@ -375,7 +375,7 @@ function addSelectionHandler( widgetElement, writer ) {
 		return domElement;
 	} );
 
-	// Append the selection handler into the widget wrapper.
-	writer.insert( writer.createPositionAt( widgetElement, 0 ), selectionHandler );
-	writer.addClass( [ 'ck-widget_with-selection-handler' ], widgetElement );
+	// Append the selection handle into the widget wrapper.
+	writer.insert( writer.createPositionAt( widgetElement, 0 ), selectionHandle );
+	writer.addClass( [ 'ck-widget_with-selection-handle' ], widgetElement );
 }

+ 2 - 1
packages/ckeditor5-widget/src/widget.js

@@ -164,7 +164,8 @@ export default class Widget extends Plugin {
 	 */
 	_onKeydown( eventInfo, domEventData ) {
 		const keyCode = domEventData.keyCode;
-		const isForward = keyCode == keyCodes.arrowdown || keyCode == keyCodes.arrowright;
+		const isLtrContent = this.editor.locale.contentLanguageDirection === 'ltr';
+		const isForward = keyCode == keyCodes.arrowdown || keyCode == keyCodes[ isLtrContent ? 'arrowright' : 'arrowleft' ];
 		let wasHandled = false;
 
 		// Checks if the keys were handled and then prevents the default event behaviour and stops

+ 2 - 1
packages/ckeditor5-widget/src/widgetresize/resizer.js

@@ -385,7 +385,7 @@ export default class Resizer {
 	 * Determines the position of a given resize handle.
 	 *
 	 * @private
-	 * @param {HTMLElement} domHandle Handler used to calculate the reference point.
+	 * @param {HTMLElement} domHandle Handle used to calculate the reference point.
 	 * @returns {String|undefined} Returns a string like `"top-left"` or `undefined` if not matched.
 	 */
 	_getHandlePosition( domHandle ) {
@@ -472,6 +472,7 @@ class SizeView extends View {
 	}
 }
 
+// @private
 // @param {String} resizerPosition Expected resizer position like `"top-left"`, `"bottom-right"`.
 // @returns {String} A prefixed HTML class name for the resizer element
 function getResizerClass( resizerPosition ) {

+ 36 - 34
packages/ckeditor5-widget/src/widgetresize/resizerstate.js

@@ -126,15 +126,10 @@ export default class ResizeState {
 
 		const widthStyle = domResizeHost.style.width;
 
-		if ( widthStyle ) {
-			if ( widthStyle.match( /^\d+\.?\d*%$/ ) ) {
-				this.originalWidthPercents = parseFloat( widthStyle );
-			} else {
-				// TODO we need to check it via comparing to the parent's width.
-				this.originalWidthPercents = 50;
-			}
+		if ( widthStyle && widthStyle.match( /^\d+\.?\d*%$/ ) ) {
+			this.originalWidthPercents = parseFloat( widthStyle );
 		} else {
-			this.originalWidthPercents = 100;
+			this.originalWidthPercents = calculateHostPercentageWidth( domResizeHost, clientRect );
 		}
 	}
 
@@ -150,16 +145,28 @@ export default class ResizeState {
 
 mix( ResizeState, ObservableMixin );
 
-/**
- * Returns coordinates of the top-left corner of an element, relative to the document's top-left corner.
- *
- * @private
- * @param {HTMLElement} element
- * @param {String} resizerPosition The position of the resize handle, e.g. `"top-left"`, `"bottom-right"`.
- * @returns {Object} return
- * @returns {Number} return.x
- * @returns {Number} return.y
- */
+// Calculates a relative width of a `domResizeHost` compared to it's parent in percents.
+//
+// @private
+// @param {HTMLElement} domResizeHost
+// @param {module:utils/dom/rect~Rect} resizeHostRect
+// @returns {Number}
+function calculateHostPercentageWidth( domResizeHost, resizeHostRect ) {
+	const domResizeHostParent = domResizeHost.parentElement;
+	// Need to use computed style as it properly excludes parent's paddings from the returned value.
+	const parentWidth = parseFloat( domResizeHostParent.ownerDocument.defaultView.getComputedStyle( domResizeHostParent ).width );
+
+	return resizeHostRect.width / parentWidth * 100;
+}
+
+// Returns coordinates of the top-left corner of an element, relative to the document's top-left corner.
+//
+// @private
+// @param {HTMLElement} element
+// @param {String} resizerPosition The position of the resize handle, e.g. `"top-left"`, `"bottom-right"`.
+// @returns {Object} return
+// @returns {Number} return.x
+// @returns {Number} return.y
 function getAbsoluteBoundaryPoint( element, resizerPosition ) {
 	const elementRect = new Rect( element );
 	const positionParts = resizerPosition.split( '-' );
@@ -174,22 +181,18 @@ function getAbsoluteBoundaryPoint( element, resizerPosition ) {
 	return ret;
 }
 
-/**
- * @private
- * @param {String} resizerPosition The expected resizer position, like `"top-left"`, `"bottom-right"`.
- * @returns {String} A prefixed HTML class name for the resizer element.
- */
+// @private
+// @param {String} resizerPosition The expected resizer position, like `"top-left"`, `"bottom-right"`.
+// @returns {String} A prefixed HTML class name for the resizer element.
 function getResizerHandleClass( resizerPosition ) {
 	return `ck-widget__resizer__handle-${ resizerPosition }`;
 }
 
-/**
- * Determines the position of a given resize handle.
- *
- * @private
- * @param {HTMLElement} domHandle Handler used to calculate the reference point.
- * @returns {String|undefined} Returns a string like `"top-left"` or `undefined` if not matched.
- */
+// Determines the position of a given resize handle.
+//
+// @private
+// @param {HTMLElement} domHandle Handle used to calculate the reference point.
+// @returns {String|undefined} Returns a string like `"top-left"` or `undefined` if not matched.
 function getHandlePosition( domHandle ) {
 	const resizerPositions = [ 'top-left', 'top-right', 'bottom-right', 'bottom-left' ];
 
@@ -200,10 +203,9 @@ function getHandlePosition( domHandle ) {
 	}
 }
 
-/**
- * @param {String} position Like `"top-left"`.
- * @returns {String} Inverted `position`, e.g. it returns `"bottom-right"` if `"top-left"` was given as `position`.
- */
+// @private
+// @param {String} position Like `"top-left"`.
+// @returns {String} Inverted `position`, e.g. it returns `"bottom-right"` if `"top-left"` was given as `position`.
 function getOppositePosition( position ) {
 	const parts = position.split( '-' );
 	const replacements = {

+ 46 - 0
packages/ckeditor5-widget/tests/manual/keyboard.html

@@ -0,0 +1,46 @@
+<head>
+	<style>
+		body {
+			max-width: 800px;
+			margin: 20px auto;
+		}
+
+		.ck-content .widget {
+			background: rgba( 0, 0, 0, 0.1 );
+			min-height: 50px;
+		}
+
+		.ck-content placeholder {
+			background: #ffff00;
+			padding: 4px 2px;
+			outline-offset: -2px;
+			line-height: 1em;
+			/* Set margins before and after the inline widget so the cursor between two instances is visible when one of them is focused.
+			Optimized for Firefox due to bug in rendering selection in ZWS on Chrome. See ckeditor5#1607. */
+			margin-right: 1px;
+			margin-left: 3px;
+		}
+
+		.ck-content placeholder::selection {
+			display: none;
+		}
+	</style>
+</head>
+
+<h2>LTR content</h2>
+
+<div id="editor-ltr">
+	<h2>Heading 1</h2>
+	<p>Para<placeholder>inline widget</placeholder>graph</p>
+	<div class="widget"></div>
+	<p>Paragraph</p>
+</div>
+
+<h2>RTL content</h2>
+
+<div id="editor-rtl">
+	<h2>مرحبا</h2>
+	<p>مرحبا<placeholder>inline widget</placeholder>مرحبا</p>
+	<div class="widget"></div>
+	<p>مرحبا</p>
+</div>

+ 130 - 0
packages/ckeditor5-widget/tests/manual/keyboard.js

@@ -0,0 +1,130 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/* globals console, window, document */
+
+import Widget from '../../src/widget';
+import { toWidget, viewToModelPositionOutsideModelElement } from '../../src/utils';
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
+import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
+
+function BlockWidget( editor ) {
+	editor.model.schema.register( 'div', {
+		allowIn: [ '$root' ],
+		isObject: true
+	} );
+
+	editor.conversion.for( 'downcast' ).elementToElement( {
+		model: 'div',
+		view: ( modelElement, writer ) => {
+			return toWidget(
+				writer.createContainerElement( 'div', {
+					class: 'widget'
+				} ),
+				writer,
+				{ hasSelectionHandle: true }
+			);
+		}
+	} );
+
+	editor.conversion.for( 'upcast' ).elementToElement( {
+		model: 'div',
+		view: 'div'
+	} );
+}
+
+class InlineWidget extends Plugin {
+	constructor( editor ) {
+		super( editor );
+
+		editor.model.schema.register( 'placeholder', {
+			allowWhere: '$text',
+			isObject: true,
+			isInline: true
+		} );
+
+		editor.conversion.for( 'editingDowncast' ).elementToElement( {
+			model: 'placeholder',
+			view: ( modelItem, viewWriter ) => {
+				const widgetElement = createPlaceholderView( modelItem, viewWriter );
+
+				return toWidget( widgetElement, viewWriter );
+			}
+		} );
+
+		editor.conversion.for( 'dataDowncast' ).elementToElement( {
+			model: 'placeholder',
+			view: createPlaceholderView
+		} );
+
+		editor.conversion.for( 'upcast' ).elementToElement( {
+			view: 'placeholder',
+			model: 'placeholder'
+		} );
+
+		editor.editing.mapper.on(
+			'viewToModelPosition',
+			viewToModelPositionOutsideModelElement( editor.model, viewElement => viewElement.name == 'placeholder' )
+		);
+
+		function createPlaceholderView( modelItem, viewWriter ) {
+			const widgetElement = viewWriter.createContainerElement( 'placeholder' );
+			const viewText = viewWriter.createText( '{placeholder}' );
+
+			viewWriter.insert( viewWriter.createPositionAt( widgetElement, 0 ), viewText );
+
+			return widgetElement;
+		}
+	}
+}
+
+const config = {
+	plugins: [ ArticlePluginSet, Widget, InlineWidget, BlockWidget ],
+	toolbar: [
+		'heading',
+		'|',
+		'bold',
+		'italic',
+		'link',
+		'bulletedList',
+		'numberedList',
+		'blockQuote',
+		'insertTable',
+		'mediaEmbed',
+		'undo',
+		'redo'
+	],
+	image: {
+		toolbar: [ 'imageStyle:full', 'imageStyle:side', '|', 'imageTextAlternative' ]
+	},
+	table: {
+		contentToolbar: [
+			'tableColumn',
+			'tableRow',
+			'mergeTableCells'
+		]
+	}
+};
+
+ClassicEditor
+	.create( document.querySelector( '#editor-ltr' ), config )
+	.then( editor => {
+		window.editorLtr = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );
+
+ClassicEditor
+	.create( document.querySelector( '#editor-rtl' ), Object.assign( {}, config, {
+		language: 'ar'
+	} ) )
+	.then( editor => {
+		window.editorRtl = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

+ 20 - 0
packages/ckeditor5-widget/tests/manual/keyboard.md

@@ -0,0 +1,20 @@
+# Keyboard navigation across widgets
+
+1. Put a selection at the beginning of the document.
+2. Use the **right arrow** key to navigate forwards.
+3. Go through inline and block widgets.
+4. The navigation should
+	* be uninterrupted,
+	* go always forward,
+	* select widgets on its way.
+5. Reach the end of the document.
+6. Go backwards using the **left arrow** key and repeat the entire scenario.
+
+## RTL (right–to–left) content navigation
+
+In this scenario the content is written in Arabic.
+
+1. Repeat the scenario from the previous section but note that the content is mirrored, i.e. the beginning is on the right–hand side.
+2. Forwards navigation is done by pressing the **left arrow** key.
+3. To go backwards, use the **right arrow** key.
+4. Just like with the LTR content, the navigation should be seamless, always in the same direction.

+ 0 - 0
packages/ckeditor5-widget/tests/manual/selection-handler.html → packages/ckeditor5-widget/tests/manual/selection-handle.html


+ 1 - 1
packages/ckeditor5-widget/tests/manual/selection-handler.js → packages/ckeditor5-widget/tests/manual/selection-handle.js

@@ -23,7 +23,7 @@ function MyPlugin( editor ) {
 				class: 'widget'
 			} ),
 			writer,
-			{ hasSelectionHandler: true } );
+			{ hasSelectionHandle: true } );
 		}
 	} );
 

+ 17 - 0
packages/ckeditor5-widget/tests/manual/selection-handle.md

@@ -0,0 +1,17 @@
+# Widget selection handle
+
+**Note**: For the best testing, run manual tests adding Arabic to [additional languages configuration](https://ckeditor.com/docs/ckeditor5/latest/framework/guides/contributing/testing-environment.html#running-manual-tests).
+
+---
+
+1. Focus the widget.
+1. The outline of the widget and the selection handle should be continuous.
+1. The selection handle should be attached to the top of the widget.
+
+## LTR
+
+1. The selection handle should be displayed on the **left** side of the widget.
+
+## RTL
+
+1. The selection handle should be displayed on the **right** side of the widget.

+ 0 - 17
packages/ckeditor5-widget/tests/manual/selection-handler.md

@@ -1,17 +0,0 @@
-# Widget selection handler
-
-**Note**: For the best testing, run manual tests adding Arabic to [additional languages configuration](https://ckeditor.com/docs/ckeditor5/latest/framework/guides/contributing/testing-environment.html#running-manual-tests).
-
----
-
-1. Focus the widget.
-1. The outline of the widget and the selection handler should be continuous.
-1. The selection handler should be attached to the top of the widget.
-
-## LTR
-
-1. The selection handler should be displayed on the **left** side of the widget.
-
-## RTL
-
-1. The selection handler should be displayed on the **right** side of the widget.

+ 9 - 9
packages/ckeditor5-widget/tests/utils.js

@@ -107,20 +107,20 @@ describe( 'widget utils', () => {
 			expect( element.hasClass( 'foo' ) ).to.be.false;
 		} );
 
-		it( 'should add element a selection handler to widget if hasSelectionHandler=true is passed', () => {
-			toWidget( element, writer, { hasSelectionHandler: true } );
+		it( 'should add element a selection handle to widget if hasSelectionHandle=true is passed', () => {
+			toWidget( element, writer, { hasSelectionHandle: true } );
 
-			expect( element.hasClass( 'ck-widget_with-selection-handler' ) ).to.be.true;
+			expect( element.hasClass( 'ck-widget_with-selection-handle' ) ).to.be.true;
 
-			const selectionHandler = element.getChild( 0 );
-			expect( selectionHandler ).to.be.instanceof( UIElement );
+			const selectionHandle = element.getChild( 0 );
+			expect( selectionHandle ).to.be.instanceof( UIElement );
 
-			const domSelectionHandler = selectionHandler.render( document );
+			const domSelectionHandle = selectionHandle.render( document );
 
-			expect( domSelectionHandler.classList.contains( 'ck' ) ).to.be.true;
-			expect( domSelectionHandler.classList.contains( 'ck-widget__selection-handler' ) ).to.be.true;
+			expect( domSelectionHandle.classList.contains( 'ck' ) ).to.be.true;
+			expect( domSelectionHandle.classList.contains( 'ck-widget__selection-handle' ) ).to.be.true;
 
-			const icon = domSelectionHandler.firstChild;
+			const icon = domSelectionHandle.firstChild;
 
 			expect( icon.nodeName ).to.equal( 'svg' );
 			expect( icon.classList.contains( 'ck' ) ).to.be.true;

+ 85 - 45
packages/ckeditor5-widget/tests/widget.js

@@ -657,6 +657,44 @@ describe( 'Widget', () => {
 				'[<image></image>]' +
 				'<paragraph>foo</paragraph>'
 			);
+
+			describe( 'RTL (right-to-left) content', () => {
+				test(
+					'should move selection forward from selected object - left arrow',
+					'[<widget></widget>]<paragraph>foo</paragraph>',
+					keyCodes.arrowleft,
+					'<widget></widget><paragraph>[]foo</paragraph>',
+					null,
+					'rtl'
+				);
+
+				test(
+					'should move selection backward from selected object - right arrow',
+					'<paragraph>foo</paragraph>[<widget></widget>]',
+					keyCodes.arrowright,
+					'<paragraph>foo[]</paragraph><widget></widget>',
+					null,
+					'rtl'
+				);
+
+				test(
+					'should move selection to next widget - left arrow',
+					'[<widget></widget>]<widget></widget>',
+					keyCodes.arrowleft,
+					'<widget></widget>[<widget></widget>]',
+					null,
+					'rtl'
+				);
+
+				test(
+					'should move selection to previous widget - right arrow',
+					'<widget></widget>[<widget></widget>]',
+					keyCodes.arrowright,
+					'[<widget></widget>]<widget></widget>',
+					null,
+					'rtl'
+				);
+			} );
 		} );
 
 		describe( 'Ctrl+A', () => {
@@ -782,8 +820,10 @@ describe( 'Widget', () => {
 			);
 		} );
 
-		function test( name, data, keyCodeOrMock, expected, expectedView ) {
+		function test( name, data, keyCodeOrMock, expected, expectedView, contentLanguageDirection = 'ltr' ) {
 			it( name, () => {
+				testUtils.sinon.stub( editor.locale, 'contentLanguageDirection' ).value( contentLanguageDirection );
+
 				const domEventDataMock = ( typeof keyCodeOrMock == 'object' ) ? keyCodeOrMock : {
 					keyCode: keyCodeOrMock
 				};
@@ -1217,7 +1257,7 @@ describe( 'Widget', () => {
 		} );
 	} );
 
-	describe( 'selection handler', () => {
+	describe( 'selection handle', () => {
 		beforeEach( () => {
 			return VirtualTestEditor.create( { plugins: [ Widget, Typing ] } )
 				.then( newEditor => {
@@ -1249,7 +1289,7 @@ describe( 'Widget', () => {
 							view: ( modelItem, viewWriter ) => {
 								const widget = viewWriter.createContainerElement( 'div' );
 
-								return toWidget( widget, viewWriter, { hasSelectionHandler: true } );
+								return toWidget( widget, viewWriter, { hasSelectionHandle: true } );
 							}
 						} )
 						.elementToElement( {
@@ -1262,10 +1302,10 @@ describe( 'Widget', () => {
 		it( 'should select a widget on mouse click', () => {
 			setModelData( model, '<paragraph>bar</paragraph><widget></widget><paragraph>foo[]</paragraph>' );
 
-			const viewWidgetSelectionHandler = viewDocument.getRoot().getChild( 1 ).getChild( 0 );
+			const viewWidgetSelectionHandle = viewDocument.getRoot().getChild( 1 ).getChild( 0 );
 
 			const domEventDataMock = {
-				target: viewWidgetSelectionHandler,
+				target: viewWidgetSelectionHandle,
 				preventDefault: sinon.spy()
 			};
 
@@ -1278,24 +1318,24 @@ describe( 'Widget', () => {
 			setModelData( model, '<widget><widget></widget><widget></widget></widget>' );
 
 			// The top-outer widget.
-			const viewWidgetSelectionHandler = viewDocument.getRoot().getChild( 0 );
+			const viewWidgetSelectionHandle = viewDocument.getRoot().getChild( 0 );
 
 			const domEventDataMock = {
-				target: viewWidgetSelectionHandler,
+				target: viewWidgetSelectionHandle,
 				preventDefault: sinon.spy()
 			};
 
 			viewDocument.fire( 'mousedown', domEventDataMock );
 
 			expect( getViewData( view ) ).to.equal(
-				'[<div class="ck-widget ck-widget_selected ck-widget_with-selection-handler" contenteditable="false">' +
-					'<div class="ck-widget ck-widget_with-selection-handler" contenteditable="false">' +
-						'<div class="ck ck-widget__selection-handler"></div>' +
+				'[<div class="ck-widget ck-widget_selected ck-widget_with-selection-handle" contenteditable="false">' +
+					'<div class="ck-widget ck-widget_with-selection-handle" contenteditable="false">' +
+						'<div class="ck ck-widget__selection-handle"></div>' +
 					'</div>' +
-					'<div class="ck-widget ck-widget_with-selection-handler" contenteditable="false">' +
-						'<div class="ck ck-widget__selection-handler"></div>' +
+					'<div class="ck-widget ck-widget_with-selection-handle" contenteditable="false">' +
+						'<div class="ck ck-widget__selection-handle"></div>' +
 					'</div>' +
-					'<div class="ck ck-widget__selection-handler"></div>' +
+					'<div class="ck ck-widget__selection-handle"></div>' +
 				'</div>]'
 			);
 		} );
@@ -1310,30 +1350,30 @@ describe( 'Widget', () => {
 				'<widget></widget>'
 			);
 
-			const viewWidgetSelectionHandler = viewDocument.getRoot().getChild( 1 );
+			const viewWidgetSelectionHandle = viewDocument.getRoot().getChild( 1 );
 
 			const domEventDataMock = {
-				target: viewWidgetSelectionHandler,
+				target: viewWidgetSelectionHandle,
 				preventDefault: sinon.spy()
 			};
 
 			viewDocument.fire( 'mousedown', domEventDataMock );
 
 			expect( getViewData( view ) ).to.equal(
-				'<div class="ck-widget ck-widget_with-selection-handler" contenteditable="false">' +
-					'<div class="ck ck-widget__selection-handler"></div>' +
+				'<div class="ck-widget ck-widget_with-selection-handle" contenteditable="false">' +
+					'<div class="ck ck-widget__selection-handle"></div>' +
 				'</div>' +
-				'[<div class="ck-widget ck-widget_selected ck-widget_with-selection-handler" contenteditable="false">' +
-					'<div class="ck-widget ck-widget_with-selection-handler" contenteditable="false">' +
-						'<div class="ck ck-widget__selection-handler"></div>' +
+				'[<div class="ck-widget ck-widget_selected ck-widget_with-selection-handle" contenteditable="false">' +
+					'<div class="ck-widget ck-widget_with-selection-handle" contenteditable="false">' +
+						'<div class="ck ck-widget__selection-handle"></div>' +
 					'</div>' +
-					'<div class="ck-widget ck-widget_with-selection-handler" contenteditable="false">' +
-						'<div class="ck ck-widget__selection-handler"></div>' +
+					'<div class="ck-widget ck-widget_with-selection-handle" contenteditable="false">' +
+						'<div class="ck ck-widget__selection-handle"></div>' +
 					'</div>' +
-					'<div class="ck ck-widget__selection-handler"></div>' +
+					'<div class="ck ck-widget__selection-handle"></div>' +
 				'</div>]' +
-				'<div class="ck-widget ck-widget_with-selection-handler" contenteditable="false">' +
-					'<div class="ck ck-widget__selection-handler"></div>' +
+				'<div class="ck-widget ck-widget_with-selection-handle" contenteditable="false">' +
+					'<div class="ck ck-widget__selection-handle"></div>' +
 				'</div>'
 			);
 		} );
@@ -1346,22 +1386,22 @@ describe( 'Widget', () => {
 				'</widget>'
 			);
 
-			const viewWidgetSelectionHandler = viewDocument.getRoot().getChild( 0 );
+			const viewWidgetSelectionHandle = viewDocument.getRoot().getChild( 0 );
 
 			const domEventDataMock = {
-				target: viewWidgetSelectionHandler,
+				target: viewWidgetSelectionHandle,
 				preventDefault: sinon.spy()
 			};
 
 			viewDocument.fire( 'mousedown', domEventDataMock );
 
 			expect( getViewData( view ) ).to.equal(
-				'[<div class="ck-widget ck-widget_selected ck-widget_with-selection-handler" contenteditable="false">' +
+				'[<div class="ck-widget ck-widget_selected ck-widget_with-selection-handle" contenteditable="false">' +
 					'<figcaption contenteditable="true">foo bar</figcaption>' +
-					'<div class="ck-widget ck-widget_with-selection-handler" contenteditable="false">' +
-						'<div class="ck ck-widget__selection-handler"></div>' +
+					'<div class="ck-widget ck-widget_with-selection-handle" contenteditable="false">' +
+						'<div class="ck ck-widget__selection-handle"></div>' +
 					'</div>' +
-					'<div class="ck ck-widget__selection-handler"></div>' +
+					'<div class="ck ck-widget__selection-handle"></div>' +
 				'</div>]'
 			);
 		} );
@@ -1376,27 +1416,27 @@ describe( 'Widget', () => {
 				'</widget>'
 			);
 
-			const viewWidgetSelectionHandler = viewDocument.getRoot().getChild( 0 ).getChild( 1 );
+			const viewWidgetSelectionHandle = viewDocument.getRoot().getChild( 0 ).getChild( 1 );
 
 			const domEventDataMock = {
-				target: viewWidgetSelectionHandler,
+				target: viewWidgetSelectionHandle,
 				preventDefault: sinon.spy()
 			};
 
 			viewDocument.fire( 'mousedown', domEventDataMock );
 
 			expect( getViewData( view ) ).to.equal(
-				'<div class="ck-widget ck-widget_with-selection-handler" contenteditable="false">' +
-					'<div class="ck-widget ck-widget_with-selection-handler" contenteditable="false">' +
-						'<div class="ck ck-widget__selection-handler"></div>' +
+				'<div class="ck-widget ck-widget_with-selection-handle" contenteditable="false">' +
+					'<div class="ck-widget ck-widget_with-selection-handle" contenteditable="false">' +
+						'<div class="ck ck-widget__selection-handle"></div>' +
 					'</div>' +
-					'[<div class="ck-widget ck-widget_selected ck-widget_with-selection-handler" contenteditable="false">' +
-						'<div class="ck-widget ck-widget_with-selection-handler" contenteditable="false">' +
-							'<div class="ck ck-widget__selection-handler"></div>' +
+					'[<div class="ck-widget ck-widget_selected ck-widget_with-selection-handle" contenteditable="false">' +
+						'<div class="ck-widget ck-widget_with-selection-handle" contenteditable="false">' +
+							'<div class="ck ck-widget__selection-handle"></div>' +
 						'</div>' +
-						'<div class="ck ck-widget__selection-handler"></div>' +
+						'<div class="ck ck-widget__selection-handle"></div>' +
 					'</div>]' +
-					'<div class="ck ck-widget__selection-handler"></div>' +
+					'<div class="ck ck-widget__selection-handle"></div>' +
 				'</div>'
 			);
 		} );
@@ -1416,13 +1456,13 @@ describe( 'Widget', () => {
 			viewDocument.fire( 'mousedown', domEventDataMock );
 
 			expect( getViewData( view ) ).to.equal(
-				'<div class="ck-widget ck-widget_with-selection-handler" contenteditable="false">' +
+				'<div class="ck-widget ck-widget_with-selection-handle" contenteditable="false">' +
 					'<figcaption contenteditable="true">' +
-						'[<div class="ck-widget ck-widget_selected ck-widget_with-selection-handler" contenteditable="false">' +
-							'<div class="ck ck-widget__selection-handler"></div>' +
+						'[<div class="ck-widget ck-widget_selected ck-widget_with-selection-handle" contenteditable="false">' +
+							'<div class="ck ck-widget__selection-handle"></div>' +
 						'</div>]' +
 					'</figcaption>' +
-					'<div class="ck ck-widget__selection-handler"></div>' +
+					'<div class="ck ck-widget__selection-handle"></div>' +
 				'</div>'
 			);
 		} );

+ 0 - 0
packages/ckeditor5-widget/theme/icons/drag-handler.svg → packages/ckeditor5-widget/theme/icons/drag-handle.svg


+ 6 - 6
packages/ckeditor5-widget/theme/widget.css

@@ -78,18 +78,18 @@
 	}
 }
 
-.ck .ck-widget.ck-widget_with-selection-handler {
+.ck .ck-widget.ck-widget_with-selection-handle {
 	/* Make the widget wrapper a relative positioning container for the drag handle. */
 	position: relative;
 
-	/* Show the selection handler on mouse hover over the widget. */
+	/* Show the selection handle on mouse hover over the widget. */
 	&:hover {
-		& .ck-widget__selection-handler {
+		& .ck-widget__selection-handle {
 			visibility: visible;
 		}
 	}
 
-	& .ck-widget__selection-handler {
+	& .ck-widget__selection-handle {
 		position: absolute;
 
 		& .ck-icon {
@@ -99,8 +99,8 @@
 		}
 	}
 
-	/* Show the selection handler when the widget is selected. */
-	&.ck-widget_selected .ck-widget__selection-handler {
+	/* Show the selection handle when the widget is selected. */
+	&.ck-widget_selected .ck-widget__selection-handle {
 		visibility: visible;
 	}
 }