Added max lines and overflow scrollbar for gr.Code

.changeset/yummy-weeks-learn.md

@@ -0,0 +1,7 @@
+---
+"@gradio/code": minor
+"@self/component-test": minor
+"gradio": minor
+---
+
+feat:Added max lines and overflow scrollbar for `gr.Code`

gradio/components/code.py

@@ -93,6 +93,7 @@ def __init__(
         every: Timer | float | None = None,
         inputs: Component | Sequence[Component] | set[Component] | None = None,
         lines: int = 5,
+        max_lines: int = 20,
         label: str | None = None,
         interactive: bool | None = None,
         show_label: bool | None = None,
@@ -123,12 +124,14 @@ def __init__(
             render: If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.
             key: if assigned, will be used to assume identity across a re-render. Components that have the same key across a re-render will have their value preserved.
             lines: Minimum number of visible lines to show in the code editor.
+            max_lines: Maximum number of visible lines to show in the code editor.
         """
         if language not in Code.languages:
             raise ValueError(f"Language {language} not supported.")
 
         self.language = language
         self.lines = lines
+        self.max_lines = max(lines, max_lines)
         super().__init__(
             label=label,
             every=every,

js/code/Index.svelte

@@ -29,6 +29,7 @@
 	export let value_is_output = false;
 	export let language = "";
 	export let lines = 5;
+	export let max_lines = 20;
 	export let elem_id = "";
 	export let elem_classes: string[] = [];
 	export let visible = true;
@@ -51,13 +52,10 @@
 		value_is_output = false;
 	});
 	$: value, handle_change();
-
-	const is_browser = typeof window !== "undefined";
-	const default_lines = interactive ? lines : 10.35;
 </script>
 
 <Block
-	height={is_browser ? undefined : default_lines * 25 + 4}
+	height={"fit-content"}
 	variant={"solid"}
 	padding={false}
 	{elem_id}
@@ -85,6 +83,7 @@
 			bind:value
 			{language}
 			{lines}
+			{max_lines}
 			{dark_mode}
 			readonly={!interactive}
 			on:blur={() => gradio.dispatch("blur")}

js/code/shared/Code.svelte

@@ -20,6 +20,7 @@
 	export let basic = true;
 	export let language: string;
 	export let lines = 5;
+	export let max_lines = 20;
 	export let extensions: Extension[] = [];
 	export let use_tab = true;
 	export let readonly = false;
@@ -59,7 +60,7 @@
 
 	function update_lines(): void {
 		if (view) {
-			view.requestMeasure({ read: update_gutters });
+			view.requestMeasure({ read: resize });
 		}
 	}
 
@@ -96,18 +97,19 @@
 		return null;
 	}
 
-	function update_gutters(_view: EditorView): any {
-		let gutters = _view.dom.querySelectorAll<HTMLElement>(".cm-gutter");
-		let _lines = lines + 1;
-		let lineHeight = getGutterLineHeight(_view);
-		if (!lineHeight) {
+	function resize(_view: EditorView): any {
+		let scroller = _view.dom.querySelector<HTMLElement>(".cm-scroller");
+		if (!scroller) {
 			return null;
 		}
-		for (var i = 0; i < gutters.length; i++) {
-			let node = gutters[i];
-			node.style.minHeight = `calc(${lineHeight} * ${_lines})`;
+		const lineHeight = getGutterLineHeight(_view);
+		if (!lineHeight) {
+			return null;
 		}
-		return null;
+
+		const minLines = lines == 1 ? 1 : lines + 1;
+		scroller.style.minHeight = `calc(${lineHeight} * ${minLines})`;
+		scroller.style.maxHeight = `calc(${lineHeight} * ${max_lines + 1})`;
 	}
 
 	function handle_change(vu: ViewUpdate): void {
@@ -117,7 +119,7 @@
 			value = text;
 			dispatch("change", text);
 		}
-		view.requestMeasure({ read: update_gutters });
+		view.requestMeasure({ read: resize });
 	}
 
 	function get_extensions(): Extension[] {

js/component-test/src/lib/component_json.ts

@@ -481,6 +481,7 @@ export default [
 		name: "code",
 		props: {
 			lines: 5,
+			max_lines: 20,
 			interactive: false,
 			show_label: true,
 			container: true,
@@ -498,6 +499,7 @@ export default [
 		name: "code",
 		props: {
 			lines: 5,
+			max_lines: 20,
 			interactive: true,
 			show_label: true,
 			container: true,

test/components/test_code.py

@@ -32,6 +32,7 @@ def fn(a):
             "value": None,
             "language": None,
             "lines": 5,
+            "max_lines": 20,
             "name": "code",
             "show_label": True,
             "label": None,