| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409 |
- /**
- * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
- /* globals document */
- import DomConverter from '../../../src/view/domconverter';
- import ViewEditable from '../../../src/view/editableelement';
- import ViewDocument from '../../../src/view/document';
- import ViewUIElement from '../../../src/view/uielement';
- import ViewContainerElement from '../../../src/view/containerelement';
- import { BR_FILLER, INLINE_FILLER, INLINE_FILLER_LENGTH, NBSP_FILLER } from '../../../src/view/filler';
- import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
- import global from '@ckeditor/ckeditor5-utils/src/dom/global';
- import { StylesProcessor } from '../../../src/view/stylesmap';
- describe( 'DomConverter', () => {
- let converter, viewDocument;
- testUtils.createSinonSandbox();
- beforeEach( () => {
- viewDocument = new ViewDocument( new StylesProcessor() );
- converter = new DomConverter( viewDocument );
- } );
- describe( 'constructor()', () => {
- it( 'should create converter with BR block filler mode by default', () => {
- expect( converter.blockFillerMode ).to.equal( 'br' );
- } );
- it( 'should create converter with defined block mode filler', () => {
- converter = new DomConverter( viewDocument, { blockFillerMode: 'nbsp' } );
- expect( converter.blockFillerMode ).to.equal( 'nbsp' );
- } );
- } );
- describe( 'focus()', () => {
- let viewEditable, domEditable, domEditableParent, viewDocument;
- beforeEach( () => {
- viewDocument = new ViewDocument( new StylesProcessor() );
- viewEditable = new ViewEditable( viewDocument, 'div' );
- domEditable = document.createElement( 'div' );
- domEditableParent = document.createElement( 'div' );
- converter.bindElements( domEditable, viewEditable );
- domEditable.setAttribute( 'contenteditable', 'true' );
- domEditableParent.appendChild( domEditable );
- document.body.appendChild( domEditableParent );
- } );
- afterEach( () => {
- converter.unbindDomElement( domEditable );
- document.body.removeChild( domEditableParent );
- document.body.focus();
- } );
- it( 'should call focus on corresponding DOM editable', () => {
- const focusSpy = testUtils.sinon.spy( domEditable, 'focus' );
- converter.focus( viewEditable );
- expect( focusSpy.calledOnce ).to.be.true;
- } );
- it( 'should not focus already focused editable', () => {
- const focusSpy = testUtils.sinon.spy( domEditable, 'focus' );
- converter.focus( viewEditable );
- converter.focus( viewEditable );
- expect( focusSpy.calledOnce ).to.be.true;
- } );
- // https://github.com/ckeditor/ckeditor5-engine/issues/951
- // https://github.com/ckeditor/ckeditor5-engine/issues/957
- it( 'should actively prevent scrolling', () => {
- const scrollToSpy = testUtils.sinon.stub( global.window, 'scrollTo' );
- const editableScrollLeftSpy = sinon.spy();
- const editableScrollTopSpy = sinon.spy();
- const parentScrollLeftSpy = sinon.spy();
- const parentScrollTopSpy = sinon.spy();
- const documentElementScrollLeftSpy = sinon.spy();
- const documentElementScrollTopSpy = sinon.spy();
- Object.defineProperties( domEditable, {
- scrollLeft: {
- get: () => 20,
- set: editableScrollLeftSpy
- },
- scrollTop: {
- get: () => 200,
- set: editableScrollTopSpy
- }
- } );
- Object.defineProperties( domEditableParent, {
- scrollLeft: {
- get: () => 40,
- set: parentScrollLeftSpy
- },
- scrollTop: {
- get: () => 400,
- set: parentScrollTopSpy
- }
- } );
- Object.defineProperties( global.document.documentElement, {
- scrollLeft: {
- get: () => 60,
- set: documentElementScrollLeftSpy
- },
- scrollTop: {
- get: () => 600,
- set: documentElementScrollTopSpy
- }
- } );
- testUtils.sinon.stub( global.window, 'scrollX' ).get( () => 10 );
- testUtils.sinon.stub( global.window, 'scrollY' ).get( () => 100 );
- converter.focus( viewEditable );
- sinon.assert.calledWithExactly( scrollToSpy, 10, 100 );
- sinon.assert.calledWithExactly( editableScrollLeftSpy, 20 );
- sinon.assert.calledWithExactly( editableScrollTopSpy, 200 );
- sinon.assert.calledWithExactly( parentScrollLeftSpy, 40 );
- sinon.assert.calledWithExactly( parentScrollTopSpy, 400 );
- sinon.assert.calledWithExactly( documentElementScrollLeftSpy, 60 );
- sinon.assert.calledWithExactly( documentElementScrollTopSpy, 600 );
- } );
- } );
- describe( 'DOM nodes type checking', () => {
- let text, element, documentFragment, comment;
- before( () => {
- text = document.createTextNode( 'test' );
- element = document.createElement( 'div' );
- documentFragment = document.createDocumentFragment();
- comment = document.createComment( 'a' );
- } );
- describe( 'isElement()', () => {
- it( 'should return true for HTMLElement nodes', () => {
- expect( converter.isElement( element ) ).to.be.true;
- } );
- it( 'should return false for other arguments', () => {
- expect( converter.isElement( text ) ).to.be.false;
- expect( converter.isElement( documentFragment ) ).to.be.false;
- expect( converter.isElement( comment ) ).to.be.false;
- expect( converter.isElement( {} ) ).to.be.false;
- } );
- } );
- describe( 'isDocumentFragment()', () => {
- it( 'should return true for HTMLElement nodes', () => {
- expect( converter.isDocumentFragment( documentFragment ) ).to.be.true;
- } );
- it( 'should return false for other arguments', () => {
- expect( converter.isDocumentFragment( text ) ).to.be.false;
- expect( converter.isDocumentFragment( element ) ).to.be.false;
- expect( converter.isDocumentFragment( comment ) ).to.be.false;
- expect( converter.isDocumentFragment( {} ) ).to.be.false;
- } );
- } );
- describe( 'isComment()', () => {
- it( 'should return true for HTML comments', () => {
- expect( converter.isComment( comment ) ).to.be.true;
- } );
- it( 'should return false for other arguments', () => {
- expect( converter.isComment( text ) ).to.be.false;
- expect( converter.isComment( element ) ).to.be.false;
- expect( converter.isComment( documentFragment ) ).to.be.false;
- expect( converter.isComment( {} ) ).to.be.false;
- } );
- } );
- } );
- describe( 'isDomSelectionCorrect()', () => {
- function domSelection( anchorParent, anchorOffset, focusParent, focusOffset ) {
- const sel = document.getSelection();
- sel.collapse( anchorParent, anchorOffset );
- sel.extend( focusParent, focusOffset );
- return sel;
- }
- let domP, domFillerTextNode, domUiSpan, domUiDeepSpan, viewDocument;
- beforeEach( () => {
- // <p>INLINE_FILLERfoo<span></span></p>.
- domP = document.createElement( 'p' );
- domFillerTextNode = document.createTextNode( INLINE_FILLER + 'foo' );
- domUiSpan = document.createElement( 'span' );
- domUiDeepSpan = document.createElement( 'span' );
- domUiSpan.appendChild( domUiDeepSpan );
- viewDocument = new ViewDocument( new StylesProcessor() );
- const viewUiSpan = new ViewUIElement( viewDocument, 'span' );
- const viewElementSpan = new ViewContainerElement( viewDocument, 'span' );
- domP.appendChild( domFillerTextNode );
- domP.appendChild( domUiSpan );
- converter.bindElements( domUiSpan, viewUiSpan );
- converter.bindElements( domUiDeepSpan, viewElementSpan );
- document.body.appendChild( domP );
- } );
- afterEach( () => {
- domP.remove();
- } );
- it( 'should return true for correct dom selection', () => {
- // <p>INLINE_FILLER{foo}<span></span></p>.
- const sel1 = domSelection( domFillerTextNode, INLINE_FILLER_LENGTH, domFillerTextNode, INLINE_FILLER_LENGTH + 3 );
- expect( converter.isDomSelectionCorrect( sel1 ) ).to.be.true;
- // <p>INLINE_FILLERfoo[]<span></span></p>.
- const sel2 = domSelection( domP, 1, domP, 1 );
- expect( converter.isDomSelectionCorrect( sel2 ) ).to.be.true;
- // <p>INLINE_FILLERfoo<span></span>[]</p>.
- const sel3 = domSelection( domP, 2, domP, 2 );
- expect( converter.isDomSelectionCorrect( sel3 ) ).to.be.true;
- } );
- describe( 'should return false', () => {
- it( 'if anchor or focus is before filler node', () => {
- // Tests forward and backward selection.
- // <p>[INLINE_FILLERfoo]<span-ui><span-container></span></span></p>.
- const sel1 = domSelection( domP, 0, domP, 1 );
- expect( converter.isDomSelectionCorrect( sel1 ) ).to.be.false;
- const sel2 = domSelection( domP, 1, domP, 0 );
- expect( converter.isDomSelectionCorrect( sel2 ) ).to.be.false;
- } );
- it( 'if anchor or focus is before filler sequence', () => {
- // Tests forward and backward selection.
- // <p>{INLINE_FILLERfoo}<span-ui><span-container></span></span></p>.
- const sel1 = domSelection( domFillerTextNode, 0, domFillerTextNode, INLINE_FILLER_LENGTH + 3 );
- expect( converter.isDomSelectionCorrect( sel1 ) ).to.be.false;
- const sel2 = domSelection( domFillerTextNode, INLINE_FILLER_LENGTH + 3, domFillerTextNode, 0 );
- expect( converter.isDomSelectionCorrect( sel2 ) ).to.be.false;
- } );
- it( 'if anchor or focus is in the middle of filler sequence', () => {
- // Tests forward and backward selection.
- // <p>I{NLINE_FILLERfoo}<span-ui><span-container></span></span></p>.
- const sel1 = domSelection( domFillerTextNode, 1, domFillerTextNode, INLINE_FILLER_LENGTH + 3 );
- expect( converter.isDomSelectionCorrect( sel1 ) ).to.be.false;
- const sel2 = domSelection( domFillerTextNode, INLINE_FILLER_LENGTH + 3, domFillerTextNode, 1 );
- expect( converter.isDomSelectionCorrect( sel2 ) ).to.be.false;
- } );
- it( 'if anchor or focus is directly inside dom element that represents view ui element', () => {
- // Set text indside ui element to put selection there.
- domUiSpan.innerText = 'xxx';
- // Tests forward and backward selection.
- // <p>INLINE_FILLER{foo<span-ui>xxx]<span-container></span></span></p>.
- const sel1 = domSelection( domFillerTextNode, INLINE_FILLER_LENGTH, domUiSpan, 1 );
- expect( converter.isDomSelectionCorrect( sel1 ) ).to.be.false;
- const sel2 = domSelection( domUiSpan, 1, domFillerTextNode, INLINE_FILLER_LENGTH );
- expect( converter.isDomSelectionCorrect( sel2 ) ).to.be.false;
- } );
- it( 'if anchor or focus is inside deep ui element structure (not directly in ui element)', () => {
- // Set text indside ui element to put selection there.
- domUiDeepSpan.innerText = 'xxx';
- // Tests forward and backward selection.
- // <p>INLINE_FILLER{foo<span-ui><span-container>xxx]</span></span></p>.
- const sel1 = domSelection( domFillerTextNode, INLINE_FILLER_LENGTH, domUiDeepSpan, 1 );
- expect( converter.isDomSelectionCorrect( sel1 ) ).to.be.false;
- const sel2 = domSelection( domUiDeepSpan, 1, domFillerTextNode, INLINE_FILLER_LENGTH );
- expect( converter.isDomSelectionCorrect( sel2 ) ).to.be.false;
- } );
- } );
- } );
- describe( 'isBlockFiller()', () => {
- describe( 'mode "nbsp"', () => {
- beforeEach( () => {
- converter = new DomConverter( viewDocument, { blockFillerMode: 'nbsp' } );
- } );
- it( 'should return true if the node is an nbsp filler and is a single child of a block level element', () => {
- const nbspFillerInstance = NBSP_FILLER( document ); // eslint-disable-line new-cap
- const context = document.createElement( 'div' );
- context.appendChild( nbspFillerInstance );
- expect( converter.isBlockFiller( nbspFillerInstance ) ).to.be.true;
- } );
- it( 'should return false if the node is an nbsp filler and is not a single child of a block level element', () => {
- const nbspFillerInstance = NBSP_FILLER( document ); // eslint-disable-line new-cap
- const context = document.createElement( 'div' );
- context.appendChild( nbspFillerInstance );
- context.appendChild( document.createTextNode( 'a' ) );
- expect( converter.isBlockFiller( nbspFillerInstance ) ).to.be.false;
- } );
- it( 'should return false if there are two nbsp fillers in a block element', () => {
- const nbspFillerInstance = NBSP_FILLER( document ); // eslint-disable-line new-cap
- const context = document.createElement( 'div' );
- context.appendChild( nbspFillerInstance );
- context.appendChild( NBSP_FILLER( document ) ); // eslint-disable-line new-cap
- expect( converter.isBlockFiller( nbspFillerInstance ) ).to.be.false;
- } );
- it( 'should return false filler is placed in a non-block element', () => {
- const nbspFillerInstance = NBSP_FILLER( document ); // eslint-disable-line new-cap
- const context = document.createElement( 'span' );
- context.appendChild( nbspFillerInstance );
- expect( converter.isBlockFiller( nbspFillerInstance ) ).to.be.false;
- } );
- it( 'should return false if the node is an instance of the BR block filler', () => {
- const brFillerInstance = BR_FILLER( document ); // eslint-disable-line new-cap
- expect( converter.isBlockFiller( brFillerInstance ) ).to.be.false;
- } );
- it( 'should return false for inline filler', () => {
- expect( converter.isBlockFiller( document.createTextNode( INLINE_FILLER ) ) ).to.be.false;
- } );
- it( 'should return false for a normal <br> element', () => {
- const context = document.createElement( 'div' );
- context.innerHTML = 'x<br>x';
- expect( converter.isBlockFiller( context.childNodes[ 1 ] ) ).to.be.false;
- } );
- // SPECIAL CASE (see ckeditor5#5564).
- it( 'should return true for a <br> element which is the only child of its block parent', () => {
- const context = document.createElement( 'div' );
- context.innerHTML = '<br>';
- expect( converter.isBlockFiller( context.firstChild ) ).to.be.true;
- } );
- it( 'should return false for a <br> element which is the only child of its non-block parent', () => {
- const context = document.createElement( 'span' );
- context.innerHTML = '<br>';
- expect( converter.isBlockFiller( context.firstChild ) ).to.be.false;
- } );
- it( 'should return false for a <br> element which is followed by an nbsp', () => {
- const context = document.createElement( 'span' );
- context.innerHTML = '<br> ';
- expect( converter.isBlockFiller( context.firstChild ) ).to.be.false;
- } );
- } );
- describe( 'mode "br"', () => {
- beforeEach( () => {
- converter = new DomConverter( viewDocument, { blockFillerMode: 'br' } );
- } );
- it( 'should return true if the node is an instance of the BR block filler', () => {
- const brFillerInstance = BR_FILLER( document ); // eslint-disable-line new-cap
- expect( converter.isBlockFiller( brFillerInstance ) ).to.be.true;
- // Check it twice to ensure that caching breaks nothing.
- expect( converter.isBlockFiller( brFillerInstance ) ).to.be.true;
- } );
- it( 'should return false if the node is an instance of the NBSP block filler', () => {
- converter = new DomConverter( viewDocument, { blockFillerMode: 'br' } );
- const nbspFillerInstance = NBSP_FILLER( document ); // eslint-disable-line new-cap
- // NBSP must be check inside a context.
- const context = document.createElement( 'div' );
- context.appendChild( nbspFillerInstance );
- expect( converter.isBlockFiller( nbspFillerInstance ) ).to.be.false;
- } );
- it( 'should return false for inline filler', () => {
- expect( converter.isBlockFiller( document.createTextNode( INLINE_FILLER ) ) ).to.be.false;
- } );
- } );
- } );
- } );
|