2019-10-09 13:38:30 +03:00
|
|
|
import Mathematics from '../src/math';
|
|
|
|
import AutoMath from '../src/automath';
|
|
|
|
import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor';
|
|
|
|
import Clipboard from '@ckeditor/ckeditor5-clipboard/src/clipboard';
|
2019-10-11 18:10:41 +03:00
|
|
|
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
|
2019-10-09 13:38:30 +03:00
|
|
|
import Undo from '@ckeditor/ckeditor5-undo/src/undo';
|
|
|
|
import Typing from '@ckeditor/ckeditor5-typing/src/typing';
|
|
|
|
import global from '@ckeditor/ckeditor5-utils/src/dom/global';
|
|
|
|
import { getData, setData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
|
|
|
|
|
|
|
|
describe( 'AutoMath - integration', () => {
|
|
|
|
let editorElement, editor;
|
|
|
|
|
|
|
|
beforeEach( () => {
|
|
|
|
editorElement = global.document.createElement( 'div' );
|
|
|
|
global.document.body.appendChild( editorElement );
|
|
|
|
|
|
|
|
return ClassicTestEditor
|
|
|
|
.create( editorElement, {
|
2019-10-11 18:10:41 +03:00
|
|
|
plugins: [ Mathematics, AutoMath, Typing, Paragraph ]
|
2019-10-09 13:38:30 +03:00
|
|
|
} )
|
|
|
|
.then( newEditor => {
|
|
|
|
editor = newEditor;
|
|
|
|
} );
|
|
|
|
} );
|
|
|
|
|
|
|
|
afterEach( () => {
|
|
|
|
editorElement.remove();
|
|
|
|
|
|
|
|
return editor.destroy();
|
|
|
|
} );
|
|
|
|
|
|
|
|
it( 'should load Clipboard plugin', () => {
|
|
|
|
expect( editor.plugins.get( Clipboard ) ).to.instanceOf( Clipboard );
|
|
|
|
} );
|
|
|
|
|
|
|
|
it( 'should load Undo plugin', () => {
|
|
|
|
expect( editor.plugins.get( Undo ) ).to.instanceOf( Undo );
|
|
|
|
} );
|
|
|
|
|
|
|
|
it( 'has proper name', () => {
|
|
|
|
expect( AutoMath.pluginName ).to.equal( 'AutoMath' );
|
|
|
|
} );
|
|
|
|
|
|
|
|
describe( 'use fake timers', () => {
|
|
|
|
let clock;
|
|
|
|
|
|
|
|
beforeEach( () => {
|
|
|
|
clock = sinon.useFakeTimers();
|
|
|
|
} );
|
|
|
|
|
|
|
|
afterEach( () => {
|
|
|
|
clock.restore();
|
|
|
|
} );
|
|
|
|
|
|
|
|
it( 'replaces pasted text with mathtex element after 100ms', () => {
|
|
|
|
setData( editor.model, '<paragraph>[]</paragraph>' );
|
|
|
|
pasteHtml( editor, '\\[x^2\\]' );
|
|
|
|
|
|
|
|
expect( getData( editor.model ) ).to.equal(
|
|
|
|
'<paragraph>\\[x^2\\][]</paragraph>'
|
|
|
|
);
|
|
|
|
|
|
|
|
clock.tick( 100 );
|
|
|
|
|
|
|
|
expect( getData( editor.model ) ).to.equal(
|
2019-10-11 18:10:41 +03:00
|
|
|
'<paragraph>[<mathtex display="true" equation="x^2" type="script"></mathtex>]</paragraph>'
|
2019-10-09 13:38:30 +03:00
|
|
|
);
|
|
|
|
} );
|
|
|
|
|
|
|
|
it( 'replaces pasted text with inline mathtex element after 100ms', () => {
|
|
|
|
setData( editor.model, '<paragraph>[]</paragraph>' );
|
|
|
|
pasteHtml( editor, '\\(x^2\\)' );
|
|
|
|
|
|
|
|
expect( getData( editor.model ) ).to.equal(
|
|
|
|
'<paragraph>\\(x^2\\)[]</paragraph>'
|
|
|
|
);
|
|
|
|
|
|
|
|
clock.tick( 100 );
|
|
|
|
|
|
|
|
expect( getData( editor.model ) ).to.equal(
|
2019-10-11 18:10:41 +03:00
|
|
|
'<paragraph>[<mathtex display="false" equation="x^2" type="script"></mathtex>]</paragraph>'
|
2019-10-09 13:38:30 +03:00
|
|
|
);
|
|
|
|
} );
|
|
|
|
|
|
|
|
it( 'can undo auto-mathing', () => {
|
|
|
|
setData( editor.model, '<paragraph>[]</paragraph>' );
|
|
|
|
pasteHtml( editor, '\\[x^2\\]' );
|
|
|
|
|
|
|
|
expect( getData( editor.model ) ).to.equal(
|
|
|
|
'<paragraph>\\[x^2\\][]</paragraph>'
|
|
|
|
);
|
|
|
|
|
|
|
|
clock.tick( 100 );
|
|
|
|
|
|
|
|
editor.commands.execute( 'undo' );
|
|
|
|
|
|
|
|
expect( getData( editor.model ) ).to.equal(
|
|
|
|
'<paragraph>\\[x^2\\][]</paragraph>'
|
|
|
|
);
|
|
|
|
} );
|
|
|
|
|
|
|
|
it( 'works for not collapsed selection inside single element', () => {
|
|
|
|
setData( editor.model, '<paragraph>[Foo]</paragraph>' );
|
|
|
|
pasteHtml( editor, '\\[x^2\\]' );
|
|
|
|
|
|
|
|
clock.tick( 100 );
|
|
|
|
|
|
|
|
expect( getData( editor.model ) ).to.equal(
|
2019-10-11 18:10:41 +03:00
|
|
|
'<paragraph>[<mathtex display="true" equation="x^2" type="script"></mathtex>]</paragraph>'
|
2019-10-09 13:38:30 +03:00
|
|
|
);
|
|
|
|
} );
|
|
|
|
|
|
|
|
it( 'works for not collapsed selection over a few elements', () => {
|
|
|
|
setData( editor.model, '<paragraph>Fo[o</paragraph><paragraph>Ba]r</paragraph>' );
|
|
|
|
pasteHtml( editor, '\\[x^2\\]' );
|
|
|
|
|
|
|
|
clock.tick( 100 );
|
|
|
|
|
|
|
|
expect( getData( editor.model ) ).to.equal(
|
2019-10-11 18:10:41 +03:00
|
|
|
'<paragraph>Fo[<mathtex display="true" equation="x^2" type="script"></mathtex>]r</paragraph>'
|
2019-10-09 13:38:30 +03:00
|
|
|
);
|
|
|
|
} );
|
|
|
|
|
|
|
|
it( 'inserts mathtex in-place (collapsed selection)', () => {
|
|
|
|
setData( editor.model, '<paragraph>Foo []Bar</paragraph>' );
|
|
|
|
pasteHtml( editor, '\\[x^2\\]' );
|
|
|
|
|
|
|
|
clock.tick( 100 );
|
|
|
|
|
|
|
|
expect( getData( editor.model ) ).to.equal(
|
2019-10-11 18:10:41 +03:00
|
|
|
'<paragraph>Foo ' +
|
|
|
|
'[<mathtex display="true" equation="x^2" type="script"></mathtex>]' +
|
|
|
|
'Bar</paragraph>'
|
2019-10-09 13:38:30 +03:00
|
|
|
);
|
|
|
|
} );
|
|
|
|
|
2019-10-11 18:10:41 +03:00
|
|
|
it( 'inserts math in-place (non-collapsed selection)', () => {
|
2019-10-09 13:38:30 +03:00
|
|
|
setData( editor.model, '<paragraph>Foo [Bar] Baz</paragraph>' );
|
|
|
|
pasteHtml( editor, '\\[x^2\\]' );
|
|
|
|
|
|
|
|
clock.tick( 100 );
|
|
|
|
|
|
|
|
expect( getData( editor.model ) ).to.equal(
|
2019-10-11 18:10:41 +03:00
|
|
|
'<paragraph>Foo ' +
|
|
|
|
'[<mathtex display="true" equation="x^2" type="script"></mathtex>]' +
|
|
|
|
' Baz</paragraph>'
|
2019-10-09 13:38:30 +03:00
|
|
|
);
|
|
|
|
} );
|
|
|
|
|
|
|
|
it( 'does nothing if pasted two equation as text', () => {
|
|
|
|
setData( editor.model, '<paragraph>[]</paragraph>' );
|
|
|
|
pasteHtml( editor, '\\[x^2\\] \\[\\sqrt{x}2\\]' );
|
|
|
|
|
|
|
|
clock.tick( 100 );
|
|
|
|
|
|
|
|
expect( getData( editor.model ) ).to.equal(
|
2019-10-11 18:10:41 +03:00
|
|
|
'<paragraph>\\[x^2\\] \\[\\sqrt{x}2\\][]</paragraph>'
|
2019-10-09 13:38:30 +03:00
|
|
|
);
|
|
|
|
} );
|
|
|
|
} );
|
|
|
|
|
|
|
|
function pasteHtml( editor, html ) {
|
|
|
|
editor.editing.view.document.fire( 'paste', {
|
|
|
|
dataTransfer: createDataTransfer( { 'text/html': html } ),
|
|
|
|
preventDefault() {
|
|
|
|
}
|
|
|
|
} );
|
|
|
|
}
|
|
|
|
|
|
|
|
function createDataTransfer( data ) {
|
|
|
|
return {
|
|
|
|
getData( type ) {
|
|
|
|
return data[ type ];
|
|
|
|
}
|
|
|
|
};
|
|
|
|
}
|
|
|
|
} );
|