8
0

placeholder.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420
  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 {
  6. enablePlaceholder,
  7. disablePlaceholder,
  8. showPlaceholder,
  9. hidePlaceholder,
  10. needsPlaceholder
  11. } from '../../src/view/placeholder';
  12. import createViewRoot from './_utils/createroot';
  13. import View from '../../src/view/view';
  14. import ViewRange from '../../src/view/range';
  15. import { setData } from '../../src/dev-utils/view';
  16. import { StylesProcessor } from '../../src/view/stylesmap';
  17. describe( 'placeholder', () => {
  18. let view, viewDocument, viewRoot;
  19. beforeEach( () => {
  20. view = new View( new StylesProcessor() );
  21. viewDocument = view.document;
  22. viewRoot = createViewRoot( viewDocument );
  23. viewDocument.isFocused = true;
  24. } );
  25. describe( 'enablePlaceholder', () => {
  26. it( 'should attach proper CSS class and data attribute', () => {
  27. setData( view, '<div></div><div>{another div}</div>' );
  28. const element = viewRoot.getChild( 0 );
  29. enablePlaceholder( {
  30. view,
  31. element,
  32. text: 'foo bar baz'
  33. } );
  34. expect( element.getAttribute( 'data-placeholder' ) ).to.equal( 'foo bar baz' );
  35. expect( element.hasClass( 'ck-placeholder' ) ).to.be.true;
  36. } );
  37. it( 'should attach proper CSS class and data attribute (isDirectHost=false)', () => {
  38. setData( view, '<p></p>' );
  39. viewDocument.isFocused = false;
  40. enablePlaceholder( {
  41. view,
  42. element: viewRoot,
  43. text: 'foo bar baz',
  44. isDirectHost: false
  45. } );
  46. expect( viewRoot.getChild( 0 ).getAttribute( 'data-placeholder' ) ).to.equal( 'foo bar baz' );
  47. expect( viewRoot.getChild( 0 ).hasClass( 'ck-placeholder' ) ).to.be.true;
  48. } );
  49. it( 'if element has children set only data attribute', () => {
  50. setData( view, '<div>first div</div><div>{another div}</div>' );
  51. const element = viewRoot.getChild( 0 );
  52. enablePlaceholder( {
  53. view,
  54. element,
  55. text: 'foo bar baz'
  56. } );
  57. expect( element.getAttribute( 'data-placeholder' ) ).to.equal( 'foo bar baz' );
  58. expect( element.hasClass( 'ck-placeholder' ) ).to.be.false;
  59. } );
  60. it( 'if element has only ui elements, set CSS class and data attribute', () => {
  61. setData( view, '<div><ui:span></ui:span><ui:span></ui:span></div><div>{another div}</div>' );
  62. const element = viewRoot.getChild( 0 );
  63. enablePlaceholder( {
  64. view,
  65. element,
  66. text: 'foo bar baz'
  67. } );
  68. expect( element.getAttribute( 'data-placeholder' ) ).to.equal( 'foo bar baz' );
  69. expect( element.hasClass( 'ck-placeholder' ) ).to.be.true;
  70. } );
  71. it( 'if element has selection inside set only data attribute', () => {
  72. setData( view, '<div>[]</div><div>another div</div>' );
  73. const element = viewRoot.getChild( 0 );
  74. enablePlaceholder( {
  75. view,
  76. element,
  77. text: 'foo bar baz'
  78. } );
  79. expect( element.getAttribute( 'data-placeholder' ) ).to.equal( 'foo bar baz' );
  80. expect( element.hasClass( 'ck-placeholder' ) ).to.be.false;
  81. } );
  82. it( 'if element has selection inside but document is blurred should contain placeholder CSS class', () => {
  83. setData( view, '<div>[]</div><div>another div</div>' );
  84. const element = viewRoot.getChild( 0 );
  85. viewDocument.isFocused = false;
  86. enablePlaceholder( {
  87. view,
  88. element,
  89. text: 'foo bar baz'
  90. } );
  91. view.forceRender();
  92. expect( element.getAttribute( 'data-placeholder' ) ).to.equal( 'foo bar baz' );
  93. expect( element.hasClass( 'ck-placeholder' ) ).to.be.true;
  94. } );
  95. it( 'should remove CSS class if selection is moved inside', () => {
  96. setData( view, '<div></div><div>{another div}</div>' );
  97. const element = viewRoot.getChild( 0 );
  98. enablePlaceholder( {
  99. view,
  100. element,
  101. text: 'foo bar baz'
  102. } );
  103. expect( element.getAttribute( 'data-placeholder' ) ).to.equal( 'foo bar baz' );
  104. expect( element.hasClass( 'ck-placeholder' ) ).to.be.true;
  105. view.change( writer => {
  106. writer.setSelection( ViewRange._createIn( element ) );
  107. } );
  108. expect( element.hasClass( 'ck-placeholder' ) ).to.be.false;
  109. } );
  110. it( 'should change placeholder settings when called twice', () => {
  111. setData( view, '<div></div><div>{another div}</div>' );
  112. const element = viewRoot.getChild( 0 );
  113. enablePlaceholder( {
  114. view,
  115. element,
  116. text: 'foo bar baz'
  117. } );
  118. enablePlaceholder( {
  119. view,
  120. element,
  121. text: 'new text'
  122. } );
  123. expect( element.getAttribute( 'data-placeholder' ) ).to.equal( 'new text' );
  124. expect( element.hasClass( 'ck-placeholder' ) ).to.be.true;
  125. } );
  126. it( 'should not throw when element is no longer in document', () => {
  127. setData( view, '<div></div><div>{another div}</div>' );
  128. const element = viewRoot.getChild( 0 );
  129. enablePlaceholder( {
  130. view,
  131. element,
  132. text: 'foo bar baz'
  133. } );
  134. setData( view, '<p>paragraph</p>' );
  135. view.forceRender();
  136. } );
  137. it( 'should allow to add placeholder to elements from different documents', () => {
  138. setData( view, '<div></div><div>{another div}</div>' );
  139. const element = viewRoot.getChild( 0 );
  140. const secondView = new View( new StylesProcessor() );
  141. const secondDocument = secondView.document;
  142. secondDocument.isFocused = true;
  143. const secondRoot = createViewRoot( secondDocument );
  144. setData( secondView, '<div></div><div>{another div}</div>' );
  145. const secondElement = secondRoot.getChild( 0 );
  146. enablePlaceholder( {
  147. view,
  148. element,
  149. text: 'first placeholder'
  150. } );
  151. enablePlaceholder( {
  152. view: secondView,
  153. element: secondElement,
  154. text: 'second placeholder'
  155. } );
  156. expect( element.getAttribute( 'data-placeholder' ) ).to.equal( 'first placeholder' );
  157. expect( element.hasClass( 'ck-placeholder' ) ).to.be.true;
  158. expect( secondElement.getAttribute( 'data-placeholder' ) ).to.equal( 'second placeholder' );
  159. expect( secondElement.hasClass( 'ck-placeholder' ) ).to.be.true;
  160. // Move selection to the elements with placeholders.
  161. view.change( writer => {
  162. writer.setSelection( ViewRange._createIn( element ) );
  163. } );
  164. secondView.change( writer => {
  165. writer.setSelection( ViewRange._createIn( secondElement ) );
  166. } );
  167. expect( element.getAttribute( 'data-placeholder' ) ).to.equal( 'first placeholder' );
  168. expect( element.hasClass( 'ck-placeholder' ) ).to.be.false;
  169. expect( secondElement.getAttribute( 'data-placeholder' ) ).to.equal( 'second placeholder' );
  170. expect( secondElement.hasClass( 'ck-placeholder' ) ).to.be.false;
  171. } );
  172. it( 'should update placeholder before rendering', () => {
  173. setData( view, '<div></div><div>{another div}</div>' );
  174. const element = viewRoot.getChild( 0 );
  175. enablePlaceholder( {
  176. view,
  177. element,
  178. text: 'foo bar baz'
  179. } );
  180. view.change( writer => {
  181. writer.setSelection( ViewRange._createIn( element ) );
  182. // Here we are before rendering - placeholder is visible in first element;
  183. expect( element.getAttribute( 'data-placeholder' ) ).to.equal( 'foo bar baz' );
  184. expect( element.hasClass( 'ck-placeholder' ) ).to.be.true;
  185. } );
  186. // After rendering - placeholder should be invisible since selection is moved there.
  187. expect( element.hasClass( 'ck-placeholder' ) ).to.be.false;
  188. } );
  189. it( 'should not set attributes/class when multiple children (isDirectHost=false)', () => {
  190. setData( view, '<p></p><p></p>' );
  191. viewDocument.isFocused = false;
  192. enablePlaceholder( {
  193. view,
  194. element: viewRoot,
  195. text: 'foo bar baz',
  196. isDirectHost: false
  197. } );
  198. expect( viewRoot.getChild( 0 ).hasAttribute( 'data-placeholder' ) ).to.be.false;
  199. expect( viewRoot.getChild( 0 ).hasClass( 'ck-placeholder' ) ).to.be.false;
  200. } );
  201. it( 'should not set attributes/class when first child is not element (isDirectHost=false)', () => {
  202. setData( view, '<ui:span></ui:span>' );
  203. viewDocument.isFocused = false;
  204. enablePlaceholder( {
  205. view,
  206. element: viewRoot,
  207. text: 'foo bar baz',
  208. isDirectHost: false
  209. } );
  210. expect( viewRoot.getChild( 0 ).hasAttribute( 'data-placeholder' ) ).to.be.false;
  211. expect( viewRoot.getChild( 0 ).hasClass( 'ck-placeholder' ) ).to.be.false;
  212. } );
  213. } );
  214. describe( 'disablePlaceholder', () => {
  215. it( 'should remove placeholder from element', () => {
  216. setData( view, '<div></div><div>{another div}</div>' );
  217. const element = viewRoot.getChild( 0 );
  218. enablePlaceholder( {
  219. view,
  220. element,
  221. text: 'foo bar baz'
  222. } );
  223. expect( element.getAttribute( 'data-placeholder' ) ).to.equal( 'foo bar baz' );
  224. expect( element.hasClass( 'ck-placeholder' ) ).to.be.true;
  225. disablePlaceholder( view, element );
  226. expect( element.hasAttribute( 'data-placeholder' ) ).to.be.false;
  227. expect( element.hasClass( 'ck-placeholder' ) ).to.be.false;
  228. } );
  229. it( 'should not blow up when called on element without placeholder', () => {
  230. setData( view, '<div></div><div>{another div}</div>' );
  231. const element = viewRoot.getChild( 0 );
  232. disablePlaceholder( view, element );
  233. expect( element.hasAttribute( 'data-placeholder' ) ).to.be.false;
  234. expect( element.hasClass( 'ck-placeholder' ) ).to.be.false;
  235. } );
  236. it( 'should remove placeholder from element (isDirectHost=false)', () => {
  237. setData( view, '<p></p>' );
  238. viewDocument.isFocused = false;
  239. enablePlaceholder( {
  240. view,
  241. element: viewRoot,
  242. text: 'foo bar baz',
  243. isDirectHost: false
  244. } );
  245. expect( viewRoot.getChild( 0 ).getAttribute( 'data-placeholder' ) ).to.equal( 'foo bar baz' );
  246. expect( viewRoot.getChild( 0 ).hasClass( 'ck-placeholder' ) ).to.be.true;
  247. disablePlaceholder( view, viewRoot );
  248. expect( viewRoot.getChild( 0 ).hasAttribute( 'data-placeholder' ) ).to.be.false;
  249. expect( viewRoot.getChild( 0 ).hasClass( 'ck-placeholder' ) ).to.be.false;
  250. } );
  251. } );
  252. describe( 'showPlaceholder', () => {
  253. it( 'should add the ck-placholder class if an element does not have it', () => {
  254. setData( view, '<div></div>' );
  255. const element = viewRoot.getChild( 0 );
  256. const result = view.change( writer => showPlaceholder( writer, element ) );
  257. expect( element.hasClass( 'ck-placeholder' ) ).to.be.true;
  258. expect( result ).to.be.true;
  259. } );
  260. it( 'should do nothing if an element already has the ck-placeholder class', () => {
  261. setData( view, '<div class="ck-placeholder"></div>' );
  262. const element = viewRoot.getChild( 0 );
  263. let spy;
  264. const result = view.change( writer => {
  265. spy = sinon.spy( writer, 'addClass' );
  266. return showPlaceholder( writer, element );
  267. } );
  268. expect( element.hasClass( 'ck-placeholder' ) ).to.be.true;
  269. expect( result ).to.be.false;
  270. sinon.assert.notCalled( spy );
  271. } );
  272. } );
  273. describe( 'hidePlaceholder', () => {
  274. it( 'should remove the ck-placholder class if an element has it', () => {
  275. setData( view, '<div class="ck-placeholder"></div>' );
  276. const element = viewRoot.getChild( 0 );
  277. const result = view.change( writer => hidePlaceholder( writer, element ) );
  278. expect( element.hasClass( 'ck-placeholder' ) ).to.be.false;
  279. expect( result ).to.be.true;
  280. } );
  281. it( 'should do nothing if an element has no ck-placeholder class', () => {
  282. setData( view, '<div></div>' );
  283. const element = viewRoot.getChild( 0 );
  284. let spy;
  285. const result = view.change( writer => {
  286. spy = sinon.spy( writer, 'removeClass' );
  287. return hidePlaceholder( writer, element );
  288. } );
  289. expect( element.hasClass( 'ck-placeholder' ) ).to.be.false;
  290. expect( result ).to.be.false;
  291. sinon.assert.notCalled( spy );
  292. } );
  293. } );
  294. describe( 'needsPlaceholder', () => {
  295. it( 'should return false if element was removed from the document', () => {
  296. setData( view, '<p></p>' );
  297. viewDocument.isFocused = false;
  298. const element = viewRoot.getChild( 0 );
  299. expect( needsPlaceholder( element ) ).to.be.true;
  300. view.change( writer => {
  301. writer.remove( element );
  302. } );
  303. expect( needsPlaceholder( element ) ).to.be.false;
  304. } );
  305. it( 'should return true if element is empty and document is blurred', () => {
  306. setData( view, '<p></p>' );
  307. viewDocument.isFocused = false;
  308. const element = viewRoot.getChild( 0 );
  309. expect( needsPlaceholder( element ) ).to.be.true;
  310. } );
  311. it( 'should return true if element hosts UI elements only and document is blurred', () => {
  312. setData( view, '<p><ui:span></ui:span></p>' );
  313. viewDocument.isFocused = false;
  314. const element = viewRoot.getChild( 0 );
  315. expect( needsPlaceholder( element ) ).to.be.true;
  316. } );
  317. it( 'should return true when document is focused but selection anchored somewhere else', () => {
  318. setData( view, '<p></p><p>{moo}</p>' );
  319. viewDocument.isFocused = true;
  320. const element = viewRoot.getChild( 0 );
  321. expect( needsPlaceholder( element ) ).to.be.true;
  322. } );
  323. } );
  324. } );