ueberdosis / tiptap

The headless rich text editor framework for web artisans.
https://tiptap.dev
MIT License
26.6k stars 2.23k forks source link

image extension enhancement - drag-to-resize #1354

Open acidjazz opened 3 years ago

acidjazz commented 3 years ago
stale[bot] commented 2 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

sereneinserenade commented 2 years ago

I've made an extension which can resize images and videos with help of NodeViews. Here's the repo https://github.com/sereneinserenade/tiptap-media-resize. You can try it out here https://sereneinserenade.github.io/tiptap-media-resize/ and here's a demo video.

https://user-images.githubusercontent.com/45892659/178123048-0257e732-8cc2-466b-8447-1e2b7cd1b5d9.mov

bdbch commented 2 years ago

Hey! While it's not on our highest priority right now I think this will become interesting after we're done with getting some bugs and issues out of the way.

svenwiegand commented 1 year ago

I like the way how Jira implements this: While resizing the image, vertical rulers are visible and the width always snaps to the nearest ruler. This ensures consistent widths across multiple images.

XinChou16 commented 1 year ago

I am looking forward to the implementation of such a function, zoom, rotate function is a very common function of the picture.

github-actions[bot] commented 1 year ago

This issue is stale because it has been open 45 days with no activity. Remove stale label or comment or this will be closed in 7 days

bdbch commented 1 year ago

Hey I came back to this issue. I added it to our project board that should hopefully be visible by tomorrow.

Current priority: Wishlist Current Effort: High

So we won't work on this in the foreseeable time. I worked on this feature for a client project recently and it was quite an effort to get it working with React Node Views. I thought about how to handle rendering and event binding without setting up a lot of code on your own when using the extension but didn't find a satisfying solution.

If anyone wants to pick this up feel free to help out with either an experiment or a PR.