8
0

fontsizeediting.js 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226
  1. /**
  2. * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  4. */
  5. import FontSizeEditing from './../../src/fontsize/fontsizeediting';
  6. import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
  7. import VirtualTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/virtualtesteditor';
  8. import { getData as getModelData, setData as setModelData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
  9. describe( 'FontSizeEditing', () => {
  10. let editor, doc;
  11. beforeEach( () => {
  12. return VirtualTestEditor
  13. .create( {
  14. plugins: [ FontSizeEditing, Paragraph ]
  15. } )
  16. .then( newEditor => {
  17. editor = newEditor;
  18. doc = editor.document;
  19. } );
  20. } );
  21. afterEach( () => {
  22. editor.destroy();
  23. } );
  24. it( 'should set proper schema rules', () => {
  25. expect( editor.model.schema.checkAttribute( [ '$block', '$text' ], 'fontSize' ) ).to.be.true;
  26. expect( editor.model.schema.checkAttribute( [ '$clipboardHolder', '$text' ], 'fontSize' ) ).to.be.true;
  27. expect( editor.model.schema.checkAttribute( [ '$block' ], 'fontSize' ) ).to.be.false;
  28. } );
  29. it( 'should be marked with a formatting property', () => {
  30. expect( editor.model.schema.getAttributeProperties( 'fontSize' ) ).to.deep.equal( {
  31. isFormatting: true
  32. } );
  33. } );
  34. describe( 'config', () => {
  35. describe( 'default value', () => {
  36. it( 'should be set', () => {
  37. expect( editor.config.get( 'fontSize.options' ) ).to.deep.equal( [ 'tiny', 'small', 'default', 'big', 'huge' ] );
  38. } );
  39. } );
  40. } );
  41. describe( 'editing pipeline conversion', () => {
  42. beforeEach( () => {
  43. return VirtualTestEditor
  44. .create( {
  45. plugins: [ FontSizeEditing, Paragraph ],
  46. fontSize: {
  47. options: [
  48. 'tiny',
  49. 'default',
  50. 18,
  51. {
  52. title: 'My setting',
  53. model: 'my',
  54. view: {
  55. name: 'mark',
  56. styles: { 'font-size': '30px' },
  57. classes: 'my-style'
  58. }
  59. }
  60. ]
  61. }
  62. } )
  63. .then( newEditor => {
  64. editor = newEditor;
  65. doc = editor.model;
  66. } );
  67. } );
  68. it( 'should discard unknown fontSize attribute values', () => {
  69. setModelData( doc, '<paragraph>f<$text fontSize="foo-bar">o</$text>o</paragraph>' );
  70. expect( editor.getData() ).to.equal( '<p>foo</p>' );
  71. } );
  72. it( 'should convert fontSize attribute to predefined named preset', () => {
  73. setModelData( doc, '<paragraph>f<$text fontSize="tiny">o</$text>o</paragraph>' );
  74. expect( editor.getData() ).to.equal( '<p>f<span class="text-tiny">o</span>o</p>' );
  75. } );
  76. it( 'should convert fontSize attribute to predefined pixel size preset', () => {
  77. setModelData( doc, '<paragraph>f<$text fontSize="18">o</$text>o</paragraph>' );
  78. expect( editor.getData() ).to.equal( '<p>f<span style="font-size:18px;">o</span>o</p>' );
  79. } );
  80. it( 'should convert fontSize attribute from user defined settings', () => {
  81. setModelData( doc, '<paragraph>f<$text fontSize="my">o</$text>o</paragraph>' );
  82. expect( editor.getData() ).to.equal( '<p>f<mark class="my-style" style="font-size:30px;">o</mark>o</p>' );
  83. } );
  84. } );
  85. describe( 'data pipeline conversions', () => {
  86. beforeEach( () => {
  87. return VirtualTestEditor
  88. .create( {
  89. plugins: [ FontSizeEditing, Paragraph ],
  90. fontSize: {
  91. options: [
  92. 'tiny',
  93. 'default',
  94. 18,
  95. {
  96. title: 'My setting',
  97. model: 'my',
  98. view: {
  99. name: 'mark',
  100. styles: { 'font-size': '30px' },
  101. classes: 'my-style'
  102. }
  103. },
  104. {
  105. title: 'Big multiple classes',
  106. model: 'big-multiple',
  107. view: {
  108. name: 'span',
  109. classes: [ 'foo', 'foo-big' ]
  110. }
  111. },
  112. {
  113. title: 'Hybrid',
  114. model: 'complex',
  115. view: {
  116. name: 'span',
  117. classes: [ 'text-complex' ]
  118. },
  119. upcastAlso: [
  120. { name: 'span', styles: { 'font-size': '77em' } },
  121. { name: 'span', attributes: { 'data-size': '77em' } }
  122. ]
  123. }
  124. ]
  125. }
  126. } )
  127. .then( newEditor => {
  128. editor = newEditor;
  129. doc = editor.model;
  130. } );
  131. } );
  132. it( 'should convert from element with defined class', () => {
  133. const data = '<p>f<span class="text-tiny foo bar">o</span>o</p>';
  134. editor.setData( data );
  135. expect( getModelData( doc ) ).to.equal( '<paragraph>[]f<$text fontSize="tiny">o</$text>o</paragraph>' );
  136. expect( editor.getData() ).to.equal( '<p>f<span class="text-tiny">o</span>o</p>' );
  137. } );
  138. it( 'should convert from element with defined multiple classes', () => {
  139. const data = '<p>f<span class="foo foo-big bar">o</span>o</p>';
  140. editor.setData( data );
  141. expect( getModelData( doc ) ).to.equal( '<paragraph>[]f<$text fontSize="big-multiple">o</$text>o</paragraph>' );
  142. expect( editor.getData() ).to.equal( '<p>f<span class="foo foo-big">o</span>o</p>' );
  143. } );
  144. it( 'should convert from element with defined style', () => {
  145. const data = '<p>f<span style="font-size:18px;">o</span>o</p>';
  146. editor.setData( data );
  147. expect( getModelData( doc ) ).to.equal( '<paragraph>[]f<$text fontSize="18">o</$text>o</paragraph>' );
  148. expect( editor.getData() ).to.equal( data );
  149. } );
  150. it( 'should convert from element with defined style when with other styles', () => {
  151. const data = '<p>f<span style="font-family: serif;font-size: 18px">o</span>o</p>';
  152. editor.setData( data );
  153. expect( getModelData( doc ) ).to.equal( '<paragraph>[]f<$text fontSize="18">o</$text>o</paragraph>' );
  154. expect( editor.getData() ).to.equal( '<p>f<span style="font-size:18px;">o</span>o</p>' );
  155. } );
  156. it( 'should convert from user defined element', () => {
  157. const data = '<p>f<mark class="my-style" style="font-size:30px;">o</mark>o</p>';
  158. editor.setData( data );
  159. expect( getModelData( doc ) ).to.equal( '<paragraph>[]f<$text fontSize="my">o</$text>o</paragraph>' );
  160. expect( editor.getData() ).to.equal( data );
  161. } );
  162. it( 'should convert from complex definitions', () => {
  163. editor.setData(
  164. '<p>f<span style="font-size: 77em;">o</span>o</p>' +
  165. '<p>b<span data-size="77em">a</span>r</p>' +
  166. '<p>b<span class="text-complex">a</span>z</p>'
  167. );
  168. expect( getModelData( doc ) ).to.equal(
  169. '<paragraph>[]f<$text fontSize="complex">o</$text>o</paragraph>' +
  170. '<paragraph>b<$text fontSize="complex">a</$text>r</paragraph>' +
  171. '<paragraph>b<$text fontSize="complex">a</$text>z</paragraph>'
  172. );
  173. expect( editor.getData() ).to.equal(
  174. '<p>f<span class="text-complex">o</span>o</p>' +
  175. '<p>b<span class="text-complex">a</span>r</p>' +
  176. '<p>b<span class="text-complex">a</span>z</p>'
  177. );
  178. } );
  179. } );
  180. } );