Added an optional height and overflow scrollbar for the Markdown Component (#8528)

* scrollable-markdown-changes-added

* made suggested changes

* added a new story in Storybook

* add changeset

* add changeset

* tweaks

* changes

* changes

* revert example change

* tweaks

* demo changes

* more tweaks

* formatting

---------

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>
Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>

.changeset/tasty-coins-share.md

@@ -0,0 +1,6 @@
+---
+"@gradio/markdown": minor
+"gradio": minor
+---
+
+feat:Added an optional `height` and overflow scrollbar for the Markdown Component

demo/markdown_example/run.py

@@ -1,9 +1,5 @@
 import gradio as gr
 
-css = (
-    "footer {display: none !important;} .gradio-container {min-height: 0px !important;}"
-)
-
 # sample md stolen from https://dillinger.io/
 
 md = """# Dillinger
@@ -217,7 +213,7 @@ MIT
    [PlGa]: <https://github.com/RahulHP/dillinger/blob/master/plugins/googleanalytics/README.md>
 
 """
-with gr.Blocks(css=css) as demo:
-    gr.Markdown(value=md, header_links=True)
+with gr.Blocks() as demo:
+    gr.Markdown(value=md, header_links=True, height=400)
 
 demo.launch()

gradio/components/markdown.py

@@ -40,6 +40,7 @@ class Markdown(Component):
         sanitize_html: bool = True,
         line_breaks: bool = False,
         header_links: bool = False,
+        height: int | str | None = None,
     ):
         """
         Parameters:
@@ -57,6 +58,7 @@ class Markdown(Component):
             sanitize_html: If False, will disable HTML sanitization when converted from markdown. This is not recommended, as it can lead to security vulnerabilities.
             line_breaks: If True, will enable Github-flavored Markdown line breaks in chatbot messages. If False (default), single new lines will be ignored.
             header_links: If True, will automatically create anchors for headings, displaying a link icon on hover.
+            height: An optional maximum height of this component, specified in pixels if a number is passed, or in CSS units (e.g., '200px') if a stirng is passed in. If context exceeds this height, a scrollbar is added.
         """
         self.rtl = rtl
         if latex_delimiters is None:
@@ -65,6 +67,7 @@ class Markdown(Component):
         self.sanitize_html = sanitize_html
         self.line_breaks = line_breaks
         self.header_links = header_links
+        self.height = height
 
         super().__init__(
             label=label,

js/markdown/Index.svelte

@@ -31,6 +31,7 @@
 		display: boolean;
 	}[];
 	export let header_links = false;
+	export let height: number | string | undefined = undefined;
 
 	$: label, gradio.dispatch("change");
 </script>
@@ -61,6 +62,7 @@
 			{sanitize_html}
 			{line_breaks}
 			{header_links}
+			{height}
 		/>
 	</div>
 </Block>

js/markdown/Markdown.stories.svelte

@@ -12,6 +12,11 @@
 			description: "Whether to render right-to-left",
 			control: { type: "boolean" },
 			defaultValue: false
+		},
+		height: {
+			description: "Maximum height of the Markdown component",
+			control: { type: "text" },
+			defaultValue: "200px"
 		}
 	}}
 />
@@ -21,6 +26,7 @@
 		value="Here's some **bold** text. And some *italics* and some `code`"
 		latex_delimiters={[]}
 		{...args}
+		height={args.height}
 	/>
 </Template>
 
@@ -70,3 +76,11 @@ in two separate lines.`
 		header_links: true
 	}}
 />
+
+<Story
+	name="Markdown with Long Content (Vertical Scrolling)"
+	args={{
+		value: `# Heading\n${"This is some text.\n".repeat(100)}`,
+		height: "200px"
+	}}
+/>

js/markdown/shared/Markdown.svelte

@@ -17,9 +17,16 @@
 		display: boolean;
 	}[];
 	export let header_links = false;
+	export let height: number | string | undefined = undefined;
 
 	const dispatch = createEventDispatcher<{ change: undefined }>();
 
+	const css_units = (dimension_value: string | number): string => {
+		return typeof dimension_value === "number"
+			? dimension_value + "px"
+			: dimension_value;
+	};
+
 	$: value, dispatch("change");
 </script>
 
@@ -30,6 +37,7 @@
 	data-testid="markdown"
 	dir={rtl ? "rtl" : "ltr"}
 	use:copy
+	style={height ? `max-height: ${css_units(height)}; overflow-y: auto;` : ""}
 >
 	<MarkdownCode
 		message={value}