Bladeren bron

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

Revert: Reverted widespread `editor.focus()` usage back to `editor.editing.view.focus()` form. Closes #714.
Piotrek Koszuliński 5 jaren geleden
bovenliggende
commit
4cb8158a87
59 gewijzigde bestanden met toevoegingen van 81 en 72 verwijderingen
  1. 1 1
      docs/_snippets/framework/tutorials/block-widget.js
  2. 1 1
      docs/_snippets/framework/tutorials/inline-widget.js
  3. 1 1
      docs/_snippets/framework/tutorials/using-react-in-widget.html
  4. 2 2
      docs/framework/guides/architecture/ui-library.md
  5. 1 1
      docs/framework/guides/deep-dive/localization.md
  6. 2 2
      docs/framework/guides/tutorials/implementing-an-inline-widget.md
  7. 2 2
      docs/framework/guides/tutorials/using-react-in-a-widget.md
  8. 1 1
      packages/ckeditor5-alignment/src/alignmentui.js
  9. 1 1
      packages/ckeditor5-basic-styles/src/bold/boldui.js
  10. 1 1
      packages/ckeditor5-basic-styles/src/code/codeui.js
  11. 1 1
      packages/ckeditor5-basic-styles/src/italic/italicui.js
  12. 1 1
      packages/ckeditor5-basic-styles/src/strikethrough/strikethroughui.js
  13. 1 1
      packages/ckeditor5-basic-styles/src/subscript/subscriptui.js
  14. 1 1
      packages/ckeditor5-basic-styles/src/superscript/superscriptui.js
  15. 1 1
      packages/ckeditor5-basic-styles/src/underline/underlineui.js
  16. 1 1
      packages/ckeditor5-block-quote/src/blockquoteui.js
  17. 1 1
      packages/ckeditor5-ckfinder/src/ckfinderui.js
  18. 2 2
      packages/ckeditor5-code-block/src/codeblockui.js
  19. 7 1
      packages/ckeditor5-core/src/editor/editor.js
  20. 1 1
      packages/ckeditor5-core/tests/manual/readonly.js
  21. 1 1
      packages/ckeditor5-font/src/fontfamily/fontfamilyui.js
  22. 1 1
      packages/ckeditor5-font/src/fontsize/fontsizeui.js
  23. 1 1
      packages/ckeditor5-font/src/ui/colorui.js
  24. 1 1
      packages/ckeditor5-heading/src/headingbuttonsui.js
  25. 1 1
      packages/ckeditor5-heading/src/headingui.js
  26. 2 2
      packages/ckeditor5-highlight/src/highlightui.js
  27. 1 1
      packages/ckeditor5-horizontal-line/src/horizontallineui.js
  28. 1 1
      packages/ckeditor5-html-embed/src/htmlembedui.js
  29. 1 1
      packages/ckeditor5-image/src/imageinsert/imageinsertui.js
  30. 1 1
      packages/ckeditor5-image/src/imageresize/imageresizebuttons.js
  31. 1 1
      packages/ckeditor5-image/src/imagestyle/imagestyleui.js
  32. 1 1
      packages/ckeditor5-image/src/imagetextalternative/imagetextalternativeui.js
  33. 1 1
      packages/ckeditor5-indent/src/indentui.js
  34. 2 2
      packages/ckeditor5-link/src/linkui.js
  35. 2 2
      packages/ckeditor5-list/src/liststyleui.js
  36. 1 1
      packages/ckeditor5-list/src/utils.js
  37. 1 1
      packages/ckeditor5-media-embed/src/mediaembedui.js
  38. 1 1
      packages/ckeditor5-mention/src/mentionui.js
  39. 1 1
      packages/ckeditor5-page-break/src/pagebreakui.js
  40. 1 1
      packages/ckeditor5-remove-format/src/removeformatui.js
  41. 1 1
      packages/ckeditor5-restricted-editing/src/restrictededitingmodeui.js
  42. 1 1
      packages/ckeditor5-restricted-editing/src/standardeditingmodeui.js
  43. 1 1
      packages/ckeditor5-select-all/src/selectallui.js
  44. 1 1
      packages/ckeditor5-special-characters/src/specialcharacters.js
  45. 1 1
      packages/ckeditor5-table/src/tablecellproperties/tablecellpropertiesui.js
  46. 1 1
      packages/ckeditor5-table/src/tableproperties/tablepropertiesui.js
  47. 4 4
      packages/ckeditor5-table/src/tableui.js
  48. 1 1
      packages/ckeditor5-table/tests/manual/tablemocking.js
  49. 1 1
      packages/ckeditor5-table/tests/tablekeyboard.js
  50. 1 1
      packages/ckeditor5-ui/docs/_snippets/examples/bootstrap-ui-inner.js
  51. 6 4
      packages/ckeditor5-ui/docs/framework/guides/deep-dive/focus-tracking.md
  52. 1 1
      packages/ckeditor5-ui/docs/framework/guides/external-ui.md
  53. 2 2
      packages/ckeditor5-ui/src/panel/balloon/contextualballoon.js
  54. 1 1
      packages/ckeditor5-ui/src/toolbar/block/blocktoolbar.js
  55. 1 1
      packages/ckeditor5-undo/src/undoui.js
  56. 1 1
      packages/ckeditor5-widget/tests/verticalnavigation.js
  57. 1 0
      packages/ckeditor5-widget/tests/widgetresize/_utils/utils.js
  58. 1 1
      tests/manual/all-features.js
  59. 1 1
      tests/manual/memory/memory.js

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

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

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

@@ -311,7 +311,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();
 				}}
 			/>
 		];

+ 2 - 2
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();
 } );
 ```
 

+ 1 - 1
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();
 	} );
 } );
 // ...

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

+ 2 - 2
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();
 				}}
 			/>
 		];

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

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

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

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

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

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

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

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

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

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

+ 2 - 2
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';

+ 7 - 1
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();

+ 1 - 1
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 => {

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

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

+ 1 - 1
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 ) => {

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

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

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

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

+ 1 - 1
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();
 

+ 1 - 1
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;
 		}
 

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

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

+ 1 - 1
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();
 		}
 	}
 

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

+ 2 - 2
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();

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

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

+ 1 - 1
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;
 		}
 	}

+ 1 - 1
packages/ckeditor5-mention/src/mentionui.js

@@ -253,7 +253,7 @@ export default class MentionUI extends Plugin {
 				range
 			} );
 
-			editor.focus();
+			editor.editing.view.focus();
 		} );
 
 		return mentionsView;

+ 1 - 1
packages/ckeditor5-page-break/src/pagebreakui.js

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

+ 1 - 1
packages/ckeditor5-remove-format/src/removeformatui.js

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

+ 1 - 1
packages/ckeditor5-restricted-editing/src/restrictededitingmodeui.js

@@ -63,7 +63,7 @@ export default class RestrictedEditingModeUI extends Plugin {
 
 			this.listenTo( dropdownView, 'execute', evt => {
 				editor.execute( evt.source._commandName );
-				editor.focus();
+				editor.editing.view.focus();
 			} );
 
 			return dropdownView;

+ 1 - 1
packages/ckeditor5-restricted-editing/src/standardeditingmodeui.js

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

+ 1 - 1
packages/ckeditor5-select-all/src/selectallui.js

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

+ 1 - 1
packages/ckeditor5-special-characters/src/specialcharacters.js

@@ -90,7 +90,7 @@ export default class SpecialCharacters extends Plugin {
 			// Insert a special character when a tile was clicked.
 			dropdownView.on( 'execute', ( evt, data ) => {
 				editor.execute( 'input', { text: data.character } );
-				editor.focus();
+				editor.editing.view.focus();
 			} );
 
 			dropdownView.on( 'change:isOpen', () => {

+ 1 - 1
packages/ckeditor5-table/src/tablecellproperties/tablecellpropertiesui.js

@@ -329,7 +329,7 @@ export default class TableCellPropertiesUI extends Plugin {
 
 		// Make sure the focus is not lost in the process by putting it directly
 		// into the editing view.
-		this.editor.focus();
+		this.editor.editing.view.focus();
 	}
 
 	/**

+ 1 - 1
packages/ckeditor5-table/src/tableproperties/tablepropertiesui.js

@@ -319,7 +319,7 @@ export default class TablePropertiesUI extends Plugin {
 
 		// Make sure the focus is not lost in the process by putting it directly
 		// into the editing view.
-		this.editor.focus();
+		this.editor.editing.view.focus();
 	}
 
 	/**

+ 4 - 4
packages/ckeditor5-table/src/tableui.js

@@ -76,7 +76,7 @@ export default class TableUI extends Plugin {
 
 				dropdownView.on( 'execute', () => {
 					editor.execute( 'insertTable', { rows: insertTableView.rows, columns: insertTableView.columns } );
-					editor.focus();
+					editor.editing.view.focus();
 				} );
 			} );
 
@@ -251,7 +251,7 @@ export default class TableUI extends Plugin {
 
 		this.listenTo( dropdownView, 'execute', evt => {
 			editor.execute( evt.source.commandName );
-			editor.focus();
+			editor.editing.view.focus();
 		} );
 
 		return dropdownView;
@@ -285,13 +285,13 @@ export default class TableUI extends Plugin {
 		// Merge selected table cells when the main part of the split button is clicked.
 		this.listenTo( dropdownView.buttonView, 'execute', () => {
 			editor.execute( mergeCommandName );
-			editor.focus();
+			editor.editing.view.focus();
 		} );
 
 		// Execute commands for events coming from the list in the dropdown panel.
 		this.listenTo( dropdownView, 'execute', evt => {
 			editor.execute( evt.source.commandName );
-			editor.focus();
+			editor.editing.view.focus();
 		} );
 
 		return dropdownView;

+ 1 - 1
packages/ckeditor5-table/tests/manual/tablemocking.js

@@ -54,7 +54,7 @@ ClassicEditor
 					writer.setSelection( element, 'on' );
 				} );
 
-				editor.focus();
+				editor.editing.view.focus();
 			}
 		} );
 

+ 1 - 1
packages/ckeditor5-table/tests/tablekeyboard.js

@@ -2221,7 +2221,7 @@ describe( 'TableKeyboard', () => {
 
 					// The editing view must be focused because otherwise in Chrome the DOM selection will not contain
 					// any ranges and jumpOverUiElement will crash (for the right arrow when shift is pressed).
-					editor.focus();
+					editor.editing.view.focus();
 				} );
 
 				afterEach( async () => {

+ 1 - 1
packages/ckeditor5-ui/docs/_snippets/examples/bootstrap-ui-inner.js

@@ -255,7 +255,7 @@ class BootstrapEditorUI extends EditorUI {
 				const commandValue = isParagraph ? undefined : { value: option.model };
 
 				editor.execute( commandName, commandValue );
-				editor.focus();
+				editor.editing.view.focus();
 			} );
 
 			dropdownMenu.append( menuItem );

+ 6 - 4
packages/ckeditor5-ui/docs/framework/guides/deep-dive/focus-tracking.md

@@ -70,16 +70,18 @@ To spice things up even more, you should also know `isFocused` will change when
 
 ### How to focus the editor?
 
-Say, for instance, your application wants to focus an editable area of CKEditor 5 when a certain action is executed (e.g. a button is clicked). To do that, use the {@link module:core/editor/editor~Editor#focus `focus()`} method of the editor:
+The simplest way to focus the editor is to call the {@link module:core/editor/editor~Editor#focus `editor.focus()`} method.
+
+However, you may wish to explicitly focus the editable area of CKEditor 5 when a certain action is executed (e.g. a button is clicked). To do that, use the {@link module:engine/view/view~View#focus `focus()`} method of the editing view:
 
 ```js
-editor.focus();
+editor.editing.view.focus();
 ```
 
-This method focuses an editable that has the selection. If the editor has not been focused yet, this will focus the very first editable. If an editor has multiple editing roots and the user was editing content, focus will be brought back where the user left off.
+This snippet focuses the editable that has the selection. If the editor has not been focused yet, this will focus the very first editable. If an editor has multiple editing roots and the user was editing content, focus will be brought back where the user left off.
 
 <info-box>
-	Focusing an editor does not change its selection. If you want to focus an editor and move the caret to a specific position, you should call `editor.focus()` first and then use the {@link module:engine/model/writer~Writer#setSelection `setSelection()`} method of the {@link framework/guides/architecture/editing-engine#model model writer} to change the selection.
+	Focusing the editor does not change its selection. If you want to focus the editor and move the caret to a specific position, you should call `editor.editing.view.focus()` first and then use the {@link module:engine/model/writer~Writer#setSelection `setSelection()`} method of the {@link framework/guides/architecture/editing-engine#model model writer} to change the selection.
 </info-box>
 
 ## Focus in the editor UI

+ 1 - 1
packages/ckeditor5-ui/docs/framework/guides/external-ui.md

@@ -441,7 +441,7 @@ _setupBootstrapHeadingDropdown() {
 			const commandValue = isParagraph ? undefined : { value: option.model };
 
 			editor.execute( commandName, commandValue );
-			editor.focus();
+			editor.editing.view.focus();
 		} );
 
 		dropdownMenu.append( menuItem );

+ 2 - 2
packages/ckeditor5-ui/src/panel/balloon/contextualballoon.js

@@ -424,7 +424,7 @@ export default class ContextualBalloon extends Plugin {
 			// When current view has a focus then move focus to the editable before removing it,
 			// otherwise editor will lost focus.
 			if ( view.focusTracker.isFocused ) {
-				this.editor.focus();
+				this.editor.editing.view.focus();
 			}
 
 			this._showNextStack();
@@ -434,7 +434,7 @@ export default class ContextualBalloon extends Plugin {
 			// When current view has a focus then move focus to the editable before removing it,
 			// otherwise editor will lost focus.
 			if ( view.focusTracker.isFocused ) {
-				this.editor.focus();
+				this.editor.editing.view.focus();
 			}
 
 			this._showPrevStack();

+ 1 - 1
packages/ckeditor5-ui/src/toolbar/block/blocktoolbar.js

@@ -417,7 +417,7 @@ export default class BlockToolbar extends Plugin {
 		this.panelView.isVisible = false;
 
 		if ( focusEditable ) {
-			this.editor.focus();
+			this.editor.editing.view.focus();
 		}
 	}
 

+ 1 - 1
packages/ckeditor5-undo/src/undoui.js

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

+ 1 - 1
packages/ckeditor5-widget/tests/verticalnavigation.js

@@ -37,7 +37,7 @@ describe( 'Widget - vertical keyboard navigation near widgets', () => {
 
 		// The editing view must be focused because otherwise in Chrome the DOM selection will not contain
 		// any ranges and jumpOverUiElement will crash (for the right arrow when shift is pressed).
-		editor.focus();
+		editor.editing.view.focus();
 
 		leftArrowDomEvtDataStub = {
 			keyCode: getCode( 'ArrowLeft' ),

+ 1 - 0
packages/ckeditor5-widget/tests/widgetresize/_utils/utils.js

@@ -152,5 +152,6 @@ export function getHandleCenterPoint( domWrapper, handlePosition ) {
 }
 
 export function focusEditor( editor ) {
+	editor.editing.view.focus();
 	editor.ui.focusTracker.isFocused = true;
 }

+ 1 - 1
tests/manual/all-features.js

@@ -185,7 +185,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 => {

+ 1 - 1
tests/manual/memory/memory.js

@@ -121,7 +121,7 @@ function initEditor() {
 				document.getElementById( 'read-only' ).textContent =
 					editor.isReadOnly ? 'Turn off read-only mode' : 'Turn on read-only mode';
 
-				editor.focus();
+				editor.editing.view.focus();
 			}
 
 			function printData() {