Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow users to provide absolute css units to editor.resize function #4010

Merged
merged 15 commits into from
May 15, 2020

Conversation

hub33k
Copy link
Contributor

@hub33k hub33k commented Apr 30, 2020

What is the purpose of this pull request?

Bug fix

Does your PR contain necessary tests?

All patches that change the editor code must include tests. You can always read more
on PR testing,
how to set the testing environment and
how to create tests
in the official CKEditor documentation.

This PR contains

  • Unit tests
  • Manual tests

Did you follow the CKEditor 4 code style guide?

Your code should follow the guidelines from the CKEditor 4 code style guide which helps keep the entire codebase consistent.

  • PR is consistent with the code style guide

What is the proposed changelog entry for this pull request?

*[#1883](https://github.com/ckeditor/ckeditor4/issues/1883): Allow users to pass absolute css units to `editor.resize` function.

What changes did you make?

Allow users to pass absolute css units to editor.resize function.

Which issues does your PR resolve?

Closes #1883.

Copy link
Member

@jacekbogdanski jacekbogdanski left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Approach with unifying units for both methods seems right 👍 Note, that we are missing manual test for element.setSize and unit tests for both changed files. Please, add missing test coverage.

Also, please add a changelog entry suggestion in the top comment.

core/creators/themedui.js Outdated Show resolved Hide resolved
core/creators/themedui.js Outdated Show resolved Hide resolved
} else if ( typeof size == 'string' ) {
size = CKEDITOR.tools.convertToPx( size );

if ( typeof size != 'string' && isBorderBox && !( CKEDITOR.env.ie && CKEDITOR.env.quirks ) )
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is typeof size != 'string' && condition required at this point?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, if user passes percent value as width then size is still type of string. I can simplify it.

core/dom/element.js Outdated Show resolved Hide resolved

1. Open browser developer tools.

1. In console paste: `CKEDITOR.instances[ 'editor' ].resize( '20em', '10em' )`
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using developer tools to test this issue is not the most optimal approach as we cannot test it on mobiles. It also requires additional test steps. Maybe we could go with more complex test e.g. by adding CSS style inputs?
image

@jacekbogdanski
Copy link
Member

#4010 (comment)

You are right, sorry I point you to wrong direction, didn't now that convertToPx works soo picky and seems to handle only absolute units. I'm wondering if we would be able to improve convertToPx, so it also correctly handles relative units like percentage and also viewport, initial etc.

It may be possible that it will be easier to fix the issue directly inside editor#resize method than fight with convertToPx, because converting units like % or viewport size could require iterating to parent. It seems like convertToPx may require some rewriting or docs rewording though, as it incorrectly implies that handles CSS length value, which is not 100% true.

Could you check if we can operate on CSS lengths instead inside editor#resize method or successfully fix convertToPx method? The latter may be more complicated, but more useful in the long run.

@hub33k hub33k force-pushed the t/1883 branch 2 times, most recently from 47bd4bd to 90a3be4 Compare May 7, 2020 13:35
@hub33k hub33k changed the title Allow users to provide css units to editor.resize function Allow users to provide absolute css units to editor.resize function May 8, 2020
@hub33k hub33k requested a review from jacekbogdanski May 8, 2020 11:48
@jacekbogdanski jacekbogdanski self-assigned this May 11, 2020
Copy link
Member

@jacekbogdanski jacekbogdanski left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is additional issue with CKEDITOR.tools.convertToPx method which seems to work only with CSS units. You can verify it by calling CKEIDTOR.tools.convertToPx( 900 ). Please, see the review comments.

tests/core/creators/manual/resizewithcssunits.md Outdated Show resolved Hide resolved
tests/core/creators/manual/resizewithcssunits.md Outdated Show resolved Hide resolved
tests/core/creators/manual/resizewithcssunits.html Outdated Show resolved Hide resolved
tests/core/creators/manual/resizewithcssunits.html Outdated Show resolved Hide resolved
core/creators/themedui.js Outdated Show resolved Hide resolved
core/creators/themedui.js Outdated Show resolved Hide resolved
core/creators/themedui.js Outdated Show resolved Hide resolved
tests/core/creators/themedui.js Show resolved Hide resolved
Copy link
Member

@jacekbogdanski jacekbogdanski left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM 👍

I removed the manual test scenarios for inner resize as it gives hilarious feedback when used without caution and as it doesn't take part in unit conversion it's not important for this test. Also removed quarter-millimeters to simplify testing as this unit is not widely supported.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants