Prevent Safari Live Text selection on attachment images#918
Prevent Safari Live Text selection on attachment images#918
Conversation
Safari's Live Text recognizes text within images and makes it selectable. After dragging an attachment image, subsequent interactions can trigger this text recognition, highlighting text inside the image unexpectedly. Add draggable="false" to the upload node's preview image (the permanent node already has this) and the -webkit-user-select prefix to attachment preview images for Safari consistency. Fixes: https://app.fizzy.do/5986089/cards/5121 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
There was a problem hiding this comment.
Pull request overview
Tip
If you aren't ready for review, convert to a draft PR.
Click "Convert to draft" or run gh pr ready --undo.
Click "Ready for review" or run gh pr ready to reengage.
This PR aims to reduce unintended Safari Live Text interactions on attachment preview media by disabling selection and (intended) image dragging on transient upload previews.
Changes:
- Adds a
draggablesetting to the upload attachment preview<img>element. - Adds
-webkit-user-select: noneto attachment preview media styles for Safari consistency.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
src/nodes/action_text_attachment_upload_node.js |
Sets draggable on the upload preview <img> to prevent post-drag Safari behavior. |
app/assets/stylesheets/lexxy-content.css |
Adds Safari-prefixed user-select rule for .attachment--preview media. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
|
||
| #createDOMForImage() { | ||
| return createElement("img") | ||
| return createElement("img", { draggable: "false" }) |
There was a problem hiding this comment.
createElement assigns to DOM properties when the key exists on the element (see html_helper#createElement). Passing draggable: "false" sets img.draggable to a truthy value, which can keep dragging enabled. Use a boolean false here (consistent with ActionTextAttachmentNode).
| return createElement("img", { draggable: "false" }) | |
| return createElement("img", { draggable: false }) |
Summary
draggable="false"to the upload node's preview<img>element (the permanent attachment node already has this)-webkit-user-select: noneprefix to.attachment--preview img, videofor Safari consistencySafari's Live Text feature recognizes text within images and makes it selectable. After dragging an attachment image in the editor, subsequent interactions can trigger this recognition, highlighting text inside the image unexpectedly.
Fizzy card: https://app.fizzy.do/5986089/cards/5121
Test plan
🤖 Generated with Claude Code