| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118 |
- /**
- * @license Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
- /* globals Range, document, window */
- /* bender-tags: view, browser-only */
- import ViewElement from '/ckeditor5/engine/view/element.js';
- import ViewText from '/ckeditor5/engine/view/text.js';
- import ViewRange from '/ckeditor5/engine/view/range.js';
- import Selection from '/ckeditor5/engine/view/selection.js';
- import DomConverter from '/ckeditor5/engine/view/domconverter.js';
- import Renderer from '/ckeditor5/engine/view/renderer.js';
- import CKEditorError from '/ckeditor5/utils/ckeditorerror.js';
- import { parse } from '/ckeditor5/engine/dev-utils/view.js';
- import { INLINE_FILLER, INLINE_FILLER_LENGTH, isBlockFiller, BR_FILLER } from '/ckeditor5/engine/view/filler.js';
- import testUtils from '/tests/core/_utils/utils.js';
- import createElement from '/ckeditor5/utils/dom/createelement.js';
- testUtils.createSinonSandbox();
- describe( 'Renderer', () => {
- let selection, domConverter, renderer;
- beforeEach( () => {
- selection = new Selection();
- domConverter = new DomConverter();
- renderer = new Renderer( domConverter, selection );
- renderer.domDocuments.add( document );
- } );
- describe( 'markToSync', () => {
- let viewRoot;
- beforeEach( () => {
- viewRoot = new ViewElement( 'p' );
- const domRoot = document.createElement( 'p' );
- domConverter.bindElements( domRoot, viewRoot );
- viewRoot.appendChildren( new ViewText( 'foo' ) );
- renderer.markedTexts.clear();
- renderer.markedAttributes.clear();
- renderer.markedChildren.clear();
- } );
- it( 'should mark attributes which need update', () => {
- viewRoot.setAttribute( 'class', 'foo' );
- renderer.markToSync( 'attributes', viewRoot );
- expect( renderer.markedAttributes.has( viewRoot ) ).to.be.true;
- } );
- it( 'should mark children which need update', () => {
- viewRoot.appendChildren( new ViewText( 'foo' ) );
- renderer.markToSync( 'children', viewRoot );
- expect( renderer.markedChildren.has( viewRoot ) ).to.be.true;
- } );
- it( 'should not mark children if element has no corresponding node', () => {
- // Overwrite viewRoot with node without coresponding DOM node.
- viewRoot = new ViewElement( 'p' );
- viewRoot.appendChildren( new ViewText( 'foo' ) );
- renderer.markToSync( 'children', viewRoot );
- expect( renderer.markedTexts.has( viewRoot ) ).to.be.false;
- } );
- it( 'should mark text which need update', () => {
- const viewText = new ViewText( 'foo' );
- viewRoot.appendChildren( viewText );
- viewText.data = 'bar';
- renderer.markToSync( 'text', viewText );
- expect( renderer.markedTexts.has( viewText ) ).to.be.true;
- } );
- it( 'should not mark text if parent has no corresponding node', () => {
- const viewText = new ViewText( 'foo' );
- // Overwrite viewRoot with node without coresponding DOM node.
- viewRoot = new ViewElement( 'p' );
- viewRoot.appendChildren( viewText );
- viewText.data = 'bar';
- renderer.markToSync( 'text', viewText );
- expect( renderer.markedTexts.has( viewText ) ).to.be.false;
- } );
- it( 'should throw if the type is unknown', () => {
- expect( () => {
- renderer.markToSync( 'UNKNOWN', viewRoot );
- } ).to.throw( CKEditorError, /^view-renderer-unknown-type/ );
- } );
- } );
- describe( 'render', () => {
- let viewRoot, domRoot, selectionEditable;
- beforeEach( () => {
- viewRoot = new ViewElement( 'div' );
- domRoot = document.createElement( 'div' );
- document.body.appendChild( domRoot );
- domConverter.bindElements( domRoot, viewRoot );
- renderer.markedTexts.clear();
- renderer.markedAttributes.clear();
- renderer.markedChildren.clear();
- selection.removeAllRanges();
- selection.setFake( false );
- selectionEditable = viewRoot;
- renderer.isFocused = true;
- // Fake selection editable - it is needed to render selection properly.
- Object.defineProperty( selection, 'editableElement', {
- get: function() {
- return selectionEditable;
- }
- } );
- } );
- it( 'should update attributes', () => {
- viewRoot.setAttribute( 'class', 'foo' );
- renderer.markToSync( 'attributes', viewRoot );
- renderer.render();
- expect( domRoot.getAttribute( 'class' ) ).to.equal( 'foo' );
- expect( renderer.markedAttributes.size ).to.equal( 0 );
- } );
- it( 'should remove attributes', () => {
- viewRoot.setAttribute( 'class', 'foo' );
- domRoot.setAttribute( 'id', 'bar' );
- domRoot.setAttribute( 'class', 'bar' );
- renderer.markToSync( 'attributes', viewRoot );
- renderer.render();
- expect( domRoot.getAttribute( 'class' ) ).to.equal( 'foo' );
- expect( domRoot.getAttribute( 'id' ) ).to.be.not.ok;
- expect( renderer.markedAttributes.size ).to.equal( 0 );
- } );
- it( 'should add children', () => {
- viewRoot.appendChildren( new ViewText( 'foo' ) );
- renderer.markToSync( 'children', viewRoot );
- renderer.render();
- expect( domRoot.childNodes.length ).to.equal( 1 );
- expect( domRoot.childNodes[ 0 ].data ).to.equal( 'foo' );
- expect( renderer.markedChildren.size ).to.equal( 0 );
- } );
- it( 'should remove children', () => {
- viewRoot.appendChildren( new ViewText( 'foo' ) );
- renderer.markToSync( 'children', viewRoot );
- renderer.render();
- expect( domRoot.childNodes.length ).to.equal( 1 );
- expect( domRoot.childNodes[ 0 ].data ).to.equal( 'foo' );
- viewRoot.removeChildren( 0, 1 );
- renderer.markToSync( 'children', viewRoot );
- renderer.render();
- expect( domRoot.childNodes.length ).to.equal( 0 );
- expect( renderer.markedChildren.size ).to.equal( 0 );
- } );
- it( 'should update text', () => {
- const viewText = new ViewText( 'foo' );
- viewRoot.appendChildren( viewText );
- renderer.markToSync( 'children', viewRoot );
- renderer.render();
- expect( domRoot.childNodes.length ).to.equal( 1 );
- expect( domRoot.childNodes[ 0 ].data ).to.equal( 'foo' );
- viewText.data = 'bar';
- renderer.markToSync( 'text', viewText );
- renderer.render();
- expect( domRoot.childNodes.length ).to.equal( 1 );
- expect( domRoot.childNodes[ 0 ].data ).to.equal( 'bar' );
- expect( renderer.markedTexts.size ).to.equal( 0 );
- } );
- it( 'should not update text parent child list changed', () => {
- const viewImg = new ViewElement( 'img' );
- const viewText = new ViewText( 'foo' );
- viewRoot.appendChildren( [ viewImg, viewText ] );
- renderer.markToSync( 'children', viewRoot );
- renderer.markToSync( 'text', viewText );
- renderer.render();
- expect( domRoot.childNodes.length ).to.equal( 2 );
- expect( domRoot.childNodes[ 0 ].tagName ).to.equal( 'IMG' );
- expect( domRoot.childNodes[ 1 ].data ).to.equal( 'foo' );
- } );
- it( 'should not change text if it is the same during text rendering', () => {
- const viewText = new ViewText( 'foo' );
- viewRoot.appendChildren( viewText );
- renderer.markToSync( 'children', viewRoot );
- renderer.render();
- // This should not be changed during the render.
- const domText = domRoot.childNodes[ 0 ];
- renderer.markToSync( 'text', viewText );
- renderer.render();
- expect( domRoot.childNodes.length ).to.equal( 1 );
- expect( domRoot.childNodes[ 0 ] ).to.equal( domText );
- } );
- it( 'should not change text if it is the same during children rendering', () => {
- const viewText = new ViewText( 'foo' );
- viewRoot.appendChildren( viewText );
- renderer.markToSync( 'children', viewRoot );
- renderer.render();
- // This should not be changed during the render.
- const domText = domRoot.childNodes[ 0 ];
- renderer.markToSync( 'children', viewRoot );
- renderer.render();
- expect( domRoot.childNodes.length ).to.equal( 1 );
- expect( domRoot.childNodes[ 0 ] ).to.equal( domText );
- } );
- it( 'should not change element if it is the same', () => {
- const viewImg = new ViewElement( 'img' );
- viewRoot.appendChildren( viewImg );
- // This should not be changed during the render.
- const domImg = document.createElement( 'img' );
- domRoot.appendChild( domImg );
- domConverter.bindElements( domImg, viewImg );
- renderer.markToSync( 'children', viewRoot );
- renderer.render();
- expect( domRoot.childNodes.length ).to.equal( 1 );
- expect( domRoot.childNodes[ 0 ] ).to.equal( domImg );
- } );
- it( 'should change element if it is different', () => {
- const viewImg = new ViewElement( 'img' );
- viewRoot.appendChildren( viewImg );
- renderer.markToSync( 'children', viewRoot );
- renderer.render();
- const viewP = new ViewElement( 'p' );
- viewRoot.removeChildren( 0, 1 );
- viewRoot.appendChildren( viewP );
- renderer.markToSync( 'children', viewRoot );
- renderer.render();
- expect( domRoot.childNodes.length ).to.equal( 1 );
- expect( domRoot.childNodes[ 0 ].tagName ).to.equal( 'P' );
- } );
- it( 'should not care about filler if there is no DOM', () => {
- selectionEditable = null;
- const { view: viewP, selection: newSelection } = parse(
- '<container:p>foo<attribute:b>[]</attribute:b>bar</container:p>' );
- const viewRoot = new ViewElement( 'p' );
- viewRoot.appendChildren( viewP );
- selection.setTo( newSelection );
- renderer.markToSync( 'children', viewRoot );
- renderer.render();
- // Expect no error on render.
- expect( viewRoot ).to.be.ok;
- } );
- it( 'should add and remove inline filler in case <p>foo<b>[]</b>bar</p>', () => {
- const domSelection = document.getSelection();
- // Step 1: <p>foo<b>"FILLER{}"</b></p>
- const { view: viewP, selection: newSelection } = parse(
- '<container:p>foo<attribute:b>[]</attribute:b>bar</container:p>' );
- viewRoot.appendChildren( viewP );
- selection.setTo( newSelection );
- renderer.markToSync( 'children', viewRoot );
- renderer.render();
- expect( domRoot.childNodes.length ).to.equal( 1 );
- expect( domRoot.childNodes[ 0 ].tagName.toLowerCase() ).to.equal( 'p' );
- const domP = domRoot.childNodes[ 0 ];
- expect( domP.childNodes.length ).to.equal( 3 );
- expect( domP.childNodes[ 0 ].data ).to.equal( 'foo' );
- expect( domP.childNodes[ 2 ].data ).to.equal( 'bar' );
- expect( domP.childNodes[ 1 ].tagName.toLowerCase() ).to.equal( 'b' );
- expect( domP.childNodes[ 1 ].childNodes.length ).to.equal( 1 );
- expect( domP.childNodes[ 1 ].childNodes[ 0 ].data ).to.equal( INLINE_FILLER );
- expect( domSelection.rangeCount ).to.equal( 1 );
- expect( domSelection.getRangeAt( 0 ).startContainer ).to.equal( domP.childNodes[ 1 ].childNodes[ 0 ] );
- expect( domSelection.getRangeAt( 0 ).startOffset ).to.equal( INLINE_FILLER_LENGTH );
- expect( domSelection.getRangeAt( 0 ).collapsed ).to.be.true;
- // Step 2: No mutation on second render
- renderer.markToSync( 'children', viewRoot );
- renderer.markToSync( 'children', viewP );
- renderAndExpectNoChanges( renderer, domRoot );
- // Step 3: <p>foo{}<b></b></p>
- selection.removeAllRanges();
- selection.addRange( ViewRange.createFromParentsAndOffsets( viewP.getChild( 0 ), 3, viewP.getChild( 0 ), 3 ) );
- renderer.render();
- expect( domP.childNodes.length ).to.equal( 3 );
- expect( domP.childNodes[ 0 ].data ).to.equal( 'foo' );
- expect( domP.childNodes[ 2 ].data ).to.equal( 'bar' );
- expect( domP.childNodes[ 1 ].tagName.toLowerCase() ).to.equal( 'b' );
- expect( domP.childNodes[ 1 ].childNodes.length ).to.equal( 0 );
- expect( domSelection.rangeCount ).to.equal( 1 );
- expect( domSelection.getRangeAt( 0 ).startContainer ).to.equal( domP.childNodes[ 0 ] );
- expect( domSelection.getRangeAt( 0 ).startOffset ).to.equal( 3 );
- expect( domSelection.getRangeAt( 0 ).collapsed ).to.be.true;
- // Step 4: No mutation on second render
- renderer.markToSync( 'children', viewRoot );
- renderer.markToSync( 'children', viewP );
- renderAndExpectNoChanges( renderer, domRoot );
- } );
- it( 'should add and remove inline filler in case <p>[]<b>foo</b></p>', () => {
- const domSelection = document.getSelection();
- // Step 1: <p>"FILLER{}"<b>foo</b></p>
- const { view: viewP, selection: newSelection } = parse(
- '<container:p>[]<attribute:b>foo</attribute:b></container:p>' );
- viewRoot.appendChildren( viewP );
- selection.setTo( newSelection );
- renderer.markToSync( 'children', viewRoot );
- renderer.render();
- const domP = domRoot.childNodes[ 0 ];
- expect( domP.childNodes.length ).to.equal( 2 );
- expect( domP.childNodes[ 0 ].data ).to.equal( INLINE_FILLER );
- expect( domP.childNodes[ 1 ].tagName.toLowerCase() ).to.equal( 'b' );
- expect( domP.childNodes[ 1 ].childNodes.length ).to.equal( 1 );
- expect( domP.childNodes[ 1 ].childNodes[ 0 ].data ).to.equal( 'foo' );
- expect( domSelection.rangeCount ).to.equal( 1 );
- expect( domSelection.getRangeAt( 0 ).startContainer ).to.equal( domP.childNodes[ 0 ] );
- expect( domSelection.getRangeAt( 0 ).startOffset ).to.equal( INLINE_FILLER_LENGTH );
- expect( domSelection.getRangeAt( 0 ).collapsed ).to.be.true;
- // Step 2: No mutation on second render
- renderer.markToSync( 'children', viewP );
- renderAndExpectNoChanges( renderer, domRoot );
- // Step 3: <p><b>{}foo</b></p>
- selection.removeAllRanges();
- selection.addRange( ViewRange.createFromParentsAndOffsets(
- viewP.getChild( 0 ).getChild( 0 ), 0, viewP.getChild( 0 ).getChild( 0 ), 0 ) );
- renderer.render();
- expect( domP.childNodes.length ).to.equal( 1 );
- expect( domP.childNodes[ 0 ].tagName.toLowerCase() ).to.equal( 'b' );
- expect( domP.childNodes[ 0 ].childNodes.length ).to.equal( 1 );
- expect( domP.childNodes[ 0 ].childNodes[ 0 ].data ).to.equal( 'foo' );
- expect( domSelection.rangeCount ).to.equal( 1 );
- expect( domSelection.getRangeAt( 0 ).startContainer ).to.equal( domP.childNodes[ 0 ] .childNodes[ 0 ] );
- expect( domSelection.getRangeAt( 0 ).startOffset ).to.equal( 0 );
- expect( domSelection.getRangeAt( 0 ).collapsed ).to.be.true;
- // Step 4: No mutation on second render
- renderer.markToSync( 'children', viewP );
- renderAndExpectNoChanges( renderer, domRoot );
- } );
- it( 'should add and remove inline filler in case <p><b>foo</b>[]</p>', () => {
- const domSelection = document.getSelection();
- // Step 1: <p>"FILLER{}"<b>foo</b></p>
- const { view: viewP, selection: newSelection } = parse(
- '<container:p><attribute:b>foo</attribute:b>[]</container:p>' );
- viewRoot.appendChildren( viewP );
- selection.setTo( newSelection );
- renderer.markToSync( 'children', viewRoot );
- renderer.render();
- const domP = domRoot.childNodes[ 0 ];
- expect( domP.childNodes.length ).to.equal( 2 );
- expect( domP.childNodes[ 0 ].tagName.toLowerCase() ).to.equal( 'b' );
- expect( domP.childNodes[ 0 ].childNodes.length ).to.equal( 1 );
- expect( domP.childNodes[ 0 ].childNodes[ 0 ].data ).to.equal( 'foo' );
- expect( domP.childNodes[ 1 ].data ).to.equal( INLINE_FILLER );
- expect( domSelection.rangeCount ).to.equal( 1 );
- expect( domSelection.getRangeAt( 0 ).startContainer ).to.equal( domP.childNodes[ 1 ] );
- expect( domSelection.getRangeAt( 0 ).startOffset ).to.equal( INLINE_FILLER_LENGTH );
- expect( domSelection.getRangeAt( 0 ).collapsed ).to.be.true;
- // Step 2: No mutation on second render
- renderer.markToSync( 'children', viewP );
- renderAndExpectNoChanges( renderer, domRoot );
- // Step 3: <p><b>foo{}</b></p>
- selection.removeAllRanges();
- selection.addRange( ViewRange.createFromParentsAndOffsets(
- viewP.getChild( 0 ).getChild( 0 ), 3, viewP.getChild( 0 ).getChild( 0 ), 3 ) );
- renderer.render();
- expect( domP.childNodes.length ).to.equal( 1 );
- expect( domP.childNodes[ 0 ].tagName.toLowerCase() ).to.equal( 'b' );
- expect( domP.childNodes[ 0 ].childNodes.length ).to.equal( 1 );
- expect( domP.childNodes[ 0 ].childNodes[ 0 ].data ).to.equal( 'foo' );
- expect( domSelection.rangeCount ).to.equal( 1 );
- expect( domSelection.getRangeAt( 0 ).startContainer ).to.equal( domP.childNodes[ 0 ] .childNodes[ 0 ] );
- expect( domSelection.getRangeAt( 0 ).startOffset ).to.equal( 3 );
- expect( domSelection.getRangeAt( 0 ).collapsed ).to.be.true;
- // Step 4: No mutation on second render
- renderer.markToSync( 'children', viewP );
- renderAndExpectNoChanges( renderer, domRoot );
- } );
- it( 'should add and remove inline filler in case <p><b>foo</b>[]<b>bar</b></p>', () => {
- const domSelection = document.getSelection();
- const { view: viewP, selection: newSelection } = parse(
- '<container:p><attribute:b>foo</attribute:b>[]<attribute:b>bar</attribute:b></container:p>' );
- viewRoot.appendChildren( viewP );
- selection.setTo( newSelection );
- renderer.markToSync( 'children', viewRoot );
- renderer.render();
- const domP = domRoot.childNodes[ 0 ];
- expect( domP.childNodes.length ).to.equal( 3 );
- expect( domP.childNodes[ 0 ].tagName.toLowerCase() ).to.equal( 'b' );
- expect( domP.childNodes[ 0 ].childNodes.length ).to.equal( 1 );
- expect( domP.childNodes[ 0 ].childNodes[ 0 ].data ).to.equal( 'foo' );
- expect( domP.childNodes[ 1 ].data ).to.equal( INLINE_FILLER );
- expect( domP.childNodes[ 2 ].tagName.toLowerCase() ).to.equal( 'b' );
- expect( domP.childNodes[ 2 ].childNodes.length ).to.equal( 1 );
- expect( domP.childNodes[ 2 ].childNodes[ 0 ].data ).to.equal( 'bar' );
- expect( domSelection.rangeCount ).to.equal( 1 );
- expect( domSelection.getRangeAt( 0 ).startContainer ).to.equal( domP.childNodes[ 1 ] );
- expect( domSelection.getRangeAt( 0 ).startOffset ).to.equal( INLINE_FILLER_LENGTH );
- expect( domSelection.getRangeAt( 0 ).collapsed ).to.be.true;
- } );
- it( 'should move filler when selection is moved', () => {
- // Step 1: <p>foo<b>"FILLER{}"</b></p>
- const { view: viewP, selection: newSelection } = parse(
- '<container:p>foo<attribute:b>[]</attribute:b><attribute:i></attribute:i></container:p>' );
- viewRoot.appendChildren( viewP );
- selection.setTo( newSelection );
- renderer.markToSync( 'children', viewRoot );
- renderer.render();
- const domP = domRoot.childNodes[ 0 ];
- expect( domP.childNodes.length ).to.equal( 3 );
- expect( domP.childNodes[ 0 ].data ).to.equal( 'foo' );
- expect( domP.childNodes[ 1 ].tagName.toLowerCase() ).to.equal( 'b' );
- expect( domP.childNodes[ 1 ].childNodes.length ).to.equal( 1 );
- expect( domP.childNodes[ 1 ].childNodes[ 0 ].data ).to.equal( INLINE_FILLER );
- expect( domP.childNodes[ 2 ].tagName.toLowerCase() ).to.equal( 'i' );
- expect( domP.childNodes[ 2 ].childNodes.length ).to.equal( 0 );
- // Step 2: <p>foo<b></b><i>"FILLER{}"</i></p>
- selection.removeAllRanges();
- const viewI = viewP.getChild( 2 );
- selection.addRange( ViewRange.createFromParentsAndOffsets( viewI, 0, viewI, 0 ) );
- renderer.render();
- expect( domP.childNodes.length ).to.equal( 3 );
- expect( domP.childNodes[ 0 ].data ).to.equal( 'foo' );
- expect( domP.childNodes[ 1 ].tagName.toLowerCase() ).to.equal( 'b' );
- expect( domP.childNodes[ 1 ].childNodes.length ).to.equal( 0 );
- expect( domP.childNodes[ 2 ].tagName.toLowerCase() ).to.equal( 'i' );
- expect( domP.childNodes[ 2 ].childNodes.length ).to.equal( 1 );
- expect( domP.childNodes[ 2 ].childNodes[ 0 ].data ).to.equal( INLINE_FILLER );
- } );
- it( 'should remove filler when text is added and selection removed', () => {
- // Step 1: <p>foo<b>"FILLER{}"</b></p>
- const { view: viewP, selection: newSelection } = parse( '<container:p>foo<attribute:b>[]</attribute:b></container:p>' );
- const viewB = viewP.getChild( 1 );
- viewRoot.appendChildren( viewP );
- selection.setTo( newSelection );
- renderer.markToSync( 'children', viewRoot );
- renderer.render();
- const domP = domRoot.childNodes[ 0 ];
- expect( domP.childNodes.length ).to.equal( 2 );
- expect( domP.childNodes[ 0 ].data ).to.equal( 'foo' );
- expect( domP.childNodes[ 1 ].tagName.toLowerCase() ).to.equal( 'b' );
- expect( domP.childNodes[ 1 ].childNodes.length ).to.equal( 1 );
- expect( domP.childNodes[ 1 ].childNodes[ 0 ].data ).to.equal( INLINE_FILLER );
- // Step 2: Add text node.
- const viewText = new ViewText( 'x' );
- viewB.appendChildren( viewText );
- selection.removeAllRanges();
- selection.addRange( ViewRange.createFromParentsAndOffsets( viewText, 1, viewText, 1 ) );
- renderer.markToSync( 'children', viewB );
- renderer.render();
- // Step 3: Remove selection from the view.
- selection.removeAllRanges();
- renderer.render();
- expect( domP.childNodes.length ).to.equal( 2 );
- expect( domP.childNodes[ 0 ].data ).to.equal( 'foo' );
- expect( domP.childNodes[ 1 ].tagName.toLowerCase() ).to.equal( 'b' );
- expect( domP.childNodes[ 1 ].childNodes.length ).to.equal( 1 );
- expect( domP.childNodes[ 1 ].childNodes[ 0 ].data ).to.equal( 'x' );
- } );
- it( 'should handle typing in empty block, do nothing if changes are already applied', () => {
- const domSelection = document.getSelection();
- const { view: viewP, selection: newSelection } = parse( '<container:p>[]</container:p>' );
- viewRoot.appendChildren( viewP );
- selection.setTo( newSelection );
- renderer.markToSync( 'children', viewRoot );
- renderer.render();
- const domP = domRoot.childNodes[ 0 ];
- expect( domP.childNodes.length ).to.equal( 1 );
- expect( isBlockFiller( domP.childNodes[ 0 ], BR_FILLER ) ).to.be.true;
- expect( domSelection.rangeCount ).to.equal( 1 );
- expect( domSelection.getRangeAt( 0 ).startContainer ).to.equal( domP );
- expect( domSelection.getRangeAt( 0 ).startOffset ).to.equal( 0 );
- expect( domSelection.getRangeAt( 0 ).collapsed ).to.be.true;
- // Remove filler and add text node to both DOM and View <p>x{}</p>
- domP.removeChild( domP.childNodes[ 0 ] );
- domP.appendChild( document.createTextNode( 'x' ) );
- domSelection.removeAllRanges();
- const domRange = new Range();
- domRange.setStart( domP.childNodes[ 0 ], 1 );
- domRange.collapse( true );
- domSelection.addRange( domRange );
- const viewText = new ViewText( 'x' );
- viewP.appendChildren( viewText );
- selection.removeAllRanges();
- selection.addRange( ViewRange.createFromParentsAndOffsets( viewText, 1, viewText, 1 ) );
- renderer.markToSync( 'children', viewP );
- renderAndExpectNoChanges( renderer, domRoot );
- } );
- it( 'should handle typing in empty block, render if needed', () => {
- const domSelection = document.getSelection();
- const { view: viewP, selection: newSelection } = parse( '<container:p>[]</container:p>' );
- viewRoot.appendChildren( viewP );
- selection.setTo( newSelection );
- renderer.markToSync( 'children', viewRoot );
- renderer.render();
- const domP = domRoot.childNodes[ 0 ];
- expect( domP.childNodes.length ).to.equal( 1 );
- expect( isBlockFiller( domP.childNodes[ 0 ], BR_FILLER ) ).to.be.true;
- expect( domSelection.rangeCount ).to.equal( 1 );
- expect( domSelection.getRangeAt( 0 ).startContainer ).to.equal( domP );
- expect( domSelection.getRangeAt( 0 ).startOffset ).to.equal( 0 );
- expect( domSelection.getRangeAt( 0 ).collapsed ).to.be.true;
- // Add text node only in View <p>x{}</p>
- const viewText = new ViewText( 'x' );
- viewP.appendChildren( viewText );
- selection.removeAllRanges();
- selection.addRange( ViewRange.createFromParentsAndOffsets( viewText, 1, viewText, 1 ) );
- renderer.markToSync( 'children', viewP );
- renderer.render();
- expect( domP.childNodes.length ).to.equal( 1 );
- expect( domP.childNodes[ 0 ].data ).to.equal( 'x' );
- expect( domSelection.rangeCount ).to.equal( 1 );
- expect( domSelection.getRangeAt( 0 ).startContainer ).to.equal( domP.childNodes[ 0 ] );
- expect( domSelection.getRangeAt( 0 ).startOffset ).to.equal( 1 );
- expect( domSelection.getRangeAt( 0 ).collapsed ).to.be.true;
- } );
- it( 'should handle removing last character', () => {
- const domSelection = document.getSelection();
- const { view: viewP, selection: newSelection } = parse( '<container:p>x{}</container:p>' );
- viewRoot.appendChildren( viewP );
- selection.setTo( newSelection );
- renderer.markToSync( 'children', viewRoot );
- renderer.render();
- const domP = domRoot.childNodes[ 0 ];
- expect( domP.childNodes.length ).to.equal( 1 );
- expect( domP.childNodes[ 0 ].data ).to.equal( 'x' );
- expect( domSelection.rangeCount ).to.equal( 1 );
- expect( domSelection.getRangeAt( 0 ).startContainer ).to.equal( domP.childNodes[ 0 ] );
- expect( domSelection.getRangeAt( 0 ).startOffset ).to.equal( 1 );
- expect( domSelection.getRangeAt( 0 ).collapsed ).to.be.true;
- // Remove text and add filler to both DOM and View <p>{}</p>
- domP.removeChild( domP.childNodes[ 0 ] );
- domP.appendChild( BR_FILLER( document ) );
- domSelection.removeAllRanges();
- const domRange = new Range();
- domRange.setStart( domP.childNodes[ 0 ], 0 );
- domRange.collapse( true );
- domSelection.addRange( domRange );
- viewP.removeChildren( 0 );
- selection.removeAllRanges();
- selection.addRange( ViewRange.createFromParentsAndOffsets( viewP, 0, viewP, 0 ) );
- renderer.markToSync( 'children', viewP );
- renderAndExpectNoChanges( renderer, domRoot );
- } );
- it( 'should handle typing in empty attribute, do nothing if changes are already applied', () => {
- const domSelection = document.getSelection();
- const { view: viewP, selection: newSelection } = parse(
- '<container:p><attribute:b>[]</attribute:b>foo</container:p>' );
- viewRoot.appendChildren( viewP );
- selection.setTo( newSelection );
- renderer.markToSync( 'children', viewRoot );
- renderer.render();
- const domP = domRoot.childNodes[ 0 ];
- expect( domP.childNodes.length ).to.equal( 2 );
- expect( domP.childNodes[ 0 ].tagName.toLowerCase() ).to.equal( 'b' );
- expect( domP.childNodes[ 1 ].data ).to.equal( 'foo' );
- const domB = domP.childNodes[ 0 ];
- const viewB = viewP.getChild( 0 );
- expect( domB.childNodes.length ).to.equal( 1 );
- expect( domB.childNodes[ 0 ].data ).to.equal( INLINE_FILLER );
- expect( domSelection.rangeCount ).to.equal( 1 );
- expect( domSelection.getRangeAt( 0 ).startContainer ).to.equal( domB.childNodes[ 0 ] );
- expect( domSelection.getRangeAt( 0 ).startOffset ).to.equal( INLINE_FILLER_LENGTH );
- expect( domSelection.getRangeAt( 0 ).collapsed ).to.be.true;
- // Add text node to both DOM and View <p><b>x</b>foo</p>
- domB.childNodes[ 0 ].data += 'x';
- domSelection.removeAllRanges();
- const domRange = new Range();
- domRange.setStart( domB.childNodes[ 0 ], INLINE_FILLER_LENGTH + 1 );
- domRange.collapse( true );
- domSelection.addRange( domRange );
- const viewText = new ViewText( 'x' );
- viewB.appendChildren( viewText );
- selection.removeAllRanges();
- selection.addRange( ViewRange.createFromParentsAndOffsets( viewText, 1, viewText, 1 ) );
- renderer.markToSync( 'children', viewP );
- renderAndExpectNoChanges( renderer, domRoot );
- } );
- it( 'should handle typing in empty attribute as a children change, render if needed', () => {
- const domSelection = document.getSelection();
- const { view: viewP, selection: newSelection } = parse(
- '<container:p><attribute:b>[]</attribute:b>foo</container:p>' );
- viewRoot.appendChildren( viewP );
- selection.setTo( newSelection );
- renderer.markToSync( 'children', viewRoot );
- renderer.render();
- const domP = domRoot.childNodes[ 0 ];
- expect( domP.childNodes.length ).to.equal( 2 );
- expect( domP.childNodes[ 0 ].tagName.toLowerCase() ).to.equal( 'b' );
- expect( domP.childNodes[ 1 ].data ).to.equal( 'foo' );
- const domB = domP.childNodes[ 0 ];
- const viewB = viewP.getChild( 0 );
- expect( domB.childNodes.length ).to.equal( 1 );
- expect( domB.childNodes[ 0 ].data ).to.equal( INLINE_FILLER );
- expect( domSelection.rangeCount ).to.equal( 1 );
- expect( domSelection.getRangeAt( 0 ).startContainer ).to.equal( domB.childNodes[ 0 ] );
- expect( domSelection.getRangeAt( 0 ).startOffset ).to.equal( INLINE_FILLER_LENGTH );
- expect( domSelection.getRangeAt( 0 ).collapsed ).to.be.true;
- // Add text node only to View <p><b>x</b>foo</p>
- const viewText = new ViewText( 'x' );
- viewB.appendChildren( viewText );
- selection.removeAllRanges();
- selection.addRange( ViewRange.createFromParentsAndOffsets( viewText, 1, viewText, 1 ) );
- renderer.markToSync( 'children', viewB );
- renderer.render();
- expect( domB.childNodes.length ).to.equal( 1 );
- expect( domB.childNodes[ 0 ].data ).to.equal( INLINE_FILLER + 'x' );
- expect( domSelection.rangeCount ).to.equal( 1 );
- expect( domSelection.getRangeAt( 0 ).startContainer ).to.equal( domB.childNodes[ 0 ] );
- expect( domSelection.getRangeAt( 0 ).startOffset ).to.equal( INLINE_FILLER_LENGTH + 1 );
- expect( domSelection.getRangeAt( 0 ).collapsed ).to.be.true;
- } );
- it( 'should handle typing in empty attribute as a text change, render if needed', () => {
- const domSelection = document.getSelection();
- const { view: viewP, selection: newSelection } = parse(
- '<container:p><attribute:b>[]</attribute:b>foo</container:p>' );
- viewRoot.appendChildren( viewP );
- selection.setTo( newSelection );
- renderer.markToSync( 'children', viewRoot );
- renderer.render();
- const domP = domRoot.childNodes[ 0 ];
- expect( domP.childNodes.length ).to.equal( 2 );
- expect( domP.childNodes[ 0 ].tagName.toLowerCase() ).to.equal( 'b' );
- expect( domP.childNodes[ 1 ].data ).to.equal( 'foo' );
- const domB = domP.childNodes[ 0 ];
- const viewB = viewP.getChild( 0 );
- expect( domB.childNodes.length ).to.equal( 1 );
- expect( domB.childNodes[ 0 ].data ).to.equal( INLINE_FILLER );
- expect( domSelection.rangeCount ).to.equal( 1 );
- expect( domSelection.getRangeAt( 0 ).startContainer ).to.equal( domB.childNodes[ 0 ] );
- expect( domSelection.getRangeAt( 0 ).startOffset ).to.equal( INLINE_FILLER_LENGTH );
- expect( domSelection.getRangeAt( 0 ).collapsed ).to.be.true;
- // Add text node only to View <p><b>x</b>foo</p>
- const viewText = new ViewText( 'x' );
- viewB.appendChildren( viewText );
- selection.removeAllRanges();
- selection.addRange( ViewRange.createFromParentsAndOffsets( viewText, 1, viewText, 1 ) );
- renderer.markToSync( 'text', viewText );
- renderer.render();
- expect( domB.childNodes.length ).to.equal( 1 );
- expect( domB.childNodes[ 0 ].data ).to.equal( INLINE_FILLER + 'x' );
- expect( domSelection.rangeCount ).to.equal( 1 );
- expect( domSelection.getRangeAt( 0 ).startContainer ).to.equal( domB.childNodes[ 0 ] );
- expect( domSelection.getRangeAt( 0 ).startOffset ).to.equal( INLINE_FILLER_LENGTH + 1 );
- expect( domSelection.getRangeAt( 0 ).collapsed ).to.be.true;
- } );
- it( 'should handle not collapsed range', () => {
- const domSelection = document.getSelection();
- const { view: viewP, selection: newSelection } = parse(
- '<container:p>fo{o<attribute:b>b}ar</attribute:b></container:p>' );
- viewRoot.appendChildren( viewP );
- selection.setTo( newSelection );
- renderer.markToSync( 'children', viewRoot );
- renderer.render();
- const domP = domRoot.childNodes[ 0 ];
- expect( domP.childNodes.length ).to.equal( 2 );
- expect( domP.childNodes[ 0 ].data ).to.equal( 'foo' );
- expect( domP.childNodes[ 1 ].tagName.toLowerCase() ).to.equal( 'b' );
- expect( domP.childNodes[ 1 ].childNodes.length ).to.equal( 1 );
- expect( domP.childNodes[ 1 ].childNodes[ 0 ].data ).to.equal( 'bar' );
- expect( domSelection.rangeCount ).to.equal( 1 );
- expect( domSelection.getRangeAt( 0 ).startContainer ).to.equal( domP.childNodes[ 0 ] );
- expect( domSelection.getRangeAt( 0 ).startOffset ).to.equal( 2 );
- expect( domSelection.getRangeAt( 0 ).endContainer ).to.equal( domP.childNodes[ 1 ].childNodes[ 0 ] );
- expect( domSelection.getRangeAt( 0 ).endOffset ).to.equal( 1 );
- renderer.markToSync( 'children', viewP );
- renderAndExpectNoChanges( renderer, domRoot );
- } );
- it( 'should not change selection if there is no editable with selection', () => {
- const domDiv = createElement( document, 'div', null, 'not editable' );
- document.body.appendChild( domDiv );
- const domSelection = document.getSelection();
- domSelection.removeAllRanges();
- const domRange = new Range();
- domRange.setStart( domDiv, 0 );
- domRange.collapse( true );
- domSelection.addRange( domRange );
- selectionEditable = null;
- const { view: viewP, selection: newSelection } = parse( '<container:p>fo{o}</container:p>' );
- viewRoot.appendChildren( viewP );
- selection.setTo( newSelection );
- renderer.render();
- expect( domSelection.rangeCount ).to.equal( 1 );
- expect( domSelection.getRangeAt( 0 ).startContainer ).to.equal( domDiv );
- expect( domSelection.getRangeAt( 0 ).startOffset ).to.equal( 0 );
- expect( domSelection.getRangeAt( 0 ).collapsed ).to.equal( true );
- } );
- it( 'should not change selection if there is no focus', () => {
- const domDiv = createElement( document, 'div', null, 'not editable' );
- document.body.appendChild( domDiv );
- const domSelection = document.getSelection();
- domSelection.removeAllRanges();
- const domRange = new Range();
- domRange.setStart( domDiv, 0 );
- domRange.collapse( true );
- domSelection.addRange( domRange );
- renderer.isFocused = false;
- const { view: viewP, selection: newSelection } = parse( '<container:p>fo{o}</container:p>' );
- viewRoot.appendChildren( viewP );
- selection.setTo( newSelection );
- renderer.render();
- expect( domSelection.rangeCount ).to.equal( 1 );
- expect( domSelection.getRangeAt( 0 ).startContainer ).to.equal( domDiv );
- expect( domSelection.getRangeAt( 0 ).startOffset ).to.equal( 0 );
- expect( domSelection.getRangeAt( 0 ).collapsed ).to.equal( true );
- } );
- it( 'should not add inline filler after text node', () => {
- const { view: viewP, selection: newSelection } = parse( '<container:p>foo[]</container:p>' );
- viewRoot.appendChildren( viewP );
- selection.setTo( newSelection );
- renderer.markToSync( 'children', viewRoot );
- renderer.render();
- const domP = domRoot.childNodes[ 0 ];
- expect( domP.innerHTML.indexOf( INLINE_FILLER ) ).to.equal( -1 );
- } );
- it( 'should throw if there is no filler in expected position', () => {
- const { view: viewP, selection: newSelection } = parse(
- '<container:p>foo<attribute:b>[]</attribute:b>bar</container:p>' );
- viewRoot.appendChildren( viewP );
- selection.setTo( newSelection );
- renderer.markToSync( 'children', viewRoot );
- renderer.render();
- const domB = domRoot.childNodes[ 0 ].childNodes[ 1 ];
- const viewB = viewP.getChild( 1 );
- expect( domB.childNodes[ 0 ].data ).to.equal( INLINE_FILLER );
- // Remove filler.
- domB.childNodes[ 0 ].data = '';
- selection.removeAllRanges();
- renderer.markToSync( 'children', viewB );
- expect( () => {
- renderer.render();
- } ).to.throw();
- } );
- it( 'should handle focusing element', () => {
- const domFocusSpy = testUtils.sinon.spy( domRoot, 'focus' );
- const editable = selection.editableElement;
- renderer.render();
- expect( editable ).to.equal( viewRoot );
- expect( domFocusSpy.calledOnce ).to.be.true;
- } );
- it( 'should not focus editable if isFocues is set to false', () => {
- const domFocusSpy = testUtils.sinon.spy( domRoot, 'focus' );
- renderer.isFocused = false;
- renderer.render();
- expect( domFocusSpy.calledOnce ).to.be.false;
- } );
- it( 'should not focus already focused DOM element', () => {
- domRoot.setAttribute( 'contentEditable', true );
- domRoot.focus();
- const domFocusSpy = testUtils.sinon.spy( domRoot, 'focus' );
- renderer.render();
- expect( domFocusSpy.called ).to.be.false;
- } );
- describe( 'fake selection', () => {
- beforeEach( () => {
- const { view: viewP, selection: newSelection } = parse(
- '<container:p>[foo bar]</container:p>'
- );
- viewRoot.appendChildren( viewP );
- selection.setTo( newSelection );
- renderer.markToSync( 'children', viewRoot );
- renderer.render();
- } );
- it( 'should render fake selection', () => {
- const label = 'fake selection label';
- selection.setFake( true, { label } );
- renderer.render();
- expect( domRoot.childNodes.length ).to.equal( 2 );
- const container = domRoot.childNodes[ 1 ];
- expect( domConverter.getCorrespondingViewElement( container ) ).to.be.undefined;
- expect( container.childNodes.length ).to.equal( 1 );
- const textNode = container.childNodes[ 0 ];
- expect( textNode.textContent ).to.equal( label );
- const domSelection = domRoot.ownerDocument.getSelection();
- expect( domSelection.anchorNode ).to.equal( textNode );
- expect( domSelection.anchorOffset ).to.equal( 0 );
- expect( domSelection.focusNode ).to.equal( textNode );
- expect( domSelection.focusOffset ).to.equal( label.length );
- } );
- it( 'should render if no selection label is provided', () => {
- selection.setFake( true );
- renderer.render();
- expect( domRoot.childNodes.length ).to.equal( 2 );
- const container = domRoot.childNodes[ 1 ];
- expect( container.childNodes.length ).to.equal( 1 );
- const textNode = container.childNodes[ 0 ];
- expect( container.innerHTML ).to.equal( ' ' );
- const domSelection = domRoot.ownerDocument.getSelection();
- expect( domSelection.anchorNode ).to.equal( textNode );
- expect( domSelection.anchorOffset ).to.equal( 0 );
- expect( domSelection.focusNode ).to.equal( textNode );
- expect( domSelection.focusOffset ).to.equal( 1 );
- } );
- it( 'should remove fake selection container when selection is no longer fake', () => {
- selection.setFake( true );
- renderer.render();
- selection.setFake( false );
- renderer.render();
- expect( domRoot.childNodes.length ).to.equal( 1 );
- const domParagraph = domRoot.childNodes[ 0 ];
- expect( domParagraph.childNodes.length ).to.equal( 1 );
- const textNode = domParagraph.childNodes[ 0 ];
- expect( domParagraph.tagName.toLowerCase() ).to.equal( 'p' );
- const domSelection = domRoot.ownerDocument.getSelection();
- expect( domSelection.anchorNode ).to.equal( textNode );
- expect( domSelection.anchorOffset ).to.equal( 0 );
- expect( domSelection.focusNode ).to.equal( textNode );
- expect( domSelection.focusOffset ).to.equal( 7 );
- } );
- it( 'should reuse fake selection container #1', () => {
- const label = 'fake selection label';
- selection.setFake( true, { label } );
- renderer.render();
- expect( domRoot.childNodes.length ).to.equal( 2 );
- const container = domRoot.childNodes[ 1 ];
- selection.setFake( true, { label } );
- renderer.render();
- expect( domRoot.childNodes.length ).to.equal( 2 );
- const newContainer = domRoot.childNodes[ 1 ];
- expect( newContainer ).equals( container );
- expect( newContainer.innerText ).to.equal( label );
- } );
- it( 'should reuse fake selection container #2', () => {
- selection.setFake( true, { label: 'label 1' } );
- renderer.render();
- expect( domRoot.childNodes.length ).to.equal( 2 );
- const container = domRoot.childNodes[ 1 ];
- selection.setFake( false );
- renderer.render();
- expect( domRoot.childNodes.length ).to.equal( 1 );
- selection.setFake( true, { label: 'label 2' } );
- renderer.render();
- expect( domRoot.childNodes.length ).to.equal( 2 );
- const newContainer = domRoot.childNodes[ 1 ];
- expect( newContainer ).equals( container );
- expect( newContainer.innerText ).to.equal( 'label 2' );
- } );
- } );
- } );
- } );
- function renderAndExpectNoChanges( renderer, domRoot ) {
- const config = {
- childList: true,
- characterData: true,
- characterDataOldValue: true,
- subtree: true
- };
- const mutationObserver = new window.MutationObserver( () => {
- throw 'There should be not mutations';
- } );
- mutationObserver.observe( domRoot, config );
- renderer.render();
- const records = mutationObserver.takeRecords();
- mutationObserver.disconnect();
- expect( records.length ).to.equal( 0 );
- }
|