Enable editable captions for video attachments#950
Conversation
There was a problem hiding this comment.
Pull request overview
Enables editable captions for video attachments so users can add custom captions, aligning video attachment UX more closely with image attachments.
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.
Changes:
- Add
isVideotoActionTextAttachmentNodeand render videos with a file icon + editable caption textarea. - Add Playwright coverage to verify video captions render as editable and persist to serialized editor output.
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_node.js |
Adds video-specific DOM rendering path and isVideo helper. |
test/browser/tests/attachments/video_caption.test.js |
Adds browser tests to ensure video captions are editable and saved. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| figure.appendChild(this.#createEditableCaption()) | ||
| } else if (this.isVideo) { | ||
| figure.appendChild(this.#createDOMForFile()) | ||
| figure.appendChild(this.#createEditableCaption()) |
There was a problem hiding this comment.
Video attachments still render with attachment--file styling but now use the editable caption textarea. In the editor stylesheet, .attachment__caption textarea forces text-align: center (app/assets/stylesheets/lexxy-editor.css:349-365), while file attachments are styled to be start-aligned via .attachment--file .attachment__caption { text-align: start; } (app/assets/stylesheets/lexxy-content.css:353-365). This will make video captions appear centered in a file-style row layout, which is inconsistent with other file attachments. Consider adding a CSS override for .attachment--file .attachment__caption textarea (or otherwise inheriting alignment) so video captions follow the file attachment alignment.
| figure.appendChild(this.#createEditableCaption()) | |
| const caption = this.#createEditableCaption() | |
| const textarea = caption.querySelector("textarea") | |
| if (textarea) textarea.style.textAlign = "start" | |
| figure.appendChild(caption) |
There was a problem hiding this comment.
The centered text-align on the caption textarea is intentional editor styling — it matches image attachment captions and provides a consistent editing experience. The .attachment--file .attachment__caption { text-align: start } in lexxy-content.css targets the rendered (non-editor) view where the caption is plain text, not a textarea. Adding an inline style override here would fight against the editor stylesheet and create a special case for video. If the alignment needs adjusting, it should be done in the CSS layer, not in the DOM-building logic.
jorgemanrubia
added
the
fix-validated
Manual Validation: ValidatedInjected a Production (https://basecamp.github.io/lexxy/try-it.html): the video attachment rendered with a static caption showing only the filename ("clip.mp4") and file size ("96.45 KB") — no editable textarea was present. The figcaption contained Local (built JS from |
Video attachments were rendered with a static file-style caption (just the filename and size), making it impossible to add a custom caption. Images already got an editable textarea via the `isPreviewableAttachment` path, but videos fell through to the non-editable `#createDOMForNotImage()` path. Add an `isVideo` getter and a dedicated branch in `createDOM()` so video attachments get the file icon alongside an editable caption textarea.
jorgemanrubia
force-pushed
the
fix-video-caption
branch
from
fc3e4a8 to
e3b9fa5
Compare
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 2 out of 2 changed files in this pull request and generated no new comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Summary
isVideogetter toActionTextAttachmentNodeand a dedicated branch increateDOM()that renders the file icon with an editable captionBasecamp card