| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335 |
- /**
- * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
- import { toWidget, toWidgetEditable } from '../src/utils';
- import Table from '@ckeditor/ckeditor5-table/src/table';
- import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
- import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor';
- import Image from '@ckeditor/ckeditor5-image/src/image';
- import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption';
- import HorizontalLine from '@ckeditor/ckeditor5-horizontal-line/src/horizontalline';
- import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote';
- import { getCode } from '@ckeditor/ckeditor5-utils/src/keyboard';
- import { getData as getModelData, setData as setModelData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
- import { assertEqualMarkup } from '@ckeditor/ckeditor5-utils/tests/_utils/utils';
- import global from '@ckeditor/ckeditor5-utils/src/dom/global';
- import env from '@ckeditor/ckeditor5-utils/src/env';
- describe( 'Widget - vertical keyboard navigation near widgets', () => {
- let editorElement, editor, model;
- let leftArrowDomEvtDataStub, rightArrowDomEvtDataStub, upArrowDomEvtDataStub, downArrowDomEvtDataStub;
- const imageUrl = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAUCAQAAADRyVAeAAAAKklEQVR42u3PAQ0AAAwCI' +
- 'O0f+u/hoAHNZUJFRERERERERERERERERLYiD9N4FAFj2iK6AAAAAElFTkSuQmCC';
- beforeEach( async () => {
- editorElement = global.document.createElement( 'div' );
- global.document.body.appendChild( editorElement );
- editor = await ClassicTestEditor.create( editorElement, {
- plugins: [ Table, Paragraph, Image, ImageCaption, HorizontalLine, BlockQuote, BlockWidgetWithNestedEditable ]
- } );
- model = editor.model;
- // The editing view must be focused because otherwise in Chrome the DOM selection will not contain
- // any ranges and jumpOverUiElement will crash (for the right arrow when shift is pressed).
- editor.editing.view.focus();
- leftArrowDomEvtDataStub = {
- keyCode: getCode( 'ArrowLeft' ),
- preventDefault: sinon.spy(),
- stopPropagation: sinon.spy(),
- domTarget: global.document.body
- };
- rightArrowDomEvtDataStub = {
- keyCode: getCode( 'ArrowRight' ),
- preventDefault: sinon.spy(),
- stopPropagation: sinon.spy(),
- domTarget: global.document.body
- };
- upArrowDomEvtDataStub = {
- keyCode: getCode( 'ArrowUp' ),
- preventDefault: sinon.spy(),
- stopPropagation: sinon.spy(),
- domTarget: global.document.body
- };
- downArrowDomEvtDataStub = {
- keyCode: getCode( 'ArrowDown' ),
- preventDefault: sinon.spy(),
- stopPropagation: sinon.spy(),
- domTarget: global.document.body
- };
- } );
- afterEach( async () => {
- editorElement.remove();
- await editor.destroy();
- } );
- it( 'should do nothing if pressed left-arrow key', () => {
- setModelData( model,
- '<paragraph>foo</paragraph>' +
- '<paragraph>b[]ar</paragraph>' +
- '<paragraph>abc</paragraph>'
- );
- editor.editing.view.document.fire( 'keydown', leftArrowDomEvtDataStub );
- sinon.assert.notCalled( leftArrowDomEvtDataStub.preventDefault );
- sinon.assert.notCalled( leftArrowDomEvtDataStub.stopPropagation );
- assertEqualMarkup(
- getModelData( model ),
- '<paragraph>foo</paragraph>' +
- '<paragraph>b[]ar</paragraph>' +
- '<paragraph>abc</paragraph>'
- );
- } );
- it( 'should do nothing if pressed right-arrow key', () => {
- setModelData( model,
- '<paragraph>foo</paragraph>' +
- '<paragraph>b[]ar</paragraph>' +
- '<paragraph>abc</paragraph>'
- );
- editor.editing.view.document.fire( 'keydown', rightArrowDomEvtDataStub );
- sinon.assert.notCalled( rightArrowDomEvtDataStub.preventDefault );
- sinon.assert.notCalled( rightArrowDomEvtDataStub.stopPropagation );
- assertEqualMarkup(
- getModelData( model ),
- '<paragraph>foo</paragraph>' +
- '<paragraph>b[]ar</paragraph>' +
- '<paragraph>abc</paragraph>'
- );
- } );
- it( 'should do nothing if shrinking non-collapsed forward selection', () => {
- setModelData( model, '<paragraph>fo[ob]ar</paragraph>' );
- upArrowDomEvtDataStub.shiftKey = true;
- editor.editing.view.document.fire( 'keydown', upArrowDomEvtDataStub );
- sinon.assert.notCalled( upArrowDomEvtDataStub.preventDefault );
- sinon.assert.notCalled( upArrowDomEvtDataStub.stopPropagation );
- } );
- it( 'should do nothing if shrinking non-collapsed backward selection', () => {
- setModelData( model, '<paragraph>fo[ob]ar</paragraph>', { lastRangeBackward: true } );
- downArrowDomEvtDataStub.shiftKey = true;
- editor.editing.view.document.fire( 'keydown', downArrowDomEvtDataStub );
- sinon.assert.notCalled( downArrowDomEvtDataStub.preventDefault );
- sinon.assert.notCalled( downArrowDomEvtDataStub.stopPropagation );
- } );
- describe( 'with selection inside root content editable', () => {
- let styleElement;
- beforeEach( () => {
- styleElement = global.document.createElement( 'style' );
- styleElement.type = 'text/css';
- styleElement.appendChild( global.document.createTextNode(
- `
- * {
- font-size: 12px !important;
- font-family: serif !important;
- margin: 0 !important;
- padding: 0 !important;
- border: 0 !important
- }
- .ck-editor__editable:not(.ck-editor__nested-editable ) {
- width: 300px !important;
- }
- td { width: 30px !important; }
- tr:nth-child(2) td:nth-child(2) { width: 300px !important; }
- `
- ) );
- global.document.querySelector( 'head' ).appendChild( styleElement );
- } );
- afterEach( () => {
- styleElement.remove();
- } );
- describe( 'single paragraph surrounded with objects', () => {
- describe( 'collapsed selection', () => {
- beforeEach( () => {
- setModelData( model,
- '<horizontalLine></horizontalLine>' +
- '<paragraph>foo[]bar</paragraph>' +
- '<horizontalLine></horizontalLine>'
- );
- } );
- it( 'should move caret to the position closest to object (navigating forward)', () => {
- editor.editing.view.document.fire( 'keydown', downArrowDomEvtDataStub );
- sinon.assert.calledOnce( downArrowDomEvtDataStub.preventDefault );
- sinon.assert.calledOnce( downArrowDomEvtDataStub.stopPropagation );
- assertEqualMarkup( getModelData( model ),
- '<horizontalLine></horizontalLine>' +
- '<paragraph>foobar[]</paragraph>' +
- '<horizontalLine></horizontalLine>'
- );
- } );
- it( 'should move caret to the position closest to object (navigating backward)', () => {
- editor.editing.view.document.fire( 'keydown', upArrowDomEvtDataStub );
- sinon.assert.calledOnce( upArrowDomEvtDataStub.preventDefault );
- sinon.assert.calledOnce( upArrowDomEvtDataStub.stopPropagation );
- assertEqualMarkup( getModelData( model ),
- '<horizontalLine></horizontalLine>' +
- '<paragraph>[]foobar</paragraph>' +
- '<horizontalLine></horizontalLine>'
- );
- } );
- } );
- describe( 'non-collapsed forward selection', () => {
- beforeEach( () => {
- setModelData( model,
- '<horizontalLine></horizontalLine>' +
- '<paragraph>fo[ob]ar</paragraph>' +
- '<horizontalLine></horizontalLine>'
- );
- } );
- it( 'should move caret to the position closest to object (navigating forward)', () => {
- editor.editing.view.document.fire( 'keydown', downArrowDomEvtDataStub );
- sinon.assert.calledOnce( downArrowDomEvtDataStub.preventDefault );
- sinon.assert.calledOnce( downArrowDomEvtDataStub.stopPropagation );
- assertEqualMarkup( getModelData( model ),
- '<horizontalLine></horizontalLine>' +
- '<paragraph>foobar[]</paragraph>' +
- '<horizontalLine></horizontalLine>'
- );
- } );
- it( 'should move caret to the position closest to object (navigating backward)', () => {
- editor.editing.view.document.fire( 'keydown', upArrowDomEvtDataStub );
- sinon.assert.calledOnce( upArrowDomEvtDataStub.preventDefault );
- sinon.assert.calledOnce( upArrowDomEvtDataStub.stopPropagation );
- assertEqualMarkup( getModelData( model ),
- '<horizontalLine></horizontalLine>' +
- '<paragraph>[]foobar</paragraph>' +
- '<horizontalLine></horizontalLine>'
- );
- } );
- describe( 'with shift pressed', () => {
- it( 'should expand the selection to the position closest to object (navigating forward)', () => {
- downArrowDomEvtDataStub.shiftKey = true;
- editor.editing.view.document.fire( 'keydown', downArrowDomEvtDataStub );
- sinon.assert.calledOnce( downArrowDomEvtDataStub.preventDefault );
- sinon.assert.calledOnce( downArrowDomEvtDataStub.stopPropagation );
- assertEqualMarkup( getModelData( model ),
- '<horizontalLine></horizontalLine>' +
- '<paragraph>fo[obar]</paragraph>' +
- '<horizontalLine></horizontalLine>'
- );
- } );
- it( 'should not prevent default browser behavior while navigating backward', () => {
- upArrowDomEvtDataStub.shiftKey = true;
- editor.editing.view.document.fire( 'keydown', upArrowDomEvtDataStub );
- sinon.assert.notCalled( upArrowDomEvtDataStub.preventDefault );
- sinon.assert.notCalled( upArrowDomEvtDataStub.stopPropagation );
- } );
- } );
- } );
- describe( 'non-collapsed backward selection', () => {
- beforeEach( () => {
- setModelData( model,
- '<horizontalLine></horizontalLine>' +
- '<paragraph>fo[ob]ar</paragraph>' +
- '<horizontalLine></horizontalLine>',
- { lastRangeBackward: true }
- );
- } );
- it( 'should move caret to the position closest to object (navigating forward)', () => {
- editor.editing.view.document.fire( 'keydown', downArrowDomEvtDataStub );
- sinon.assert.calledOnce( downArrowDomEvtDataStub.preventDefault );
- sinon.assert.calledOnce( downArrowDomEvtDataStub.stopPropagation );
- assertEqualMarkup( getModelData( model ),
- '<horizontalLine></horizontalLine>' +
- '<paragraph>foobar[]</paragraph>' +
- '<horizontalLine></horizontalLine>'
- );
- } );
- it( 'should move caret to the position closest to object (navigating backward)', () => {
- editor.editing.view.document.fire( 'keydown', upArrowDomEvtDataStub );
- sinon.assert.calledOnce( upArrowDomEvtDataStub.preventDefault );
- sinon.assert.calledOnce( upArrowDomEvtDataStub.stopPropagation );
- assertEqualMarkup( getModelData( model ),
- '<horizontalLine></horizontalLine>' +
- '<paragraph>[]foobar</paragraph>' +
- '<horizontalLine></horizontalLine>'
- );
- } );
- describe( 'with shift pressed', () => {
- it( 'should not prevent default browser behavior while navigating forward', () => {
- downArrowDomEvtDataStub.shiftKey = true;
- editor.editing.view.document.fire( 'keydown', downArrowDomEvtDataStub );
- sinon.assert.notCalled( downArrowDomEvtDataStub.preventDefault );
- sinon.assert.notCalled( downArrowDomEvtDataStub.stopPropagation );
- } );
- it( 'should expand the selection to the position closest to object (navigating backward)', () => {
- upArrowDomEvtDataStub.shiftKey = true;
- editor.editing.view.document.fire( 'keydown', upArrowDomEvtDataStub );
- sinon.assert.calledOnce( upArrowDomEvtDataStub.preventDefault );
- sinon.assert.calledOnce( upArrowDomEvtDataStub.stopPropagation );
- assertEqualMarkup( getModelData( model ),
- '<horizontalLine></horizontalLine>' +
- '<paragraph>[foob]ar</paragraph>' +
- '<horizontalLine></horizontalLine>'
- );
- } );
- } );
- } );
- } );
- describe( 'multiple paragraphs with object inside', () => {
- describe( 'caret in the first paragraph', () => {
- beforeEach( () => {
- setModelData( model,
- '<paragraph>fo[]oo</paragraph>' +
- '<paragraph>bar</paragraph>' +
- '<horizontalLine></horizontalLine>' +
- '<paragraph>FOO</paragraph>' +
- '<paragraph>BAR</paragraph>'
- );
- } );
- it( 'should not prevent default on forward navigation', () => {
- editor.editing.view.document.fire( 'keydown', downArrowDomEvtDataStub );
- sinon.assert.notCalled( downArrowDomEvtDataStub.preventDefault );
- sinon.assert.notCalled( downArrowDomEvtDataStub.stopPropagation );
- } );
- it( 'should not prevent default on backward navigation', () => {
- editor.editing.view.document.fire( 'keydown', upArrowDomEvtDataStub );
- sinon.assert.notCalled( upArrowDomEvtDataStub.preventDefault );
- sinon.assert.notCalled( upArrowDomEvtDataStub.stopPropagation );
- } );
- } );
- describe( 'caret in the second paragraph', () => {
- beforeEach( () => {
- setModelData( model,
- '<paragraph>foo</paragraph>' +
- '<paragraph>ba[]ar</paragraph>' +
- '<horizontalLine></horizontalLine>' +
- '<paragraph>FOO</paragraph>' +
- '<paragraph>BAR</paragraph>'
- );
- } );
- it( 'should move caret to the position closest to object on forward navigation', () => {
- editor.editing.view.document.fire( 'keydown', downArrowDomEvtDataStub );
- sinon.assert.calledOnce( downArrowDomEvtDataStub.preventDefault );
- sinon.assert.calledOnce( downArrowDomEvtDataStub.stopPropagation );
- assertEqualMarkup( getModelData( model ),
- '<paragraph>foo</paragraph>' +
- '<paragraph>baar[]</paragraph>' +
- '<horizontalLine></horizontalLine>' +
- '<paragraph>FOO</paragraph>' +
- '<paragraph>BAR</paragraph>'
- );
- } );
- it( 'should not prevent default on backward navigation', () => {
- editor.editing.view.document.fire( 'keydown', upArrowDomEvtDataStub );
- sinon.assert.notCalled( upArrowDomEvtDataStub.preventDefault );
- sinon.assert.notCalled( upArrowDomEvtDataStub.stopPropagation );
- } );
- } );
- describe( 'caret in the third paragraph', () => {
- beforeEach( () => {
- setModelData( model,
- '<paragraph>foo</paragraph>' +
- '<paragraph>bar</paragraph>' +
- '<horizontalLine></horizontalLine>' +
- '<paragraph>FO[]OO</paragraph>' +
- '<paragraph>BAR</paragraph>'
- );
- } );
- it( 'should not prevent default on forward navigation', () => {
- editor.editing.view.document.fire( 'keydown', downArrowDomEvtDataStub );
- sinon.assert.notCalled( downArrowDomEvtDataStub.preventDefault );
- sinon.assert.notCalled( downArrowDomEvtDataStub.stopPropagation );
- } );
- it( 'should move caret to the position closest to object on backward navigation', () => {
- editor.editing.view.document.fire( 'keydown', upArrowDomEvtDataStub );
- sinon.assert.calledOnce( upArrowDomEvtDataStub.preventDefault );
- sinon.assert.calledOnce( upArrowDomEvtDataStub.stopPropagation );
- assertEqualMarkup( getModelData( model ),
- '<paragraph>foo</paragraph>' +
- '<paragraph>bar</paragraph>' +
- '<horizontalLine></horizontalLine>' +
- '<paragraph>[]FOOO</paragraph>' +
- '<paragraph>BAR</paragraph>'
- );
- } );
- } );
- describe( 'caret in the forth paragraph', () => {
- beforeEach( () => {
- setModelData( model,
- '<paragraph>foo</paragraph>' +
- '<paragraph>bar</paragraph>' +
- '<horizontalLine></horizontalLine>' +
- '<paragraph>FOO</paragraph>' +
- '<paragraph>BA[]AR</paragraph>'
- );
- } );
- it( 'should not prevent default on backward navigation', () => {
- editor.editing.view.document.fire( 'keydown', upArrowDomEvtDataStub );
- sinon.assert.notCalled( upArrowDomEvtDataStub.preventDefault );
- sinon.assert.notCalled( upArrowDomEvtDataStub.stopPropagation );
- } );
- it( 'should not prevent default on forward navigation', () => {
- editor.editing.view.document.fire( 'keydown', downArrowDomEvtDataStub );
- sinon.assert.notCalled( downArrowDomEvtDataStub.preventDefault );
- sinon.assert.notCalled( downArrowDomEvtDataStub.stopPropagation );
- } );
- } );
- } );
- it( 'should integrate with the blockquote (forward navigation)', () => {
- setModelData( model,
- '<blockQuote>' +
- '<paragraph>f[]oo</paragraph>' +
- '</blockQuote>' +
- '<horizontalLine></horizontalLine>' +
- '<paragraph>bar</paragraph>'
- );
- editor.editing.view.document.fire( 'keydown', downArrowDomEvtDataStub );
- sinon.assert.calledOnce( downArrowDomEvtDataStub.preventDefault );
- sinon.assert.calledOnce( downArrowDomEvtDataStub.stopPropagation );
- assertEqualMarkup( getModelData( model ),
- '<blockQuote>' +
- '<paragraph>foo[]</paragraph>' +
- '</blockQuote>' +
- '<horizontalLine></horizontalLine>' +
- '<paragraph>bar</paragraph>'
- );
- } );
- it( 'should integrate with the blockquote (backward navigation)', () => {
- setModelData( model,
- '<paragraph>foo</paragraph>' +
- '<horizontalLine></horizontalLine>' +
- '<blockQuote>' +
- '<paragraph>ba[]r</paragraph>' +
- '</blockQuote>'
- );
- editor.editing.view.document.fire( 'keydown', upArrowDomEvtDataStub );
- sinon.assert.calledOnce( upArrowDomEvtDataStub.preventDefault );
- sinon.assert.calledOnce( upArrowDomEvtDataStub.stopPropagation );
- assertEqualMarkup( getModelData( model ),
- '<paragraph>foo</paragraph>' +
- '<horizontalLine></horizontalLine>' +
- '<blockQuote>' +
- '<paragraph>[]bar</paragraph>' +
- '</blockQuote>'
- );
- } );
- } );
- describe( 'with selection inside nested content editable', () => {
- let styleElement;
- beforeEach( () => {
- styleElement = global.document.createElement( 'style' );
- styleElement.type = 'text/css';
- styleElement.appendChild( global.document.createTextNode(
- `
- * {
- font-size: 12px !important;
- font-family: serif !important;
- margin: 0 !important;
- padding: 0 !important;
- border: 0 !important
- }
- .ck.ck-editor__editable { width: 300px !important; }
- `
- ) );
- global.document.querySelector( 'head' ).appendChild( styleElement );
- } );
- afterEach( () => {
- styleElement.remove();
- } );
- describe( 'simple text content', () => {
- describe( 'with collapsed selection', () => {
- beforeEach( () => {
- setModelData( model, '<widget><nested><paragraph>foo[]bar</paragraph></nested></widget>' );
- } );
- it( 'should move caret to the beginning of the nested editable content', () => {
- editor.editing.view.document.fire( 'keydown', upArrowDomEvtDataStub );
- sinon.assert.calledOnce( upArrowDomEvtDataStub.preventDefault );
- sinon.assert.calledOnce( upArrowDomEvtDataStub.stopPropagation );
- assertEqualMarkup( getModelData( model ), '<widget><nested><paragraph>[]foobar</paragraph></nested></widget>' );
- } );
- it( 'should move caret to the end of the nested editable content', () => {
- editor.editing.view.document.fire( 'keydown', downArrowDomEvtDataStub );
- sinon.assert.calledOnce( downArrowDomEvtDataStub.preventDefault );
- sinon.assert.calledOnce( downArrowDomEvtDataStub.stopPropagation );
- assertEqualMarkup( getModelData( model ), '<widget><nested><paragraph>foobar[]</paragraph></nested></widget>' );
- } );
- describe( 'when shift key is pressed', () => {
- beforeEach( () => {
- upArrowDomEvtDataStub.shiftKey = true;
- downArrowDomEvtDataStub.shiftKey = true;
- } );
- it( 'should expand selection to the beginning of the nested editable content', () => {
- editor.editing.view.document.fire( 'keydown', upArrowDomEvtDataStub );
- sinon.assert.calledOnce( upArrowDomEvtDataStub.preventDefault );
- sinon.assert.calledOnce( upArrowDomEvtDataStub.stopPropagation );
- assertEqualMarkup( getModelData( model ), '<widget><nested><paragraph>[foo]bar</paragraph></nested></widget>' );
- } );
- it( 'should expand selection to the end of the nested editable content', () => {
- editor.editing.view.document.fire( 'keydown', downArrowDomEvtDataStub );
- sinon.assert.calledOnce( downArrowDomEvtDataStub.preventDefault );
- sinon.assert.calledOnce( downArrowDomEvtDataStub.stopPropagation );
- assertEqualMarkup( getModelData( model ), '<widget><nested><paragraph>foo[bar]</paragraph></nested></widget>' );
- } );
- } );
- } );
- describe( 'with non-collapsed forward selection', () => {
- beforeEach( () => {
- setModelData( model, '<widget><nested><paragraph>fo[ob]ar</paragraph></nested></widget>' );
- } );
- it( 'should move caret to the beginning of the nested editable content', () => {
- editor.editing.view.document.fire( 'keydown', upArrowDomEvtDataStub );
- sinon.assert.calledOnce( upArrowDomEvtDataStub.preventDefault );
- sinon.assert.calledOnce( upArrowDomEvtDataStub.stopPropagation );
- assertEqualMarkup( getModelData( model ), '<widget><nested><paragraph>[]foobar</paragraph></nested></widget>' );
- } );
- it( 'should move caret to the end of the nested editable content', () => {
- editor.editing.view.document.fire( 'keydown', downArrowDomEvtDataStub );
- sinon.assert.calledOnce( downArrowDomEvtDataStub.preventDefault );
- sinon.assert.calledOnce( downArrowDomEvtDataStub.stopPropagation );
- assertEqualMarkup( getModelData( model ), '<widget><nested><paragraph>foobar[]</paragraph></nested></widget>' );
- } );
- describe( 'when shift key is pressed', () => {
- beforeEach( () => {
- upArrowDomEvtDataStub.shiftKey = true;
- downArrowDomEvtDataStub.shiftKey = true;
- } );
- it( 'should not prevent default browser behavior on arrow up press', () => {
- editor.editing.view.document.fire( 'keydown', upArrowDomEvtDataStub );
- sinon.assert.notCalled( upArrowDomEvtDataStub.preventDefault );
- sinon.assert.notCalled( upArrowDomEvtDataStub.stopPropagation );
- assertEqualMarkup( getModelData( model ), '<widget><nested><paragraph>fo[ob]ar</paragraph></nested></widget>' );
- } );
- it( 'should expand selection to the end of the nested editable content', () => {
- editor.editing.view.document.fire( 'keydown', downArrowDomEvtDataStub );
- sinon.assert.calledOnce( downArrowDomEvtDataStub.preventDefault );
- sinon.assert.calledOnce( downArrowDomEvtDataStub.stopPropagation );
- assertEqualMarkup( getModelData( model ), '<widget><nested><paragraph>fo[obar]</paragraph></nested></widget>' );
- } );
- } );
- } );
- describe( 'with non-collapsed backward selection', () => {
- beforeEach( () => {
- setModelData( model, '<widget><nested><paragraph>fo[ob]ar</paragraph></nested></widget>', { lastRangeBackward: true } );
- } );
- it( 'should move caret to the beginning of the nested editable content', () => {
- editor.editing.view.document.fire( 'keydown', upArrowDomEvtDataStub );
- sinon.assert.calledOnce( upArrowDomEvtDataStub.preventDefault );
- sinon.assert.calledOnce( upArrowDomEvtDataStub.stopPropagation );
- assertEqualMarkup( getModelData( model ), '<widget><nested><paragraph>[]foobar</paragraph></nested></widget>' );
- } );
- it( 'should move caret to the end of the nested editable content', () => {
- editor.editing.view.document.fire( 'keydown', downArrowDomEvtDataStub );
- sinon.assert.calledOnce( downArrowDomEvtDataStub.preventDefault );
- sinon.assert.calledOnce( downArrowDomEvtDataStub.stopPropagation );
- assertEqualMarkup( getModelData( model ), '<widget><nested><paragraph>foobar[]</paragraph></nested></widget>' );
- } );
- describe( 'when shift key is pressed', () => {
- beforeEach( () => {
- upArrowDomEvtDataStub.shiftKey = true;
- downArrowDomEvtDataStub.shiftKey = true;
- } );
- it( 'should expand selection to the beginning of the nested editable content', () => {
- editor.editing.view.document.fire( 'keydown', upArrowDomEvtDataStub );
- sinon.assert.calledOnce( upArrowDomEvtDataStub.preventDefault );
- sinon.assert.calledOnce( upArrowDomEvtDataStub.stopPropagation );
- assertEqualMarkup( getModelData( model ), '<widget><nested><paragraph>[foob]ar</paragraph></nested></widget>' );
- } );
- it( 'should not prevent default browser behavior on arrow down press', () => {
- editor.editing.view.document.fire( 'keydown', downArrowDomEvtDataStub );
- sinon.assert.notCalled( downArrowDomEvtDataStub.preventDefault );
- sinon.assert.notCalled( downArrowDomEvtDataStub.stopPropagation );
- assertEqualMarkup( getModelData( model ), '<widget><nested><paragraph>fo[ob]ar</paragraph></nested></widget>' );
- } );
- } );
- } );
- } );
- describe( 'selection inside paragraph', () => {
- const text = new Array( 20 ).fill( 0 ).map( () => 'word' ).join( ' ' );
- it( 'should not prevent default browser behavior if caret is in the middle line of a text', () => {
- setModelData( model, `<widget><nested><paragraph>${ text + '[] ' + text }</paragraph></nested></widget>` );
- editor.editing.view.document.fire( 'keydown', upArrowDomEvtDataStub );
- sinon.assert.notCalled( upArrowDomEvtDataStub.preventDefault );
- sinon.assert.notCalled( upArrowDomEvtDataStub.stopPropagation );
- } );
- it( 'should move caret to beginning of nested editable content if caret is in the first line of a text', () => {
- setModelData( model, `<widget><nested><paragraph>${ 'word[] word' + text }</paragraph></nested></widget>` );
- editor.editing.view.document.fire( 'keydown', upArrowDomEvtDataStub );
- sinon.assert.calledOnce( upArrowDomEvtDataStub.preventDefault );
- sinon.assert.calledOnce( upArrowDomEvtDataStub.stopPropagation );
- assertEqualMarkup( getModelData( model ),
- `<widget><nested><paragraph>${ '[]word word' + text }</paragraph></nested></widget>`
- );
- } );
- it( 'should move caret to end of nested editable content if caret is in the last line of a text', () => {
- setModelData( model, `<widget><nested><paragraph>${ text + 'word[] word' }</paragraph></nested></widget>` );
- editor.editing.view.document.fire( 'keydown', downArrowDomEvtDataStub );
- sinon.assert.calledOnce( downArrowDomEvtDataStub.preventDefault );
- sinon.assert.calledOnce( downArrowDomEvtDataStub.stopPropagation );
- assertEqualMarkup( getModelData( model ),
- `<widget><nested><paragraph>${ text + 'word word[]' }</paragraph></nested></widget>`
- );
- } );
- describe( 'when shift key is pressed', () => {
- beforeEach( () => {
- upArrowDomEvtDataStub.shiftKey = true;
- downArrowDomEvtDataStub.shiftKey = true;
- } );
- it( 'should not prevent default browser behavior for the up arrow in the middle lines of the text', () => {
- setModelData( model, `<widget><nested><paragraph>${ text + '[] ' + text }</paragraph></nested></widget>` );
- editor.editing.view.document.fire( 'keydown', upArrowDomEvtDataStub );
- sinon.assert.notCalled( upArrowDomEvtDataStub.preventDefault );
- sinon.assert.notCalled( upArrowDomEvtDataStub.stopPropagation );
- } );
- it( 'should not prevent default browser behavior for the down arrow in the middle lines of text', () => {
- setModelData( model, `<widget><nested><paragraph>${ text + '[] ' + text }</paragraph></nested></widget>` );
- editor.editing.view.document.fire( 'keydown', downArrowDomEvtDataStub );
- sinon.assert.notCalled( downArrowDomEvtDataStub.preventDefault );
- sinon.assert.notCalled( downArrowDomEvtDataStub.stopPropagation );
- } );
- it( 'should expand collapsed selection to the beginning of the nested editable content', () => {
- setModelData( model, `<widget><nested><paragraph>${ 'word[] word' + text }</paragraph></nested></widget>` );
- editor.editing.view.document.fire( 'keydown', upArrowDomEvtDataStub );
- sinon.assert.calledOnce( upArrowDomEvtDataStub.preventDefault );
- sinon.assert.calledOnce( upArrowDomEvtDataStub.stopPropagation );
- assertEqualMarkup( getModelData( model ),
- `<widget><nested><paragraph>${ '[word] word' + text }</paragraph></nested></widget>`
- );
- } );
- it( 'should not prevent default browser behavior for shrinking selection (up arrow)', () => {
- setModelData( model, `<widget><nested><paragraph>${ 'word [word]' + text }</paragraph></nested></widget>` );
- editor.editing.view.document.fire( 'keydown', upArrowDomEvtDataStub );
- sinon.assert.notCalled( upArrowDomEvtDataStub.preventDefault );
- sinon.assert.notCalled( upArrowDomEvtDataStub.stopPropagation );
- } );
- it( 'should expand not collapsed selection to the beginning of the editable content from the selection anchor', () => {
- setModelData( model,
- `<widget><nested><paragraph>${ 'word [word]' + text }</paragraph></nested></widget>`,
- { lastRangeBackward: true }
- );
- editor.editing.view.document.fire( 'keydown', upArrowDomEvtDataStub );
- sinon.assert.calledOnce( upArrowDomEvtDataStub.preventDefault );
- sinon.assert.calledOnce( upArrowDomEvtDataStub.stopPropagation );
- assertEqualMarkup( getModelData( model ),
- `<widget><nested><paragraph>${ '[word word]' + text }</paragraph></nested></widget>`
- );
- } );
- it( 'should expand collapsed selection to the end of the nested editable content', () => {
- setModelData( model, `<widget><nested><paragraph>${ text + 'word[] word' }</paragraph></nested></widget>` );
- editor.editing.view.document.fire( 'keydown', downArrowDomEvtDataStub );
- sinon.assert.calledOnce( downArrowDomEvtDataStub.preventDefault );
- sinon.assert.calledOnce( downArrowDomEvtDataStub.stopPropagation );
- assertEqualMarkup( getModelData( model ),
- `<widget><nested><paragraph>${ text + 'word[ word]' }</paragraph></nested></widget>`
- );
- } );
- it( 'should not prevent default browser behavior for shrinking selection (down arrow)', () => {
- setModelData( model,
- `<widget><nested><paragraph>${ text + '[word] word' }</paragraph></nested></widget>`,
- { lastRangeBackward: true }
- );
- editor.editing.view.document.fire( 'keydown', downArrowDomEvtDataStub );
- sinon.assert.notCalled( downArrowDomEvtDataStub.preventDefault );
- sinon.assert.notCalled( downArrowDomEvtDataStub.stopPropagation );
- } );
- it( 'should expand not collapsed selection to the end of the nested editable content from the selection anchor', () => {
- setModelData( model, `<widget><nested><paragraph>${ text + '[word] word' }</paragraph></nested></widget>` );
- editor.editing.view.document.fire( 'keydown', downArrowDomEvtDataStub );
- sinon.assert.calledOnce( downArrowDomEvtDataStub.preventDefault );
- sinon.assert.calledOnce( downArrowDomEvtDataStub.stopPropagation );
- assertEqualMarkup( getModelData( model ),
- `<widget><nested><paragraph>${ text + '[word word]' }</paragraph></nested></widget>`
- );
- } );
- } );
- } );
- if ( !env.isGecko ) {
- // These tests fails on Travis. They work correctly when started on local machine.
- // Issue is probably related to text rendering and wrapping.
- describe( 'with selection in the wrap area', () => {
- const text = new Array( 10 ).fill( 0 ).map( () => 'word' ).join( ' ' );
- it( 'should move the caret to end if the caret is after the last space in the line next to the last one', () => {
- // This is also first position in the last line.
- setModelData( model, `<widget><nested><paragraph>${ text + ' []word word word' }</paragraph></nested></widget>` );
- editor.editing.view.document.fire( 'keydown', downArrowDomEvtDataStub );
- sinon.assert.calledOnce( downArrowDomEvtDataStub.preventDefault );
- sinon.assert.calledOnce( downArrowDomEvtDataStub.stopPropagation );
- assertEqualMarkup( getModelData( model ),
- `<widget><nested><paragraph>${ text + ' word word word[]' }</paragraph></nested></widget>`
- );
- } );
- it( 'should move the caret to end if the caret is at the last space in the line next to last one', () => {
- setModelData( model, `<widget><nested><paragraph>${ text + '[] word word word' }</paragraph></nested></widget>` );
- editor.editing.view.document.fire( 'keydown', downArrowDomEvtDataStub );
- sinon.assert.calledOnce( downArrowDomEvtDataStub.preventDefault );
- sinon.assert.calledOnce( downArrowDomEvtDataStub.stopPropagation );
- assertEqualMarkup( getModelData( model ),
- `<widget><nested><paragraph>${ text + ' word word word[]' }</paragraph></nested></widget>`
- );
- } );
- it( 'should not move the caret if it\'s just before the last space in the line next to last one', () => {
- setModelData( model,
- '<widget><nested><paragraph>' +
- text.substring( 0, text.length - 1 ) + '[]d word word word' +
- '</paragraph></nested></widget>'
- );
- editor.editing.view.document.fire( 'keydown', downArrowDomEvtDataStub );
- sinon.assert.notCalled( downArrowDomEvtDataStub.preventDefault );
- sinon.assert.notCalled( downArrowDomEvtDataStub.stopPropagation );
- } );
- describe( 'when shift key is pressed', () => {
- beforeEach( () => {
- upArrowDomEvtDataStub.shiftKey = true;
- downArrowDomEvtDataStub.shiftKey = true;
- } );
- it( 'should expand collapsed selection to the end of the nested editable content', () => {
- setModelData( model, `<widget><nested><paragraph>${ text + '[] word word word' }</paragraph></nested></widget>` );
- editor.editing.view.document.fire( 'keydown', downArrowDomEvtDataStub );
- sinon.assert.calledOnce( downArrowDomEvtDataStub.preventDefault );
- sinon.assert.calledOnce( downArrowDomEvtDataStub.stopPropagation );
- assertEqualMarkup( getModelData( model ),
- `<widget><nested><paragraph>${ text + '[ word word word]' }</paragraph></nested></widget>`
- );
- } );
- it( 'should expand not collapsed selection to the end of the nested editable content from the selection anchor', () => {
- setModelData( model, `<widget><nested><paragraph>${ text + '[ word] word word' }</paragraph></nested></widget>` );
- editor.editing.view.document.fire( 'keydown', downArrowDomEvtDataStub );
- sinon.assert.calledOnce( downArrowDomEvtDataStub.preventDefault );
- sinon.assert.calledOnce( downArrowDomEvtDataStub.stopPropagation );
- assertEqualMarkup( getModelData( model ),
- `<widget><nested><paragraph>${ text + '[ word word word]' }</paragraph></nested></widget>`
- );
- } );
- } );
- } );
- }
- describe( 'with multiple paragraphs of text', () => {
- const text = new Array( 100 ).fill( 0 ).map( () => 'word' ).join( ' ' );
- it( 'should not prevent default browser behavior if caret is in the middle of a line of text', () => {
- setModelData( model,
- '<widget><nested>' +
- `<paragraph>${ text }[]${ text }</paragraph>` +
- '<paragraph>foobar</paragraph>' +
- '</nested></widget>'
- );
- editor.editing.view.document.fire( 'keydown', upArrowDomEvtDataStub );
- sinon.assert.notCalled( upArrowDomEvtDataStub.preventDefault );
- sinon.assert.notCalled( upArrowDomEvtDataStub.stopPropagation );
- } );
- it( 'should move the caret to the beginning of a nested editable content if the caret is in the first line of text', () => {
- setModelData( model,
- '<widget><nested>' +
- `<paragraph>word[]${ text }</paragraph>` +
- '<paragraph>foobar</paragraph>' +
- '</nested></widget>'
- );
- editor.editing.view.document.fire( 'keydown', upArrowDomEvtDataStub );
- sinon.assert.calledOnce( upArrowDomEvtDataStub.preventDefault );
- sinon.assert.calledOnce( upArrowDomEvtDataStub.stopPropagation );
- assertEqualMarkup( getModelData( model ),
- '<widget><nested>' +
- `<paragraph>[]word${ text }</paragraph>` +
- '<paragraph>foobar</paragraph>' +
- '</nested></widget>'
- );
- } );
- it( 'should not move the caret to the end of a nested editable content if the caret is not in the last line of text', () => {
- setModelData( model,
- '<widget><nested>' +
- `<paragraph>${ text }word []word</paragraph>` +
- '<paragraph>foobar</paragraph>' +
- '</nested></widget>'
- );
- editor.editing.view.document.fire( 'keydown', downArrowDomEvtDataStub );
- sinon.assert.notCalled( downArrowDomEvtDataStub.preventDefault );
- sinon.assert.notCalled( downArrowDomEvtDataStub.stopPropagation );
- } );
- it( 'should move the caret to end of a nested editable content if the caret is in the last line of text', () => {
- setModelData( model,
- '<widget><nested>' +
- '<paragraph>foobar</paragraph>' +
- `<paragraph>${ text }word []word</paragraph>` +
- '</nested></widget>'
- );
- editor.editing.view.document.fire( 'keydown', downArrowDomEvtDataStub );
- sinon.assert.calledOnce( downArrowDomEvtDataStub.preventDefault );
- sinon.assert.calledOnce( downArrowDomEvtDataStub.stopPropagation );
- assertEqualMarkup( getModelData( model ),
- '<widget><nested>' +
- '<paragraph>foobar</paragraph>' +
- `<paragraph>${ text }word word[]</paragraph>` +
- '</nested></widget>'
- );
- } );
- describe( 'when shift key is pressed', () => {
- beforeEach( () => {
- upArrowDomEvtDataStub.shiftKey = true;
- downArrowDomEvtDataStub.shiftKey = true;
- } );
- it( 'should expand selection to the beginning of the nested editable content', () => {
- setModelData( model,
- '<widget><nested>' +
- `<paragraph>word[] ${ text }</paragraph>` +
- `<paragraph>${ text }</paragraph>` +
- '</nested></widget>'
- );
- editor.editing.view.document.fire( 'keydown', upArrowDomEvtDataStub );
- sinon.assert.calledOnce( upArrowDomEvtDataStub.preventDefault );
- sinon.assert.calledOnce( upArrowDomEvtDataStub.stopPropagation );
- assertEqualMarkup( getModelData( model ),
- '<widget><nested>' +
- `<paragraph>[word] ${ text }</paragraph>` +
- `<paragraph>${ text }</paragraph>` +
- '</nested></widget>'
- );
- } );
- it( 'should expand selection to the end of the nested editable content', () => {
- setModelData( model,
- '<widget><nested>' +
- `<paragraph>${ text }</paragraph>` +
- `<paragraph>${ text } []word</paragraph>` +
- '</nested></widget>'
- );
- editor.editing.view.document.fire( 'keydown', downArrowDomEvtDataStub );
- sinon.assert.calledOnce( downArrowDomEvtDataStub.preventDefault );
- sinon.assert.calledOnce( downArrowDomEvtDataStub.stopPropagation );
- assertEqualMarkup( getModelData( model ),
- '<widget><nested>' +
- `<paragraph>${ text }</paragraph>` +
- `<paragraph>${ text } [word]</paragraph>` +
- '</nested></widget>'
- );
- } );
- } );
- } );
- describe( 'with horizontal line widget', () => {
- const text = new Array( 100 ).fill( 0 ).map( () => 'word' ).join( ' ' );
- it( 'should not navigate if the caret is in the middle line of text', () => {
- setModelData( model,
- '<widget><nested>' +
- '<horizontalLine></horizontalLine>' +
- `<paragraph>${ text }[]${ text }</paragraph>` +
- '</nested></widget>'
- );
- editor.editing.view.document.fire( 'keydown', upArrowDomEvtDataStub );
- sinon.assert.notCalled( upArrowDomEvtDataStub.preventDefault );
- sinon.assert.notCalled( upArrowDomEvtDataStub.stopPropagation );
- } );
- it( 'should move the caret to the beginning of the editable non-object content if it\'s is in the first line of text', () => {
- setModelData( model,
- '<widget><nested>' +
- '<horizontalLine></horizontalLine>' +
- `<paragraph>word[] ${ text }</paragraph>` +
- '</nested></widget>'
- );
- editor.editing.view.document.fire( 'keydown', upArrowDomEvtDataStub );
- sinon.assert.calledOnce( upArrowDomEvtDataStub.preventDefault );
- sinon.assert.calledOnce( upArrowDomEvtDataStub.stopPropagation );
- assertEqualMarkup( getModelData( model ),
- '<widget><nested>' +
- '<horizontalLine></horizontalLine>' +
- `<paragraph>[]word ${ text }</paragraph>` +
- '</nested></widget>'
- );
- } );
- it( 'should move the caret to the end of the editable non-object content if the caret is in the last line of text', () => {
- setModelData( model,
- '<widget><nested>' +
- `<paragraph>${ text } word []word</paragraph>` +
- '<horizontalLine></horizontalLine>' +
- '</nested></widget>'
- );
- editor.editing.view.document.fire( 'keydown', downArrowDomEvtDataStub );
- sinon.assert.calledOnce( downArrowDomEvtDataStub.preventDefault );
- sinon.assert.calledOnce( downArrowDomEvtDataStub.stopPropagation );
- assertEqualMarkup( getModelData( model ),
- '<widget><nested>' +
- `<paragraph>${ text } word word[]</paragraph>` +
- '<horizontalLine></horizontalLine>' +
- '</nested></widget>'
- );
- } );
- it( 'should not move the caret to the end of nested editable content if widget is selected in middle of that content', () => {
- setModelData( model,
- '<widget><nested>' +
- `<paragraph>${ text }</paragraph>` +
- '[<horizontalLine></horizontalLine>]' +
- `<paragraph>${ text }</paragraph>` +
- '<horizontalLine></horizontalLine>' +
- '</nested></widget>'
- );
- // Note: Two keydowns are necessary because the first one is handled by the WidgetTypeAround plugin
- // to activate the "fake caret".
- editor.editing.view.document.fire( 'keydown', downArrowDomEvtDataStub );
- editor.editing.view.document.fire( 'keydown', downArrowDomEvtDataStub );
- assertEqualMarkup( getModelData( model ),
- '<widget><nested>' +
- `<paragraph>${ text }</paragraph>` +
- '<horizontalLine></horizontalLine>' +
- `<paragraph>[]${ text }</paragraph>` +
- '<horizontalLine></horizontalLine>' +
- '</nested></widget>'
- );
- } );
- it( 'should not move the caret to the end of nested editable content if widget is next to the selection', () => {
- setModelData( model,
- '<widget><nested>' +
- `<paragraph>${ text }</paragraph>` +
- '[]<horizontalLine></horizontalLine>' +
- '</nested></widget>'
- );
- editor.editing.view.document.fire( 'keydown', downArrowDomEvtDataStub );
- assertEqualMarkup( getModelData( model ),
- '<widget><nested>' +
- `<paragraph>${ text }</paragraph>` +
- '[<horizontalLine></horizontalLine>]' +
- '</nested></widget>'
- );
- } );
- describe( 'when shift key is pressed', () => {
- beforeEach( () => {
- upArrowDomEvtDataStub.shiftKey = true;
- downArrowDomEvtDataStub.shiftKey = true;
- } );
- it( 'should expand selection to the beginning of the nested editable content', () => {
- setModelData( model,
- '<widget><nested>' +
- '<horizontalLine></horizontalLine>' +
- '<paragraph>foo[]bar</paragraph>' +
- '</nested></widget>'
- );
- editor.editing.view.document.fire( 'keydown', upArrowDomEvtDataStub );
- sinon.assert.calledOnce( upArrowDomEvtDataStub.preventDefault );
- sinon.assert.calledOnce( upArrowDomEvtDataStub.stopPropagation );
- assertEqualMarkup( getModelData( model ),
- '<widget><nested>' +
- '<horizontalLine></horizontalLine>' +
- '<paragraph>[foo]bar</paragraph>' +
- '</nested></widget>'
- );
- } );
- it( 'should expand selection to the end of the nested editable content', () => {
- setModelData( model,
- '<widget><nested>' +
- '<paragraph>foo[]bar</paragraph>' +
- '<horizontalLine></horizontalLine>' +
- '</nested></widget>'
- );
- editor.editing.view.document.fire( 'keydown', downArrowDomEvtDataStub );
- sinon.assert.calledOnce( downArrowDomEvtDataStub.preventDefault );
- sinon.assert.calledOnce( downArrowDomEvtDataStub.stopPropagation );
- assertEqualMarkup( getModelData( model ),
- '<widget><nested>' +
- '<paragraph>foo[bar]</paragraph>' +
- '<horizontalLine></horizontalLine>' +
- '</nested></widget>'
- );
- } );
- } );
- } );
- describe( 'contains image widget with caption and selection inside the caption', () => {
- it( 'should move caret to the closest limit boundary', () => {
- setModelData( model,
- '<widget><nested>' +
- '<paragraph>foo</paragraph>' +
- `<image src="${ imageUrl }"><caption>bar[]baz</caption></image>` +
- '</nested></widget>'
- );
- editor.editing.view.document.fire( 'keydown', upArrowDomEvtDataStub );
- sinon.assert.calledOnce( upArrowDomEvtDataStub.preventDefault );
- sinon.assert.calledOnce( upArrowDomEvtDataStub.stopPropagation );
- assertEqualMarkup( getModelData( model ), '<widget><nested>' +
- '<paragraph>foo</paragraph>' +
- `<image src="${ imageUrl }"><caption>[]barbaz</caption></image>` +
- '</nested></widget>'
- );
- } );
- it( 'should not prevent default browser behavior when caret at the beginning of nested editable', () => {
- setModelData( model,
- '<widget><nested>' +
- '<paragraph>foo</paragraph>' +
- `<image src="${ imageUrl }"><caption>[]barbaz</caption></image>` +
- '</nested></widget>'
- );
- editor.editing.view.document.fire( 'keydown', upArrowDomEvtDataStub );
- sinon.assert.notCalled( upArrowDomEvtDataStub.preventDefault );
- sinon.assert.notCalled( upArrowDomEvtDataStub.stopPropagation );
- } );
- it( 'should move the caret to the first position of the image caption', () => {
- setModelData( model,
- '<widget><nested>' +
- `<image src="${ imageUrl }"><caption>bar[]baz</caption></image>` +
- '<paragraph>foo</paragraph>' +
- '</nested></widget>'
- );
- editor.editing.view.document.fire( 'keydown', upArrowDomEvtDataStub );
- sinon.assert.calledOnce( upArrowDomEvtDataStub.preventDefault );
- sinon.assert.calledOnce( upArrowDomEvtDataStub.stopPropagation );
- assertEqualMarkup( getModelData( model ),
- '<widget><nested>' +
- `<image src="${ imageUrl }"><caption>[]barbaz</caption></image>` +
- '<paragraph>foo</paragraph>' +
- '</nested></widget>'
- );
- } );
- it( 'should move caret to the end of image caption', () => {
- setModelData( model,
- '<widget><nested>' +
- `<image src="${ imageUrl }"><caption>bar[]baz</caption></image>` +
- '<paragraph>foo</paragraph>' +
- '</nested></widget>'
- );
- editor.editing.view.document.fire( 'keydown', downArrowDomEvtDataStub );
- sinon.assert.calledOnce( downArrowDomEvtDataStub.preventDefault );
- sinon.assert.calledOnce( downArrowDomEvtDataStub.stopPropagation );
- assertEqualMarkup( getModelData( model ),
- '<widget><nested>' +
- `<image src="${ imageUrl }"><caption>barbaz[]</caption></image>` +
- '<paragraph>foo</paragraph>' +
- '</nested></widget>'
- );
- } );
- it( 'should move caret to the end of image caption when caret is on the position next to the last one', () => {
- setModelData( model,
- '<widget><nested>' +
- `<image src="${ imageUrl }"><caption>barba[]z</caption></image>` +
- '<paragraph>foo</paragraph>' +
- '</nested></widget>'
- );
- editor.editing.view.document.fire( 'keydown', downArrowDomEvtDataStub );
- sinon.assert.calledOnce( downArrowDomEvtDataStub.preventDefault );
- sinon.assert.calledOnce( downArrowDomEvtDataStub.stopPropagation );
- assertEqualMarkup( getModelData( model ),
- '<widget><nested>' +
- `<image src="${ imageUrl }"><caption>barbaz[]</caption></image>` +
- '<paragraph>foo</paragraph>' +
- '</nested></widget>'
- );
- } );
- it( 'should not prevent default browser behavior when caret inside image caption when followed by a paragraph', () => {
- setModelData( model,
- '<widget><nested>' +
- `<image src="${ imageUrl }"><caption>barbaz[]</caption></image>` +
- '<paragraph>foo</paragraph>' +
- '</nested></widget>'
- );
- editor.editing.view.document.fire( 'keydown', downArrowDomEvtDataStub );
- sinon.assert.notCalled( downArrowDomEvtDataStub.preventDefault );
- sinon.assert.notCalled( downArrowDomEvtDataStub.stopPropagation );
- } );
- } );
- } );
- function BlockWidgetWithNestedEditable( editor ) {
- const model = editor.model;
- model.schema.register( 'widget', {
- inheritAllFrom: '$block',
- isObject: true
- } );
- model.schema.register( 'nested', {
- allowIn: 'widget',
- isLimit: true
- } );
- model.schema.extend( '$block', {
- allowIn: 'nested'
- } );
- editor.conversion.for( 'dataDowncast' )
- .elementToElement( {
- model: 'widget',
- view: ( modelItem, writer ) => {
- return writer.createContainerElement( 'figure' );
- }
- } )
- .elementToElement( {
- model: 'nested',
- view: ( modelItem, writer ) => {
- return writer.createContainerElement( 'figcaption' );
- }
- } );
- editor.conversion.for( 'editingDowncast' )
- .elementToElement( {
- model: 'widget',
- view: ( modelItem, writer ) => {
- const div = writer.createContainerElement( 'figure' );
- return toWidget( div, writer, { label: 'widget label' } );
- }
- } )
- .elementToElement( {
- model: 'nested',
- view: ( modelItem, writer ) => {
- const nested = writer.createEditableElement( 'figcaption' );
- return toWidgetEditable( nested, writer );
- }
- } );
- editor.conversion.for( 'upcast' )
- .elementToElement( {
- view: 'figure',
- model: 'widget'
- } )
- .elementToElement( {
- view: 'figcaption',
- model: 'nested'
- } );
- }
- } );
|