(WIP)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.
src/display/editor/freetext.js
Outdated
| // 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)
avdoseferovic
force-pushed
the
feat/add-text-wraping-to-freetext
branch
from
cbb1889 to
cd76eca
Compare
|
/botio-linux preview |
From: Bot.io (Linux m4)ReceivedCommand cmd_preview from @calixteman received. Current queue size: 0 Live output at: http://54.241.84.105:8877/58c61e5873c6787/output.txt |
From: Bot.io (Linux m4)SuccessFull output at http://54.241.84.105:8877/58c61e5873c6787/output.txt Total script time: 0.86 mins Published |
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
cd76eca to
0208f0b
Compare
|
@calixteman please do ignore this for now, my initial approach only worked when pages were not rotated. I tried extending it, but the resulting text after print/save is messed up |
avdoseferovic
changed the title
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