Skip to content

feat: bring resizable image back to editor#4226

Open
devin-ai-integration[bot] wants to merge 1 commit intomainfrom
devin/1772014304-resizable-image
Open

feat: bring resizable image back to editor#4226
devin-ai-integration[bot] wants to merge 1 commit intomainfrom
devin/1772014304-resizable-image

Conversation

@devin-ai-integration
Copy link
Contributor

Summary

Brings back resizable image support in the tiptap editor, as described in #3327. This uses the ResizableNodeView API from @tiptap/core v3.x to add drag-to-resize handles on images.

Key changes:

  • packages/tiptap/src/shared/extensions/index.ts: Adds width/height attributes to AttachmentImage, implements a custom addNodeView() using ResizableNodeView with resize/commit callbacks, adds extractAttachmentIdFromSrc() helper for parseMarkdown, and enables resize with all 8 directions.
  • packages/tiptap/src/styles/base.css: Adds position: relative on .node-image, a global img { display: block } rule inside .tiptap, and CSS for all resize handle variants (corners + edges) with appropriate cursors.

Review & Testing Checklist for Human

  • Test image resizing end-to-end: Drop/paste an image into the editor and verify resize handles appear and dragging them resizes the image correctly. Check that resized dimensions persist after blur/re-focus.
  • Verify onCommit with multiple images: editor.commands.updateAttributes("image", ...) targets the currently selected node — confirm that resizing one image doesn't affect dimensions of other images in the same document.
  • Check addNodeView() returning null: When resize is disabled or not configured (e.g. via options.imageExtension), the method returns null. Verify tiptap handles this gracefully and falls back to the default image rendering.
  • Review broad img { display: block } rule: This applies to all img tags inside .tiptap — confirm it doesn't break non-image-node images or inline image use cases.
  • Test extractAttachmentIdFromSrc regex: Verify it correctly extracts UUIDs from your actual attachment URLs and returns null for non-attachment URLs (e.g. external image links).

Notes

- Add ResizableNodeView from @tiptap/core for image resize support
- Add width/height attributes to AttachmentImage extension
- Add custom addNodeView() with resize handles and callbacks
- Add extractAttachmentIdFromSrc helper for parseMarkdown
- Configure resize directions (all 8 directions)
- Add CSS styles for resize handles

Closes #3327

Co-Authored-By: John <john@hyprnote.com>
@netlify
Copy link

netlify bot commented Feb 25, 2026

Deploy Preview for hyprnote-storybook ready!

Name Link
🔨 Latest commit 0f7ca99
🔍 Latest deploy log https://app.netlify.com/projects/hyprnote-storybook/deploys/699ecb5c61f2950008f7c04a
😎 Deploy Preview https://deploy-preview-4226--hyprnote-storybook.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

@netlify
Copy link

netlify bot commented Feb 25, 2026

Deploy Preview for hyprnote ready!

Name Link
🔨 Latest commit 0f7ca99
🔍 Latest deploy log https://app.netlify.com/projects/hyprnote/deploys/699ecb5cd1081d00080d0246
😎 Deploy Preview https://deploy-preview-4226--hyprnote.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

@devin-ai-integration
Copy link
Contributor Author

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

  • Address comments on this PR that start with 'DevinAI' or '@devin'.
  • Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

  • Disable automatic comment and CI monitoring

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Bring resizable image back to editor (?)

1 participant