mirror of
https://github.com/thelounge/thelounge.git
synced 2024-04-26 20:07:11 +02:00
Autocomplete: update to @textcomplete package and close on blur (#4493)
* Autocomplete: update to @textcomplete package * Autocomplete: close on blur
This commit is contained in:
Max Leiter
GitHub
parent
57b1e51e9f
commit
bdd6e71049
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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", () => {
|
||||
|
|
|
|||
|
|
@ -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
48
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:
|
||||
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"
|
||||
|
|
|
|||
Loading…
Reference in a new issue