浏览代码

Added arrow handling when object element is selected.

Szymon Kupś 9 年之前
父节点
当前提交
a3ef5ec980
共有 2 个文件被更改,包括 61 次插入0 次删除
  1. 52 0
      packages/ckeditor5-image/src/widget/widget.js
  2. 9 0
      packages/ckeditor5-image/tests/manual/image.html

+ 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>