supernets/hardlounge
supernets/hardlounge
4
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source 
* Autocomplete: update to @textcomplete package
* Autocomplete: close on blur
This commit is contained in:
Max Leiter 2022-04-11 18:11:43 -07:00 committed by GitHub
parent 57b1e51e9f
commit bdd6e71049
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 43 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
client/components/ChatInput.vue
View File

@ -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>

28
client/js/autocompletion.js
View File

@ -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 textcomplete = new Textcomplete(editor, {
dropdown: {
className: "textcomplete-menu",
placement: "top",
},
});
textcomplete.register([
const strategies = [
emojiStrategy,
nicksStrategy,
chanStrategy,
commandStrategy,
foregroundColorStrategy,
backgroundColorStrategy,
]);
];
// Activate the first item by default
// https://github.com/yuku-t/textcomplete/issues/93
textcomplete.on("rendered", () => {
if (textcomplete.dropdown.items.length > 0) {
textcomplete.dropdown.items[0].activate();
}
const editor = new TextareaEditor(input);
const textcomplete = new Textcomplete(editor, strategies, {
dropdown: {
className: "textcomplete-menu",
placement: "top",
},
});
textcomplete.on("show", () => {

3
package.json
View File

@ -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",

48
yarn.lock
View File

@ -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:
version "2.0.3"
resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-2.0.3.tgz#b5e1079b59fb5e1ba2771c0a993be060a58c99ba"
integrity sha1-teEHm1n7XhuidxwKmTvgYKWMmbo=
eventemitter3@^4.0.7:
eventemitter3@^4.0.4, 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"