Paragraphs iFrame Preview

This module renders paragraph previews in a collapsed state inside an iframe, using the frontend theme to closely match the final rendered output. Nested paragraphs are also supported.

Context

When editing a node, paragraphs can be collapsed — either by default or by clicking the Collapse button.
In the Form display settings of a paragraphs field, you can choose what should be shown when a paragraph is collapsed:

• a summary
• or a preview

Without this module, when the Preview option is selected, the preview is rendered using the admin theme. As a result, the preview does not accurately reflect how the paragraph will look on the frontend. This module solves this.

Post-Installation

• In the form display settings of the paragraph field, set "closed / collapsed mode" to "Preview", not "Summary".
• For an even better experience, set "default edit mode" to "Closed / collapsed" so that the preview is displayed by default when loading the node edit form.
• For an optimal user experience, and to make the preview look as close as possible to the final result, you may need to make a few adjustments to your CSS and JavaScript, and reconsider where you attach your libraries. Indeed, only the paragraph markup is rendered in the iframe so any CSS or JS based on other page context or wrapping markup will not apply. See README.md for more explanation on this.

Additional Requirements

• Paragraphs

Similar projects

• Paragraphs Previewer

provides a button to preview the paragraph inside a modal, where this module replaces the collapsed mode preview with an iframe.