Kaynağa Gözat

Implemented ViewDocument#scrollToTheSelection method.

Aleksander Nowodzinski 8 yıl önce
ebeveyn
işleme
3f3ae8774f

+ 14 - 0
packages/ckeditor5-engine/src/view/document.js

@@ -20,6 +20,7 @@ import KeyObserver from './observer/keyobserver';
 import FakeSelectionObserver from './observer/fakeselectionobserver';
 import mix from '@ckeditor/ckeditor5-utils/src/mix';
 import ObservableMixin from '@ckeditor/ckeditor5-utils/src/observablemixin';
+import scrollUtils from '@ckeditor/ckeditor5-utils/src/dom/scroll';
 
 /**
  * Document class creates an abstract layer over the content editable area.
@@ -300,6 +301,19 @@ export default class Document {
 	}
 
 	/**
+	 * Scrolls the page viewport and {@link #domRoots} with their ancestors to reveal the
+	 * caret, if not already visible to the user.
+	 */
+	scrollToTheSelection() {
+		const range = this.selection.getFirstRange();
+
+		scrollUtils.scrollViewportToShowTarget( {
+			target: this.domConverter.viewRangeToDom( range ),
+			viewportOffset: 20
+		} );
+	}
+
+	/**
 	 * Disables all added observers.
 	 */
 	disableObservers() {

+ 17 - 0
packages/ckeditor5-engine/tests/view/document/document.js

@@ -19,6 +19,7 @@ import DomConverter from '../../../src/view/domconverter';
 import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
 import count from '@ckeditor/ckeditor5-utils/src/count';
 import log from '@ckeditor/ckeditor5-utils/src/log';
+import scrollUtils from '@ckeditor/ckeditor5-utils/src/dom/scroll';
 
 testUtils.createSinonSandbox();
 
@@ -323,6 +324,22 @@ describe( 'Document', () => {
 		} );
 	} );
 
+	describe( 'scrollToTheSelection()', () => {
+		it( 'scrolls to the first range in selection with an offset', () => {
+			const stub = testUtils.sinon.stub( scrollUtils, 'scrollViewportToShowTarget', () => {} );
+			const root = viewDocument.createRoot( document.createElement( 'div' ) );
+			const range = ViewRange.createIn( root );
+
+			viewDocument.selection.addRange( range );
+
+			viewDocument.scrollToTheSelection();
+			sinon.assert.calledWithMatch( stub, {
+				target: viewDocument.domConverter.viewRangeToDom( range ),
+				viewportOffset: 20
+			} );
+		} );
+	} );
+
 	describe( 'disableObservers()', () => {
 		it( 'should disable observers', () => {
 			const addedObserverMock = viewDocument.addObserver( ObserverMock );