fontsizeediting.js 6.9 KB

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