widgetengine.js 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  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( () => widgetize( new ViewContainer( 'div' ) ) );
  31. buildModelConverter().for( editor.editing.modelToView )
  32. .fromElement( 'editable' )
  33. .toElement( () => new ViewEditable( 'figcaption', { contenteditable: true } ) );
  34. } );
  35. } );
  36. it( 'should be loaded', () => {
  37. expect( editor.plugins.get( WidgetEngine ) ).to.be.instanceOf( WidgetEngine );
  38. } );
  39. it( 'should apply fake view selection if model selection is on widget element', () => {
  40. setModelData( document, '[<widget>foo bar</widget>]' );
  41. expect( getViewData( viewDocument ) ).to.equal(
  42. '[<div class="ck-widget ck-widget_selected" contenteditable="false">foo bar</div>]'
  43. );
  44. expect( viewDocument.selection.isFake ).to.be.true;
  45. } );
  46. it( 'should toggle selected class', () => {
  47. setModelData( document, '[<widget>foo</widget>]' );
  48. expect( getViewData( viewDocument ) ).to.equal(
  49. '[<div class="ck-widget ck-widget_selected" contenteditable="false">foo</div>]'
  50. );
  51. document.enqueueChanges( () => {
  52. document.selection.collapseToStart();
  53. } );
  54. expect( getViewData( viewDocument ) ).to.equal(
  55. '[]<div class="ck-widget" contenteditable="false">foo</div>'
  56. );
  57. } );
  58. it( 'should do nothing when selection is placed in other editable', () => {
  59. setModelData( document, '<widget><editable>foo bar</editable></widget><editable>[baz]</editable>' );
  60. expect( getViewData( viewDocument ) ).to.equal(
  61. '<div class="ck-widget" contenteditable="false">' +
  62. '<figcaption contenteditable="true">foo bar</figcaption>' +
  63. '</div>' +
  64. '<figcaption contenteditable="true">{baz}</figcaption>'
  65. );
  66. } );
  67. } );