fontsizeediting.js 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220
  1. /**
  2. * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  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. describe( 'config', () => {
  30. describe( 'default value', () => {
  31. it( 'should be set', () => {
  32. expect( editor.config.get( 'fontSize.options' ) ).to.deep.equal( [ 'tiny', 'small', 'normal', 'big', 'huge' ] );
  33. } );
  34. } );
  35. } );
  36. describe( 'editing pipeline conversion', () => {
  37. beforeEach( () => {
  38. return VirtualTestEditor
  39. .create( {
  40. plugins: [ FontSizeEditing, Paragraph ],
  41. fontSize: {
  42. options: [
  43. 'tiny',
  44. 'normal',
  45. 18,
  46. {
  47. title: 'My setting',
  48. model: 'my',
  49. view: {
  50. name: 'mark',
  51. style: { 'font-size': '30px' },
  52. class: 'my-style'
  53. }
  54. }
  55. ]
  56. }
  57. } )
  58. .then( newEditor => {
  59. editor = newEditor;
  60. doc = editor.model;
  61. } );
  62. } );
  63. it( 'should discard unknown fontSize attribute values', () => {
  64. setModelData( doc, '<paragraph>f<$text fontSize="foo-bar">o</$text>o</paragraph>' );
  65. expect( editor.getData() ).to.equal( '<p>foo</p>' );
  66. } );
  67. it( 'should convert fontSize attribute to predefined named preset', () => {
  68. setModelData( doc, '<paragraph>f<$text fontSize="tiny">o</$text>o</paragraph>' );
  69. expect( editor.getData() ).to.equal( '<p>f<span class="text-tiny">o</span>o</p>' );
  70. } );
  71. it( 'should convert fontSize attribute to predefined pixel size preset', () => {
  72. setModelData( doc, '<paragraph>f<$text fontSize="18">o</$text>o</paragraph>' );
  73. expect( editor.getData() ).to.equal( '<p>f<span style="font-size:18px;">o</span>o</p>' );
  74. } );
  75. it( 'should convert fontSize attribute from user defined settings', () => {
  76. setModelData( doc, '<paragraph>f<$text fontSize="my">o</$text>o</paragraph>' );
  77. expect( editor.getData() ).to.equal( '<p>f<mark class="my-style" style="font-size:30px;">o</mark>o</p>' );
  78. } );
  79. } );
  80. describe( 'data pipeline conversions', () => {
  81. beforeEach( () => {
  82. return VirtualTestEditor
  83. .create( {
  84. plugins: [ FontSizeEditing, Paragraph ],
  85. fontSize: {
  86. options: [
  87. 'tiny',
  88. 'normal',
  89. 18,
  90. {
  91. title: 'My setting',
  92. model: 'my',
  93. view: {
  94. name: 'mark',
  95. style: { 'font-size': '30px' },
  96. class: 'my-style'
  97. }
  98. },
  99. {
  100. title: 'Big multiple classes',
  101. model: 'big-multiple',
  102. view: {
  103. name: 'span',
  104. class: [ 'foo', 'foo-big' ]
  105. }
  106. },
  107. {
  108. title: 'Hybrid',
  109. model: 'complex',
  110. view: {
  111. name: 'span',
  112. class: [ 'text-complex' ]
  113. },
  114. acceptsAlso: [
  115. { name: 'span', style: { 'font-size': '77em' } },
  116. { name: 'span', attributes: { 'data-size': '77em' } }
  117. ]
  118. }
  119. ]
  120. }
  121. } )
  122. .then( newEditor => {
  123. editor = newEditor;
  124. doc = editor.model;
  125. } );
  126. } );
  127. it( 'should convert from element with defined class', () => {
  128. const data = '<p>f<span class="text-tiny foo bar">o</span>o</p>';
  129. editor.setData( data );
  130. expect( getModelData( doc ) ).to.equal( '<paragraph>[]f<$text fontSize="tiny">o</$text>o</paragraph>' );
  131. expect( editor.getData() ).to.equal( '<p>f<span class="text-tiny">o</span>o</p>' );
  132. } );
  133. it( 'should convert from element with defined multiple classes', () => {
  134. const data = '<p>f<span class="foo foo-big bar">o</span>o</p>';
  135. editor.setData( data );
  136. expect( getModelData( doc ) ).to.equal( '<paragraph>[]f<$text fontSize="big-multiple">o</$text>o</paragraph>' );
  137. expect( editor.getData() ).to.equal( '<p>f<span class="foo foo-big">o</span>o</p>' );
  138. } );
  139. it( 'should convert from element with defined style', () => {
  140. const data = '<p>f<span style="font-size:18px;">o</span>o</p>';
  141. editor.setData( data );
  142. expect( getModelData( doc ) ).to.equal( '<paragraph>[]f<$text fontSize="18">o</$text>o</paragraph>' );
  143. expect( editor.getData() ).to.equal( data );
  144. } );
  145. it( 'should convert from element with defined style when with other styles', () => {
  146. const data = '<p>f<span style="font-family: serif;font-size: 18px">o</span>o</p>';
  147. editor.setData( data );
  148. expect( getModelData( doc ) ).to.equal( '<paragraph>[]f<$text fontSize="18">o</$text>o</paragraph>' );
  149. expect( editor.getData() ).to.equal( '<p>f<span style="font-size:18px;">o</span>o</p>' );
  150. } );
  151. it( 'should convert from user defined element', () => {
  152. const data = '<p>f<mark class="my-style" style="font-size:30px;">o</mark>o</p>';
  153. editor.setData( data );
  154. expect( getModelData( doc ) ).to.equal( '<paragraph>[]f<$text fontSize="my">o</$text>o</paragraph>' );
  155. expect( editor.getData() ).to.equal( data );
  156. } );
  157. it( 'should convert from complex definitions', () => {
  158. editor.setData(
  159. '<p>f<span style="font-size: 77em;">o</span>o</p>' +
  160. '<p>b<span data-size="77em">a</span>r</p>' +
  161. '<p>b<span class="text-complex">a</span>z</p>'
  162. );
  163. expect( getModelData( doc ) ).to.equal(
  164. '<paragraph>[]f<$text fontSize="complex">o</$text>o</paragraph>' +
  165. '<paragraph>b<$text fontSize="complex">a</$text>r</paragraph>' +
  166. '<paragraph>b<$text fontSize="complex">a</$text>z</paragraph>'
  167. );
  168. expect( editor.getData() ).to.equal(
  169. '<p>f<span class="text-complex">o</span>o</p>' +
  170. '<p>b<span class="text-complex">a</span>r</p>' +
  171. '<p>b<span class="text-complex">a</span>z</p>'
  172. );
  173. } );
  174. } );
  175. } );