search

PrismJS / live

Prism Live: Lightweight, extensible editable code editors. A work in progress, try it out at your own risk (and report bugs!) :)
https://live.prismjs.com
MIT License
105 stars 28 forks source link

Sync textarea and pre tag height, width with wrapper #2

Closed zverbeta closed 6 years ago

LeaVerou commented 6 years ago

Hey, thanks for contributing! However, there's already code in there to sync these heights. Did you find a case where it didn't work?

zverbeta commented 6 years ago

This fix adjust child blocks to parent container.

The problem is in the child blocks that are positioned absolutely. When we resize the textarea, this action does not affect the pre tag

So, i adding (height, width) to parent container (.prism-live)

zverbeta commented 6 years ago

Its didn't work if we resize textarea manualy

LeaVerou commented 6 years ago

Hi @zverbeta, which is why I added resize: none to the textareas :)

zverbeta commented 6 years ago

And what's wrong with handling an event for resizing and changing the container depending on the size?

LeaVerou commented 6 years ago

Because until ResizeObserver is reliably supported, it's inherently flaky. There's a zillion things besides manual resizing that can resize the textarea, and it won't respond to most of them. Also, relying on the mouse for resizing:

  1. assumes there's a mouse, so it fails in cases where there isn't one (there are people who cannot use a mouse).
  2. Even if there is a mouse, waiting for mouse interaction to sync the sizes will be a jarring user experience. Users don't like things abruptly jumping around as they use a website.
  3. Even if mouse interaction was sufficient, it's overkill. In most interactions, the mouse moves around wildly, and with this you'd be syncing the height every single time, even if nothing actually changed.

I'm gonna go ahead and close this, but don't let that discourage you from future contributions! I really appreciate that you discovered this long before release (sshh! 🤫) and took the time to contribute!

Cheers, Lea