New resizable node views for images and embeds

[bdbch]

Changes Overview

This PR is still WIP as I'm not done with the full implementation - however would like to have a demo online already.

It implements a new helper that helps creating resizable node views (for example for images, videos or more advanced usecases).

Implementation Approach

We create node views that auto-create all necessary resize handlers, event listeners given a configuration. This can be then used to render these resizable nodes for images, videos or other usecases.

Testing Done

N/A - will do later

Verification Steps

N/A - will do later

Additional Notes

N/A - will do later

Checklist

• I have created a changeset for this PR if necessary.
• My changes do not break the library.
• I have added tests where applicable.
• I have followed the project guidelines.
• I have fixed any lint issues.

Related Issues

Fixes #333

#5336

[changeset-bot]

🦋 Changeset detected

Latest commit: b7a27b1

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 57 packages

Name	Type
@tiptap/core	Major
@tiptap/extension-image	Major
@tiptap/extension-blockquote	Major
@tiptap/extension-bold	Major
@tiptap/extension-bubble-menu	Major
@tiptap/extension-code-block-lowlight	Major
@tiptap/extension-code-block	Major
@tiptap/extension-code	Major
@tiptap/extension-collaboration-caret	Major
@tiptap/extension-collaboration	Major
@tiptap/extension-document	Major
@tiptap/extension-floating-menu	Major
@tiptap/extension-hard-break	Major
@tiptap/extension-heading	Major
@tiptap/extension-highlight	Major
@tiptap/extension-horizontal-rule	Major
@tiptap/extension-italic	Major
@tiptap/extension-link	Major
@tiptap/extension-list	Major
@tiptap/extension-mention	Major
@tiptap/extension-paragraph	Major
@tiptap/extension-strike	Major
@tiptap/extension-subscript	Major
@tiptap/extension-superscript	Major
@tiptap/extension-table	Major
@tiptap/extension-text-align	Major
@tiptap/extension-text-style	Major
@tiptap/extension-text	Major
@tiptap/extension-typography	Major
@tiptap/extension-underline	Major
@tiptap/extension-youtube	Major
@tiptap/extensions	Major
@tiptap/html	Major
@tiptap/react	Major
@tiptap/starter-kit	Major
@tiptap/static-renderer	Major
@tiptap/suggestion	Major
@tiptap/vue-2	Major
@tiptap/vue-3	Major
@tiptap/extension-bullet-list	Major
@tiptap/extension-ordered-list	Major
@tiptap/extension-list-item	Major
@tiptap/extension-list-keymap	Major
@tiptap/extension-task-item	Major
@tiptap/extension-task-list	Major
@tiptap/extension-table-cell	Major
@tiptap/extension-table-header	Major
@tiptap/extension-table-row	Major
@tiptap/extension-color	Major
@tiptap/extension-font-family	Major
@tiptap/extension-character-count	Major
@tiptap/extension-dropcursor	Major
@tiptap/extension-focus	Major
@tiptap/extension-gapcursor	Major
@tiptap/extension-history	Major
@tiptap/extension-placeholder	Major
@tiptap/pm	Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[netlify]

✅ Deploy Preview for tiptap-embed ready!

Name	Link
🔨 Latest commit	b7a27b1
🔍 Latest deploy log	https://app.netlify.com/sites/tiptap-embed/deploys/6813abed07b00f00082a247f
😎 Deploy Preview	https://deploy-preview-6285--tiptap-embed.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[bdbch]

Added docs for this new feature here:
ueberdosis/tiptap-docs#177

[pkg-pr-new]

Open in StackBlitz

@tiptap/core

npm i https://pkg.pr.new/@tiptap/core@6285

@tiptap/extension-blockquote

npm i https://pkg.pr.new/@tiptap/extension-blockquote@6285

@tiptap/extension-bubble-menu

npm i https://pkg.pr.new/@tiptap/extension-bubble-menu@6285

@tiptap/extension-bullet-list

npm i https://pkg.pr.new/@tiptap/extension-bullet-list@6285

@tiptap/extension-bold

npm i https://pkg.pr.new/@tiptap/extension-bold@6285

@tiptap/extension-code

npm i https://pkg.pr.new/@tiptap/extension-code@6285

@tiptap/extension-code-block

npm i https://pkg.pr.new/@tiptap/extension-code-block@6285

@tiptap/extension-code-block-lowlight

npm i https://pkg.pr.new/@tiptap/extension-code-block-lowlight@6285

@tiptap/extension-collaboration

npm i https://pkg.pr.new/@tiptap/extension-collaboration@6285

@tiptap/extension-collaboration-caret

npm i https://pkg.pr.new/@tiptap/extension-collaboration-caret@6285

@tiptap/extension-color

npm i https://pkg.pr.new/@tiptap/extension-color@6285

@tiptap/extension-document

npm i https://pkg.pr.new/@tiptap/extension-document@6285

@tiptap/extension-floating-menu

npm i https://pkg.pr.new/@tiptap/extension-floating-menu@6285

@tiptap/extension-font-family

npm i https://pkg.pr.new/@tiptap/extension-font-family@6285

@tiptap/extension-hard-break

npm i https://pkg.pr.new/@tiptap/extension-hard-break@6285

@tiptap/extension-heading

npm i https://pkg.pr.new/@tiptap/extension-heading@6285

@tiptap/extension-highlight

npm i https://pkg.pr.new/@tiptap/extension-highlight@6285

@tiptap/extension-horizontal-rule

npm i https://pkg.pr.new/@tiptap/extension-horizontal-rule@6285

@tiptap/extension-image

npm i https://pkg.pr.new/@tiptap/extension-image@6285

@tiptap/extension-italic

npm i https://pkg.pr.new/@tiptap/extension-italic@6285

@tiptap/extension-link

npm i https://pkg.pr.new/@tiptap/extension-link@6285

@tiptap/extension-list

npm i https://pkg.pr.new/@tiptap/extension-list@6285

@tiptap/extension-mention

npm i https://pkg.pr.new/@tiptap/extension-mention@6285

@tiptap/extension-ordered-list

npm i https://pkg.pr.new/@tiptap/extension-ordered-list@6285

@tiptap/extension-paragraph

npm i https://pkg.pr.new/@tiptap/extension-paragraph@6285

@tiptap/extension-strike

npm i https://pkg.pr.new/@tiptap/extension-strike@6285

@tiptap/extension-subscript

npm i https://pkg.pr.new/@tiptap/extension-subscript@6285

@tiptap/extension-superscript

npm i https://pkg.pr.new/@tiptap/extension-superscript@6285

@tiptap/extension-table

npm i https://pkg.pr.new/@tiptap/extension-table@6285

@tiptap/extension-text

npm i https://pkg.pr.new/@tiptap/extension-text@6285

@tiptap/extension-text-align

npm i https://pkg.pr.new/@tiptap/extension-text-align@6285

@tiptap/extension-text-style

npm i https://pkg.pr.new/@tiptap/extension-text-style@6285

@tiptap/extension-typography

npm i https://pkg.pr.new/@tiptap/extension-typography@6285

@tiptap/extension-underline

npm i https://pkg.pr.new/@tiptap/extension-underline@6285

@tiptap/extension-youtube

npm i https://pkg.pr.new/@tiptap/extension-youtube@6285

@tiptap/extensions

npm i https://pkg.pr.new/@tiptap/extensions@6285

@tiptap/html

npm i https://pkg.pr.new/@tiptap/html@6285

@tiptap/pm

npm i https://pkg.pr.new/@tiptap/pm@6285

@tiptap/react

npm i https://pkg.pr.new/@tiptap/react@6285

@tiptap/starter-kit

npm i https://pkg.pr.new/@tiptap/starter-kit@6285

@tiptap/static-renderer

npm i https://pkg.pr.new/@tiptap/static-renderer@6285

@tiptap/suggestion

npm i https://pkg.pr.new/@tiptap/suggestion@6285

@tiptap/vue-2

npm i https://pkg.pr.new/@tiptap/vue-2@6285

@tiptap/vue-3

npm i https://pkg.pr.new/@tiptap/vue-3@6285

commit: a3c84c1

[arnaugomez]

I set this to draft because it's WIP, not ready to review

[sertxudev]

Superseded by #6679