Skip to content

feat(editor): detect image URLs on paste and display as image blocks#121

Merged
j4rviscmd merged 2 commits intomainfrom
feat/image-url-paste
Mar 29, 2026
Merged

feat(editor): detect image URLs on paste and display as image blocks#121
j4rviscmd merged 2 commits intomainfrom
feat/image-url-paste

Conversation

@j4rviscmd
Copy link
Copy Markdown
Owner

Summary

  • Implement multi-stage image URL detection pipeline (extension check → known domain heuristic → async HEAD Content-Type check) to render pasted HTTPS image URLs as image blocks instead of plain links
  • Add 3-tier naming strategy for image blocks: page title → filename without extension → "image"
  • Fix RenameDialog focus management by moving it outside BlockNoteView
  • Add read-only path row with copy button to RenameDialog
  • Strip extension from local image upload names for consistency

Changes

New files

  • src/features/editor/lib/imageUrlDetection.ts — sync image URL detection utilities (extension, domain, LRU cache)
  • src/features/editor/api/imageUrlDetection.ts — frontend wrapper for Rust HEAD command
  • src/features/editor/lib/__tests__/imageUrlDetection.test.ts — 30 unit tests
  • vitest.config.ts — test runner configuration

Modified files

  • src-tauri/src/link_preview.rs — add check_url_content_type command (HEAD with Range fallback)
  • src-tauri/src/lib.rs — register new command in invoke_handler
  • src-tauri/tauri.conf.json — add https: to CSP img-src for remote image display
  • src/features/editor/hooks/useLinkPreview.ts — multi-stage paste handler with async title fallback
  • src/features/editor/ui/Editor.tsx — move RenameDialog outside BlockNoteView
  • src/features/editor/ui/RenameDialog.tsx — accept editor as prop, add PathRow component
  • src/features/editor/ui/RenameButton.tsx — pass url prop to dialog state
  • src/features/editor/api/imageUpload.ts — strip extension from uploaded image names

Test plan

  • Paste HTTPS image URL (e.g. .jpg, .png) → image block rendered immediately
  • Paste URL from known image hosting domain (imgur, etc.) → image block rendered
  • Paste non-image URL → link inserted, title fetched asynchronously
  • Image block name shows page title when available, filename fallback otherwise
  • RenameDialog: Cancel/Save does not move cursor to end of note
  • RenameDialog: name input is focusable and editable
  • RenameDialog: path row truncates long paths, copy button works
  • Local image paste → name shows filename without extension
  • Existing functionality (local upload, link paste) unchanged

🤖 Generated with Claude Code

j4rviscmd and others added 2 commits March 29, 2026 17:40
HTTPS image URLs pasted into the editor are now detected via a
multi-stage pipeline (extension check → known domain heuristic →
async HEAD Content-Type check) and rendered as image blocks instead
of plain links.  A three-tier naming strategy is applied:
page title → filename without extension → "image".

Also fixes RenameDialog focus issues by moving it outside BlockNoteView,
adds a read-only path row with copy button to the dialog, and strips
the extension from local image upload names for consistency.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@j4rviscmd j4rviscmd added the enhancement New feature or request label Mar 29, 2026
@j4rviscmd j4rviscmd merged commit c3c2ed4 into main Mar 29, 2026
2 checks passed
@j4rviscmd j4rviscmd deleted the feat/image-url-paste branch March 29, 2026 08:54
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant