Updated insert command & UI.

This commit is contained in:
Mateusz Zagórski 2022-03-10 13:13:54 +01:00
parent 4b338fe851
commit ea1b4d73af
2 changed files with 16 additions and 7 deletions

View File

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

View File

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