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() {
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;
}
}

View File

@ -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;