widgetengine.js 3.6 KB

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