Merge pull request #8414 from ckeditor/i/714-revert

Revert: Reverted widespread `editor.focus()` usage back to `editor.editing.view.focus()` form. Closes #714.

docs/_snippets/framework/tutorials/block-widget.js

@@ -54,7 +54,7 @@ class SimpleBoxUI extends Plugin {
 			// Execute the command when the button is clicked (executed).
 			this.listenTo( buttonView, 'execute', () => {
 				editor.execute( 'insertSimpleBox' );
-				editor.focus();
+				editor.editing.view.focus();
 			} );
 
 			return buttonView;

docs/_snippets/framework/tutorials/inline-widget.js

@@ -82,7 +82,7 @@ class PlaceholderUI extends Plugin {
 			// Execute the command when the dropdown item is clicked (executed).
 			this.listenTo( dropdownView, 'execute', evt => {
 				editor.execute( 'placeholder', { value: evt.source.commandParam } );
-				editor.focus();
+				editor.editing.view.focus();
 			} );
 
 			return dropdownView;

docs/_snippets/framework/tutorials/using-react-in-widget.html

@@ -311,7 +311,7 @@ <h4>Editor data</h4>
 				products={this.props.products}
 				onClick={( id ) => {
 					this.editor.execute( 'insertProduct', id );
-					this.editor.focus();
+					this.editor.editing.view.focus();
 				}}
 			/>
 		];

docs/framework/guides/architecture/ui-library.md

@@ -443,13 +443,13 @@ dropdownView.bind( 'isEnabled' ).toMany( buttons, 'isEnabled',
 
 ### Best practices
 
-It is advised that for the best user experience the editor gets {@link module:core/editor/editor~Editor#focus focused} upon any user action (e.g. executing a command):
+It is advised that for the best user experience the editing view gets {@link module:engine/view/view~View#focus focused} upon any user action (e.g. executing a command) to make sure the editor retains focus:
 
 ```js
 // Execute some action on dropdown#execute event.
 dropdownView.buttonView.on( 'execute', () => {
 	editor.execute( 'command', { value: ... } );
-	editor.focus();
+	editor.editing.view.focus();
 } );
 ```
 

docs/framework/guides/deep-dive/localization.md

@@ -103,7 +103,7 @@ editor.ui.componentFactory.add( 'smilingFaceEmoji', locale => {
 
 	buttonView.on( 'execute', () => {
 		editor.execute( 'insertSmilingFaceEmoji' );
-		editor.focus();
+		editor.editing.view.focus();
 	} );
 } );
 // ...

docs/framework/guides/tutorials/implementing-an-inline-widget.md

@@ -591,7 +591,7 @@ export default class PlaceholderUI extends Plugin {
 			// Execute the command when the dropdown item is clicked (executed).
 			this.listenTo( dropdownView, 'execute', evt => {
 				editor.execute( 'placeholder', { value: evt.source.commandParam } );
-				editor.focus();
+				editor.editing.view.focus();
 			} );
 
 			return dropdownView;
@@ -819,7 +819,7 @@ class PlaceholderUI extends Plugin {
 			// Execute the command when the dropdown item is clicked (executed).
 			this.listenTo( dropdownView, 'execute', evt => {
 				editor.execute( 'placeholder', { value: evt.source.commandParam } );
-				editor.focus();
+				editor.editing.view.focus();
 			} );
 
 			return dropdownView;

docs/framework/guides/tutorials/using-react-in-a-widget.md

@@ -636,7 +636,7 @@ class App extends React.Component {
 				products={this.props.products}
 				onClick={( id ) => {
 					this.editor.execute( 'insertProduct', id );
-					this.editor.focus();
+					this.editor.editing.view.focus();
 				}}
 			/>
 		];
@@ -1047,7 +1047,7 @@ class App extends React.Component {
 				products={this.props.products}
 				onClick={( id ) => {
 					this.editor.execute( 'insertProduct', id );
-					this.editor.focus();
+					this.editor.editing.view.focus();
 				}}
 			/>
 		];

packages/ckeditor5-alignment/src/alignmentui.js

@@ -152,7 +152,7 @@ export default class AlignmentUI extends Plugin {
 			// Execute command.
 			this.listenTo( buttonView, 'execute', () => {
 				editor.execute( 'alignment', { value: option } );
-				editor.focus();
+				editor.editing.view.focus();
 			} );
 
 			return buttonView;

packages/ckeditor5-basic-styles/src/bold/boldui.js

@@ -45,7 +45,7 @@ export default class BoldUI extends Plugin {
 			// Execute command.
 			this.listenTo( view, 'execute', () => {
 				editor.execute( BOLD );
-				editor.focus();
+				editor.editing.view.focus();
 			} );
 
 			return view;

packages/ckeditor5-basic-styles/src/code/codeui.js

@@ -46,7 +46,7 @@ export default class CodeUI extends Plugin {
 			// Execute command.
 			this.listenTo( view, 'execute', () => {
 				editor.execute( CODE );
-				editor.focus();
+				editor.editing.view.focus();
 			} );
 
 			return view;

packages/ckeditor5-basic-styles/src/italic/italicui.js

@@ -45,7 +45,7 @@ export default class ItalicUI extends Plugin {
 			// Execute command.
 			this.listenTo( view, 'execute', () => {
 				editor.execute( ITALIC );
-				editor.focus();
+				editor.editing.view.focus();
 			} );
 
 			return view;

packages/ckeditor5-basic-styles/src/strikethrough/strikethroughui.js

@@ -45,7 +45,7 @@ export default class StrikethroughUI extends Plugin {
 			// Execute command.
 			this.listenTo( view, 'execute', () => {
 				editor.execute( STRIKETHROUGH );
-				editor.focus();
+				editor.editing.view.focus();
 			} );
 
 			return view;

packages/ckeditor5-basic-styles/src/subscript/subscriptui.js

@@ -44,7 +44,7 @@ export default class SubscriptUI extends Plugin {
 			// Execute command.
 			this.listenTo( view, 'execute', () => {
 				editor.execute( SUBSCRIPT );
-				editor.focus();
+				editor.editing.view.focus();
 			} );
 
 			return view;

packages/ckeditor5-basic-styles/src/superscript/superscriptui.js

@@ -44,7 +44,7 @@ export default class SuperscriptUI extends Plugin {
 			// Execute command.
 			this.listenTo( view, 'execute', () => {
 				editor.execute( SUPERSCRIPT );
-				editor.focus();
+				editor.editing.view.focus();
 			} );
 
 			return view;

packages/ckeditor5-basic-styles/src/underline/underlineui.js

@@ -45,7 +45,7 @@ export default class UnderlineUI extends Plugin {
 			// Execute command.
 			this.listenTo( view, 'execute', () => {
 				editor.execute( UNDERLINE );
-				editor.focus();
+				editor.editing.view.focus();
 			} );
 
 			return view;

packages/ckeditor5-block-quote/src/blockquoteui.js

@@ -45,7 +45,7 @@ export default class BlockQuoteUI extends Plugin {
 			// Execute command.
 			this.listenTo( buttonView, 'execute', () => {
 				editor.execute( 'blockQuote' );
-				editor.focus();
+				editor.editing.view.focus();
 			} );
 
 			return buttonView;

packages/ckeditor5-ckfinder/src/ckfinderui.js

@@ -48,7 +48,7 @@ export default class CKFinderUI extends Plugin {
 
 			button.on( 'execute', () => {
 				editor.execute( 'ckfinder' );
-				editor.focus();
+				editor.editing.view.focus();
 			} );
 
 			return button;

packages/ckeditor5-code-block/src/codeblockui.js

@@ -54,7 +54,7 @@ export default class CodeBlockUI extends Plugin {
 					language: defaultLanguageDefinition.language
 				} );
 
-				editor.focus();
+				editor.editing.view.focus();
 			} );
 
 			dropdownView.on( 'execute', evt => {
@@ -63,7 +63,7 @@ export default class CodeBlockUI extends Plugin {
 					forceValue: true
 				} );
 
-				editor.focus();
+				editor.editing.view.focus();
 			} );
 
 			dropdownView.class = 'ck-code-block-dropdown';

packages/ckeditor5-core/src/editor/editor.js

@@ -297,7 +297,13 @@ export default class Editor {
 	}
 
 	/**
-	 * Puts the focus in the editor's editing view.
+	 * Focuses the editor.
+	 *
+	 * **Note** To explicitly focus the editing area of the editor, use
+	 * {@link module:engine/view/view~View#focus `editor.editing.view.focus()`} method of the editing view.
+	 *
+	 * Check out the {@glink framework/guides/deep-dive/ui/focus-tracking#focus-in-the-editor-ui "Focus in the editor ui"} section
+	 * of the {@glink framework/guides/deep-dive/ui/focus-tracking "Deep dive into focus tracking" guide} to learn more.
 	 */
 	focus() {
 		this.editing.view.focus();

packages/ckeditor5-core/tests/manual/readonly.js

@@ -28,7 +28,7 @@ ClassicEditor
 			editor.isReadOnly = !editor.isReadOnly;
 			button.textContent = editor.isReadOnly ? 'Turn off read-only mode' : 'Turn on read-only mode';
 
-			editor.focus();
+			editor.editing.view.focus();
 		} );
 	} )
 	.catch( err => {

packages/ckeditor5-font/src/fontfamily/fontfamilyui.js

@@ -55,7 +55,7 @@ export default class FontFamilyUI extends Plugin {
 			// Execute command when an item from the dropdown is selected.
 			this.listenTo( dropdownView, 'execute', evt => {
 				editor.execute( evt.source.commandName, { value: evt.source.commandParam } );
-				editor.focus();
+				editor.editing.view.focus();
 			} );
 
 			return dropdownView;

packages/ckeditor5-font/src/fontsize/fontsizeui.js

@@ -60,7 +60,7 @@ export default class FontSizeUI extends Plugin {
 			// Execute command when an item from the dropdown is selected.
 			this.listenTo( dropdownView, 'execute', evt => {
 				editor.execute( evt.source.commandName, { value: evt.source.commandParam } );
-				editor.focus();
+				editor.editing.view.focus();
 			} );
 
 			return dropdownView;

packages/ckeditor5-font/src/ui/colorui.js

@@ -126,7 +126,7 @@ export default class ColorUI extends Plugin {
 
 			dropdownView.on( 'execute', ( evt, data ) => {
 				editor.execute( this.commandName, data );
-				editor.focus();
+				editor.editing.view.focus();
 			} );
 
 			dropdownView.on( 'change:isOpen', ( evt, name, isVisible ) => {

packages/ckeditor5-heading/src/headingbuttonsui.js

@@ -94,7 +94,7 @@ export default class HeadingButtonsUI extends Plugin {
 
 			view.on( 'execute', () => {
 				editor.execute( 'heading', { value: option.model } );
-				editor.focus();
+				editor.editing.view.focus();
 			} );
 
 			return view;

packages/ckeditor5-heading/src/headingui.js

@@ -101,7 +101,7 @@ export default class HeadingUI extends Plugin {
 			// Execute command when an item from the dropdown is selected.
 			this.listenTo( dropdownView, 'execute', evt => {
 				editor.execute( evt.source.commandName, evt.source.commandValue ? { value: evt.source.commandValue } : undefined );
-				editor.focus();
+				editor.editing.view.focus();
 			} );
 
 			return dropdownView;

packages/ckeditor5-highlight/src/highlightui.js

@@ -149,7 +149,7 @@ export default class HighlightUI extends Plugin {
 
 			buttonView.on( 'execute', () => {
 				editor.execute( 'highlight', { value } );
-				editor.focus();
+				editor.editing.view.focus();
 			} );
 
 			// Add additional behavior for buttonView.
@@ -228,7 +228,7 @@ export default class HighlightUI extends Plugin {
 			// Execute current action from dropdown's split button action button.
 			splitButtonView.on( 'execute', () => {
 				editor.execute( 'highlight', { value: splitButtonView.commandValue } );
-				editor.focus();
+				editor.editing.view.focus();
 			} );
 
 			// Returns active highlighter option depending on current command value.

packages/ckeditor5-horizontal-line/src/horizontallineui.js

@@ -37,7 +37,7 @@ export default class HorizontalLineUI extends Plugin {
 			// Execute the command.
 			this.listenTo( view, 'execute', () => {
 				editor.execute( 'horizontalLine' );
-				editor.focus();
+				editor.editing.view.focus();
 			} );
 
 			return view;

packages/ckeditor5-html-embed/src/htmlembedui.js

@@ -38,7 +38,7 @@ export default class HtmlEmbedUI extends Plugin {
 			// Execute the command.
 			this.listenTo( view, 'execute', () => {
 				editor.execute( 'insertHtmlEmbed' );
-				editor.focus();
+				editor.editing.view.focus();
 
 				const widgetWrapper = editor.editing.view.document.selection.getSelectedElement();
 

packages/ckeditor5-image/src/imageinsert/imageinsertui.js

@@ -145,7 +145,7 @@ export default class ImageInsertUI extends Plugin {
 		}
 
 		function closePanel() {
-			editor.focus();
+			editor.editing.view.focus();
 			dropdownView.isOpen = false;
 		}
 

packages/ckeditor5-image/src/imageresize/imageresizebuttons.js

@@ -185,7 +185,7 @@ export default class ImageResizeButtons extends Plugin {
 			// Execute command when an item from the dropdown is selected.
 			this.listenTo( dropdownView, 'execute', evt => {
 				editor.execute( evt.source.commandName, { width: evt.source.commandValue } );
-				editor.focus();
+				editor.editing.view.focus();
 			} );
 
 			return dropdownView;

packages/ckeditor5-image/src/imagestyle/imagestyleui.js

@@ -94,7 +94,7 @@ export default class ImageStyleUI extends Plugin {
 
 			this.listenTo( view, 'execute', () => {
 				editor.execute( 'imageStyle', { value: style.name } );
-				editor.focus();
+				editor.editing.view.focus();
 			} );
 
 			return view;

packages/ckeditor5-image/src/imagetextalternative/imagetextalternativeui.js

@@ -206,7 +206,7 @@ export default class ImageTextAlternativeUI extends Plugin {
 		this._balloon.remove( this._form );
 
 		if ( focusEditable ) {
-			this.editor.focus();
+			this.editor.editing.view.focus();
 		}
 	}
 

packages/ckeditor5-indent/src/indentui.js

@@ -70,7 +70,7 @@ export default class IndentUI extends Plugin {
 
 			this.listenTo( view, 'execute', () => {
 				editor.execute( commandName );
-				editor.focus();
+				editor.editing.view.focus();
 			} );
 
 			return view;

packages/ckeditor5-link/src/linkui.js

@@ -375,7 +375,7 @@ export default class LinkUI extends Plugin {
 
 			// Because the form has an input which has focus, the focus must be brought back
 			// to the editor. Otherwise, it would be lost.
-			this.editor.focus();
+			this.editor.editing.view.focus();
 
 			this._hideFakeVisualSelection();
 		}
@@ -443,7 +443,7 @@ export default class LinkUI extends Plugin {
 
 		// Make sure the focus always gets back to the editable _before_ removing the focused form view.
 		// Doing otherwise causes issues in some browsers. See https://github.com/ckeditor/ckeditor5-link/issues/193.
-		editor.focus();
+		editor.editing.view.focus();
 
 		// Remove form first because it's on top of the stack.
 		this._removeFormView();

packages/ckeditor5-list/src/liststyleui.js

@@ -158,7 +158,7 @@ function getSplitButtonCreator( { editor, parentCommandName, buttonLabel, button
 
 		splitButtonView.on( 'execute', () => {
 			editor.execute( parentCommandName );
-			editor.focus();
+			editor.editing.view.focus();
 		} );
 
 		splitButtonView.set( {
@@ -222,7 +222,7 @@ function getStyleButtonCreator( { editor, listStyleCommand, parentCommandName }
 				} );
 			}
 
-			editor.focus();
+			editor.editing.view.focus();
 		} );
 
 		return button;

packages/ckeditor5-list/src/utils.js

@@ -262,7 +262,7 @@ export function createUIComponent( editor, commandName, label, icon ) {
 		// Execute command.
 		buttonView.on( 'execute', () => {
 			editor.execute( commandName );
-			editor.focus();
+			editor.editing.view.focus();
 		} );
 
 		return buttonView;

packages/ckeditor5-media-embed/src/mediaembedui.js

@@ -101,7 +101,7 @@ export default class MediaEmbedUI extends Plugin {
 		dropdown.on( 'cancel', () => closeUI() );
 
 		function closeUI() {
-			editor.focus();
+			editor.editing.view.focus();
 			dropdown.isOpen = false;
 		}
 	}