Autocomplete: update to @textcomplete package and close on blur (#4493)

* Autocomplete: update to @textcomplete package
* Autocomplete: close on blur

client/components/ChatInput.vue

@@ -13,6 +13,7 @@
 			:aria-label="getInputPlaceholder(channel)"
 			@input="setPendingMessage"
 			@keypress.enter.exact.prevent="onSubmit"
+			@blur="onBlur"
 		/>
 		<span
 			v-if="$store.state.serverConfiguration.fileUpload"
@@ -279,6 +280,11 @@ export default {
 		blurInput() {
 			this.$refs.input.blur();
 		},
+		onBlur() {
+			if (autocompletionRef) {
+				autocompletionRef.hide();
+			}
+		},
 	},
 };
 </script>

client/js/autocompletion.js

@@ -3,7 +3,9 @@
 const constants = require("./constants");
 
 import Mousetrap from "mousetrap";
-import {Textcomplete, Textarea} from "textcomplete";
+import {Textcomplete} from "@textcomplete/core/dist/Textcomplete";
+import {TextareaEditor} from "@textcomplete/textarea/dist/TextareaEditor";
+
 import fuzzy from "fuzzy";
 
 import emojiMap from "./helpers/simplemap.json";
@@ -214,29 +216,21 @@ function enableAutocomplete(input) {
 		"keydown"
 	);
 
-	const editor = new Textarea(input);
+	const strategies = [
-	const textcomplete = new Textcomplete(editor, {
-		dropdown: {
-			className: "textcomplete-menu",
-			placement: "top",
-		},
-	});
-
-	textcomplete.register([
 		emojiStrategy,
 		nicksStrategy,
 		chanStrategy,
 		commandStrategy,
 		foregroundColorStrategy,
 		backgroundColorStrategy,
-	]);
+	];
 
-	// Activate the first item by default
+	const editor = new TextareaEditor(input);
-	// https://github.com/yuku-t/textcomplete/issues/93
+	const textcomplete = new Textcomplete(editor, strategies, {
-	textcomplete.on("rendered", () => {
+		dropdown: {
-		if (textcomplete.dropdown.items.length > 0) {
+			className: "textcomplete-menu",
-			textcomplete.dropdown.items[0].activate();
+			placement: "top",
-		}
+		},
 	});
 
 	textcomplete.on("show", () => {

package.json

@@ -75,6 +75,8 @@
     "@babel/core": "7.17.9",
     "@babel/preset-env": "7.16.11",
     "@fortawesome/fontawesome-free": "5.15.4",
+    "@textcomplete/core": "0.1.10",
+    "@textcomplete/textarea": "0.1.10",
     "@vue/server-test-utils": "1.3.0",
     "@vue/test-utils": "1.3.0",
     "babel-loader": "8.2.4",
@@ -107,7 +109,6 @@
     "socket.io-client": "4.4.1",
     "stylelint": "14.3.0",
     "stylelint-config-standard": "24.0.0",
-    "textcomplete": "0.18.2",
     "undate": "0.3.0",
     "vue": "2.6.14",
     "vue-loader": "15.9.8",

yarn.lock

@@ -1088,6 +1088,27 @@
   dependencies:
     defer-to-connect "^2.0.0"
 
+"@textcomplete/core@0.1.10":
+  version "0.1.10"
+  resolved "https://registry.yarnpkg.com/@textcomplete/core/-/core-0.1.10.tgz#80211c20f28a378cc9ee8b6633ddf2034785d8c3"
+  integrity sha512-+T7dOElhJivE7+V0JUeDK5TdHUU8Sbuhvnp8VmtHimLaTruv5FJS1dgSjAqGlRcMw9AX459JY9JCbkX9ezGh2g==
+  dependencies:
+    eventemitter3 "^4.0.4"
+
+"@textcomplete/textarea@0.1.10":
+  version "0.1.10"
+  resolved "https://registry.yarnpkg.com/@textcomplete/textarea/-/textarea-0.1.10.tgz#3c8872e11f90e09fb5fc7926335dc9b1f3def35b"
+  integrity sha512-JDPApnDAkQ7mLd8ma/4lkaym8ge72XWpCvPAVMS7meGrn6+gfLtH92ENPy6EfODAbmDDFOaPLOEQAfV3uC2GEQ==
+  dependencies:
+    "@textcomplete/utils" "^0.1.10"
+    textarea-caret "^3.1.0"
+    undate "^0.3.0"
+
+"@textcomplete/utils@^0.1.10":
+  version "0.1.10"
+  resolved "https://registry.yarnpkg.com/@textcomplete/utils/-/utils-0.1.10.tgz#c3ef1bae74effdbf9ff30cb7afd458068a839fc9"
+  integrity sha512-yI0TozB0bUqODA58JVyEOgLK5Rn9IJUYkQXAdvaVXDH6rOQUsoG292rkm4ULv+Kj4zIVDMvZrULAAuvEc55jDg==
+
 "@tokenizer/token@^0.3.0":
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/@tokenizer/token/-/token-0.3.0.tgz#fe98a93fe789247e998c75e74e9c7c63217aa276"
@@ -2963,12 +2984,7 @@ etag@~1.8.1:
   resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
   integrity sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=
 
-eventemitter3@^2.0.3:
+eventemitter3@^4.0.4, eventemitter3@^4.0.7:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-2.0.3.tgz#b5e1079b59fb5e1ba2771c0a993be060a58c99ba"
-  integrity sha1-teEHm1n7XhuidxwKmTvgYKWMmbo=
-
-eventemitter3@^4.0.7:
   version "4.0.7"
   resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f"
   integrity sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==
@@ -6562,7 +6578,6 @@ socks@^2.6.1:
 
 sortablejs@1.10.2, "sortablejs@git+https://github.com/thelounge/Sortable.git":
   version "1.14.0"
-  uid "9730c70cd48da38d8feb3dd6808b1893157d8dfb"
   resolved "git+https://github.com/thelounge/Sortable.git#9730c70cd48da38d8feb3dd6808b1893157d8dfb"
 
 source-map-js@^1.0.2:
@@ -6648,7 +6663,6 @@ sprintf-js@~1.0.2:
 
 "sqlite3@https://github.com/mapbox/node-sqlite3#918052b538b0effe6c4a44c74a16b2749c08a0d2":
   version "5.0.2"
-  uid "918052b538b0effe6c4a44c74a16b2749c08a0d2"
   resolved "https://github.com/mapbox/node-sqlite3#918052b538b0effe6c4a44c74a16b2749c08a0d2"
   dependencies:
     "@mapbox/node-pre-gyp" "^1.0.0"
@@ -7003,20 +7017,11 @@ text-table@^0.2.0:
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
   integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=
 
-textarea-caret@^3.0.1:
+textarea-caret@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/textarea-caret/-/textarea-caret-3.1.0.tgz#5d5a35bb035fd06b2ff0e25d5359e97f2655087f"
   integrity sha512-cXAvzO9pP5CGa6NKx0WYHl+8CHKZs8byMkt3PCJBCmq2a34YA9pO1NrQET5pzeqnBjBdToF5No4rrmkDUgQC2Q==
 
-textcomplete@0.18.2:
-  version "0.18.2"
-  resolved "https://registry.yarnpkg.com/textcomplete/-/textcomplete-0.18.2.tgz#de0d806567102f7e32daffcbcc3db05af1515eb5"
-  integrity sha512-Z7RocuECp4S/Dld2swLRdXPYqCCMZvKmwrZHp8MQA4UJHX171/MjLeAj0uENEJPpa8JOtU01PK0iuVQUoFjSfg==
-  dependencies:
-    eventemitter3 "^2.0.3"
-    textarea-caret "^3.0.1"
-    undate "^0.2.3"
-
 tlds@1.228.0:
   version "1.228.0"
   resolved "https://registry.yarnpkg.com/tlds/-/tlds-1.228.0.tgz#416ab76ac1a06aad0b5d6b484a13bf5a0ad63f39"
@@ -7156,16 +7161,11 @@ unbox-primitive@^1.0.1:
     has-symbols "^1.0.2"
     which-boxed-primitive "^1.0.2"
 
-undate@0.3.0:
+undate@0.3.0, undate@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/undate/-/undate-0.3.0.tgz#cbf6b1f179d69ace7393e6d92400c3afdf43d140"
   integrity sha512-ssH8QTNBY6B+2fRr3stSQ+9m2NT8qTaun3ExTx5ibzYQvP7yX4+BnX0McNxFCvh6S5ia/DYu6bsCKQx/U4nb/Q==
 
-undate@^0.2.3:
-  version "0.2.4"
-  resolved "https://registry.yarnpkg.com/undate/-/undate-0.2.4.tgz#ccb2a8cf38edc035d1006fcb2909c4c6024a8400"
-  integrity sha512-k1WTRVhI076HYqP6e3pZPzS7K2xNAcuhCcWOPjHmR8SwU3byyKYvyNZ4XTEAd7Ofe40+wrEjNq6WmmO8WoUVNg==
-
 unicode-canonical-property-names-ecmascript@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz#301acdc525631670d39f6146e0e77ff6bbdebddc"