Skip to content

feat(editor): add alt text support for media files - #2097

Merged
Philipinho merged 3 commits into
docmost:mainfrom
olivierlambert:feat/image-alt-text
May 20, 2026
Merged

Philipinho merged 3 commits into
docmost:mainfrom
olivierlambert:feat/image-alt-text

Conversation

@olivierlambert

@olivierlambert olivierlambert commented Apr 9, 2026 •

Copy link
Copy Markdown
Contributor

Summary

Adds image caption support to the editor, as requested in #1736. Following @Philipinho's suggestion, this uses a visible caption below the image instead of a hidden alt text field. The caption text is also used as the alt attribute in HTML/markdown exports.

How it works

  • Caption button in the image bubble menu (using IconTextCaption) toggles an editable caption field below the image
  • Click to add caption → editable input appears below the image
  • Click again to remove caption
  • Button highlights when a caption is active
  • Caption text is used as alt in exports, producing ![caption text](url) in markdown

Files changed

File Change
packages/editor-ext/src/lib/image/image.ts Added caption attribute to schema; caption maps to alt in renderHTML; caption input in ResizableNodeView code path with stopEvent
apps/client/src/features/editor/components/image/image-menu.tsx Added caption toggle button to bubble menu
apps/client/src/features/editor/components/image/image-view.tsx Added caption input to React NodeView; fixed title → alt attribute bug
apps/client/src/features/editor/components/image/image-view.module.css Added caption styling

Test plan

  • Insert an image into a page
  • Click the image → bubble menu appears with caption button
  • Click caption button → editable caption field appears below image
  • Type caption text → persists correctly
  • Click caption button again → caption removed
  • Caption button highlights when caption is present
  • Export page as markdown → verify ![caption](url) format

Closes #1736

🤖 Generated with Claude Code

Add the ability to set and edit alt text on images via the editor's
image bubble menu. This improves accessibility and enables better
markdown export (e.g. for RAG systems).

Changes:
- Add an "Alt text" button to the image bubble menu toolbar
- Show an inline text input for editing alt text on click
- Fix image-view.tsx to use the `alt` attribute instead of `title`

Closes docmost#1736

Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>
@Philipinho

Copy link
Copy Markdown
Member

I have been thinking along the lines of caption, and that will serve as alt too, e.g in exports.

Basically, "Alt" icon becomes caption. When clicked, we add an empty caption the user can edit below the image/media.
What do you think?
image

@olivierlambert

olivierlambert commented Apr 11, 2026 •

Copy link
Copy Markdown
Contributor Author

As suggested per @Philipinho , including markdown page export output on the side to see alt is correctly taken into account:

image

@Philipinho
Philipinho force-pushed the feat/image-alt-text branch from 9f80aa2 to f89c122 Compare May 20, 2026 15:36
@Philipinho

Copy link
Copy Markdown
Member

Hi @olivierlambert, I decided to revert back to ALT.

@Philipinho
Philipinho merged commit 1c166c4 into docmost:main May 20, 2026
1 check passed
@Philipinho Philipinho changed the title feat(editor): add alt text support for images feat(editor): add alt text support for media files May 20, 2026
@Philipinho

Copy link
Copy Markdown
Member

The ALT now supports images, videos, and diagram nodes.
Thanks for working on this.

@olivierlambert

Copy link
Copy Markdown
Contributor Author

No worries, fine by me!

Yundi339 pushed a commit to Yundi339/docmost that referenced this pull request Jun 18, 2026
* feat(editor): add alt text support for images
* feat:  extend alt text support to videos and diagrams

---------
Co-authored-by: Philipinho <[email protected]>

(cherry picked from commit 1c166c4)
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.

[FEATURE REQUEST] Alt text for images

2 participants