Add auto separator

web/js/autocompleter.js

@@ -193,6 +193,7 @@ app.registerExtension({
 			return r;
 		};
 
+		TextAreaAutoComplete.separator = localStorage.getItem(id + ".AutoSeparate") ?? ", ";
 		app.ui.settings.addSetting({
 			id,
 			name: "🐍 Text Autocomplete",
@@ -206,16 +207,48 @@ app.registerExtension({
 						}),
 					]),
 					$el("td", [
-						$el("input", {
-							id: id.replaceAll(".", "-"),
-							type: "checkbox",
-							checked: value,
-							onchange: (event) => {
-								const checked = !!event.target.checked;
-								TextAreaAutoComplete.enabled = checked;
-								setter(checked);
+						$el(
+							"label",
+							{
+								textContent: "Enabled ",
+								style: {
+									display: "block",
+								},
 							},
-						}),
+							[
+								$el("input", {
+									id: id.replaceAll(".", "-"),
+									type: "checkbox",
+									checked: value,
+									onchange: (event) => {
+										const checked = !!event.target.checked;
+										TextAreaAutoComplete.enabled = checked;
+										setter(checked);
+									},
+								}),
+							]
+						),
+						$el(
+							"label",
+							{
+								textContent: "Auto-insert comma ",
+								style: {
+									display: "block",
+								},
+							},
+							[
+								$el("input", {
+									id: id.replaceAll(".", "-"),
+									type: "checkbox",
+									checked: !!TextAreaAutoComplete.separator,
+									onchange: (event) => {
+										const checked = !!event.target.checked;
+										TextAreaAutoComplete.separator = checked ? ", " : "";
+										localStorage.setItem(id + ".AutoSeparate", TextAreaAutoComplete.separator);
+									},
+								}),
+							]
+						),
 						$el("button", {
 							textContent: "Manage Custom Words",
 							onclick: () => {

web/js/common/autocomplete.js

@@ -302,6 +302,7 @@ class TextAreaCaretHelper {
 /*********************/
 
 export class TextAreaAutoComplete {
+	static separator = "";
 	static enabled = true;
 
 	static groups = {};
@@ -521,7 +522,7 @@ export class TextAreaAutoComplete {
 				{
 					onclick: () => {
 						this.el.focus();
-						this.helper.insertAtCursor(wordInfo.text, -before.length);
+						this.helper.insertAtCursor(wordInfo.text + TextAreaAutoComplete.separator, -before.length);
 						setTimeout(() => {
 							this.#update();
 						}, 150);