Volto Text Block Links: Open In Browser Not Working

h1. Volto Text Block Links: Open in Browser Not Working

Introduction to the viewableInBrowserObjects Configuration

In the world of web development, controlling how users interact with files uploaded to your website is crucial for a seamless user experience. When you upload a document, an image, or any other file type, you often want it to be easily accessible. Sometimes, you want users to be able to view the file directly in their browser – think of PDFs, images, or even simple text documents. Other times, you might prefer the file to be downloaded directly. The viewableInBrowserObjects configuration in Volto is designed precisely for this purpose, allowing developers to specify which file types should attempt to open in the browser by default. This setting plays a significant role in how your content is presented and accessed, especially when dealing with different user roles and permissions. By default, many web systems might be configured to always download files to prevent unauthorized access or to ensure compatibility across various browsers and devices. However, for modern web applications built with frameworks like Volto, the expectation is often for a more integrated experience where files can be previewed within the browser itself. This is particularly important for rich content where users might want to quickly scan a document or view an image without the interruption of a file download prompt. The viewableInBrowserObjects array in Volto's configuration file (packages/volto/src/config/index.js) is where you define these preferences. For instance, if you add 'File' to this array, you're telling Volto that files of the 'File' content type should be treated as viewable in the browser. This configuration is a powerful tool for content editors and developers alike, enabling a more flexible and user-friendly way to handle file assets within your Plone and Volto-powered sites. It's a key piece of the puzzle in building modern, interactive web experiences that go beyond simple static pages.

The Problem: viewableInBrowserObjects Fails in Text Blocks

We've encountered a specific issue where the viewableInBrowserObjects configuration, which is supposed to control whether files open in the browser or are downloaded, isn't working as expected when links are created within Volto's text blocks. This is a critical bug because it directly impacts the user experience for anonymous visitors to your site. When you, as a developer or content editor, meticulously set up your Volto site to allow files like PDFs or images to be viewed directly in the browser by adding 'File' to the viewableInBrowserObjects array, you anticipate this behavior to apply universally. However, we've observed that while this setting does work correctly in other contexts, such as the listing block, it falters specifically when a link to a file is embedded within a standard text block. Instead of generating a URL that prompts the browser to display the file (like @@display-file/file), Volto continues to generate download URLs (like @@download/file). This means that anonymous users, who are often the primary audience for public content, will find that clicking on these file links triggers an immediate download rather than an in-browser preview. This is counterintuitive and frustrating, as it prevents users from quickly accessing and reviewing content as intended. The expected behavior, supported by the viewableInBrowserObjects setting, is that these links should gracefully open in a new browser tab or display within the current page, depending on the browser's capabilities and the file type. The fact that this functionality breaks down specifically within text blocks suggests a potential oversight or a specific rendering logic within the text block component that bypasses or misinterprets the global viewableInBrowserObjects setting. This discrepancy is not just a minor inconvenience; it can hinder content accessibility and usability, leading to a degraded experience for your site's visitors.

Steps to Reproduce the Issue

To fully understand and address the bug concerning the viewableInBrowserObjects configuration and its failure in Volto text blocks, it's essential to follow a clear set of reproduction steps. These steps will help developers pinpoint the exact circumstances under which the issue occurs, making the debugging process more efficient. First, you need to set up your Volto project's configuration to enable browser viewing for specific file types. This is done by editing your Volto configuration file, typically located at src/config.js or a similar path. You will need to find or add the viewableInBrowserObjects setting and ensure it includes the type of file you want to be viewable, commonly ['File']. This tells Volto to attempt to display files in the browser rather than forcing a download. Once your configuration is updated, save the file and restart your Volto development server to apply the changes. The next step is to create a file within your Plone backend or through the Volto CMS interface. This could be any file type you've specified in your configuration, such as a PDF document or an image. After creating the file, navigate to your Volto site and create a new page or edit an existing one. Within this page, add a text block. Using the rich text editor provided by the text block, create a hyperlink that points directly to the file you just uploaded. Ensure that the link is set up correctly to reference the file asset. Save the page with the text block containing the file link. The crucial part of the reproduction process involves testing the link as an anonymous user. Log out of your Volto site or open the page in an incognito/private browsing window. Navigate to the page you created or edited. Locate the file link within the text block and click on it. The final step is to observe the outcome. Instead of the file opening in a new browser tab or being displayed inline, you should notice that the browser initiates a download of the file. This is the unexpected behavior that contradicts the intended functionality of the viewableInBrowserObjects setting when applied to links within text blocks. This clear sequence of actions allows anyone to replicate the bug and confirm its existence, paving the way for a solution.

Expected Behavior: Seamless In-Browser File Viewing

When the viewableInBrowserObjects configuration is correctly implemented in Volto, particularly when set to include 'File' (or other relevant types like 'Image'), the expected behavior for links pointing to these files is a smooth, integrated viewing experience directly within the user's web browser. This means that when a user, especially an anonymous visitor, clicks on a link to a file – whether it's a PDF, a Word document, an image, or any other type deemed