fix(WEB-10734): [Literature] Post - caption is missing on the UI when we add image

[dgigafox]

How to test:

Please see ticket https://martide.atlassian.net/browse/WEB-10734 for testing instructions

Note: The image alt input should now appear when you click on the image itself or when you add an image block like below:

[gemini-code-assist]

Summary of Changes

Hello, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request resolves an issue where image captions were not displayed in the UI. It enhances the Milkdown editor by adding a distinct input for image alt text, separating it from the caption. The changes also update the markdown serialization and backend parsing to correctly handle and render both alt text and captions for images.

Highlights

• Image Alt Text Input: Introduced a dedicated input field for image alt text within the Milkdown editor, improving accessibility and content management.
• Markdown Output Update: Modified the markdown output for image blocks to correctly use the format, distinguishing alt text from captions.
• Backend Caption Logic: Updated the backend image parsing logic to prioritize the title attribute for image captions, ensuring captions are displayed correctly.

Changelog

• assets/css/milkdown.css
  • Added CSS rules for the new .image-alt-input element to style the alt text input field.
• assets/js/milkdown.js
  • Imported Plugin and PluginKey from @milkdown/prose/state to support new ProseMirror plugin functionality.
  • Updated the customImageBlockPlugin to include an alt attribute in the image block schema.
  • Modified the toMarkdown runner to output images in the ![alt](url "caption") format, using the new alt attribute.
  • Implemented imageAltPlugin, a new ProseMirror plugin responsible for dynamically creating, managing, and syncing the alt text input field for image blocks in the editor.
  • Changed blockCaptionPlaceholderText from "Enter image alt" to "Enter image caption" to reflect the separation of alt text and caption.
  • Registered the imageAltPlugin with the Milkdown editor instance.
• lib/literature/components/image_component.ex
  • Modified parse_image_tag to first look for a title attribute for the image caption, falling back to the caption attribute if title is not found.

Activity

• The author provided detailed testing instructions in the PR description, referencing a Jira ticket (WEB-10734).
• A note was included explaining that the image alt input should now appear when an image is clicked or an image block is added.
• An asset link was provided to demonstrate the new alt input behavior.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request addresses the issue of missing image captions on the UI by introducing a dedicated alt text input field within the Milkdown editor, involving updates to CSS, the Milkdown schema, a ProseMirror plugin, and adjustments to markdown parsing and Elixir backend logic. However, a significant security concern has been identified: the use of plain string interpolation for building HTML tags with user-supplied data in Literature.ImageComponent leads to a stored Cross-Site Scripting (XSS) vulnerability. It is recommended to switch to Phoenix HEEx templates or ensure all interpolated values are properly escaped to mitigate this risk.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 79.42%. Comparing base (367748c) to head (b3493c7).

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #649      +/-   ##
==========================================
+ Coverage   79.38%   79.42%   +0.04%     
==========================================
  Files          84       84              
  Lines        2450     2455       +5     
==========================================
+ Hits         1945     1950       +5     
  Misses        505      505              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.