Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-10-15 10:41:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Focusing `textarea` after inserting mermaid widget
This commit is contained in:
Marek Lewandowski 2022-03-14 08:37:52 +01:00 committed by GitHub
commit 4dc6fbf2ad
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 41 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/commands/insertMermaidCommand.js
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;
}
}

19
src/mermaidui.js
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,19 @@ 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 );
view.scrollToTheSelection();
view.focus();
if ( mermaidItemViewElement ) {
const mermaidItemDomElement = view.domConverter.viewToDom( mermaidItemViewElement, document );
if ( mermaidItemDomElement ) {
mermaidItemDomElement.querySelector( '.ck-mermaid__editing-view' ).focus();
}
}
} );
return buttonView;

22
tests/mermaidui.js
View File

@ -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.
} );
} );
} );