fontsizeediting.js 6.8 KB

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