8
0
Pārlūkot izejas kodu

Added arrow handling when object element is selected.

Szymon Kupś 9 gadi atpakaļ
vecāks
revīzija
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
 	 */
 	_onKeydown( eventInfo, domEventData  ) {
+		this._handleBackspaceAndDelete( eventInfo, domEventData );
+		this._handleArrowKeys( eventInfo, domEventData );
+	}
+
+	_handleBackspaceAndDelete( eventInfo, domEventData ) {
 		const keyCode = domEventData.keyCode;
 
 		// 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.
 	 *
@@ -141,3 +174,22 @@ export default class Widget extends Plugin {
 		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>
 
 <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>
 	<figure class="image">
 		<img src="logo.png" alt="CKEditor logo" />
@@ -11,4 +17,7 @@
 	<figure class="image">
 		<img src="logo.png" alt="" />
 	</figure>
+	<figure class="image">
+		<img src="logo.png" alt="" />
+	</figure>
 </div>