Merge pull request #4 from ckeditor/i/1545-insert-mermaid-focus

Focusing `textarea` after inserting mermaid widget

src/commands/insertMermaidCommand.js

@@ -36,16 +36,17 @@ export default class InsertMermaidCommand extends Command {
 	execute() {
 		const editor = this.editor;
 		const model = editor.model;
+		let mermaidItem;
 
 		model.change( writer => {
-			const item = writer.createElement( 'mermaid', {
+			mermaidItem = writer.createElement( 'mermaid', {
 				displayMode: 'split',
 				source: MOCK_MERMAID_MARKUP
 			} );
 
-			model.insertContent( item );
+			model.insertContent( mermaidItem );
 		} );
 
-		editor.editing.view.focus();
+		return mermaidItem;
 	}
 }

src/mermaidui.js

@@ -11,7 +11,7 @@ import splitModeIcon from '../theme/icons/split-mode.svg';
 import sourceModeIcon from '../theme/icons/source-mode.svg';
 import infoIcon from '../theme/icons/info.svg';
 
-/* global window */
+/* global window, document */
 
 export default class MermaidUI extends Plugin {
 	/**
@@ -51,6 +51,7 @@ export default class MermaidUI extends Plugin {
 	_addInsertMermaidButton() {
 		const editor = this.editor;
 		const t = editor.t;
+		const view = editor.editing.view;
 
 		editor.ui.componentFactory.add( 'mermaid', locale => {
 			const buttonView = new ButtonView( locale );
@@ -66,9 +67,19 @@ export default class MermaidUI extends Plugin {
 
 			// Execute the command when the button is clicked.
 			command.listenTo( buttonView, 'execute', () => {
-				editor.execute( 'insertMermaidCommand' );
+				const mermaidItem = editor.execute( 'insertMermaidCommand' );
-				editor.editing.view.scrollToTheSelection();
+				const mermaidItemViewElement = editor.editing.mapper.toViewElement( mermaidItem );
-				editor.editing.view.focus();
+
+				view.scrollToTheSelection();
+				view.focus();
+
+				if ( mermaidItemViewElement ) {
+					const mermaidItemDomElement = view.domConverter.viewToDom( mermaidItemViewElement, document );
+
+					if ( mermaidItemDomElement ) {
+						mermaidItemDomElement.querySelector( '.ck-mermaid__editing-view' ).focus();
+					}
+				}
 			} );
 
 			return buttonView;

tests/mermaidui.js

@@ -1,4 +1,5 @@
 import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
+import { setData as setModelData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
 
 import Mermaid from '../src/mermaid';
 import MermaidUI from '../src/mermaidui';
@@ -61,6 +62,27 @@ describe( 'MermaidUI', () => {
 				} );
 			}
 		} );
+
+		it( 'should set focus inside textarea of a newly created mermaid', () => {
+			const button = editor.ui.componentFactory.create( 'mermaid' );
+
+			button.fire( 'execute' );
+
+			expect( document.activeElement.tagName ).to.equal( 'TEXTAREA' );
+		} );
+
+		it( 'should not crash if the button is fired inside model.change()', () => {
+			const button = editor.ui.componentFactory.create( 'mermaid' );
+
+			setModelData( editor.model, '[]' );
+
+			editor.model.change( () => {
+				button.fire( 'execute' );
+			} );
+			// As the conversion is to be executed after the model.change(), we don't have access to the fully prepared view and
+			// despite that, we should still successfully add mermaid widget to the editor, not requiring the selection change
+			// to the inside of the nonexisting textarea element.
+		} );
 	} );
 } );