Merge "CodeMirror: partially implement $.textSelection 'encapsulateSelection'"

src/codemirror.js

@@ -1,4 +1,4 @@
-import { EditorState, Extension } from '@codemirror/state';
+import { EditorSelection, EditorState, Extension } from '@codemirror/state';
 import { EditorView, lineNumbers, highlightSpecialChars } from '@codemirror/view';
 
 /**
@@ -256,6 +256,30 @@ export default class CodeMirror {
 				this.view.focus();
 				return $cmDom;
 			},
+			encapsulateSelection: ( options ) => {
+				// First set the selection, if applicable.
+				if ( options.selectionStart || options.selectionEnd ) {
+					this.view.dispatch( {
+						selection: {
+							anchor: options.selectionStart,
+							head: ( options.selectionEnd || options.selectionStart )
+						}
+					} );
+				}
+				// Do the actual replacements.
+				this.view.dispatch( this.view.state.changeByRange( ( range ) => ( {
+					changes: [
+						{ from: range.from, insert: options.pre },
+						{ from: range.to, insert: options.post }
+					],
+					range: EditorSelection.range(
+						range.from,
+						range.to + options.pre.length + options.post.length
+					)
+				} ) ) );
+				this.view.focus();
+				return $cmDom;
+			},
 			replaceSelection: ( value ) => {
 				this.view.dispatch(
 					this.view.state.replaceSelection( value )

tests/selenium/specs/textSelection-wikitext2010.js

@@ -20,6 +20,7 @@ describe( 'CodeMirror textSelection for the wikitext 2010 editor', () => {
 		await EditPage.clickText();
 	} );
 
+	// Content is "[]{{template}}"
 	it( 'sets and gets the correct text when using setContents and getContents', async () => {
 		await browser.execute( () => $( '.cm-editor' ).textSelection( 'setContents', 'foobar' ) );
 		assert.strictEqual(
@@ -28,6 +29,7 @@ describe( 'CodeMirror textSelection for the wikitext 2010 editor', () => {
 		);
 	} );
 
+	// Content is now "foobar"
 	it( 'sets and gets the correct selection when using setSelection and getSelection', async () => {
 		await browser.execute( () => {
 			$( '.cm-editor' ).textSelection( 'setSelection', { start: 3, end: 6 } );
@@ -48,6 +50,7 @@ describe( 'CodeMirror textSelection for the wikitext 2010 editor', () => {
 		);
 	} );
 
+	// Content is now "foobaz"
 	it( 'returns the correct values for getCaretPosition', async () => {
 		await browser.execute( () => {
 			$( '.cm-editor' ).textSelection( 'setSelection', { start: 3, end: 6 } );
@@ -64,6 +67,23 @@ describe( 'CodeMirror textSelection for the wikitext 2010 editor', () => {
 		);
 	} );
 
+	it( 'correctly wraps the selected text when using encapsulateSelection', async function () {
+		await browser.execute( () => {
+			$( '.cm-editor' ).textSelection( 'setContents', 'foobaz' )
+				.textSelection( 'encapsulateSelection', {
+					selectionStart: 0,
+					selectionEnd: 6,
+					pre: '<div>',
+					post: '</div>'
+				} );
+		} );
+		assert.strictEqual(
+			await browser.execute( () => $( '.cm-editor' ).textSelection( 'getContents' ) ),
+			'<div>foobaz</div>'
+		);
+	} );
+
+	// Content is now "<div>foobaz</div>"
 	it( 'scrolls to the correct place when using scrollToCaretPosition', async () => {
 		await browser.execute( () => {
 			const $cmEditor = $( '.cm-editor' );
@@ -81,6 +101,7 @@ describe( 'CodeMirror textSelection for the wikitext 2010 editor', () => {
 		);
 	} );
 
+	// Content is now "foobar\n" repeated 50 times.
 	it( 'retains the contents after turning CodeMirror off', async () => {
 		await EditPage.legacyCodeMirrorButton.click();
 		await EditPage.legacyTextInput.waitForDisplayed();