Skip to content

fix(editor): let image captions be selected as document text - #952

Open
horacioh wants to merge 19 commits into
mainfrom
devin/1786352128-image-caption-selection
Open

fix(editor): let image captions be selected as document text#952
horacioh wants to merge 19 commits into
mainfrom
devin/1786352128-image-caption-selection

Conversation

@horacioh

Copy link
Copy Markdown
Collaborator

Summary

Fixes #925: caption text could not be range-selected in edit mode, so the fragment actions built on selections (Copy Link, Comment → #blk-image[start:end]) were unreachable for captions.

Two independent causes, both in the image render path:

  1. BlockSelectionWrapper wrapped the whole image subtree in contentEditable={false}. A ProseMirror view manages a single contenteditable range, so the caption (which is real inline content of the image block) became its own editing host: view.hasFocus() stayed false and prosemirror-view discarded every caption selection.
  2. MediaContainer's outer wrapper was draggable=true, so caption mouse drags became native drags instead of text selection.
-<BlockSelectionWrapper editor={editor} block={block}>
+<BlockSelectionWrapper editor={editor} block={block} keepEditable={mediaType === 'image'}>

 // media-container.tsx: draggable moves off the wrapper (the caption's ancestor)
-<div className="…flex-col…" draggable={canAuthor} onDragStart={…} onDragEnd={…}>
+<div className="…flex-col…">
   <div {...mediaProps} contentEditable={false}
+       draggable={canAuthor} onDragStart={…} onDragEnd={…}>

The media surface itself stays contentEditable={false} and draggable, so click-to-select, side-menu drag, and reorder are unchanged.

Third change, a consequence of the first: Enter in a caption was handled by a React onKeyDown on the caption element, and the Enter keymap explicitly no-op'd for image blocks to defer to it. Now that the caption is part of the outer editing host, keydown targets div.ProseMirror and never reaches that React handler — Enter silently did nothing. The behavior moves into the keymap branch that used to be the no-op:

// KeyboardShortcutsExtension, handleEnter
if (blockContentType === 'image' && !(selection instanceof NodeSelection)) {
  const nextTextPos = TextSelection.near(doc.resolve(block.afterPos), 1).from
  nextTextPos > block.afterPos
    ? tr.setSelection(TextSelection.create(tr.doc, nextTextPos))   // move to next block
    : tr.insert(block.afterPos, blockNode.create(null, paragraph.create()))  // image is last
}

Tests

  • media-container.test.tsx: new assertions that no caption ancestor is contenteditable=false or draggable=true, and that the media surface keeps both. Both failed before the fix. The three unit tests covering the removed React Enter handler are deleted — that behavior now lives in the keymap and is covered end-to-end instead.
  • image-caption.e2e.ts: keyboard selection (asserting a non-empty TextSelection inside the image block, view.hasFocus(), and the formatting toolbar appearing), mouse drag selection, bold on a caption range, and Enter with the image as the last block.
  • Full editor E2E suite passes (103 passed / 12 skipped). The 9 pre-existing unit failures in embed-editor, readonly-viewer-gallery and BlockManipulationExtension reproduce unchanged on the base branch.

docs/projects/image-caption-selection.md holds the investigation and the remaining phased test plan (media regression sweep, clipboard/SSR, mobile), plus links to the follow-up issues #926#931.

Link to Devin session: https://app.devin.ai/sessions/923dddc749c646c8965bc2110a7d9ab4
Requested by: @horacioh


Open in Devin Review

horacioh and others added 19 commits July 31, 2026 11:32
Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Drop the rebase of fork commits onto main: the sync workflow now force pushes upstream/main straight to main, and lives on custom-images (the default branch) together with every other fork change.

Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
main is mirrored from upstream every day; custom-images only moves when a new X.Y.Z tag shows up, rebased onto the tag itself so <version>-custom is exactly that release plus the fork commits.

Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Tags pushed with GITHUB_TOKEN do not trigger workflows, so the GHCR build has to be dispatched explicitly at the new <version>-custom tag.

Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Image captions render inline content, but BlockSelectionWrapper wrapped the
whole image subtree in contenteditable=false, making the caption its own
editing host so ProseMirror discarded every caption selection, and the media
wrapper's draggable=true turned caption drags into native drags. Fragment
actions (Copy Link, Comment) on caption ranges were unreachable.

Caption Enter handling moves from a React onKeyDown (which no longer receives
the event now that the caption is in the outer editing host) to the Enter
keymap, where it was already special-cased as a no-op.

Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
…caption

TextSelection.near returns a NodeSelection when the block after the image is an atom (video, file, embed); rewrapping its position in TextSelection.create built a text selection with no textblock to live in.

Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
…vior

Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
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.

Image caption text cannot be selected in edit mode

1 participant