From d95ab06a5e1ba7633ff1b64659dfa1c264c27351 Mon Sep 17 00:00:00 2001 From: Marek Lewandowski Date: Tue, 3 Nov 2020 22:07:10 +0100 Subject: [PATCH 1/6] Revert "Replaced editor.editing.view.focus() with simpler editor.focus()" This reverts commit a8c83283164ca67f0d854a7ce6cfa4a587cefd98. --- docs/_snippets/framework/tutorials/block-widget.js | 2 +- docs/_snippets/framework/tutorials/inline-widget.js | 2 +- .../framework/tutorials/using-react-in-widget.html | 2 +- docs/framework/guides/architecture/ui-library.md | 2 +- docs/framework/guides/deep-dive/localization.md | 2 +- .../guides/tutorials/implementing-an-inline-widget.md | 4 ++-- .../framework/guides/tutorials/using-react-in-a-widget.md | 4 ++-- packages/ckeditor5-alignment/src/alignmentui.js | 2 +- packages/ckeditor5-basic-styles/src/bold/boldui.js | 2 +- packages/ckeditor5-basic-styles/src/code/codeui.js | 2 +- packages/ckeditor5-basic-styles/src/italic/italicui.js | 2 +- .../src/strikethrough/strikethroughui.js | 2 +- .../ckeditor5-basic-styles/src/subscript/subscriptui.js | 2 +- .../src/superscript/superscriptui.js | 2 +- .../ckeditor5-basic-styles/src/underline/underlineui.js | 2 +- packages/ckeditor5-block-quote/src/blockquoteui.js | 2 +- packages/ckeditor5-ckfinder/src/ckfinderui.js | 2 +- packages/ckeditor5-code-block/src/codeblockui.js | 4 ++-- packages/ckeditor5-core/tests/manual/readonly.js | 2 +- packages/ckeditor5-font/src/fontfamily/fontfamilyui.js | 2 +- packages/ckeditor5-font/src/fontsize/fontsizeui.js | 2 +- packages/ckeditor5-font/src/ui/colorui.js | 2 +- packages/ckeditor5-heading/src/headingbuttonsui.js | 2 +- packages/ckeditor5-heading/src/headingui.js | 2 +- packages/ckeditor5-highlight/src/highlightui.js | 4 ++-- .../ckeditor5-horizontal-line/src/horizontallineui.js | 2 +- packages/ckeditor5-html-embed/src/htmlembedui.js | 2 +- packages/ckeditor5-image/src/imageinsert/imageinsertui.js | 2 +- .../ckeditor5-image/src/imageresize/imageresizebuttons.js | 2 +- packages/ckeditor5-image/src/imagestyle/imagestyleui.js | 2 +- .../src/imagetextalternative/imagetextalternativeui.js | 2 +- packages/ckeditor5-indent/src/indentui.js | 2 +- packages/ckeditor5-link/src/linkui.js | 4 ++-- packages/ckeditor5-list/src/liststyleui.js | 4 ++-- packages/ckeditor5-list/src/utils.js | 2 +- packages/ckeditor5-media-embed/src/mediaembedui.js | 2 +- packages/ckeditor5-mention/src/mentionui.js | 2 +- packages/ckeditor5-page-break/src/pagebreakui.js | 2 +- packages/ckeditor5-remove-format/src/removeformatui.js | 2 +- .../src/restrictededitingmodeui.js | 2 +- .../src/standardeditingmodeui.js | 2 +- packages/ckeditor5-select-all/src/selectallui.js | 2 +- .../ckeditor5-special-characters/src/specialcharacters.js | 2 +- .../src/tablecellproperties/tablecellpropertiesui.js | 2 +- .../src/tableproperties/tablepropertiesui.js | 2 +- packages/ckeditor5-table/src/tableui.js | 8 ++++---- packages/ckeditor5-table/tests/manual/tablemocking.js | 2 +- packages/ckeditor5-table/tests/tablekeyboard.js | 2 +- .../docs/_snippets/examples/bootstrap-ui-inner.js | 2 +- .../docs/framework/guides/deep-dive/focus-tracking.md | 4 ++-- .../ckeditor5-ui/docs/framework/guides/external-ui.md | 2 +- .../ckeditor5-ui/src/panel/balloon/contextualballoon.js | 4 ++-- packages/ckeditor5-ui/src/toolbar/block/blocktoolbar.js | 2 +- packages/ckeditor5-undo/src/undoui.js | 2 +- packages/ckeditor5-widget/tests/verticalnavigation.js | 2 +- .../ckeditor5-widget/tests/widgetresize/_utils/utils.js | 2 +- tests/manual/all-features.js | 2 +- tests/manual/memory/memory.js | 2 +- 58 files changed, 69 insertions(+), 69 deletions(-) diff --git a/docs/_snippets/framework/tutorials/block-widget.js b/docs/_snippets/framework/tutorials/block-widget.js index a5d2204a9fe..859f9ad56a5 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.focus(); + editor.editing.view.focus(); } ); return buttonView; diff --git a/docs/_snippets/framework/tutorials/inline-widget.js b/docs/_snippets/framework/tutorials/inline-widget.js index c69582cebbf..4bf5a341b31 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.focus(); + editor.editing.view.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 4799448d891..c1a6885a871 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.focus(); + this.editor.editing.view.focus(); }} /> ]; diff --git a/docs/framework/guides/architecture/ui-library.md b/docs/framework/guides/architecture/ui-library.md index f1125232aa3..a017d69ebc9 100644 --- a/docs/framework/guides/architecture/ui-library.md +++ b/docs/framework/guides/architecture/ui-library.md @@ -449,7 +449,7 @@ It is advised that for the best user experience the editor gets {@link module:co // Execute some action on dropdown#execute event. dropdownView.buttonView.on( 'execute', () => { editor.execute( 'command', { value: ... } ); - editor.focus(); + editor.editing.view.focus(); } ); ``` diff --git a/docs/framework/guides/deep-dive/localization.md b/docs/framework/guides/deep-dive/localization.md index 22e6876b9d8..9925683c632 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.focus(); + editor.editing.view.focus(); } ); } ); // ... diff --git a/docs/framework/guides/tutorials/implementing-an-inline-widget.md b/docs/framework/guides/tutorials/implementing-an-inline-widget.md index 1f0e1d60914..f7c45b6f004 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.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; 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 a1cbf715e61..dec8147e426 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.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(); }} /> ]; diff --git a/packages/ckeditor5-alignment/src/alignmentui.js b/packages/ckeditor5-alignment/src/alignmentui.js index 1a043bac566..6690cdc07d8 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.focus(); + editor.editing.view.focus(); } ); return buttonView; diff --git a/packages/ckeditor5-basic-styles/src/bold/boldui.js b/packages/ckeditor5-basic-styles/src/bold/boldui.js index b5adaf027c0..214a3177443 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.focus(); + editor.editing.view.focus(); } ); return view; diff --git a/packages/ckeditor5-basic-styles/src/code/codeui.js b/packages/ckeditor5-basic-styles/src/code/codeui.js index ee126fb18c3..2450724ff26 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.focus(); + editor.editing.view.focus(); } ); return view; diff --git a/packages/ckeditor5-basic-styles/src/italic/italicui.js b/packages/ckeditor5-basic-styles/src/italic/italicui.js index 98cf8416ab7..c01c14369fd 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.focus(); + editor.editing.view.focus(); } ); return view; diff --git a/packages/ckeditor5-basic-styles/src/strikethrough/strikethroughui.js b/packages/ckeditor5-basic-styles/src/strikethrough/strikethroughui.js index 5850058b223..b63a415b0a5 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.focus(); + editor.editing.view.focus(); } ); return view; diff --git a/packages/ckeditor5-basic-styles/src/subscript/subscriptui.js b/packages/ckeditor5-basic-styles/src/subscript/subscriptui.js index 9ad8d073d10..ade29a465ab 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.focus(); + editor.editing.view.focus(); } ); return view; diff --git a/packages/ckeditor5-basic-styles/src/superscript/superscriptui.js b/packages/ckeditor5-basic-styles/src/superscript/superscriptui.js index 9925abdc962..5ef24cf2654 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.focus(); + editor.editing.view.focus(); } ); return view; diff --git a/packages/ckeditor5-basic-styles/src/underline/underlineui.js b/packages/ckeditor5-basic-styles/src/underline/underlineui.js index de27112cc55..13042c1cf1d 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.focus(); + editor.editing.view.focus(); } ); return view; diff --git a/packages/ckeditor5-block-quote/src/blockquoteui.js b/packages/ckeditor5-block-quote/src/blockquoteui.js index f7160560b99..65fabb75b57 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.focus(); + editor.editing.view.focus(); } ); return buttonView; diff --git a/packages/ckeditor5-ckfinder/src/ckfinderui.js b/packages/ckeditor5-ckfinder/src/ckfinderui.js index 51d4040ad2b..a60994ae5fe 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.focus(); + editor.editing.view.focus(); } ); return button; diff --git a/packages/ckeditor5-code-block/src/codeblockui.js b/packages/ckeditor5-code-block/src/codeblockui.js index 22b12cb7850..946def6d01c 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.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'; diff --git a/packages/ckeditor5-core/tests/manual/readonly.js b/packages/ckeditor5-core/tests/manual/readonly.js index f450c5aa52f..0e6afe63fed 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.focus(); + editor.editing.view.focus(); } ); } ) .catch( err => { diff --git a/packages/ckeditor5-font/src/fontfamily/fontfamilyui.js b/packages/ckeditor5-font/src/fontfamily/fontfamilyui.js index 41ad373f7e0..0c4d035c678 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.focus(); + editor.editing.view.focus(); } ); return dropdownView; diff --git a/packages/ckeditor5-font/src/fontsize/fontsizeui.js b/packages/ckeditor5-font/src/fontsize/fontsizeui.js index b1d75fea17b..493f364ec70 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.focus(); + editor.editing.view.focus(); } ); return dropdownView; diff --git a/packages/ckeditor5-font/src/ui/colorui.js b/packages/ckeditor5-font/src/ui/colorui.js index 163f8b4de22..ce37ff52c75 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.focus(); + editor.editing.view.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 a60a44a8767..0d7f3cd7680 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.focus(); + editor.editing.view.focus(); } ); return view; diff --git a/packages/ckeditor5-heading/src/headingui.js b/packages/ckeditor5-heading/src/headingui.js index 779eabf9e0d..106b486a6ce 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.focus(); + editor.editing.view.focus(); } ); return dropdownView; diff --git a/packages/ckeditor5-highlight/src/highlightui.js b/packages/ckeditor5-highlight/src/highlightui.js index dcb4d535e53..55522548337 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.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. diff --git a/packages/ckeditor5-horizontal-line/src/horizontallineui.js b/packages/ckeditor5-horizontal-line/src/horizontallineui.js index 64764c53bc2..00367db7103 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.focus(); + editor.editing.view.focus(); } ); return view; diff --git a/packages/ckeditor5-html-embed/src/htmlembedui.js b/packages/ckeditor5-html-embed/src/htmlembedui.js index 09842c5045f..1525e600a90 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.focus(); + editor.editing.view.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 92ea6282900..ed726c94a4c 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.focus(); + editor.editing.view.focus(); dropdownView.isOpen = false; } diff --git a/packages/ckeditor5-image/src/imageresize/imageresizebuttons.js b/packages/ckeditor5-image/src/imageresize/imageresizebuttons.js index 96460fb2f89..b38c796214e 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.focus(); + editor.editing.view.focus(); } ); return dropdownView; diff --git a/packages/ckeditor5-image/src/imagestyle/imagestyleui.js b/packages/ckeditor5-image/src/imagestyle/imagestyleui.js index 206bbf7c968..dafb0075419 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.focus(); + editor.editing.view.focus(); } ); return view; diff --git a/packages/ckeditor5-image/src/imagetextalternative/imagetextalternativeui.js b/packages/ckeditor5-image/src/imagetextalternative/imagetextalternativeui.js index 1781577f86a..b7a5c04369c 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.focus(); + this.editor.editing.view.focus(); } } diff --git a/packages/ckeditor5-indent/src/indentui.js b/packages/ckeditor5-indent/src/indentui.js index 872415022d0..c0596147c5f 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.focus(); + editor.editing.view.focus(); } ); return view; diff --git a/packages/ckeditor5-link/src/linkui.js b/packages/ckeditor5-link/src/linkui.js index c5a0cf58d5b..0c49855a5a3 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.focus(); + this.editor.editing.view.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.focus(); + editor.editing.view.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 9714a12440c..0bbb692bb02 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.focus(); + editor.editing.view.focus(); } ); splitButtonView.set( { @@ -222,7 +222,7 @@ function getStyleButtonCreator( { editor, listStyleCommand, parentCommandName } } ); } - editor.focus(); + editor.editing.view.focus(); } ); return button; diff --git a/packages/ckeditor5-list/src/utils.js b/packages/ckeditor5-list/src/utils.js index 15aaf7c3b44..fa19b20ff29 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.focus(); + editor.editing.view.focus(); } ); return buttonView; diff --git a/packages/ckeditor5-media-embed/src/mediaembedui.js b/packages/ckeditor5-media-embed/src/mediaembedui.js index 154d2b7d2fe..d047dfd4a17 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.focus(); + editor.editing.view.focus(); dropdown.isOpen = false; } } diff --git a/packages/ckeditor5-mention/src/mentionui.js b/packages/ckeditor5-mention/src/mentionui.js index b5eee15245e..0d868851f00 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.focus(); + editor.editing.view.focus(); } ); return mentionsView; diff --git a/packages/ckeditor5-page-break/src/pagebreakui.js b/packages/ckeditor5-page-break/src/pagebreakui.js index 8350f8f57a6..fc0e256148e 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.focus(); + editor.editing.view.focus(); } ); return view; diff --git a/packages/ckeditor5-remove-format/src/removeformatui.js b/packages/ckeditor5-remove-format/src/removeformatui.js index f9bce4de165..05558e0ee70 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.focus(); + editor.editing.view.focus(); } ); return view; diff --git a/packages/ckeditor5-restricted-editing/src/restrictededitingmodeui.js b/packages/ckeditor5-restricted-editing/src/restrictededitingmodeui.js index 762d6e6672c..09167092a4f 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.focus(); + editor.editing.view.focus(); } ); return dropdownView; diff --git a/packages/ckeditor5-restricted-editing/src/standardeditingmodeui.js b/packages/ckeditor5-restricted-editing/src/standardeditingmodeui.js index c48f0f63204..2ebb028ba1b 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.focus(); + editor.editing.view.focus(); } ); return view; diff --git a/packages/ckeditor5-select-all/src/selectallui.js b/packages/ckeditor5-select-all/src/selectallui.js index dc2a16cbf42..0903e5dac07 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.focus(); + editor.editing.view.focus(); } ); return view; diff --git a/packages/ckeditor5-special-characters/src/specialcharacters.js b/packages/ckeditor5-special-characters/src/specialcharacters.js index 68db0ff727e..d6ffc606f1a 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.focus(); + editor.editing.view.focus(); } ); dropdownView.on( 'change:isOpen', () => { diff --git a/packages/ckeditor5-table/src/tablecellproperties/tablecellpropertiesui.js b/packages/ckeditor5-table/src/tablecellproperties/tablecellpropertiesui.js index 266b983089a..27fca9e8277 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.focus(); + this.editor.editing.view.focus(); } /** diff --git a/packages/ckeditor5-table/src/tableproperties/tablepropertiesui.js b/packages/ckeditor5-table/src/tableproperties/tablepropertiesui.js index 5137149f8e1..46857ed7654 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.focus(); + this.editor.editing.view.focus(); } /** diff --git a/packages/ckeditor5-table/src/tableui.js b/packages/ckeditor5-table/src/tableui.js index b689139a530..ceb19bd2aef 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.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; diff --git a/packages/ckeditor5-table/tests/manual/tablemocking.js b/packages/ckeditor5-table/tests/manual/tablemocking.js index e13acea592a..4c0adc45864 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.focus(); + editor.editing.view.focus(); } } ); diff --git a/packages/ckeditor5-table/tests/tablekeyboard.js b/packages/ckeditor5-table/tests/tablekeyboard.js index 545b0b7acfb..1f5baea69e4 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.focus(); + editor.editing.view.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 5d7fadddae2..37d80ee7b44 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.focus(); + editor.editing.view.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 ec329718c46..0e8a4f21553 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 @@ -73,13 +73,13 @@ To spice things up even more, you should also know `isFocused` will change when 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.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. - 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 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. ## 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 5eb78eff5fc..c76cc828a58 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.focus(); + editor.editing.view.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 776350cded7..06e9f171f78 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.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(); diff --git a/packages/ckeditor5-ui/src/toolbar/block/blocktoolbar.js b/packages/ckeditor5-ui/src/toolbar/block/blocktoolbar.js index 573e461c960..4504f17390a 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.focus(); + this.editor.editing.view.focus(); } } diff --git a/packages/ckeditor5-undo/src/undoui.js b/packages/ckeditor5-undo/src/undoui.js index f19032aa072..4dd2a9c4b12 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.focus(); + editor.editing.view.focus(); } ); return view; diff --git a/packages/ckeditor5-widget/tests/verticalnavigation.js b/packages/ckeditor5-widget/tests/verticalnavigation.js index aa299b3f8b8..8c6f9a3b6be 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.focus(); + editor.editing.view.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 c8759f1532c..9b9d62248da 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.focus(); + editor.editing.view.focus(); editor.ui.focusTracker.isFocused = true; } diff --git a/tests/manual/all-features.js b/tests/manual/all-features.js index 2d29f960f37..be84e2243ad 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.focus(); + editor.editing.view.focus(); } ); } ) .catch( err => { diff --git a/tests/manual/memory/memory.js b/tests/manual/memory/memory.js index cfe7e287fac..3756e96d45d 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.focus(); + editor.editing.view.focus(); } function printData() { From 99973b4d7b4c24adee0c88537ae7c5608922f2e8 Mon Sep 17 00:00:00 2001 From: Marek Lewandowski Date: Tue, 3 Nov 2020 22:11:03 +0100 Subject: [PATCH 2/6] Docs (core): Editor's focus method should not give away its implementation. Today we're always focusing the editable view, that's true - but at some point we might be focusing the UI parts. --- packages/ckeditor5-core/src/editor/editor.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ckeditor5-core/src/editor/editor.js b/packages/ckeditor5-core/src/editor/editor.js index 47843bca89e..121df05219a 100644 --- a/packages/ckeditor5-core/src/editor/editor.js +++ b/packages/ckeditor5-core/src/editor/editor.js @@ -297,7 +297,7 @@ export default class Editor { } /** - * Puts the focus in the editor's editing view. + * Focuses the editor. */ focus() { this.editing.view.focus(); From 7109f9eecc7127d3059bec09b61e55ca5870a9e9 Mon Sep 17 00:00:00 2001 From: Marek Lewandowski Date: Wed, 4 Nov 2020 18:04:35 +0100 Subject: [PATCH 3/6] Docs: Adjustments regarding focusing the editor. --- docs/framework/guides/architecture/ui-library.md | 2 +- .../docs/framework/guides/deep-dive/focus-tracking.md | 6 ++++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/docs/framework/guides/architecture/ui-library.md b/docs/framework/guides/architecture/ui-library.md index a017d69ebc9..98763259739 100644 --- a/docs/framework/guides/architecture/ui-library.md +++ b/docs/framework/guides/architecture/ui-library.md @@ -443,7 +443,7 @@ 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. 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 0e8a4f21553..497ce9c2d61 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,13 +70,15 @@ 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 an editor is simply calling the {@link module:core/editor/editor~Editor#focus `focus()`} method of the editor instance. + +However, you may wish to explicitly 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: ```js 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 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. From 99eef6fac1afc17c8f8022eda5a63637ac6085ed Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maciej=20Go=C5=82aszewski?= Date: Thu, 5 Nov 2020 13:54:29 +0100 Subject: [PATCH 4/6] Add a cross link in the editor.focus() jsdoc. --- packages/ckeditor5-core/src/editor/editor.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/ckeditor5-core/src/editor/editor.js b/packages/ckeditor5-core/src/editor/editor.js index 121df05219a..5ea9a9c0159 100644 --- a/packages/ckeditor5-core/src/editor/editor.js +++ b/packages/ckeditor5-core/src/editor/editor.js @@ -298,6 +298,12 @@ export default class Editor { /** * 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(); From 3ae00cc801e355c5d5c94e26d769c62d7468efee Mon Sep 17 00:00:00 2001 From: Maciej Date: Thu, 5 Nov 2020 14:33:33 +0100 Subject: [PATCH 5/6] Update editor focusing guide wording. --- .../docs/framework/guides/deep-dive/focus-tracking.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) 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 497ce9c2d61..276db0354df 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,15 +70,15 @@ To spice things up even more, you should also know `isFocused` will change when ### How to focus the editor? -The simplest way to focus an editor is simply calling the {@link module:core/editor/editor~Editor#focus `focus()`} method of the editor instance. +The simplest way to focus an editor is to call the {@link module:core/editor/editor~Editor#focus `focus()`} method of the editor instance. -However, you may wish to explicitly 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: +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.editing.view.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 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. 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. From 546cc0253c92ec9d64d9e721eedd99c083fec182 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotrek=20Koszuli=C5=84ski?= Date: Thu, 5 Nov 2020 15:31:55 +0100 Subject: [PATCH 6/6] Apply suggestions from code review. --- .../docs/framework/guides/deep-dive/focus-tracking.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 276db0354df..ac49f17a08c 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,7 +70,7 @@ To spice things up even more, you should also know `isFocused` will change when ### How to focus the editor? -The simplest way to focus an editor is to call the {@link module:core/editor/editor~Editor#focus `focus()`} method of the editor instance. +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: @@ -81,7 +81,7 @@ editor.editing.view.focus(); 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. - 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 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. ## Focus in the editor UI