@gradio/code 0.11.1 → 0.12.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @gradio/code
 
+## 0.12.0
+
+### Features
+
+- [#10733](https://github.com/gradio-app/gradio/pull/10733) [`731ab92`](https://github.com/gradio-app/gradio/commit/731ab92001c88d4cf1062acf0a4f1108a4513014) - Autocompletion on code editor component.  Thanks @whitphx!
+
+### Dependency updates
+
+- @gradio/upload@0.15.5
+- @gradio/statustracker@0.10.5
+- @gradio/atoms@0.14.0
+
+## 0.11.2
+
+### Dependency updates
+
+- @gradio/wasm@0.17.4
+- @gradio/upload@0.15.4
+
 ## 0.11.1
 
 ### Dependency updates

package/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")}

package/dist/Index.svelte

@@ -27,6 +27,7 @@ export let scale = null;
 export let min_width = void 0;
 export let wrap_lines = false;
 export let show_line_numbers = true;
+export let autocomplete = false;
 export let interactive;
 let dark_mode = gradio.theme === "dark";
 function handle_change() {
@@ -78,6 +79,7 @@ $:
 			{dark_mode}
 			{wrap_lines}
 			{show_line_numbers}
+			{autocomplete}
 			readonly={!interactive}
 			on:blur={() => gradio.dispatch("blur")}
 			on:focus={() => gradio.dispatch("focus")}

package/dist/Index.svelte.d.ts

@@ -30,6 +30,7 @@ declare const __propDef: {
         min_width?: number | undefined;
         wrap_lines?: boolean | undefined;
         show_line_numbers?: boolean | undefined;
+        autocomplete?: boolean | undefined;
         interactive: boolean;
     };
     events: {

package/dist/shared/Code.svelte

@@ -8,6 +8,7 @@ import {
 } from "@codemirror/view";
 import { StateEffect, EditorState } 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";
 import { basicSetup } from "./extensions";
@@ -25,6 +26,7 @@ export let readonly = false;
 export let placeholder = void 0;
 export let wrap_lines = false;
 export let show_line_numbers = true;
+export let autocomplete = false;
 const dispatch = createEventDispatcher();
 let lang_extension;
 let element;
@@ -156,6 +158,18 @@ const FontTheme = EditorView.theme({
     borderLeftColor: "var(--body-text-color)"
   }
 });
+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) {
   return EditorState.create({
     doc: _value ?? void 0,
@@ -172,7 +186,9 @@ function get_base_extensions(basic2, use_tab2, placeholder2, readonly2, lang, sh
     extensions2.push(basicSetup);
   }
   if (use_tab2) {
-    extensions2.push(keymap.of([indentWithTab]));
+    extensions2.push(
+      keymap.of([{ key: "Tab", run: acceptCompletion }, indentWithTab])
+    );
   }
   if (placeholder2) {
     extensions2.push(placeholderExt(placeholder2));
@@ -183,6 +199,10 @@ function get_base_extensions(basic2, use_tab2, placeholder2, readonly2, lang, sh
   if (show_line_numbers2) {
     extensions2.push(lineNumbers());
   }
+  if (autocomplete) {
+    extensions2.push(autocompletion());
+    extensions2.push(AutocompleteTheme);
+  }
   extensions2.push(EditorView.updateListener.of(handle_change));
   if (wrap_lines) {
     extensions2.push(EditorView.lineWrapping);

package/dist/shared/Code.svelte.d.ts

@@ -15,6 +15,7 @@ declare const __propDef: {
         placeholder?: string | HTMLElement | null | undefined;
         wrap_lines?: boolean | undefined;
         show_line_numbers?: boolean | undefined;
+        autocomplete?: boolean | undefined;
     };
     events: {
         change: CustomEvent<string>;

package/package.json

@@ -1,38 +1,38 @@
 {
   "name": "@gradio/code",
-  "version": "0.11.1",
+  "version": "0.12.0",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
   "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",
-    "@lezer/common": "^1.0.2",
-    "@lezer/highlight": "^1.1.3",
-    "@lezer/markdown": "^1.0.2",
+    "@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",
+    "@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",
-    "@gradio/atoms": "^0.13.3",
-    "@gradio/upload": "^0.15.3",
-    "@gradio/statustracker": "^0.10.4",
+    "@gradio/atoms": "^0.14.0",
+    "@gradio/upload": "^0.15.5",
     "@gradio/icons": "^0.10.0",
     "@gradio/utils": "^0.10.1",
-    "@gradio/wasm": "^0.17.3"
+    "@gradio/wasm": "^0.17.4",
+    "@gradio/statustracker": "^0.10.5"
   },
   "main_changeset": true,
   "main": "./Index.svelte",

package/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,7 +215,9 @@
 			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));
@@ -208,10 +225,13 @@
 		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) {