Add text wrapping to FreeText editors (issue 18191) #19345
Conversation
Snuffleupagus
changed the title
There was a problem hiding this comment.
Please improve the commit message (see the commit history of the project for examples of how we usually write them):
- Note the updated PR title, which is thus also a good "title" for the commit message.
- Generally you want more than a single line in the commit message, such that relevant context is available also on the Git command line.
| // Not sure why we need the -16px but it's neccessary to prevent | ||
| // text shifting when user finishes typing. | ||
| this.div.style.maxWidth = `calc(100% - ${this.div.style.left} - 16px)`; |
There was a problem hiding this comment.
This looks too "magical", and really needs to be properly understood (and improved).
There was a problem hiding this comment.
the idea behind this is to subtract the left position (which is already a percentage) from 100% and that way we always ensure that the text editor will not go out of bounds(and will be forced to wrap into the next line).
I still need to find why the 16px is needed, maybe the internal padding of the editor also has effect on the max-width property.
There was a problem hiding this comment.
or better visually explained, we end up with this: (this is only when you click on the right edge)
Text wrapping is ensured by preventing the FreeText editor from going out of bounds. - max-width is a formula of (100% of the parentElement - the left % of the editor element) - this ensures that clicking on the very right edge of the document does - not create the editor out of bounds.
avdoseferovic
force-pushed
the
feat/add-text-wraping-to-freetext
branch
from
cbb1889 to
cd76eca
Compare
I'm aware that there is already an PR open with the similar promise, but the implementation is different.
Note: please read the gist comments https://gist.github.com/bennadel/033e0158f47bff9e066016f99567ebba
This solution might face performance issues with very large text being added.
Fixes: #18191
Before
Screen.Recording.2025-01-18.at.23.24.58.mov
After
Screen.Recording.2025-01-18.at.23.26.22.mov