diff --git a/src/ballooneditor.js b/src/ballooneditor.js index 8d38e8c..6f50024 100644 --- a/src/ballooneditor.js +++ b/src/ballooneditor.js @@ -20,6 +20,7 @@ import attachToForm from '@ckeditor/ckeditor5-core/src/editor/utils/attachtoform import mix from '@ckeditor/ckeditor5-utils/src/mix'; import { isElement } from 'lodash-es'; import CKEditorError from '@ckeditor/ckeditor5-utils/src/ckeditorerror'; +import secureSourceElement from '@ckeditor/ckeditor5-core/src/editor/utils/securesourceelement'; /** * The {@glink builds/guides/overview#balloon-editor balloon editor} implementation (Medium-like editor). @@ -66,10 +67,12 @@ export default class BalloonEditor extends Editor { if ( isElement( sourceElementOrData ) ) { this.sourceElement = sourceElementOrData; + secureSourceElement( this ); } const plugins = this.config.get( 'plugins' ); plugins.push( BalloonToolbar ); + this.config.set( 'plugins', plugins ); this.config.define( 'balloonToolbar', this.config.get( 'toolbar' ) ); diff --git a/tests/ballooneditor.js b/tests/ballooneditor.js index ae68c86..277dcec 100644 --- a/tests/ballooneditor.js +++ b/tests/ballooneditor.js @@ -86,6 +86,23 @@ describe( 'BalloonEditor', () => { return newEditor.destroy(); } ); } ); + + // See: https://github.com/ckeditor/ckeditor5/issues/746 + it( 'should throw when trying to create the editor using the same source element more than once', done => { + BalloonEditor.create( editorElement ) + .then( + () => { + expect.fail( 'Balloon editor should not initialize on an element already used by other instance.' ); + }, + err => { + assertCKEditorError( err, + /^editor-source-element-already-used/ + ); + } + ) + .then( done ) + .catch( done ); + } ); } ); describe( 'create()', () => { @@ -127,6 +144,9 @@ describe( 'BalloonEditor', () => { } ); it( 'should not require config object', () => { + const editorElement = document.createElement( 'div' ); + editorElement.innerHTML = '

foo bar

'; + // Just being safe with `builtinPlugins` static property. class CustomBalloonEditor extends BalloonEditor {} CustomBalloonEditor.builtinPlugins = [ Paragraph, Bold ]; @@ -136,6 +156,9 @@ describe( 'BalloonEditor', () => { expect( newEditor.getData() ).to.equal( '

foo bar

' ); return newEditor.destroy(); + } ) + .then( () => { + editorElement.remove(); } ); } ); @@ -150,13 +173,18 @@ describe( 'BalloonEditor', () => { } ); it( 'initializes with config.initialData', () => { + const editorElement = document.createElement( 'div' ); + editorElement.innerHTML = '

foo bar

'; + return BalloonEditor.create( editorElement, { initialData: '

Hello world!

', plugins: [ Paragraph ] } ).then( editor => { expect( editor.getData() ).to.equal( '

Hello world!

' ); - editor.destroy(); + return editor.destroy(); + } ).then( () => { + editorElement.remove(); } ); } );