diff --git a/docs/_snippets/framework/tutorials/block-widget.js b/docs/_snippets/framework/tutorials/block-widget.js
index 859f9ad56a5..a5d2204a9fe 100644
--- a/docs/_snippets/framework/tutorials/block-widget.js
+++ b/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.editing.view.focus();
+ editor.focus();
} );
return buttonView;
diff --git a/docs/_snippets/framework/tutorials/inline-widget.js b/docs/_snippets/framework/tutorials/inline-widget.js
index 4bf5a341b31..c69582cebbf 100644
--- a/docs/_snippets/framework/tutorials/inline-widget.js
+++ b/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.editing.view.focus();
+ editor.focus();
} );
return dropdownView;
diff --git a/docs/_snippets/framework/tutorials/using-react-in-widget.html b/docs/_snippets/framework/tutorials/using-react-in-widget.html
index c1a6885a871..4799448d891 100644
--- a/docs/_snippets/framework/tutorials/using-react-in-widget.html
+++ b/docs/_snippets/framework/tutorials/using-react-in-widget.html
@@ -311,7 +311,7 @@ Editor data
products={this.props.products}
onClick={( id ) => {
this.editor.execute( 'insertProduct', id );
- this.editor.editing.view.focus();
+ this.editor.focus();
}}
/>
];
diff --git a/docs/framework/guides/architecture/ui-library.md b/docs/framework/guides/architecture/ui-library.md
index 98763259739..f1125232aa3 100644
--- a/docs/framework/guides/architecture/ui-library.md
+++ b/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 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:
+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):
```js
// Execute some action on dropdown#execute event.
dropdownView.buttonView.on( 'execute', () => {
editor.execute( 'command', { value: ... } );
- editor.editing.view.focus();
+ editor.focus();
} );
```
diff --git a/docs/framework/guides/deep-dive/localization.md b/docs/framework/guides/deep-dive/localization.md
index 9925683c632..22e6876b9d8 100644
--- a/docs/framework/guides/deep-dive/localization.md
+++ b/docs/framework/guides/deep-dive/localization.md
@@ -103,7 +103,7 @@ editor.ui.componentFactory.add( 'smilingFaceEmoji', locale => {
buttonView.on( 'execute', () => {
editor.execute( 'insertSmilingFaceEmoji' );
- editor.editing.view.focus();
+ editor.focus();
} );
} );
// ...
diff --git a/docs/framework/guides/tutorials/implementing-an-inline-widget.md b/docs/framework/guides/tutorials/implementing-an-inline-widget.md
index f7c45b6f004..1f0e1d60914 100644
--- a/docs/framework/guides/tutorials/implementing-an-inline-widget.md
+++ b/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.editing.view.focus();
+ editor.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.editing.view.focus();
+ editor.focus();
} );
return dropdownView;
diff --git a/docs/framework/guides/tutorials/using-react-in-a-widget.md b/docs/framework/guides/tutorials/using-react-in-a-widget.md
index dec8147e426..a1cbf715e61 100644
--- a/docs/framework/guides/tutorials/using-react-in-a-widget.md
+++ b/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.editing.view.focus();
+ this.editor.focus();
}}
/>
];
@@ -1047,7 +1047,7 @@ class App extends React.Component {
products={this.props.products}
onClick={( id ) => {
this.editor.execute( 'insertProduct', id );
- this.editor.editing.view.focus();
+ this.editor.focus();
}}
/>
];
diff --git a/packages/ckeditor5-alignment/src/alignmentui.js b/packages/ckeditor5-alignment/src/alignmentui.js
index 6690cdc07d8..1a043bac566 100644
--- a/packages/ckeditor5-alignment/src/alignmentui.js
+++ b/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.editing.view.focus();
+ editor.focus();
} );
return buttonView;
diff --git a/packages/ckeditor5-basic-styles/src/bold/boldui.js b/packages/ckeditor5-basic-styles/src/bold/boldui.js
index 214a3177443..b5adaf027c0 100644
--- a/packages/ckeditor5-basic-styles/src/bold/boldui.js
+++ b/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.editing.view.focus();
+ editor.focus();
} );
return view;
diff --git a/packages/ckeditor5-basic-styles/src/code/codeui.js b/packages/ckeditor5-basic-styles/src/code/codeui.js
index 2450724ff26..ee126fb18c3 100644
--- a/packages/ckeditor5-basic-styles/src/code/codeui.js
+++ b/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.editing.view.focus();
+ editor.focus();
} );
return view;
diff --git a/packages/ckeditor5-basic-styles/src/italic/italicui.js b/packages/ckeditor5-basic-styles/src/italic/italicui.js
index c01c14369fd..98cf8416ab7 100644
--- a/packages/ckeditor5-basic-styles/src/italic/italicui.js
+++ b/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.editing.view.focus();
+ editor.focus();
} );
return view;
diff --git a/packages/ckeditor5-basic-styles/src/strikethrough/strikethroughui.js b/packages/ckeditor5-basic-styles/src/strikethrough/strikethroughui.js
index b63a415b0a5..5850058b223 100644
--- a/packages/ckeditor5-basic-styles/src/strikethrough/strikethroughui.js
+++ b/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.editing.view.focus();
+ editor.focus();
} );
return view;
diff --git a/packages/ckeditor5-basic-styles/src/subscript/subscriptui.js b/packages/ckeditor5-basic-styles/src/subscript/subscriptui.js
index ade29a465ab..9ad8d073d10 100644
--- a/packages/ckeditor5-basic-styles/src/subscript/subscriptui.js
+++ b/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.editing.view.focus();
+ editor.focus();
} );
return view;
diff --git a/packages/ckeditor5-basic-styles/src/superscript/superscriptui.js b/packages/ckeditor5-basic-styles/src/superscript/superscriptui.js
index 5ef24cf2654..9925abdc962 100644
--- a/packages/ckeditor5-basic-styles/src/superscript/superscriptui.js
+++ b/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.editing.view.focus();
+ editor.focus();
} );
return view;
diff --git a/packages/ckeditor5-basic-styles/src/underline/underlineui.js b/packages/ckeditor5-basic-styles/src/underline/underlineui.js
index 13042c1cf1d..de27112cc55 100644
--- a/packages/ckeditor5-basic-styles/src/underline/underlineui.js
+++ b/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.editing.view.focus();
+ editor.focus();
} );
return view;
diff --git a/packages/ckeditor5-block-quote/src/blockquoteui.js b/packages/ckeditor5-block-quote/src/blockquoteui.js
index 65fabb75b57..f7160560b99 100644
--- a/packages/ckeditor5-block-quote/src/blockquoteui.js
+++ b/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.editing.view.focus();
+ editor.focus();
} );
return buttonView;
diff --git a/packages/ckeditor5-ckfinder/src/ckfinderui.js b/packages/ckeditor5-ckfinder/src/ckfinderui.js
index a60994ae5fe..51d4040ad2b 100644
--- a/packages/ckeditor5-ckfinder/src/ckfinderui.js
+++ b/packages/ckeditor5-ckfinder/src/ckfinderui.js
@@ -48,7 +48,7 @@ export default class CKFinderUI extends Plugin {
button.on( 'execute', () => {
editor.execute( 'ckfinder' );
- editor.editing.view.focus();
+ editor.focus();
} );
return button;
diff --git a/packages/ckeditor5-code-block/src/codeblockui.js b/packages/ckeditor5-code-block/src/codeblockui.js
index 946def6d01c..22b12cb7850 100644
--- a/packages/ckeditor5-code-block/src/codeblockui.js
+++ b/packages/ckeditor5-code-block/src/codeblockui.js
@@ -54,7 +54,7 @@ export default class CodeBlockUI extends Plugin {
language: defaultLanguageDefinition.language
} );
- editor.editing.view.focus();
+ editor.focus();
} );
dropdownView.on( 'execute', evt => {
@@ -63,7 +63,7 @@ export default class CodeBlockUI extends Plugin {
forceValue: true
} );
- editor.editing.view.focus();
+ editor.focus();
} );
dropdownView.class = 'ck-code-block-dropdown';
diff --git a/packages/ckeditor5-core/src/editor/editor.js b/packages/ckeditor5-core/src/editor/editor.js
index 95e82222709..47843bca89e 100644
--- a/packages/ckeditor5-core/src/editor/editor.js
+++ b/packages/ckeditor5-core/src/editor/editor.js
@@ -296,6 +296,13 @@ export default class Editor {
}
}
+ /**
+ * Puts the focus in the editor's editing view.
+ */
+ focus() {
+ this.editing.view.focus();
+ }
+
/**
* Creates and initializes a new editor instance.
*
diff --git a/packages/ckeditor5-core/tests/editor/editor.js b/packages/ckeditor5-core/tests/editor/editor.js
index 1a0f11f9ea8..c03a067cb24 100644
--- a/packages/ckeditor5-core/tests/editor/editor.js
+++ b/packages/ckeditor5-core/tests/editor/editor.js
@@ -556,6 +556,18 @@ describe( 'Editor', () => {
} );
} );
+ describe( 'focus()', () => {
+ it( 'should call view\'s focus() method', () => {
+ const editor = new TestEditor();
+ const focusSpy = sinon.spy( editor.editing.view, 'focus' );
+
+ editor.editing.view.document.isFocused = true;
+ editor.focus();
+
+ expect( focusSpy.calledOnce ).to.be.true;
+ } );
+ } );
+
describe( 'create()', () => {
it( 'should return a promise that resolves properly', () => {
const promise = TestEditor.create();
diff --git a/packages/ckeditor5-core/tests/manual/readonly.js b/packages/ckeditor5-core/tests/manual/readonly.js
index 0e6afe63fed..f450c5aa52f 100644
--- a/packages/ckeditor5-core/tests/manual/readonly.js
+++ b/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.editing.view.focus();
+ editor.focus();
} );
} )
.catch( err => {
diff --git a/packages/ckeditor5-font/src/fontfamily/fontfamilyui.js b/packages/ckeditor5-font/src/fontfamily/fontfamilyui.js
index 0c4d035c678..41ad373f7e0 100644
--- a/packages/ckeditor5-font/src/fontfamily/fontfamilyui.js
+++ b/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.editing.view.focus();
+ editor.focus();
} );
return dropdownView;
diff --git a/packages/ckeditor5-font/src/fontsize/fontsizeui.js b/packages/ckeditor5-font/src/fontsize/fontsizeui.js
index 493f364ec70..b1d75fea17b 100644
--- a/packages/ckeditor5-font/src/fontsize/fontsizeui.js
+++ b/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.editing.view.focus();
+ editor.focus();
} );
return dropdownView;
diff --git a/packages/ckeditor5-font/src/ui/colorui.js b/packages/ckeditor5-font/src/ui/colorui.js
index ce37ff52c75..163f8b4de22 100644
--- a/packages/ckeditor5-font/src/ui/colorui.js
+++ b/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.editing.view.focus();
+ editor.focus();
} );
dropdownView.on( 'change:isOpen', ( evt, name, isVisible ) => {
diff --git a/packages/ckeditor5-heading/src/headingbuttonsui.js b/packages/ckeditor5-heading/src/headingbuttonsui.js
index 0d7f3cd7680..a60a44a8767 100644
--- a/packages/ckeditor5-heading/src/headingbuttonsui.js
+++ b/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.editing.view.focus();
+ editor.focus();
} );
return view;
diff --git a/packages/ckeditor5-heading/src/headingui.js b/packages/ckeditor5-heading/src/headingui.js
index 106b486a6ce..779eabf9e0d 100644
--- a/packages/ckeditor5-heading/src/headingui.js
+++ b/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.editing.view.focus();
+ editor.focus();
} );
return dropdownView;
diff --git a/packages/ckeditor5-highlight/src/highlightui.js b/packages/ckeditor5-highlight/src/highlightui.js
index 55522548337..dcb4d535e53 100644
--- a/packages/ckeditor5-highlight/src/highlightui.js
+++ b/packages/ckeditor5-highlight/src/highlightui.js
@@ -149,7 +149,7 @@ export default class HighlightUI extends Plugin {
buttonView.on( 'execute', () => {
editor.execute( 'highlight', { value } );
- editor.editing.view.focus();
+ editor.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.editing.view.focus();
+ editor.focus();
} );
// Returns active highlighter option depending on current command value.
diff --git a/packages/ckeditor5-horizontal-line/src/horizontallineui.js b/packages/ckeditor5-horizontal-line/src/horizontallineui.js
index 00367db7103..64764c53bc2 100644
--- a/packages/ckeditor5-horizontal-line/src/horizontallineui.js
+++ b/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.editing.view.focus();
+ editor.focus();
} );
return view;
diff --git a/packages/ckeditor5-html-embed/src/htmlembedui.js b/packages/ckeditor5-html-embed/src/htmlembedui.js
index 1525e600a90..09842c5045f 100644
--- a/packages/ckeditor5-html-embed/src/htmlembedui.js
+++ b/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.editing.view.focus();
+ editor.focus();
const widgetWrapper = editor.editing.view.document.selection.getSelectedElement();
diff --git a/packages/ckeditor5-image/src/imageinsert/imageinsertui.js b/packages/ckeditor5-image/src/imageinsert/imageinsertui.js
index ed726c94a4c..92ea6282900 100644
--- a/packages/ckeditor5-image/src/imageinsert/imageinsertui.js
+++ b/packages/ckeditor5-image/src/imageinsert/imageinsertui.js
@@ -145,7 +145,7 @@ export default class ImageInsertUI extends Plugin {
}
function closePanel() {
- editor.editing.view.focus();
+ editor.focus();
dropdownView.isOpen = false;
}
diff --git a/packages/ckeditor5-image/src/imageresize/imageresizebuttons.js b/packages/ckeditor5-image/src/imageresize/imageresizebuttons.js
index b38c796214e..96460fb2f89 100644
--- a/packages/ckeditor5-image/src/imageresize/imageresizebuttons.js
+++ b/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.editing.view.focus();
+ editor.focus();
} );
return dropdownView;
diff --git a/packages/ckeditor5-image/src/imagestyle/imagestyleui.js b/packages/ckeditor5-image/src/imagestyle/imagestyleui.js
index dafb0075419..206bbf7c968 100644
--- a/packages/ckeditor5-image/src/imagestyle/imagestyleui.js
+++ b/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.editing.view.focus();
+ editor.focus();
} );
return view;
diff --git a/packages/ckeditor5-image/src/imagetextalternative/imagetextalternativeui.js b/packages/ckeditor5-image/src/imagetextalternative/imagetextalternativeui.js
index b7a5c04369c..1781577f86a 100644
--- a/packages/ckeditor5-image/src/imagetextalternative/imagetextalternativeui.js
+++ b/packages/ckeditor5-image/src/imagetextalternative/imagetextalternativeui.js
@@ -202,7 +202,7 @@ export default class ImageTextAlternativeUI extends Plugin {
this._balloon.remove( this._form );
if ( focusEditable ) {
- this.editor.editing.view.focus();
+ this.editor.focus();
}
}
diff --git a/packages/ckeditor5-indent/src/indentui.js b/packages/ckeditor5-indent/src/indentui.js
index c0596147c5f..872415022d0 100644
--- a/packages/ckeditor5-indent/src/indentui.js
+++ b/packages/ckeditor5-indent/src/indentui.js
@@ -70,7 +70,7 @@ export default class IndentUI extends Plugin {
this.listenTo( view, 'execute', () => {
editor.execute( commandName );
- editor.editing.view.focus();
+ editor.focus();
} );
return view;
diff --git a/packages/ckeditor5-link/src/linkui.js b/packages/ckeditor5-link/src/linkui.js
index 0c49855a5a3..c5a0cf58d5b 100644
--- a/packages/ckeditor5-link/src/linkui.js
+++ b/packages/ckeditor5-link/src/linkui.js
@@ -371,7 +371,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.editing.view.focus();
+ this.editor.focus();
this._hideFakeVisualSelection();
}
@@ -439,7 +439,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.editing.view.focus();
+ editor.focus();
// Remove form first because it's on top of the stack.
this._removeFormView();
diff --git a/packages/ckeditor5-list/src/liststyleui.js b/packages/ckeditor5-list/src/liststyleui.js
index 0bbb692bb02..9714a12440c 100644
--- a/packages/ckeditor5-list/src/liststyleui.js
+++ b/packages/ckeditor5-list/src/liststyleui.js
@@ -158,7 +158,7 @@ function getSplitButtonCreator( { editor, parentCommandName, buttonLabel, button
splitButtonView.on( 'execute', () => {
editor.execute( parentCommandName );
- editor.editing.view.focus();
+ editor.focus();
} );
splitButtonView.set( {
@@ -222,7 +222,7 @@ function getStyleButtonCreator( { editor, listStyleCommand, parentCommandName }
} );
}
- editor.editing.view.focus();
+ editor.focus();
} );
return button;
diff --git a/packages/ckeditor5-list/src/utils.js b/packages/ckeditor5-list/src/utils.js
index fa19b20ff29..15aaf7c3b44 100644
--- a/packages/ckeditor5-list/src/utils.js
+++ b/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.editing.view.focus();
+ editor.focus();
} );
return buttonView;
diff --git a/packages/ckeditor5-media-embed/src/mediaembedui.js b/packages/ckeditor5-media-embed/src/mediaembedui.js
index d047dfd4a17..154d2b7d2fe 100644
--- a/packages/ckeditor5-media-embed/src/mediaembedui.js
+++ b/packages/ckeditor5-media-embed/src/mediaembedui.js
@@ -92,7 +92,7 @@ export default class MediaEmbedUI extends Plugin {
dropdown.on( 'cancel', () => closeUI() );
function closeUI() {
- editor.editing.view.focus();
+ editor.focus();
dropdown.isOpen = false;
}
}
diff --git a/packages/ckeditor5-mention/src/mentionui.js b/packages/ckeditor5-mention/src/mentionui.js
index 0d868851f00..b5eee15245e 100644
--- a/packages/ckeditor5-mention/src/mentionui.js
+++ b/packages/ckeditor5-mention/src/mentionui.js
@@ -253,7 +253,7 @@ export default class MentionUI extends Plugin {
range
} );
- editor.editing.view.focus();
+ editor.focus();
} );
return mentionsView;
diff --git a/packages/ckeditor5-page-break/src/pagebreakui.js b/packages/ckeditor5-page-break/src/pagebreakui.js
index fc0e256148e..8350f8f57a6 100644
--- a/packages/ckeditor5-page-break/src/pagebreakui.js
+++ b/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.editing.view.focus();
+ editor.focus();
} );
return view;
diff --git a/packages/ckeditor5-remove-format/src/removeformatui.js b/packages/ckeditor5-remove-format/src/removeformatui.js
index 05558e0ee70..f9bce4de165 100644
--- a/packages/ckeditor5-remove-format/src/removeformatui.js
+++ b/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.editing.view.focus();
+ editor.focus();
} );
return view;
diff --git a/packages/ckeditor5-restricted-editing/src/restrictededitingmodeui.js b/packages/ckeditor5-restricted-editing/src/restrictededitingmodeui.js
index 09167092a4f..762d6e6672c 100644
--- a/packages/ckeditor5-restricted-editing/src/restrictededitingmodeui.js
+++ b/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.editing.view.focus();
+ editor.focus();
} );
return dropdownView;
diff --git a/packages/ckeditor5-restricted-editing/src/standardeditingmodeui.js b/packages/ckeditor5-restricted-editing/src/standardeditingmodeui.js
index 2ebb028ba1b..c48f0f63204 100644
--- a/packages/ckeditor5-restricted-editing/src/standardeditingmodeui.js
+++ b/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.editing.view.focus();
+ editor.focus();
} );
return view;
diff --git a/packages/ckeditor5-select-all/src/selectallui.js b/packages/ckeditor5-select-all/src/selectallui.js
index 0903e5dac07..dc2a16cbf42 100644
--- a/packages/ckeditor5-select-all/src/selectallui.js
+++ b/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.editing.view.focus();
+ editor.focus();
} );
return view;
diff --git a/packages/ckeditor5-special-characters/src/specialcharacters.js b/packages/ckeditor5-special-characters/src/specialcharacters.js
index d6ffc606f1a..68db0ff727e 100644
--- a/packages/ckeditor5-special-characters/src/specialcharacters.js
+++ b/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.editing.view.focus();
+ editor.focus();
} );
dropdownView.on( 'change:isOpen', () => {
diff --git a/packages/ckeditor5-table/src/tablecellproperties/tablecellpropertiesui.js b/packages/ckeditor5-table/src/tablecellproperties/tablecellpropertiesui.js
index 27fca9e8277..266b983089a 100644
--- a/packages/ckeditor5-table/src/tablecellproperties/tablecellpropertiesui.js
+++ b/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.editing.view.focus();
+ this.editor.focus();
}
/**
diff --git a/packages/ckeditor5-table/src/tableproperties/tablepropertiesui.js b/packages/ckeditor5-table/src/tableproperties/tablepropertiesui.js
index 46857ed7654..5137149f8e1 100644
--- a/packages/ckeditor5-table/src/tableproperties/tablepropertiesui.js
+++ b/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.editing.view.focus();
+ this.editor.focus();
}
/**
diff --git a/packages/ckeditor5-table/src/tableui.js b/packages/ckeditor5-table/src/tableui.js
index ceb19bd2aef..b689139a530 100644
--- a/packages/ckeditor5-table/src/tableui.js
+++ b/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.editing.view.focus();
+ editor.focus();
} );
} );
@@ -251,7 +251,7 @@ export default class TableUI extends Plugin {
this.listenTo( dropdownView, 'execute', evt => {
editor.execute( evt.source.commandName );
- editor.editing.view.focus();
+ editor.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.editing.view.focus();
+ editor.focus();
} );
// Execute commands for events coming from the list in the dropdown panel.
this.listenTo( dropdownView, 'execute', evt => {
editor.execute( evt.source.commandName );
- editor.editing.view.focus();
+ editor.focus();
} );
return dropdownView;
diff --git a/packages/ckeditor5-table/tests/manual/tablemocking.js b/packages/ckeditor5-table/tests/manual/tablemocking.js
index 4c0adc45864..e13acea592a 100644
--- a/packages/ckeditor5-table/tests/manual/tablemocking.js
+++ b/packages/ckeditor5-table/tests/manual/tablemocking.js
@@ -54,7 +54,7 @@ ClassicEditor
writer.setSelection( element, 'on' );
} );
- editor.editing.view.focus();
+ editor.focus();
}
} );
diff --git a/packages/ckeditor5-table/tests/tablekeyboard.js b/packages/ckeditor5-table/tests/tablekeyboard.js
index 1f5baea69e4..545b0b7acfb 100644
--- a/packages/ckeditor5-table/tests/tablekeyboard.js
+++ b/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.editing.view.focus();
+ editor.focus();
} );
afterEach( async () => {
diff --git a/packages/ckeditor5-ui/docs/_snippets/examples/bootstrap-ui-inner.js b/packages/ckeditor5-ui/docs/_snippets/examples/bootstrap-ui-inner.js
index 37d80ee7b44..5d7fadddae2 100644
--- a/packages/ckeditor5-ui/docs/_snippets/examples/bootstrap-ui-inner.js
+++ b/packages/ckeditor5-ui/docs/_snippets/examples/bootstrap-ui-inner.js
@@ -251,7 +251,7 @@ class BootstrapEditorUI extends EditorUI {
const commandValue = isParagraph ? undefined : { value: option.model };
editor.execute( commandName, commandValue );
- editor.editing.view.focus();
+ editor.focus();
} );
dropdownMenu.append( menuItem );
diff --git a/packages/ckeditor5-ui/docs/framework/guides/deep-dive/focus-tracking.md b/packages/ckeditor5-ui/docs/framework/guides/deep-dive/focus-tracking.md
index 70be71e4be3..ec329718c46 100644
--- a/packages/ckeditor5-ui/docs/framework/guides/deep-dive/focus-tracking.md
+++ b/packages/ckeditor5-ui/docs/framework/guides/deep-dive/focus-tracking.md
@@ -70,16 +70,16 @@ 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:engine/view/view~View#focus `focus()`} method of the editing view:
+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:
```js
-editor.editing.view.focus();
+editor.focus();
```
-This snippet 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 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.
- 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.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.
+ 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.
## Focus in the editor UI
diff --git a/packages/ckeditor5-ui/docs/framework/guides/external-ui.md b/packages/ckeditor5-ui/docs/framework/guides/external-ui.md
index c76cc828a58..5eb78eff5fc 100644
--- a/packages/ckeditor5-ui/docs/framework/guides/external-ui.md
+++ b/packages/ckeditor5-ui/docs/framework/guides/external-ui.md
@@ -437,7 +437,7 @@ _setupBootstrapHeadingDropdown() {
const commandValue = isParagraph ? undefined : { value: option.model };
editor.execute( commandName, commandValue );
- editor.editing.view.focus();
+ editor.focus();
} );
dropdownMenu.append( menuItem );
diff --git a/packages/ckeditor5-ui/src/panel/balloon/contextualballoon.js b/packages/ckeditor5-ui/src/panel/balloon/contextualballoon.js
index 06e9f171f78..776350cded7 100644
--- a/packages/ckeditor5-ui/src/panel/balloon/contextualballoon.js
+++ b/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.editing.view.focus();
+ this.editor.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.editing.view.focus();
+ this.editor.focus();
}
this._showPrevStack();
diff --git a/packages/ckeditor5-ui/src/toolbar/block/blocktoolbar.js b/packages/ckeditor5-ui/src/toolbar/block/blocktoolbar.js
index 4504f17390a..573e461c960 100644
--- a/packages/ckeditor5-ui/src/toolbar/block/blocktoolbar.js
+++ b/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.editing.view.focus();
+ this.editor.focus();
}
}
diff --git a/packages/ckeditor5-undo/src/undoui.js b/packages/ckeditor5-undo/src/undoui.js
index 4dd2a9c4b12..f19032aa072 100644
--- a/packages/ckeditor5-undo/src/undoui.js
+++ b/packages/ckeditor5-undo/src/undoui.js
@@ -61,7 +61,7 @@ export default class UndoUI extends Plugin {
this.listenTo( view, 'execute', () => {
editor.execute( name );
- editor.editing.view.focus();
+ editor.focus();
} );
return view;
diff --git a/packages/ckeditor5-widget/tests/verticalnavigation.js b/packages/ckeditor5-widget/tests/verticalnavigation.js
index 8c6f9a3b6be..aa299b3f8b8 100644
--- a/packages/ckeditor5-widget/tests/verticalnavigation.js
+++ b/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.editing.view.focus();
+ editor.focus();
leftArrowDomEvtDataStub = {
keyCode: getCode( 'ArrowLeft' ),
diff --git a/packages/ckeditor5-widget/tests/widgetresize/_utils/utils.js b/packages/ckeditor5-widget/tests/widgetresize/_utils/utils.js
index 9b9d62248da..c8759f1532c 100644
--- a/packages/ckeditor5-widget/tests/widgetresize/_utils/utils.js
+++ b/packages/ckeditor5-widget/tests/widgetresize/_utils/utils.js
@@ -152,6 +152,6 @@ export function getHandleCenterPoint( domWrapper, handlePosition ) {
}
export function focusEditor( editor ) {
- editor.editing.view.focus();
+ editor.focus();
editor.ui.focusTracker.isFocused = true;
}
diff --git a/tests/manual/all-features.js b/tests/manual/all-features.js
index be84e2243ad..2d29f960f37 100644
--- a/tests/manual/all-features.js
+++ b/tests/manual/all-features.js
@@ -182,7 +182,7 @@ ClassicEditor
editor.isReadOnly = !editor.isReadOnly;
button.textContent = editor.isReadOnly ? 'Turn off read-only mode' : 'Turn on read-only mode';
- editor.editing.view.focus();
+ editor.focus();
} );
} )
.catch( err => {
diff --git a/tests/manual/memory/memory.js b/tests/manual/memory/memory.js
index 3756e96d45d..cfe7e287fac 100644
--- a/tests/manual/memory/memory.js
+++ b/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.editing.view.focus();
+ editor.focus();
}
function printData() {