Autocompletion on code editor component (#10733)

* Update CodeMirror packages to use the autocompletion feature of lang-python

* Add autocomplete option to the Code component

* add changeset

* Add AutocompleteTheme

* Fix test

* Fix docstring

* Enable autocompletion on Playground

* add changeset

* add changeset

* Assign Tab to acceptCompletion

* Enable autocompletion in the playground mode of Lite apps

* add changeset

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
Co-authored-by: Ali Abdalla <ali.si3luwa@gmail.com>

Author: 3 people

.changeset/fair-socks-lead.md

@@ -0,0 +1,8 @@
+---
+"@gradio/code": minor
+"@gradio/lite": minor
+"gradio": minor
+"website": minor
+---
+
+feat:Autocompletion on code editor component

gradio/components/code.py

@@ -109,6 +109,7 @@ def __init__(
         key: int | str | None = None,
         wrap_lines: bool = False,
         show_line_numbers: bool = True,
+        autocomplete: bool = False,
     ):
         """
         Parameters:
@@ -131,6 +132,7 @@ def __init__(
             max_lines: Maximum number of visible lines to show in the code editor. Defaults to None and will fill the height of the container.
             wrap_lines: If True, will wrap lines to the width of the container when overflow occurs. Defaults to False.
             show_line_numbers:  If True, displays line numbers, and if False, hides line numbers.
+            autocomplete: If True, will show autocomplete suggestions for supported languages. Defaults to False.
         """
         if language not in Code.languages:
             raise ValueError(f"Language {language} not supported.")
@@ -140,6 +142,7 @@ def __init__(
         self.max_lines = max(lines, max_lines) if max_lines is not None else None
         self.wrap_lines = wrap_lines
         self.show_line_numbers = show_line_numbers
+        self.autocomplete = autocomplete
         super().__init__(
             label=label,
             every=every,

js/_website/src/lib/components/DemosLite/DemosLite.svelte

@@ -825,6 +825,7 @@
 										lines={10}
 										readonly={false}
 										dark_mode={false}
+										autocomplete
 										on:change={(e) => {
 											code_state.code_edited = true;
 											if (user_query == app_error) {

js/code/Index.svelte

@@ -40,6 +40,7 @@
 	export let min_width: number | undefined = undefined;
 	export let wrap_lines = false;
 	export let show_line_numbers = true;
+	export let autocomplete = false;
 
 	export let interactive: boolean;
 
@@ -93,6 +94,7 @@
 			{dark_mode}
 			{wrap_lines}
 			{show_line_numbers}
+			{autocomplete}
 			readonly={!interactive}
 			on:blur={() => gradio.dispatch("blur")}
 			on:focus={() => gradio.dispatch("focus")}

js/code/package.json

@@ -7,29 +7,29 @@
 	"license": "ISC",
 	"private": false,
 	"dependencies": {
-		"@codemirror/autocomplete": "^6.3.0",
-		"@codemirror/commands": "^6.1.2",
-		"@codemirror/lang-css": "^6.1.0",
-		"@codemirror/lang-html": "^6.4.2",
-		"@codemirror/lang-javascript": "^6.1.4",
+		"@codemirror/autocomplete": "^6.18.6",
+		"@codemirror/commands": "^6.8.0",
+		"@codemirror/lang-css": "^6.3.1",
+		"@codemirror/lang-html": "^6.4.9",
+		"@codemirror/lang-javascript": "^6.2.3",
 		"@codemirror/lang-json": "^6.0.1",
-		"@codemirror/lang-markdown": "^6.1.0",
-		"@codemirror/lang-python": "^6.0.4",
-		"@codemirror/language": "^6.6.0",
-		"@codemirror/legacy-modes": "^6.3.1",
-		"@codemirror/lint": "^6.0.0",
-		"@codemirror/search": "^6.2.2",
-		"@codemirror/state": "^6.1.2",
-		"@codemirror/view": "^6.4.1",
+		"@codemirror/lang-markdown": "^6.3.2",
+		"@codemirror/lang-python": "^6.1.7",
+		"@codemirror/language": "^6.10.8",
+		"@codemirror/legacy-modes": "^6.4.3",
+		"@codemirror/lint": "^6.8.4",
+		"@codemirror/search": "^6.5.10",
+		"@codemirror/state": "^6.5.2",
+		"@codemirror/view": "^6.36.3",
 		"@gradio/atoms": "workspace:^",
 		"@gradio/icons": "workspace:^",
 		"@gradio/statustracker": "workspace:^",
 		"@gradio/upload": "workspace:^",
 		"@gradio/utils": "workspace:^",
 		"@gradio/wasm": "workspace:^",
-		"@lezer/common": "^1.0.2",
-		"@lezer/highlight": "^1.1.3",
-		"@lezer/markdown": "^1.0.2",
+		"@lezer/common": "^1.2.3",
+		"@lezer/highlight": "^1.2.1",
+		"@lezer/markdown": "^1.4.2",
 		"cm6-theme-basic-dark": "^0.2.0",
 		"cm6-theme-basic-light": "^0.2.0",
 		"codemirror": "^6.0.1"

js/code/shared/Code.svelte

@@ -9,6 +9,7 @@
 	} from "@codemirror/view";
 	import { StateEffect, EditorState, type Extension } from "@codemirror/state";
 	import { indentWithTab } from "@codemirror/commands";
+	import { autocompletion, acceptCompletion } from "@codemirror/autocomplete";
 
 	import { basicDark } from "cm6-theme-basic-dark";
 	import { basicLight } from "cm6-theme-basic-light";
@@ -28,6 +29,7 @@
 	export let placeholder: string | HTMLElement | null | undefined = undefined;
 	export let wrap_lines = false;
 	export let show_line_numbers = true;
+	export let autocomplete = false;
 
 	const dispatch = createEventDispatcher<{
 		change: string;
@@ -175,6 +177,19 @@
 		}
 	});
 
+	const AutocompleteTheme = EditorView.theme({
+		".cm-tooltip-autocomplete": {
+			"& > ul": {
+				backgroundColor: "var(--background-fill-primary)",
+				color: "var(--body-text-color)"
+			},
+			"& > ul > li[aria-selected]": {
+				backgroundColor: "var(--color-accent-soft)",
+				color: "var(--body-text-color)"
+			}
+		}
+	});
+
 	function create_editor_state(_value: string | null | undefined): EditorState {
 		return EditorState.create({
 			doc: _value ?? undefined,
@@ -200,18 +215,23 @@
 			extensions.push(basicSetup);
 		}
 		if (use_tab) {
-			extensions.push(keymap.of([indentWithTab]));
+			extensions.push(
+				keymap.of([{ key: "Tab", run: acceptCompletion }, indentWithTab])
+			);
 		}
 		if (placeholder) {
 			extensions.push(placeholderExt(placeholder));
 		}
 		if (lang) {
 			extensions.push(lang);
 		}
-
 		if (show_line_numbers) {
 			extensions.push(lineNumbers());
 		}
+		if (autocomplete) {
+			extensions.push(autocompletion());
+			extensions.push(AutocompleteTheme);
+		}
 
 		extensions.push(EditorView.updateListener.of(handle_change));
 		if (wrap_lines) {

js/lite/src/Playground.svelte

@@ -146,6 +146,7 @@
 						lines={10}
 						readonly={!loaded}
 						dark_mode={active_theme_mode === "dark"}
+						autocomplete
 					/>
 				</Block>
 			</div>