diff --git a/src/commands/insertMermaidCommand.js b/src/commands/insertMermaidCommand.js index bc2552812..65382d493 100644 --- a/src/commands/insertMermaidCommand.js +++ b/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; } } diff --git a/src/mermaidui.js b/src/mermaidui.js index 6a9696d71..09d29be1d 100644 --- a/src/mermaidui.js +++ b/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,16 @@ export default class MermaidUI extends Plugin { // Execute the command when the button is clicked. command.listenTo( buttonView, 'execute', () => { - editor.execute( 'insertMermaidCommand' ); - editor.editing.view.scrollToTheSelection(); - editor.editing.view.focus(); + const mermaidItem = editor.execute( 'insertMermaidCommand' ); + const mermaidItemViewElement = editor.editing.mapper.toViewElement( mermaidItem ); + const mermaidItemDomElement = view.domConverter.viewToDom( mermaidItemViewElement, document ); + + view.scrollToTheSelection(); + view.focus(); + + if ( mermaidItemDomElement ) { + mermaidItemDomElement.querySelector( '.ck-mermaid__editing-view' ).focus(); + } } ); return buttonView;