diff --git a/packages/ckeditor5-ui/src/index.ts b/packages/ckeditor5-ui/src/index.ts index 385ae42283f..a269d0a8bf1 100644 --- a/packages/ckeditor5-ui/src/index.ts +++ b/packages/ckeditor5-ui/src/index.ts @@ -61,7 +61,7 @@ export { default as InputView } from './input/inputview'; export { default as InputTextView } from './inputtext/inputtextview'; export { default as InputNumberView } from './inputnumber/inputnumberview'; -export { default as TextareaView, type TextareaViewAutoGrowEvent } from './textarea/textareaview'; +export { default as TextareaView, type TextareaViewUpdateEvent } from './textarea/textareaview'; export { default as IframeView } from './iframe/iframeview'; diff --git a/packages/ckeditor5-ui/src/textarea/textareaview.ts b/packages/ckeditor5-ui/src/textarea/textareaview.ts index 835ce0b8e71..7129fb9d89f 100644 --- a/packages/ckeditor5-ui/src/textarea/textareaview.ts +++ b/packages/ckeditor5-ui/src/textarea/textareaview.ts @@ -101,11 +101,15 @@ export default class TextareaView extends InputBase { this.on( 'input', () => { this._updateAutoGrowHeight( true ); + this.fire( 'update' ); } ); this.on( 'change:value', () => { // The content needs to be updated by the browser after the value is changed. It takes a few ms. - global.window.requestAnimationFrame( () => this._updateAutoGrowHeight() ); + global.window.requestAnimationFrame( () => { + this._updateAutoGrowHeight(); + this.fire( 'update' ); + } ); } ); } @@ -116,6 +120,7 @@ export default class TextareaView extends InputBase { super.reset(); this._updateAutoGrowHeight(); + this.fire( 'update' ); } /** @@ -159,8 +164,6 @@ export default class TextareaView extends InputBase { singleLineContentClone.remove(); fullTextValueClone.remove(); - - this.fire( 'autoGrow' ); } /** @@ -198,14 +201,12 @@ function getTextareaElementClone( element: HTMLTextAreaElement, value: string ): } /** - * Fired when the logic of {@link module:ui/textarea/textareaview~TextareaView} checks whether - * the component should be resized upon user interaction. - * - * See {@link module:ui/textarea/textareaview~TextareaView#minRows}, {@link module:ui/textarea/textareaview~TextareaView#maxRows}. + * Fired every time the layout of the {@link module:ui/textarea/textareaview~TextareaView} possibly changed as a result + * of the user input or the value change via {@link module:ui/textarea/textareaview~TextareaView#value}. * - * @eventName ~TextareaView#autoGrow + * @eventName ~TextareaView#update */ -export type TextareaViewAutoGrowEvent = { - name: 'autoGrow'; +export type TextareaViewUpdateEvent = { + name: 'update'; args: []; }; diff --git a/packages/ckeditor5-ui/tests/textarea/textareaview.js b/packages/ckeditor5-ui/tests/textarea/textareaview.js index 118eb1a3a47..69bd79aa2b7 100644 --- a/packages/ckeditor5-ui/tests/textarea/textareaview.js +++ b/packages/ckeditor5-ui/tests/textarea/textareaview.js @@ -164,11 +164,13 @@ describe( 'TextareaView', () => { await requestAnimationFrame(); expect( parseFloat( view.element.style.height ) ).to.equal( twoRowsHeight ); } ); + } ); - it( 'should fire the #autoGrow event', () => { + describe( '#update event', () => { + it( 'should get fired on the user #input', () => { const spy = sinon.spy(); - view.on( 'autoGrow', spy ); + view.on( 'update', spy ); view.element.value = '1\n2\n3\n4\n5\n6'; @@ -180,6 +182,34 @@ describe( 'TextareaView', () => { // The event gets fired whether the view is changing dimensions or not. sinon.assert.calledTwice( spy ); } ); + + it( 'should get fired on #value change', async () => { + const spy = sinon.spy(); + + view.on( 'update', spy ); + + view.value = '1\n2\n3\n4\n5\n6'; + + await requestAnimationFrame(); + + sinon.assert.calledOnce( spy ); + } ); + + it( 'should be fired upon reset()', async () => { + const spy = sinon.spy(); + + view.on( 'update', spy ); + + view.value = '1\n2\n3\n4\n5\n6'; + + await requestAnimationFrame(); + + sinon.assert.calledOnce( spy ); + + view.reset(); + + sinon.assert.calledTwice( spy ); + } ); } ); } );