fontsizeediting.js 9.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316
  1. /**
  2. * @license Copyright (c) 2003-2020, 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. expect( editor.config.get( 'fontSize.disableValueMatching' ) ).to.equal( false );
  47. } );
  48. } );
  49. describe( 'disableValueMatching=true', () => {
  50. let editor, doc;
  51. beforeEach( () => {
  52. return VirtualTestEditor
  53. .create( {
  54. plugins: [ FontSizeEditing, Paragraph ],
  55. fontSize: {
  56. disableValueMatching: true
  57. }
  58. } )
  59. .then( newEditor => {
  60. editor = newEditor;
  61. doc = editor.model;
  62. } );
  63. } );
  64. afterEach( () => {
  65. return editor.destroy();
  66. } );
  67. describe( 'editing pipeline conversion', () => {
  68. it( 'should pass fontSize to data', () => {
  69. setModelData( doc, '<paragraph>f<$text fontSize="10px">o</$text>o</paragraph>' );
  70. expect( editor.getData() ).to.equal( '<p>f<span style="font-size:10px;">o</span>o</p>' );
  71. } );
  72. it( 'should add a unit to value if missing', () => {
  73. setModelData( doc, '<paragraph>f<$text fontSize="10">o</$text>o</paragraph>' );
  74. expect( editor.getData() ).to.equal( '<p>f<span style="font-size:10px;">o</span>o</p>' );
  75. } );
  76. it( 'should convert a text value as a class', () => {
  77. setModelData( doc, '<paragraph>f<$text fontSize="large">o</$text>o</paragraph>' );
  78. expect( editor.getData() ).to.equal( '<p>f<span class="text-large">o</span>o</p>' );
  79. } );
  80. } );
  81. describe( 'data pipeline conversions', () => {
  82. it( 'should convert from an element with defined style when with other styles', () => {
  83. const data = '<p>f<span style="font-family: Other;font-size: 18px">o</span>o</p>';
  84. editor.setData( data );
  85. expect( getModelData( doc ) ).to.equal( '<paragraph>[]f<$text fontSize="18px">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 an element if it has a class that starts with "text-"', () => {
  89. editor.setData( '<p>f<span class="text-huge">o</span>o</p>' );
  90. expect( getModelData( doc ) ).to.equal( '<paragraph>[]f<$text fontSize="1.8em">o</$text>o</paragraph>' );
  91. expect( editor.getData() ).to.equal( '<p>f<span style="font-size:1.8em;">o</span>o</p>' );
  92. } );
  93. it( 'should ignore an element if it has a class starts with "text-" but does not match to any preset', () => {
  94. editor.setData( '<p>f<span class="text-default">o</span>o</p>' );
  95. expect( getModelData( doc ) ).to.equal( '<paragraph>[]foo</paragraph>' );
  96. expect( editor.getData() ).to.equal( '<p>foo</p>' );
  97. } );
  98. it( 'should ignore an element if does not have a class that starts with "text-"', () => {
  99. editor.setData( '<p>f<span class="foo">o</span>o</p>' );
  100. expect( getModelData( doc ) ).to.equal( '<paragraph>[]foo</paragraph>' );
  101. expect( editor.getData() ).to.equal( '<p>foo</p>' );
  102. } );
  103. } );
  104. } );
  105. } );
  106. describe( 'editing pipeline conversion', () => {
  107. beforeEach( () => {
  108. return VirtualTestEditor
  109. .create( {
  110. plugins: [ FontSizeEditing, Paragraph ],
  111. fontSize: {
  112. options: [
  113. 'tiny',
  114. 'default',
  115. 18,
  116. {
  117. title: 'My setting',
  118. model: 'my',
  119. view: {
  120. name: 'mark',
  121. styles: { 'font-size': '30px' },
  122. classes: 'my-style'
  123. }
  124. }
  125. ]
  126. }
  127. } )
  128. .then( newEditor => {
  129. editor = newEditor;
  130. doc = editor.model;
  131. } );
  132. } );
  133. it( 'should discard unknown fontSize attribute values', () => {
  134. setModelData( doc, '<paragraph>f<$text fontSize="foo-bar">o</$text>o</paragraph>' );
  135. expect( editor.getData() ).to.equal( '<p>foo</p>' );
  136. } );
  137. it( 'should convert fontSize attribute to predefined named preset', () => {
  138. setModelData( doc, '<paragraph>f<$text fontSize="tiny">o</$text>o</paragraph>' );
  139. expect( editor.getData() ).to.equal( '<p>f<span class="text-tiny">o</span>o</p>' );
  140. } );
  141. it( 'should convert fontSize attribute to predefined pixel size preset', () => {
  142. setModelData( doc, '<paragraph>f<$text fontSize="18">o</$text>o</paragraph>' );
  143. expect( editor.getData() ).to.equal( '<p>f<span style="font-size:18px;">o</span>o</p>' );
  144. } );
  145. it( 'should convert fontSize attribute from user defined settings', () => {
  146. setModelData( doc, '<paragraph>f<$text fontSize="my">o</$text>o</paragraph>' );
  147. expect( editor.getData() ).to.equal( '<p>f<mark class="my-style" style="font-size:30px;">o</mark>o</p>' );
  148. } );
  149. } );
  150. describe( 'data pipeline conversions', () => {
  151. beforeEach( () => {
  152. return VirtualTestEditor
  153. .create( {
  154. plugins: [ FontSizeEditing, Paragraph ],
  155. fontSize: {
  156. options: [
  157. 'tiny',
  158. 'default',
  159. 18,
  160. {
  161. title: 'My setting',
  162. model: 'my',
  163. view: {
  164. name: 'mark',
  165. styles: { 'font-size': '30px' },
  166. classes: 'my-style'
  167. }
  168. },
  169. {
  170. title: 'Big multiple classes',
  171. model: 'big-multiple',
  172. view: {
  173. name: 'span',
  174. classes: [ 'foo', 'foo-big' ]
  175. }
  176. },
  177. {
  178. title: 'Hybrid',
  179. model: 'complex',
  180. view: {
  181. name: 'span',
  182. classes: [ 'text-complex' ]
  183. },
  184. upcastAlso: [
  185. { name: 'span', styles: { 'font-size': '77em' } },
  186. { name: 'span', attributes: { 'data-size': '77em' } }
  187. ]
  188. }
  189. ]
  190. }
  191. } )
  192. .then( newEditor => {
  193. editor = newEditor;
  194. doc = editor.model;
  195. } );
  196. } );
  197. it( 'should convert from element with defined class', () => {
  198. const data = '<p>f<span class="text-tiny foo bar">o</span>o</p>';
  199. editor.setData( data );
  200. expect( getModelData( doc ) ).to.equal( '<paragraph>[]f<$text fontSize="tiny">o</$text>o</paragraph>' );
  201. expect( editor.getData() ).to.equal( '<p>f<span class="text-tiny">o</span>o</p>' );
  202. } );
  203. it( 'should convert from element with defined multiple classes', () => {
  204. const data = '<p>f<span class="foo foo-big bar">o</span>o</p>';
  205. editor.setData( data );
  206. expect( getModelData( doc ) ).to.equal( '<paragraph>[]f<$text fontSize="big-multiple">o</$text>o</paragraph>' );
  207. expect( editor.getData() ).to.equal( '<p>f<span class="foo foo-big">o</span>o</p>' );
  208. } );
  209. it( 'should convert from element with defined style', () => {
  210. const data = '<p>f<span style="font-size:18px;">o</span>o</p>';
  211. editor.setData( data );
  212. expect( getModelData( doc ) ).to.equal( '<paragraph>[]f<$text fontSize="18">o</$text>o</paragraph>' );
  213. expect( editor.getData() ).to.equal( data );
  214. } );
  215. it( 'should convert from element with defined style when with other styles', () => {
  216. const data = '<p>f<span style="font-family: serif;font-size: 18px">o</span>o</p>';
  217. editor.setData( data );
  218. expect( getModelData( doc ) ).to.equal( '<paragraph>[]f<$text fontSize="18">o</$text>o</paragraph>' );
  219. expect( editor.getData() ).to.equal( '<p>f<span style="font-size:18px;">o</span>o</p>' );
  220. } );
  221. it( 'should convert from user defined element', () => {
  222. const data = '<p>f<mark class="my-style" style="font-size:30px;">o</mark>o</p>';
  223. editor.setData( data );
  224. expect( getModelData( doc ) ).to.equal( '<paragraph>[]f<$text fontSize="my">o</$text>o</paragraph>' );
  225. expect( editor.getData() ).to.equal( data );
  226. } );
  227. it( 'should convert from complex definitions', () => {
  228. editor.setData(
  229. '<p>f<span style="font-size: 77em;">o</span>o</p>' +
  230. '<p>b<span data-size="77em">a</span>r</p>' +
  231. '<p>b<span class="text-complex">a</span>z</p>'
  232. );
  233. expect( getModelData( doc ) ).to.equal(
  234. '<paragraph>[]f<$text fontSize="complex">o</$text>o</paragraph>' +
  235. '<paragraph>b<$text fontSize="complex">a</$text>r</paragraph>' +
  236. '<paragraph>b<$text fontSize="complex">a</$text>z</paragraph>'
  237. );
  238. expect( editor.getData() ).to.equal(
  239. '<p>f<span class="text-complex">o</span>o</p>' +
  240. '<p>b<span class="text-complex">a</span>r</p>' +
  241. '<p>b<span class="text-complex">a</span>z</p>'
  242. );
  243. } );
  244. } );
  245. } );