iframe: auto resize dynamic content + wide mode(#1489)

Author: MykolaGolubyev

znai-core/src/main/java/org/testingisdocumenting/znai/extensions/html/IframeIncludePlugin.java

@@ -18,7 +18,10 @@
 
 import org.testingisdocumenting.znai.core.AuxiliaryFile;
 import org.testingisdocumenting.znai.core.ComponentsRegistry;
+import org.testingisdocumenting.znai.extensions.PluginParamType;
 import org.testingisdocumenting.znai.extensions.PluginParams;
+import org.testingisdocumenting.znai.extensions.PluginParamsDefinition;
+import org.testingisdocumenting.znai.extensions.PluginParamsDefinitionCommon;
 import org.testingisdocumenting.znai.extensions.PluginResult;
 import org.testingisdocumenting.znai.extensions.include.IncludePlugin;
 import org.testingisdocumenting.znai.parser.ParserHandler;
@@ -45,6 +48,20 @@ public IncludePlugin create() {
         return new IframeIncludePlugin();
     }
 
+    @Override
+    public PluginParamsDefinition parameters() {
+        PluginParamsDefinition params = new PluginParamsDefinition();
+        params.add(PluginParamsDefinitionCommon.title);
+        params.add("fit", PluginParamType.BOOLEAN, "automatically set iframe height to fit its content", "true");
+        params.add("height", PluginParamType.NUMBER, "force specific iframe height in pixels, acts as minimum height when fit is true", "200");
+        params.add("maxHeight", PluginParamType.NUMBER, "limit the automatically calculated height, adds scrollbar", "64");
+        params.add("wide", PluginParamType.BOOLEAN, "take all the available horizontal space", "true");
+        params.add("aspectRatio", PluginParamType.STRING, "aspect ratio for video embedding", "\"16:9\"");
+        params.add("light", PluginParamType.OBJECT, "CSS properties override for light theme", "{ \"--color\": \"#333\" }");
+        params.add("dark", PluginParamType.OBJECT, "CSS properties override for dark theme", "{ \"--color\": \"#eee\" }");
+        return params;
+    }
+
     @Override
     public PluginResult process(ComponentsRegistry componentsRegistry, ParserHandler parserHandler, Path markupPath, PluginParams pluginParams) {
         DocElement iframe = new DocElement("Iframe");

znai-docs/znai/llm.txt

@@ -146,8 +146,8 @@ answer-link: znai-from-export/introduction/getting-started#command-line
 ## CLI download
 
 Download and unzip
-[znai](https://repo.maven.apache.org/maven2/org/testingisdocumenting/znai/znai-dist/1.87/znai-dist-1.87-znai.zip). Add
-it to your `PATH`.
+[znai](https://repo.maven.apache.org/maven2/org/testingisdocumenting/znai/znai-dist/1.87.2-SNAPSHOT/znai-dist-1.87.2-SNAPSHOT-znai.zip).
+Add it to your `PATH`.
 
 ## Brew
 
@@ -162,7 +162,7 @@ answer-link: znai-from-export/introduction/getting-started#maven-plugin
 <plugin>
     <groupId>org.testingisdocumenting.znai</groupId>
     <artifactId>znai-maven-plugin</artifactId>
-    <version>1.87</version>
+    <version>1.87.2-SNAPSHOT</version>
 </plugin>
 ```
 
@@ -4692,7 +4692,7 @@ scenario("capture screenshot") {
     "type" : "badge",
     "text" : "2",
     "x" : 367,
-    "y" : 594,
+    "y" : 604,
     "align" : "Center"
   } ],
   "pixelRatio" : 2
@@ -6239,10 +6239,35 @@ Use `title` parameter to display title bar on top of the embedded content:
 }
 ```
 
-# Visuals :: Iframe :: Height
-answer-link: znai-from-export/visuals/iframe#height
+# Visuals :: Iframe :: Dynamic Content
+answer-link: znai-from-export/visuals/iframe#dynamic-content
 
-Use `height` to force container height. Use `maxHeight` to limit the automatically calculated height.
+When iframe content changes after page load, the iframe automatically resizes to fit. Click buttons below to see it in
+action:
+
+
+Use `height` and `maxHeight` to limit the height when content grows:
+
+```markdown
+:include-iframe: iframe/custom-delayed.html {
+    fit: true,
+    height: 120,
+    maxHeight: 200
+}
+```
+
+# Visuals :: Iframe :: Wide
+answer-link: znai-from-export/visuals/iframe#wide
+
+Use `wide` to take all the available horizontal space:
+
+```markdown
+:include-iframe: iframe/custom.html {
+  title: "my wide iframe content",
+  fit: true,
+  wide: true
+}
+```
 
 # Visuals :: Iframe :: Embedding Video
 answer-link: znai-from-export/visuals/iframe#embedding-video
@@ -8589,7 +8614,7 @@ scenario("capture screenshot") {
     "type" : "badge",
     "text" : "2",
     "x" : 367,
-    "y" : 594,
+    "y" : 604,
     "align" : "Center"
   } ],
   "pixelRatio" : 2
@@ -9064,6 +9089,11 @@ export PATH=$(pwd)/dist:$PATH
 znai --version
 ```
 
+# Release Notes :: 2026 :: 1.88
+answer-link: znai-from-export/release-notes/2026#188
+
+
+
 # Release Notes :: 2026 :: 1.87
 answer-link: znai-from-export/release-notes/2026#187
 

znai-docs/znai/release-notes/1.88/add-2026-04-03-iframe-resize.md

@@ -0,0 +1,2 @@
+* Add: iframe resize on content changes
+* Add: iframe wide mode

znai-docs/znai/release-notes/1.88/add-2026-04-05-api-params-wide-title.md

@@ -0,0 +1 @@
+* Add: api params wide mode title is aligned with content block

znai-docs/znai/release-notes/1.88/add-2026-04-05-code-snippets-wide-title.md

@@ -0,0 +1 @@
+* Add: code snippets wide mode title is aligned with content block

znai-docs/znai/release-notes/1.88/add-2026-04-05-image-wide.md

@@ -0,0 +1,3 @@
+* Add: image wide mode title layout consistent with iframes
+* Add: image wide mode fits and takes all the space
+* Add: images are fit by default now

znai-docs/znai/release-notes/2026.md

@@ -1,3 +1,7 @@
+# 1.88
+
+:include-markdowns: 1.88
+
 # 1.87
 
 :include-markdowns: 1.87

znai-docs/znai/snippets/api-parameters.md

@@ -224,7 +224,7 @@ Use `wide: true` to use all the available horizontal space
     line with *markdown* support and few moe lines"
     ```
 
-```api-parameters {anchorPrefix: "customPrefix", noWrap: true, wide: true}
+```api-parameters {anchorPrefix: "customPrefix", title: "wide mode", noWrap: true, wide: true}
 VERY_LONG_PARAMETER_NAME_WITHOUT_SPACES, String, "longer line longer line, description with *markdown* support"
 VERY_LONG_ANOTHER_PARAMETER_NAME_WITHOUT_SPACES, String, "longer line longer line, another description 
 line with *markdown* support and few moe lines"

znai-docs/znai/snippets/code-snippets.md

@@ -103,7 +103,7 @@ Use the `wide` option to stretch wide code to occupy as much horizontal real est
     }
     ```
 
-```java {wide: true}
+```java {wide: true, title: "wide code snippet"}
 class InternationalPriceService implements PriceService {
     private static void LongJavaInterfaceNameWithSuperFactory createMegaAbstractFactory(final ExchangeCalendarLongerThanLife calendar) {
         ...

znai-docs/znai/snippets/external-code-snippets.md

@@ -63,13 +63,11 @@ Use `anchorId` to override auto generated identifier.
 
 Use the `wide` option to stretch wide code to occupy as much horizontal screen real estate as possible.  
 
-    :include-file: WideCode.java {wide: true}
+```markdown
+:include-file: WideCode.java {wide: true, title: "wide code"}
+```
 
-:include-file: WideCode.java {wide: true}
-
-Without the `wide` option code will be aligned with the rest of the text and users can use scrollbars.   
-
-:include-file: WideCode.java
+:include-file: WideCode.java {wide: true, title: "wide code"}
 
 Note: Good placement of a *Wide Code* element is at the end of a page or a section to show the full version of a code sample.