| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612 |
- /**
- * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
- import {
- elementToElement, elementToAttribute, attributeToAttribute, elementToMarker
- } from '../../src/conversion/view-to-model-helpers';
- import Model from '../../src/model/model';
- import Conversion from '../../src/conversion/conversion';
- import ViewConversionDispatcher from '../../src/conversion/viewconversiondispatcher';
- import ModelElement from '../../src/model/element';
- import ViewDocumentFragment from '../../src/view/documentfragment';
- import ViewUIElement from '../../src/view/uielement';
- import ViewContainerElement from '../../src/view/containerelement';
- import ViewAttributeElement from '../../src/view/attributeelement';
- import ViewText from '../../src/view/text';
- import { convertText, convertToModelFragment } from '../../src/conversion/view-to-model-converters';
- import { stringify } from '../../src/dev-utils/model';
- describe( 'view-to-model-helpers', () => {
- let dispatcher, model, schema, conversion;
- beforeEach( () => {
- model = new Model();
- schema = model.schema;
- schema.extend( '$text', {
- allowIn: '$root'
- } );
- schema.register( '$marker', {
- inheritAllFrom: '$block'
- } );
- schema.register( 'paragraph', {
- inheritAllFrom: '$block'
- } );
- schema.extend( '$text', {
- allowAttributes: [ 'bold' ]
- } );
- dispatcher = new ViewConversionDispatcher( model, { schema } );
- dispatcher.on( 'text', convertText() );
- dispatcher.on( 'element', convertToModelFragment(), { priority: 'lowest' } );
- dispatcher.on( 'documentFragment', convertToModelFragment(), { priority: 'lowest' } );
- conversion = new Conversion();
- conversion.register( 'view', [ dispatcher ] );
- } );
- describe( 'elementToElement', () => {
- it( 'config.view is a string', () => {
- const helper = elementToElement( { view: 'p', model: 'paragraph' } );
- conversion.for( 'view' ).add( helper );
- expectResult( new ViewContainerElement( 'p' ), '<paragraph></paragraph>' );
- } );
- it( 'can be overwritten using priority', () => {
- schema.register( 'p', {
- inheritAllFrom: '$block'
- } );
- const helperA = elementToElement( { view: 'p', model: 'p' } );
- const helperB = elementToElement( { view: 'p', model: 'paragraph' }, 'high' );
- conversion.for( 'view' ).add( helperA ).add( helperB );
- expectResult( new ViewContainerElement( 'p' ), '<paragraph></paragraph>' );
- } );
- it( 'config.view is an object', () => {
- schema.register( 'fancyParagraph', {
- inheritAllFrom: '$block'
- } );
- const helperParagraph = elementToElement( { view: 'p', model: 'paragraph' } );
- const helperFancy = elementToElement( {
- view: {
- name: 'p',
- class: 'fancy'
- },
- model: 'fancyParagraph'
- }, 'high' );
- conversion.for( 'view' ).add( helperParagraph ).add( helperFancy );
- expectResult( new ViewContainerElement( 'p' ), '<paragraph></paragraph>' );
- expectResult( new ViewContainerElement( 'p', { class: 'fancy' } ), '<fancyParagraph></fancyParagraph>' );
- } );
- it( 'config.model is element instance', () => {
- schema.extend( 'paragraph', {
- allowAttributes: [ 'fancy' ]
- } );
- const helper = elementToElement( {
- view: {
- name: 'p',
- class: 'fancy'
- },
- model: new ModelElement( 'paragraph', { fancy: true } )
- } );
- conversion.for( 'view' ).add( helper );
- expectResult( new ViewContainerElement( 'p', { class: 'fancy' } ), '<paragraph fancy="true"></paragraph>' );
- } );
- it( 'config.model is a function', () => {
- schema.register( 'heading', {
- inheritAllFrom: '$block',
- allowAttributes: [ 'level' ]
- } );
- const helper = elementToElement( {
- view: {
- name: 'p',
- class: 'heading'
- },
- model: viewElement => new ModelElement( 'heading', { level: viewElement.getAttribute( 'data-level' ) } )
- } );
- conversion.for( 'view' ).add( helper );
- expectResult( new ViewContainerElement( 'p', { class: 'heading', 'data-level': 2 } ), '<heading level="2"></heading>' );
- } );
- it( 'should fire conversion of the element children', () => {
- const helper = elementToElement( { view: 'p', model: 'paragraph' } );
- conversion.for( 'view' ).add( helper );
- expectResult( new ViewContainerElement( 'p', null, new ViewText( 'foo' ) ), '<paragraph>foo</paragraph>' );
- } );
- it( 'should not insert a model element if it is not allowed by schema', () => {
- const helper = elementToElement( { view: 'h2', model: 'heading' } );
- conversion.for( 'view' ).add( helper );
- expectResult( new ViewContainerElement( 'h2' ), '' );
- } );
- it( 'should auto-break elements', () => {
- schema.register( 'heading', {
- inheritAllFrom: '$block'
- } );
- const helperParagraph = elementToElement( { view: 'p', model: 'paragraph' } );
- const helperHeading = elementToElement( { view: 'h2', model: 'heading' } );
- conversion.for( 'view' ).add( helperParagraph ).add( helperHeading );
- expectResult(
- new ViewContainerElement( 'p', null, [
- new ViewText( 'Foo' ),
- new ViewContainerElement( 'h2', null, new ViewText( 'Xyz' ) ),
- new ViewText( 'Bar' )
- ] ),
- '<paragraph>Foo</paragraph><heading>Xyz</heading><paragraph>Bar</paragraph>'
- );
- } );
- it( 'should not do anything if returned model element is null', () => {
- const helperA = elementToElement( { view: 'p', model: 'paragraph' } );
- const helperB = elementToElement( { view: 'p', model: () => null }, 'high' );
- conversion.for( 'view' ).add( helperA ).add( helperB );
- expectResult( new ViewContainerElement( 'p' ), '<paragraph></paragraph>' );
- } );
- } );
- describe( 'elementToAttribute', () => {
- it( 'config.view is string', () => {
- const helper = elementToAttribute( { view: 'strong', model: 'bold' } );
- conversion.for( 'view' ).add( helper );
- expectResult(
- new ViewAttributeElement( 'strong', null, new ViewText( 'foo' ) ),
- '<$text bold="true">foo</$text>'
- );
- } );
- it( 'can be overwritten using priority', () => {
- const helperA = elementToAttribute( { view: 'strong', model: 'strong' } );
- const helperB = elementToAttribute( { view: 'strong', model: 'bold' }, 'high' );
- conversion.for( 'view' ).add( helperA ).add( helperB );
- expectResult(
- new ViewAttributeElement( 'strong', null, new ViewText( 'foo' ) ),
- '<$text bold="true">foo</$text>'
- );
- } );
- it( 'config.view is an object', () => {
- const helper = elementToAttribute( {
- view: {
- name: 'span',
- class: 'bold'
- },
- model: 'bold'
- } );
- conversion.for( 'view' ).add( helper );
- expectResult(
- new ViewAttributeElement( 'span', { class: 'bold' }, new ViewText( 'foo' ) ),
- '<$text bold="true">foo</$text>'
- );
- } );
- it( 'model attribute value is given', () => {
- schema.extend( '$text', {
- allowAttributes: [ 'styled' ]
- } );
- const helper = elementToAttribute( {
- view: {
- name: 'span',
- class: [ 'styled', 'styled-dark' ]
- },
- model: {
- key: 'styled',
- value: 'dark'
- }
- } );
- conversion.for( 'view' ).add( helper );
- expectResult(
- new ViewAttributeElement( 'span', { class: 'styled styled-dark' }, new ViewText( 'foo' ) ),
- '<$text styled="dark">foo</$text>'
- );
- } );
- it( 'model attribute value is a function', () => {
- schema.extend( '$text', {
- allowAttributes: [ 'fontSize' ]
- } );
- const helper = elementToAttribute( {
- view: {
- name: 'span',
- style: {
- 'font-size': /[\s\S]+/
- }
- },
- model: {
- key: 'fontSize',
- value: viewElement => {
- const fontSize = viewElement.getStyle( 'font-size' );
- const value = fontSize.substr( 0, fontSize.length - 2 );
- if ( value <= 10 ) {
- return 'small';
- } else if ( value > 12 ) {
- return 'big';
- }
- return null;
- }
- }
- } );
- conversion.for( 'view' ).add( helper );
- expectResult(
- new ViewAttributeElement( 'span', { style: 'font-size:9px' }, new ViewText( 'foo' ) ),
- '<$text fontSize="small">foo</$text>'
- );
- expectResult(
- new ViewAttributeElement( 'span', { style: 'font-size:12px' }, new ViewText( 'foo' ) ),
- 'foo'
- );
- expectResult(
- new ViewAttributeElement( 'span', { style: 'font-size:14px' }, new ViewText( 'foo' ) ),
- '<$text fontSize="big">foo</$text>'
- );
- } );
- it( 'should not set an attribute if it is not allowed by schema', () => {
- const helper = elementToAttribute( { view: 'em', model: 'italic' } );
- conversion.for( 'view' ).add( helper );
- expectResult(
- new ViewAttributeElement( 'em', null, new ViewText( 'foo' ) ),
- 'foo'
- );
- } );
- it( 'should not do anything if returned model attribute is null', () => {
- const helperA = elementToAttribute( { view: 'strong', model: 'bold' } );
- const helperB = elementToAttribute( {
- view: 'strong',
- model: {
- key: 'bold',
- value: () => null
- }
- }, 'high' );
- conversion.for( 'view' ).add( helperA ).add( helperB );
- expectResult(
- new ViewAttributeElement( 'strong', null, new ViewText( 'foo' ) ),
- '<$text bold="true">foo</$text>'
- );
- } );
- } );
- describe( 'attributeToAttribute', () => {
- beforeEach( () => {
- conversion.for( 'view' ).add( elementToElement( { view: 'img', model: 'image' } ) );
- schema.register( 'image', {
- inheritAllFrom: '$block'
- } );
- } );
- it( 'config.view is a string', () => {
- schema.extend( 'image', {
- allowAttributes: [ 'source' ]
- } );
- const helper = attributeToAttribute( { view: 'src', model: 'source' } );
- conversion.for( 'view' ).add( helper );
- expectResult(
- new ViewAttributeElement( 'img', { src: 'foo.jpg' } ),
- '<image source="foo.jpg"></image>'
- );
- } );
- it( 'config.view has only key set', () => {
- schema.extend( 'image', {
- allowAttributes: [ 'source' ]
- } );
- const helper = attributeToAttribute( { view: { key: 'src' }, model: 'source' } );
- conversion.for( 'view' ).add( helper );
- expectResult(
- new ViewAttributeElement( 'img', { src: 'foo.jpg' } ),
- '<image source="foo.jpg"></image>'
- );
- } );
- it( 'can be overwritten using priority', () => {
- schema.extend( 'image', {
- allowAttributes: [ 'src', 'source' ]
- } );
- const helperA = attributeToAttribute( { view: { key: 'src' }, model: 'src' } );
- const helperB = attributeToAttribute( { view: { key: 'src' }, model: 'source' }, 'normal' );
- conversion.for( 'view' ).add( helperA ).add( helperB );
- expectResult(
- new ViewAttributeElement( 'img', { src: 'foo.jpg' } ),
- '<image source="foo.jpg"></image>'
- );
- } );
- it( 'config.view has value set', () => {
- schema.extend( 'image', {
- allowAttributes: [ 'styled' ]
- } );
- const helper = attributeToAttribute( {
- view: {
- key: 'data-style',
- value: /[\s\S]*/
- },
- model: 'styled'
- } );
- conversion.for( 'view' ).add( helper );
- expectResult(
- new ViewAttributeElement( 'img', { 'data-style': 'dark' } ),
- '<image styled="dark"></image>'
- );
- } );
- it( 'model attribute value is a string', () => {
- schema.extend( 'image', {
- allowAttributes: [ 'styled' ]
- } );
- const helper = attributeToAttribute( {
- view: {
- name: 'img',
- key: 'class',
- value: 'styled-dark'
- },
- model: {
- key: 'styled',
- value: 'dark'
- }
- } );
- conversion.for( 'view' )
- .add( helper )
- .add( elementToElement( { view: 'p', model: 'paragraph' } ) );
- expectResult(
- new ViewContainerElement( 'img', { class: 'styled-dark' } ),
- '<image styled="dark"></image>'
- );
- expectResult(
- new ViewContainerElement( 'img', { class: 'styled-xxx' } ),
- '<image></image>'
- );
- expectResult(
- new ViewContainerElement( 'p', { class: 'styled-dark' } ),
- '<paragraph></paragraph>'
- );
- } );
- it( 'model attribute value is a function', () => {
- schema.extend( 'image', {
- allowAttributes: [ 'styled' ]
- } );
- const helper = attributeToAttribute( {
- view: {
- key: 'class',
- value: /styled-[\S]+/
- },
- model: {
- key: 'styled',
- value: viewElement => {
- const regexp = /styled-([\S]+)/;
- const match = viewElement.getAttribute( 'class' ).match( regexp );
- return match[ 1 ];
- }
- }
- } );
- conversion.for( 'view' ).add( helper );
- expectResult(
- new ViewAttributeElement( 'img', { 'class': 'styled-dark' } ),
- '<image styled="dark"></image>'
- );
- } );
- it( 'should not set an attribute if it is not allowed by schema', () => {
- const helper = attributeToAttribute( { view: 'src', model: 'source' } );
- conversion.for( 'view' ).add( helper );
- expectResult(
- new ViewAttributeElement( 'img', { src: 'foo.jpg' } ),
- '<image></image>'
- );
- } );
- it( 'should not do anything if returned model attribute is null', () => {
- schema.extend( 'image', {
- allowAttributes: [ 'styled' ]
- } );
- const helperA = attributeToAttribute( {
- view: {
- key: 'class',
- value: 'styled'
- },
- model: {
- key: 'styled',
- value: true
- }
- } );
- const helperB = attributeToAttribute( {
- view: {
- key: 'class',
- value: 'styled'
- },
- model: {
- key: 'styled',
- value: () => null
- }
- } );
- conversion.for( 'view' ).add( helperA ).add( helperB );
- expectResult(
- new ViewAttributeElement( 'img', { class: 'styled' } ),
- '<image styled="true"></image>'
- );
- } );
- } );
- describe( 'elementToMarker', () => {
- it( 'config.view is a string', () => {
- const helper = elementToMarker( { view: 'marker-search', model: 'search' } );
- conversion.for( 'view' ).add( helper );
- const frag = new ViewDocumentFragment( [
- new ViewText( 'fo' ),
- new ViewUIElement( 'marker-search' ),
- new ViewText( 'oba' ),
- new ViewUIElement( 'marker-search' ),
- new ViewText( 'r' )
- ] );
- const marker = { name: 'search', start: [ 2 ], end: [ 5 ] };
- expectResult( frag, 'foobar', marker );
- } );
- it( 'can be overwritten using priority', () => {
- const helperA = elementToMarker( { view: 'marker-search', model: 'search-result' } );
- const helperB = elementToMarker( { view: 'marker-search', model: 'search' }, 'high' );
- conversion.for( 'view' ).add( helperA ).add( helperB );
- const frag = new ViewDocumentFragment( [
- new ViewText( 'fo' ),
- new ViewUIElement( 'marker-search' ),
- new ViewText( 'oba' ),
- new ViewUIElement( 'marker-search' ),
- new ViewText( 'r' )
- ] );
- const marker = { name: 'search', start: [ 2 ], end: [ 5 ] };
- expectResult( frag, 'foobar', marker );
- } );
- it( 'config.view is an object', () => {
- const helper = elementToMarker( {
- view: {
- name: 'span',
- 'data-marker': 'search'
- },
- model: 'search'
- } );
- conversion.for( 'view' ).add( helper );
- const frag = new ViewDocumentFragment( [
- new ViewText( 'f' ),
- new ViewUIElement( 'span', { 'data-marker': 'search' } ),
- new ViewText( 'oob' ),
- new ViewUIElement( 'span', { 'data-marker': 'search' } ),
- new ViewText( 'ar' )
- ] );
- const marker = { name: 'search', start: [ 1 ], end: [ 4 ] };
- expectResult( frag, 'foobar', marker );
- } );
- it( 'config.model is a function', () => {
- const helper = elementToMarker( {
- view: 'comment',
- model: viewElement => 'comment:' + viewElement.getAttribute( 'data-comment-id' )
- } );
- conversion.for( 'view' ).add( helper );
- const frag = new ViewDocumentFragment( [
- new ViewText( 'foo' ),
- new ViewUIElement( 'comment', { 'data-comment-id': 4 } ),
- new ViewText( 'b' ),
- new ViewUIElement( 'comment', { 'data-comment-id': 4 } ),
- new ViewText( 'ar' )
- ] );
- const marker = { name: 'comment:4', start: [ 3 ], end: [ 4 ] };
- expectResult( frag, 'foobar', marker );
- } );
- } );
- function expectResult( viewToConvert, modelString, marker ) {
- const model = dispatcher.convert( viewToConvert );
- if ( marker ) {
- expect( model.markers.has( marker.name ) ).to.be.true;
- const convertedMarker = model.markers.get( marker.name );
- expect( convertedMarker.start.path ).to.deep.equal( marker.start );
- expect( convertedMarker.end.path ).to.deep.equal( marker.end );
- }
- expect( stringify( model ) ).to.equal( modelString );
- }
- } );
|