Dynamic size restrictions in AutoGrow feature

[Olek Nowodziński]

At the moment AutoGrow plugin supports ​config.autoGrow_minHeight and ​config.autoGrow_maxHeight along with ​editor#autoGrow event, which can be used to force a custom height on every editor resize, i.e.

CKEDITOR.replace( 'editor2', {
	extraPlugins: 'autogrow',
	autoGrow_maxHeight: 400,
	removePlugins: 'resize',
	on: {
		autoGrow: function( evt ) {
			evt.data.newHeight = 42;
		}
	}
} );

Such behaviour is desired when the space around the editor is changing, i.e. window is resized, other page elements collapse or expand.

The event, however, controls height only, while overflow-y of editable area remains relative to config.autoGrow_maxHeight. The result is that even though it is possible to customise the main behaviour of the plugin, the scrollbar of editable area might be missing, making editor contents unreachable, which is a serious UX flaw.

Possible solutions:

1. Implement editor.plugins.autoGrow.setMaxHeight, which would override config.autoGrow_maxHeight on demand.
   1. + Solves the problem.
   2. - Change is permanent. Some devs may want to override autoGrow_maxHeight on demand, while in other cases they would expect default configuration to be preserved and respected.
2. Re-implement editor#autoGrow event, so autoGrow_maxHeight can be changed for every single event.
   1. + Solves the problem.
   2. + The impact of config.autoGrow_maxHeight remains.
   3. - Makes the code less obvious.
   4. - It's not straightforward. Hard to reach in documentation.

[Piotrek Koszuliński]

cc

[Jakub Ś]

+1 for solution number two.

[Marek Lewandowski]

Let's try to solve it in 4.6.0. In meanwhile I was able to put together a workaround for that:

editor.on( 'autoGrow', function( evt ) {
	// A workaround to control scrollbar appearance when using autoGrow event to control editor's
	// height.

	// Low priority listener to show/hide scrollbar depending on inner part height.
	// Important: to make it work your config.autoGrow_maxHeight needs to be set to false.
	var doc = evt.editor.document,
		scrollable = CKEDITOR.env.quirks ? doc.getBody() : doc.getDocumentElement();

	if ( scrollable.$.scrollHeight < scrollable.$.clientHeight ) {
		scrollable.setStyle( 'overflow-y', 'hidden' );
	} else {
		scrollable.removeStyle( 'overflow-y' );
	}
}, null, null, 10000 );

Note that this code will work only for classic editor, needs to be adjusted to support inline.

[Wim Leers]

Thanks!

Note that this code will work only for classic editor, needs to be adjusted to support inline.

But why would you even want that? Autogrow only makes sense for classic (iframe) editor. For inline, it grows automatically anyway, unless you have very special CSS.

So, if this works, then this is fine to use until it is fixed in the plugin itself.

Even the autogrow plugin itself explicitly says this:

	CKEDITOR.plugins.add( 'autogrow', {
		init: function( editor ) {
			// This feature is available only for themed ui instance.
			if ( editor.elementMode == CKEDITOR.ELEMENT_MODE_INLINE )
				return;

			editor.on( 'instanceReady', function() {
				// Simply set auto height with div wysiwyg.
				if ( editor.editable().isInline() )
					editor.ui.space( 'contents' ).setStyle( 'height', 'auto' );
				// For classic (`iframe`-based) wysiwyg we need to resize the editor.
				else
					initIframeAutogrow( editor );
			} );
		}
	} );   

[Marek Lewandowski]

Ahhh, cool. In fact I was concerned about divarea, but I didn't check how autogrow integrates with it. :)