Skip to content

Commit

Permalink
Feature (core): Introduced the focus() method in the base Editor
Browse files Browse the repository at this point in the history
…class. Closes #714.
  • Loading branch information
mlewand authored Nov 3, 2020
2 parents 503c623 + fdbc769 commit dea8051
Show file tree
Hide file tree
Showing 60 changed files with 91 additions and 72 deletions.
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.editing.view.focus();
editor.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.editing.view.focus();
editor.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.editing.view.focus();
this.editor.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 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();
} );
```

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.editing.view.focus();
editor.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.editing.view.focus();
editor.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.editing.view.focus();
editor.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.editing.view.focus();
this.editor.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.editing.view.focus();
this.editor.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.editing.view.focus();
editor.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.editing.view.focus();
editor.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.editing.view.focus();
editor.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.editing.view.focus();
editor.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.editing.view.focus();
editor.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.editing.view.focus();
editor.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.editing.view.focus();
editor.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.editing.view.focus();
editor.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.editing.view.focus();
editor.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.editing.view.focus();
editor.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.editing.view.focus();
editor.focus();
} );

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

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

dropdownView.class = 'ck-code-block-dropdown';
Expand Down
7 changes: 7 additions & 0 deletions packages/ckeditor5-core/src/editor/editor.js
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*
Expand Down
12 changes: 12 additions & 0 deletions packages/ckeditor5-core/tests/editor/editor.js
Original file line number Diff line number Diff line change
Expand Up @@ -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();
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.editing.view.focus();
editor.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.editing.view.focus();
editor.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.editing.view.focus();
editor.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.editing.view.focus();
editor.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.editing.view.focus();
editor.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.editing.view.focus();
editor.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.editing.view.focus();
editor.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.editing.view.focus();
editor.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.editing.view.focus();
editor.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.editing.view.focus();
editor.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.editing.view.focus();
editor.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.editing.view.focus();
editor.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.editing.view.focus();
editor.focus();
} );

return view;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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();
}
}

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.editing.view.focus();
editor.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 @@ -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();
}
Expand Down Expand Up @@ -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();
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.editing.view.focus();
editor.focus();
} );

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

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

return button;
Expand Down
Loading

0 comments on commit dea8051

Please sign in to comment.