How to use @ckeditor/ckeditor5-core - 10 common examples

describe( 'ImageStyle utils', () => {
	let imageStyles;

	testUtils.createSinonSandbox();

	describe( 'normalizeImageStyles()', () => {
		// Since this function is all about normalizing the config object, make sure it doesn't throw
		// if the config is empty (which may happen e.g. if only ImageStyleUI was loaded).
		it( 'does not throw when given undefined', () => {
			expect( normalizeImageStyles() ).to.deep.equal( [] );
		} );

		describe( 'object format', () => {
			beforeEach( () => {
				imageStyles = normalizeImageStyles( [
					{ name: 'foo', title: 'foo', icon: 'custom', isDefault: true, className: 'foo-class' },
					{ name: 'bar', title: 'bar', icon: 'right', className: 'bar-class' },
					{ name: 'baz', title: 'Side image', icon: 'custom', className: 'baz-class' },

					// Customized default styles.

it( 'should not fire `selectionChangeDone` event when observer will be destroyed', () => {
		const clock = testUtils.sinon.useFakeTimers();
		const spy = sinon.spy();

		viewDocument.on( 'selectionChangeDone', spy );

		// Change selection.
		changeFakeSelectionPressing( keyCodes.arrowdown );

		// Wait 100ms.
		clock.tick( 100 );

		// And destroy observer.
		observer.destroy();

		// Wait another 110ms.
		clock.tick( 110 );

beforeEach( () => {
		element = document.createElement( 'div' );
		document.body.appendChild( element );

		// Most tests assume non-edge environment but we do not set `contenteditable=false` on Edge so stub `env.isEdge`.
		testUtils.sinon.stub( env, 'isEdge' ).get( () => false );

		return ClassicTestEditor.create( element, { extraPlugins: [ Delete ] } )
			.then( newEditor => {
				editor = newEditor;
				model = editor.model;
				doc = model.document;
				root = doc.getRoot( 'main' );
				view = editor.editing.view;

				defaultSchema( model.schema );
				defaultConversion( editor.conversion, true );

				editor.model.schema.register( 'block', {
					inheritAllFrom: '$block'
				} );
				editor.conversion.elementToElement( { model: 'block', view: 'div' } );

				model.schema.extend( '$block', { allowAttributes: [ 'foo', 'bar' ] } );

beforeEach( () => {
		// Most tests assume non-edge environment but we do not set `contenteditable=false` on Edge so stub `env.isEdge`.
		testUtils.sinon.stub( env, 'isEdge' ).get( () => false );

		editorElement = global.document.createElement( 'div' );
		global.document.body.appendChild( editorElement );

		return ClassicTestEditor
			.create( editorElement, {
				plugins: [ Image ]
			} )
			.then( newEditor => {
				editor = newEditor;
				model = editor.model;
				document = model.document;
				view = editor.editing.view;
				viewDocument = editor.editing.view.document;
			} );
	} );

describe( 'Image converters', () => {
	let editor, model, document, viewDocument;

	testUtils.createSinonSandbox();

	beforeEach( () => {
		// Most tests assume non-edge environment but we do not set `contenteditable=false` on Edge so stub `env.isEdge`.
		testUtils.sinon.stub( env, 'isEdge' ).get( () => false );

		return VirtualTestEditor.create()
			.then( newEditor => {
				editor = newEditor;
				model = editor.model;
				document = model.document;
				viewDocument = editor.editing.view;

				const schema = model.schema;

				schema.register( 'image', {
					allowWhere: '$block',

describe( 'ImageEditing', () => {
	let editor, model, doc, view, viewDocument;

	testUtils.createSinonSandbox();

	beforeEach( () => {
		// Most tests assume non-edge environment but we do not set `contenteditable=false` on Edge so stub `env.isEdge`.
		testUtils.sinon.stub( env, 'isEdge' ).get( () => false );

		return VirtualTestEditor
			.create( {
				plugins: [ ImageEditing ]
			} )
			.then( newEditor => {
				editor = newEditor;
				model = editor.model;
				doc = model.document;
				view = editor.editing.view;
				viewDocument = view.document;
			} );

describe( 'ImageStyleEditing', () => {
	let editor, model, document, viewDocument;

	testUtils.createSinonSandbox( 'ImageStyleEditing' );

	beforeEach( () => {
		// Most tests assume non-edge environment but we do not set `contenteditable=false` on Edge so stub `env.isEdge`.
		testUtils.sinon.stub( env, 'isEdge' ).get( () => false );
	} );

	afterEach( () => {
		editor.destroy();
	} );

	describe( 'plugin', () => {
		beforeEach( () => {
			return VirtualTestEditor
				.create( {
					plugins: [ ImageEditing, ImageStyleEditing ]
				} )

beforeEach( () => {
		// Most tests assume non-edge environment but we do not set `contenteditable=false` on Edge so stub `env.isEdge`.
		testUtils.sinon.stub( env, 'isEdge' ).get( () => false );

		return VirtualTestEditor.create()
			.then( newEditor => {
				editor = newEditor;
				model = editor.model;
				document = model.document;
				viewDocument = editor.editing.view;

				const schema = model.schema;

				schema.register( 'image', {
					allowWhere: '$block',
					allowAttributes: [ 'alt', 'src' ],
					isObject: true,
					isBlock: true
				} );

				const editingElementCreator = ( modelElement, viewWriter ) =>

if ( isEdgeEnv ) {
			sinon.stub( window, 'File' ).callsFake( () => {
				return { name: 'file.jpg' };
			} );
		}

		// Most tests assume non-edge environment but we do not set `contenteditable=false` on Edge so stub `env.isEdge`.
		sinon.stub( env, 'isEdge' ).get( () => false );

		sinon.stub( window, 'FileReader' ).callsFake( () => {
			nativeReaderMock = new NativeFileReaderMock();

			return nativeReaderMock;
		} );

		return VirtualTestEditor
			.create( {
				plugins: [ ImageEditing, ImageUploadEditing, Paragraph, UndoEditing, UploadAdapterPluginMock, Clipboard ]
			} )
			.then( newEditor => {
				editor = newEditor;
				model = editor.model;
				doc = model.document;
				view = editor.editing.view;
				viewDocument = view.document;

				// Stub `view.scrollToTheSelection` as it will fail on VirtualTestEditor without DOM.
				sinon.stub( view, 'scrollToTheSelection' ).callsFake( () => {} );
			} );
	} );

beforeEach( () => {
			// Most tests assume non-edge environment but we do not set `contenteditable=false` on Edge so stub `env.isEdge`.
			testUtils.sinon.stub( env, 'isEdge' ).get( () => false );

			editorElement = global.document.createElement( 'div' );
			global.document.body.appendChild( editorElement );

			return ClassicTestEditor
				.create( editorElement, {
					plugins: [ Image, ImageToolbar, BalloonToolbar, Paragraph ]
				} )
				.then( editor => {
					newEditor = editor;
					balloon = newEditor.plugins.get( 'ContextualBalloon' );
					balloonToolbar = newEditor.plugins.get( 'BalloonToolbar' );
					const button = new View();

					button.element = global.document.createElement( 'div' );