/**
* @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
*/
/* globals document, Event */
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import KeyObserver from '@ckeditor/ckeditor5-engine/src/view/observer/keyobserver';
import { toWidget } from '../src/utils';
import { setData as setModelData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
describe( 'Widget - Events', () => {
const EVENT_NAME = 'keyup';
let editor, editorElement, eventCallback, buttonIgnored, buttonRegular;
testUtils.createSinonSandbox();
beforeEach( async () => {
editorElement = createEditorElement();
editor = await createEditor( editorElement );
} );
afterEach( () => {
editorElement.remove();
if ( editor ) {
return editor.destroy();
}
} );
it( 'should not ignore events from child inside parent without the `data-cke-ignore-events` attribute', () => {
buttonRegular.dispatchEvent( new Event( EVENT_NAME, { bubbles: true } ) );
expect( eventCallback.callCount ).to.equal( 1 );
} );
it( 'should ignore events from child inside parent with the `data-cke-ignore-events` attribute', () => {
buttonIgnored.dispatchEvent( new Event( EVENT_NAME, { bubbles: true } ) );
expect( eventCallback.callCount ).to.equal( 0 );
} );
function createEditorElement() {
return document.body.appendChild( document.createElement( 'div' ) );
}
async function createEditor( element ) {
const editor = await ClassicEditor.create( element, { plugins: [ simpleWidgetPlugin ] } );
setModelData( editor.model, '[]' );
const container = Array
.from( editor.editing.view.document.getRoot().getChildren() )
.find( element => element.hasClass( 'simple-widget-container' ) );
const domFragment = editor.editing.view.domConverter.viewToDom( container );
buttonIgnored = domFragment.querySelector( '#ignored-button' );
buttonRegular = domFragment.querySelector( '#regular-button' );
return editor;
}
function simpleWidgetPlugin( editor ) {
defineSchema( editor );
defineConverters( editor );
addObserver( editor );
function defineSchema( editor ) {
editor.model.schema.register( 'simpleWidgetElement', {
inheritAllFrom: '$block',
isObject: true
} );
}
function defineConverters( editor ) {
editor.conversion.for( 'editingDowncast' )
.elementToElement( {
model: 'simpleWidgetElement',
view: ( modelElement, { writer } ) => {
const widgetElement = createWidgetView( modelElement, { writer } );
return toWidget( widgetElement, writer );
}
} );
editor.conversion.for( 'dataDowncast' )
.elementToElement( {
model: 'simpleWidgetElement',
view: createWidgetView
} );
editor.conversion.for( 'upcast' )
.elementToElement( {
model: 'simpleWidgetElement',
view: {
name: 'section',
classes: 'simple-widget-container'
}
} );
function createWidgetView( modelElement, { writer } ) {
const simpleWidgetContainer = writer.createContainerElement( 'section', { class: 'simple-widget-container' } );
const simpleWidgetElement = writer.createRawElement( 'div', { class: 'simple-widget-element' }, domElement => {
domElement.innerHTML = `
`;
} );
writer.insert( writer.createPositionAt( simpleWidgetContainer, 0 ), simpleWidgetElement );
return simpleWidgetContainer;
}
}
function addObserver( editor ) {
eventCallback = sinon.fake();
editor.editing.view.addObserver( KeyObserver );
editor.editing.view.document.on( EVENT_NAME, eventCallback );
}
}
} );