Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Reverted widespread editor.focus() usage back to editor.editing.view.focus() form #8414

Merged
merged 7 commits into from
Nov 5, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/_snippets/framework/tutorials/block-widget.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion docs/_snippets/framework/tutorials/inline-widget.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -311,7 +311,7 @@ <h4>Editor data</h4>
products={this.props.products}
onClick={( id ) => {
this.editor.execute( 'insertProduct', id );
this.editor.focus();
this.editor.editing.view.focus();
}}
/>
];
Expand Down
4 changes: 2 additions & 2 deletions docs/framework/guides/architecture/ui-library.md
Original file line number Diff line number Diff line change
Expand Up @@ -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();
} );
```

Expand Down
2 changes: 1 addition & 1 deletion docs/framework/guides/deep-dive/localization.md
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,7 @@ editor.ui.componentFactory.add( 'smilingFaceEmoji', locale => {

buttonView.on( 'execute', () => {
editor.execute( 'insertSmilingFaceEmoji' );
editor.focus();
editor.editing.view.focus();
} );
} );
// ...
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down
4 changes: 2 additions & 2 deletions docs/framework/guides/tutorials/using-react-in-a-widget.md
Original file line number Diff line number Diff line change
Expand Up @@ -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();
}}
/>
];
Expand Down Expand Up @@ -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();
}}
/>
];
Expand Down
2 changes: 1 addition & 1 deletion packages/ckeditor5-alignment/src/alignmentui.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion packages/ckeditor5-basic-styles/src/bold/boldui.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion packages/ckeditor5-basic-styles/src/code/codeui.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion packages/ckeditor5-basic-styles/src/italic/italicui.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion packages/ckeditor5-block-quote/src/blockquoteui.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion packages/ckeditor5-ckfinder/src/ckfinderui.js
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ export default class CKFinderUI extends Plugin {

button.on( 'execute', () => {
editor.execute( 'ckfinder' );
editor.focus();
editor.editing.view.focus();
} );

return button;
Expand Down
4 changes: 2 additions & 2 deletions packages/ckeditor5-code-block/src/codeblockui.js
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ export default class CodeBlockUI extends Plugin {
language: defaultLanguageDefinition.language
} );

editor.focus();
editor.editing.view.focus();
} );

dropdownView.on( 'execute', evt => {
Expand All @@ -63,7 +63,7 @@ export default class CodeBlockUI extends Plugin {
forceValue: true
} );

editor.focus();
editor.editing.view.focus();
} );

dropdownView.class = 'ck-code-block-dropdown';
Expand Down
8 changes: 7 additions & 1 deletion packages/ckeditor5-core/src/editor/editor.js
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
2 changes: 1 addition & 1 deletion packages/ckeditor5-core/tests/manual/readonly.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 => {
Expand Down
2 changes: 1 addition & 1 deletion packages/ckeditor5-font/src/fontfamily/fontfamilyui.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion packages/ckeditor5-font/src/fontsize/fontsizeui.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion packages/ckeditor5-font/src/ui/colorui.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 ) => {
Expand Down
2 changes: 1 addition & 1 deletion packages/ckeditor5-heading/src/headingbuttonsui.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion packages/ckeditor5-heading/src/headingui.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
4 changes: 2 additions & 2 deletions packages/ckeditor5-highlight/src/highlightui.js
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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.
Expand Down
2 changes: 1 addition & 1 deletion packages/ckeditor5-horizontal-line/src/horizontallineui.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion packages/ckeditor5-html-embed/src/htmlembedui.js
Original file line number Diff line number Diff line change
Expand Up @@ -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();

Expand Down
2 changes: 1 addition & 1 deletion packages/ckeditor5-image/src/imageinsert/imageinsertui.js
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,7 @@ export default class ImageInsertUI extends Plugin {
}

function closePanel() {
editor.focus();
editor.editing.view.focus();
dropdownView.isOpen = false;
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion packages/ckeditor5-image/src/imagestyle/imagestyleui.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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();
}
}

Expand Down
2 changes: 1 addition & 1 deletion packages/ckeditor5-indent/src/indentui.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
4 changes: 2 additions & 2 deletions packages/ckeditor5-link/src/linkui.js
Original file line number Diff line number Diff line change
Expand Up @@ -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();
}
Expand Down Expand Up @@ -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();
Expand Down
4 changes: 2 additions & 2 deletions packages/ckeditor5-list/src/liststyleui.js
Original file line number Diff line number Diff line change
Expand Up @@ -158,7 +158,7 @@ function getSplitButtonCreator( { editor, parentCommandName, buttonLabel, button

splitButtonView.on( 'execute', () => {
editor.execute( parentCommandName );
editor.focus();
editor.editing.view.focus();
} );

splitButtonView.set( {
Expand Down Expand Up @@ -222,7 +222,7 @@ function getStyleButtonCreator( { editor, listStyleCommand, parentCommandName }
} );
}

editor.focus();
editor.editing.view.focus();
} );

return button;
Expand Down
2 changes: 1 addition & 1 deletion packages/ckeditor5-list/src/utils.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion packages/ckeditor5-media-embed/src/mediaembedui.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
Expand Down
Loading