|
|
@@ -8,9 +8,10 @@ import FontFamilyEditing from './../../src/fontfamily/fontfamilyediting';
|
|
|
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
|
|
|
|
|
|
import VirtualTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/virtualtesteditor';
|
|
|
+import { getData as getModelData, setData as setModelData } from '../../../ckeditor5-engine/src/dev-utils/model';
|
|
|
|
|
|
describe( 'FontFamilyEditing', () => {
|
|
|
- let editor;
|
|
|
+ let editor, doc;
|
|
|
|
|
|
beforeEach( () => {
|
|
|
return VirtualTestEditor
|
|
|
@@ -19,6 +20,8 @@ describe( 'FontFamilyEditing', () => {
|
|
|
} )
|
|
|
.then( newEditor => {
|
|
|
editor = newEditor;
|
|
|
+
|
|
|
+ doc = editor.document;
|
|
|
} );
|
|
|
} );
|
|
|
|
|
|
@@ -35,11 +38,257 @@ describe( 'FontFamilyEditing', () => {
|
|
|
describe( 'default value', () => {
|
|
|
it( 'should be set', () => {
|
|
|
expect( editor.config.get( 'fontFamily.items' ) ).to.deep.equal( [
|
|
|
- 'default',
|
|
|
'Arial, Helvetica, sans-serif',
|
|
|
'Courier New, Courier, monospace'
|
|
|
] );
|
|
|
} );
|
|
|
} );
|
|
|
} );
|
|
|
+
|
|
|
+ describe( 'configuredItems', () => {
|
|
|
+ it( 'should discard unparsable values', () => {
|
|
|
+ return VirtualTestEditor
|
|
|
+ .create( {
|
|
|
+ plugins: [ FontFamilyEditing ],
|
|
|
+ fontFamily: {
|
|
|
+ items: [ () => {}, 0, true ]
|
|
|
+ }
|
|
|
+ } )
|
|
|
+ .then( newEditor => {
|
|
|
+ editor = newEditor;
|
|
|
+
|
|
|
+ const plugin = editor.plugins.get( FontFamilyEditing );
|
|
|
+
|
|
|
+ expect( plugin.configuredItems ).to.deep.equal( [] );
|
|
|
+ } );
|
|
|
+ } );
|
|
|
+
|
|
|
+ it( 'should pass through object definition', () => {
|
|
|
+ return VirtualTestEditor
|
|
|
+ .create( {
|
|
|
+ plugins: [ FontFamilyEditing ],
|
|
|
+ fontFamily: {
|
|
|
+ items: [
|
|
|
+ {
|
|
|
+ label: 'Comic Sans',
|
|
|
+ model: 'comic',
|
|
|
+ view: {
|
|
|
+ name: 'span',
|
|
|
+ styles: {
|
|
|
+ 'font-family': 'Comic Sans'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ } )
|
|
|
+ .then( newEditor => {
|
|
|
+ editor = newEditor;
|
|
|
+
|
|
|
+ const plugin = editor.plugins.get( FontFamilyEditing );
|
|
|
+
|
|
|
+ expect( plugin.configuredItems ).to.deep.equal( [
|
|
|
+ {
|
|
|
+ label: 'Comic Sans',
|
|
|
+ model: 'comic',
|
|
|
+ view: {
|
|
|
+ name: 'span', styles: {
|
|
|
+ 'font-family': 'Comic Sans'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ] );
|
|
|
+ } );
|
|
|
+ } );
|
|
|
+
|
|
|
+ describe( 'shorthand presets', () => {
|
|
|
+ it( 'should return full preset from string presets', () => {
|
|
|
+ return VirtualTestEditor
|
|
|
+ .create( {
|
|
|
+ plugins: [ FontFamilyEditing ],
|
|
|
+ fontFamily: {
|
|
|
+ items: [
|
|
|
+ 'Arial',
|
|
|
+ '"Comic Sans MS", sans-serif',
|
|
|
+ 'Lucida Console, Courier New, Courier, monospace'
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ } )
|
|
|
+ .then( newEditor => {
|
|
|
+ editor = newEditor;
|
|
|
+
|
|
|
+ const plugin = editor.plugins.get( FontFamilyEditing );
|
|
|
+
|
|
|
+ expect( plugin.configuredItems ).to.deep.equal( [
|
|
|
+ {
|
|
|
+ label: 'Arial',
|
|
|
+ model: 'Arial',
|
|
|
+ view: {
|
|
|
+ name: 'span',
|
|
|
+ styles: {
|
|
|
+ 'font-family': 'Arial'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: 'Comic Sans MS',
|
|
|
+ model: 'Comic Sans MS',
|
|
|
+ view: {
|
|
|
+ name: 'span',
|
|
|
+ styles: {
|
|
|
+ 'font-family': '"Comic Sans MS", sans-serif'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: 'Lucida Console',
|
|
|
+ model: 'Lucida Console',
|
|
|
+ view: {
|
|
|
+ name: 'span',
|
|
|
+ styles: {
|
|
|
+ 'font-family': '"Lucida Console", "Courier New", Courier, monospace'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ] );
|
|
|
+ } );
|
|
|
+ } );
|
|
|
+ } );
|
|
|
+ } );
|
|
|
+
|
|
|
+ describe( 'editing pipeline conversion', () => {
|
|
|
+ beforeEach( () => {
|
|
|
+ return VirtualTestEditor
|
|
|
+ .create( {
|
|
|
+ plugins: [ FontFamilyEditing, Paragraph ],
|
|
|
+ fontFamily: {
|
|
|
+ items: [
|
|
|
+ 'Arial',
|
|
|
+ {
|
|
|
+ label: 'My font',
|
|
|
+ model: 'my',
|
|
|
+ view: {
|
|
|
+ name: 'mark',
|
|
|
+ classes: 'my-style'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ } )
|
|
|
+ .then( newEditor => {
|
|
|
+ editor = newEditor;
|
|
|
+
|
|
|
+ doc = editor.model;
|
|
|
+ } );
|
|
|
+ } );
|
|
|
+
|
|
|
+ it( 'should discard unknown fontFamily attribute values', () => {
|
|
|
+ setModelData( doc, '<paragraph>f<$text fontFamily="foo-bar">o</$text>o</paragraph>' );
|
|
|
+
|
|
|
+ expect( editor.getData() ).to.equal( '<p>foo</p>' );
|
|
|
+ } );
|
|
|
+
|
|
|
+ it( 'should convert fontFamily attribute to configured preset', () => {
|
|
|
+ setModelData( doc, '<paragraph>f<$text fontFamily="Arial">o</$text>o</paragraph>' );
|
|
|
+
|
|
|
+ expect( editor.getData() ).to.equal( '<p>f<span style="font-family:Arial;">o</span>o</p>' );
|
|
|
+ } );
|
|
|
+
|
|
|
+ it( 'should convert fontFamily attribute from user defined settings', () => {
|
|
|
+ setModelData( doc, '<paragraph>f<$text fontFamily="my">o</$text>o</paragraph>' );
|
|
|
+
|
|
|
+ expect( editor.getData() ).to.equal( '<p>f<mark class="my-style">o</mark>o</p>' );
|
|
|
+ } );
|
|
|
+ } );
|
|
|
+
|
|
|
+ describe( 'data pipeline conversions', () => {
|
|
|
+ beforeEach( () => {
|
|
|
+ return VirtualTestEditor
|
|
|
+ .create( {
|
|
|
+ plugins: [ FontFamilyEditing, Paragraph ],
|
|
|
+ fontFamily: {
|
|
|
+ items: [
|
|
|
+ {
|
|
|
+ label: 'My other setting',
|
|
|
+ model: 'my-other',
|
|
|
+ view: {
|
|
|
+ name: 'span',
|
|
|
+ styles: { 'font-family': 'Other' }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: 'My setting',
|
|
|
+ model: 'my',
|
|
|
+ view: {
|
|
|
+ name: 'mark',
|
|
|
+ styles: { 'font-family': 'Verdana' },
|
|
|
+ classes: 'my-style'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: 'Hybrid',
|
|
|
+ model: 'complex',
|
|
|
+ view: {
|
|
|
+ name: 'span',
|
|
|
+ classes: [ 'text-complex' ]
|
|
|
+ },
|
|
|
+ acceptsAlso: [
|
|
|
+ { name: 'span', styles: { 'font-family': 'Arial' } },
|
|
|
+ { name: 'span', styles: { 'font-family': 'Arial,sans-serif' } },
|
|
|
+ { name: 'span', attributes: { 'data-font': 'Arial' } }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ } )
|
|
|
+ .then( newEditor => {
|
|
|
+ editor = newEditor;
|
|
|
+
|
|
|
+ doc = editor.model;
|
|
|
+ } );
|
|
|
+ } );
|
|
|
+
|
|
|
+ it( 'should convert from element with defined style when with other styles', () => {
|
|
|
+ const data = '<p>f<span style="font-family: Other;font-size: 18px">o</span>o</p>';
|
|
|
+
|
|
|
+ editor.setData( data );
|
|
|
+
|
|
|
+ expect( getModelData( doc ) ).to.equal( '<paragraph>[]f<$text fontFamily="my-other">o</$text>o</paragraph>' );
|
|
|
+
|
|
|
+ expect( editor.getData() ).to.equal( '<p>f<span style="font-family:Other;">o</span>o</p>' );
|
|
|
+ } );
|
|
|
+
|
|
|
+ it( 'should convert from user defined element', () => {
|
|
|
+ const data = '<p>f<mark class="my-style" style="font-family:Verdana;">o</mark>o</p>';
|
|
|
+
|
|
|
+ editor.setData( data );
|
|
|
+
|
|
|
+ expect( getModelData( doc ) ).to.equal( '<paragraph>[]f<$text fontFamily="my">o</$text>o</paragraph>' );
|
|
|
+
|
|
|
+ expect( editor.getData() ).to.equal( data );
|
|
|
+ } );
|
|
|
+
|
|
|
+ it( 'should convert from complex definitions', () => {
|
|
|
+ editor.setData(
|
|
|
+ '<p>f<span style="font-family:Arial;">o</span>o</p>' +
|
|
|
+ '<p>f<span style="font-family: Arial,sans-serif">o</span>o</p>' +
|
|
|
+ '<p>b<span data-font="Arial">a</span>r</p>' +
|
|
|
+ '<p>b<span class="text-complex">a</span>z</p>'
|
|
|
+ );
|
|
|
+
|
|
|
+ expect( getModelData( doc ) ).to.equal(
|
|
|
+ '<paragraph>[]f<$text fontFamily="complex">o</$text>o</paragraph>' +
|
|
|
+ '<paragraph>f<$text fontFamily="complex">o</$text>o</paragraph>' +
|
|
|
+ '<paragraph>b<$text fontFamily="complex">a</$text>r</paragraph>' +
|
|
|
+ '<paragraph>b<$text fontFamily="complex">a</$text>z</paragraph>'
|
|
|
+ );
|
|
|
+
|
|
|
+ expect( editor.getData() ).to.equal(
|
|
|
+ '<p>f<span class="text-complex">o</span>o</p>' +
|
|
|
+ '<p>f<span class="text-complex">o</span>o</p>' +
|
|
|
+ '<p>b<span class="text-complex">a</span>r</p>' +
|
|
|
+ '<p>b<span class="text-complex">a</span>z</p>'
|
|
|
+ );
|
|
|
+ } );
|
|
|
+ } );
|
|
|
} );
|