widgetengine.js 3.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  1. /**
  2. * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. import VirtualTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/virtualtesteditor';
  6. import WidgetEngine from '../../src/widget/widgetengine';
  7. import buildModelConverter from '@ckeditor/ckeditor5-engine/src/conversion/buildmodelconverter';
  8. import { setData as setModelData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
  9. import { getData as getViewData } from '@ckeditor/ckeditor5-engine/src/dev-utils/view';
  10. import ViewContainer from '@ckeditor/ckeditor5-engine/src/view/containerelement';
  11. import ViewEditable from '@ckeditor/ckeditor5-engine/src/view/editableelement';
  12. import { widgetize } from '../../src/widget/utils';
  13. describe( 'WidgetEngine', () => {
  14. let editor, document, viewDocument;
  15. beforeEach( () => {
  16. return VirtualTestEditor.create( {
  17. plugins: [ WidgetEngine ]
  18. } )
  19. .then( newEditor => {
  20. editor = newEditor;
  21. document = editor.document;
  22. viewDocument = editor.editing.view;
  23. document.schema.registerItem( 'widget', '$block' );
  24. document.schema.registerItem( 'editable' );
  25. document.schema.allow( { name: '$inline', inside: 'editable' } );
  26. document.schema.allow( { name: 'editable', inside: 'widget' } );
  27. document.schema.allow( { name: 'editable', inside: '$root' } );
  28. buildModelConverter().for( editor.editing.modelToView )
  29. .fromElement( 'widget' )
  30. .toElement( () => {
  31. const element = widgetize( new ViewContainer( 'div' ), { label: 'element label' } );
  32. return element;
  33. } );
  34. buildModelConverter().for( editor.editing.modelToView )
  35. .fromElement( 'editable' )
  36. .toElement( () => new ViewEditable( 'figcaption', { contenteditable: true } ) );
  37. } );
  38. } );
  39. it( 'should be loaded', () => {
  40. expect( editor.plugins.get( WidgetEngine ) ).to.be.instanceOf( WidgetEngine );
  41. } );
  42. it( 'should apply fake view selection if model selection is on widget element', () => {
  43. setModelData( document, '[<widget>foo bar</widget>]' );
  44. expect( getViewData( viewDocument ) ).to.equal(
  45. '[<div class="ck-widget ck-widget_selected" contenteditable="false">foo bar</div>]'
  46. );
  47. expect( viewDocument.selection.isFake ).to.be.true;
  48. } );
  49. it( 'should use element\'s label to set fake selection if one is provided', () => {
  50. setModelData( document, '[<widget>foo bar</widget>]' );
  51. expect( viewDocument.selection.fakeSelectionLabel ).to.equal( 'element label' );
  52. } );
  53. it( 'fake selection should be empty if widget is not selected', () => {
  54. setModelData( document, '<widget>foo bar</widget>' );
  55. expect( viewDocument.selection.fakeSelectionLabel ).to.equal( '' );
  56. } );
  57. it( 'should toggle selected class', () => {
  58. setModelData( document, '[<widget>foo</widget>]' );
  59. expect( getViewData( viewDocument ) ).to.equal(
  60. '[<div class="ck-widget ck-widget_selected" contenteditable="false">foo</div>]'
  61. );
  62. document.enqueueChanges( () => {
  63. document.selection.collapseToStart();
  64. } );
  65. expect( getViewData( viewDocument ) ).to.equal(
  66. '[]<div class="ck-widget" contenteditable="false">foo</div>'
  67. );
  68. } );
  69. it( 'should do nothing when selection is placed in other editable', () => {
  70. setModelData( document, '<widget><editable>foo bar</editable></widget><editable>[baz]</editable>' );
  71. expect( getViewData( viewDocument ) ).to.equal(
  72. '<div class="ck-widget" contenteditable="false">' +
  73. '<figcaption contenteditable="true">foo bar</figcaption>' +
  74. '</div>' +
  75. '<figcaption contenteditable="true">{baz}</figcaption>'
  76. );
  77. } );
  78. } );