Autogrow width issue

[foraliexp]

Hi,
I am trying to use the Autogrow plugin, I set the height "CKEDITOR.config.height = 150;" and width "CKEDITOR.config.width = '600';". Then I fill with the content so that the height matches, at this point the whole editor changes the width to a smaller one. Each new line reduces the width by 2px.

[Dumluregn]

I can confirm this issue. It was introduced in 4.14.1. Steps to reproduce (see demo):

1. Focus editor content (autogrow will adjust the height to the editor content).
2. Start adding new lines.

Expected: Editor width doesn't change.
Actual: As @foraliexp mentioned, with each new line (but also then lines are removed), the editor width is decreased by 2px.

[Dumluregn]

In #4286 there is an explanation why the issue occurs (see Debugging details section).

[sculpt0r]

Based on @Dumluregn comment and tests: it happens only when width is set on a fixed value.
Issue can't be reproduced with flexible width (CKEDITOR.config.width = auto;)

[sculpt0r]

Also a related issue: #4323 and PR: #4376

Find that autogrow test fails when I use a bigger data set. So vertically scrollbar appears. Not sure if messure method should cover that in tests?

I think that autogrow test also missed some test cases - in the case of editor width. It could be auto, fix value like 200 or edge number case: 0.

So I think I add those cases at first.

The thing that makes me curious is a way of taking editor size. There is a method for that in autogrow tools:

ckeditor4/tests/plugins/autogrow/_helpers/tools.js

Line 6 in d7c0f1f

width: parseInt( editor.getResizable().getComputedStyle( 'width' ), 10 ),

while plugin makes it only like that:

ckeditor4/plugins/autogrow/plugin.js

Line 150 in d7c0f1f

editor.resize( editor.container.getStyle( 'width' ), newHeight, true );

Shouldn't test use the same logic as a tested component?

[sculpt0r]

The autogrow plugin takes width by:

ckeditor4/plugins/autogrow/plugin.js

Line 150 in d7c0f1f

editor.resize( editor.container.getStyle( 'width' ), newHeight, true );

which is independent of box-sizing. Seems to be good.

Next it's going to:

ckeditor4/core/creators/themedui.js

Line 276 in 6e145e4

CKEDITOR.editor.prototype.resize = function( width, height, isContentHeight, resizeInner ) {

and call

ckeditor4/core/creators/themedui.js

Line 295 in 6e145e4

outer.setSize( 'width', width, true );

which always assume width is border-box (last true argument).

It leads to:

ckeditor4/core/dom/element.js

Line 2249 in 6e145e4

CKEDITOR.dom.element.prototype.setSize = function( type, size, isBorderBox ) {

This method decrease provided width by margin and padding size.

ckeditor4/core/dom/element.js

Line 2252 in 6e145e4

size -= marginAndPaddingSize.call( this, type );

Summary:
The plugin should call editor.resize with width prepared to be decreased by paddings and margins. So I think there is a quite good method getSize(width, isBorderBox) which takes care of border-box.

[CKEditorBot]

Closed in #4393