8
0
Просмотр исходного кода

Added arrow handling when object element is selected.

Szymon Kupś 9 лет назад
Родитель
Сommit
a3ef5ec980

+ 52 - 0
packages/ckeditor5-image/src/widget/widget.js

@@ -88,6 +88,11 @@ export default class Widget extends Plugin {
 	 * @param {module:engine/view/observer/domeventdata~DomEventData} domEventData
 	 * @param {module:engine/view/observer/domeventdata~DomEventData} domEventData
 	 */
 	 */
 	_onKeydown( eventInfo, domEventData  ) {
 	_onKeydown( eventInfo, domEventData  ) {
+		this._handleBackspaceAndDelete( eventInfo, domEventData );
+		this._handleArrowKeys( eventInfo, domEventData );
+	}
+
+	_handleBackspaceAndDelete( eventInfo, domEventData ) {
 		const keyCode = domEventData.keyCode;
 		const keyCode = domEventData.keyCode;
 
 
 		// Handle only delete and backspace.
 		// Handle only delete and backspace.
@@ -131,6 +136,34 @@ export default class Widget extends Plugin {
 		}
 		}
 	}
 	}
 
 
+	_handleArrowKeys( eventInfo, domEventData ) {
+		const keyCode = domEventData.keyCode;
+
+		if ( !isArrowKeyCode( keyCode ) ) {
+			return;
+		}
+
+		const modelDocument = this.editor.document;
+		const schema = modelDocument.schema;
+		const modelSelection = modelDocument.selection;
+		const objectElement = getSelectedElement( modelSelection );
+
+		if ( objectElement && schema.objects.has( objectElement.name ) ) {
+			domEventData.preventDefault();
+			eventInfo.stop();
+
+			const isForward = ( keyCode == keyCodes.arrowdown || keyCode == keyCodes.arrowright );
+			const position = isForward ? modelSelection.getLastPosition() : modelSelection.getFirstPosition();
+			const newRange = modelDocument.getNearestSelectionRange( position, isForward ? 'forward' : 'backward' );
+
+			if ( newRange ) {
+				modelDocument.enqueueChanges( () => {
+					modelSelection.setRanges( [ newRange ] );
+				} );
+			}
+		}
+	}
+
 	/**
 	/**
 	 * Sets {@link module:engine/model/selection~Selection document's selection} over given element.
 	 * Sets {@link module:engine/model/selection~Selection document's selection} over given element.
 	 *
 	 *
@@ -141,3 +174,22 @@ export default class Widget extends Plugin {
 		this.editor.document.selection.setRanges( [ ModelRange.createOn( element ) ] );
 		this.editor.document.selection.setRanges( [ ModelRange.createOn( element ) ] );
 	}
 	}
 }
 }
+
+function getSelectedElement( modelSelection ) {
+	if ( modelSelection.rangeCount !== 1 ) {
+		return null;
+	}
+
+	const range = modelSelection.getFirstRange();
+	const nodeAfterStart = range.start.nodeAfter;
+	const nodeBeforeEnd = range.end.nodeBefore;
+
+	return ( nodeAfterStart instanceof ModelElement && nodeAfterStart == nodeBeforeEnd ) ? nodeAfterStart : null;
+}
+
+function isArrowKeyCode( keyCode ) {
+	return keyCode == keyCodes.arrowright ||
+		keyCode == keyCodes.arrowleft ||
+		keyCode == keyCodes.arrowup ||
+		keyCode == keyCodes.arrowdown;
+}

+ 9 - 0
packages/ckeditor5-image/tests/manual/image.html

@@ -3,6 +3,12 @@
 </head>
 </head>
 
 
 <div id="editor">
 <div id="editor">
+	<figure class="image">
+		<img src="logo.png" alt="" />
+	</figure>
+	<figure class="image">
+		<img src="logo.png" alt="" />
+	</figure>
 	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. </p>
 	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. </p>
 	<figure class="image">
 	<figure class="image">
 		<img src="logo.png" alt="CKEditor logo" />
 		<img src="logo.png" alt="CKEditor logo" />
@@ -11,4 +17,7 @@
 	<figure class="image">
 	<figure class="image">
 		<img src="logo.png" alt="" />
 		<img src="logo.png" alt="" />
 	</figure>
 	</figure>
+	<figure class="image">
+		<img src="logo.png" alt="" />
+	</figure>
 </div>
 </div>