diff --git a/client/components/ChatInput.vue b/client/components/ChatInput.vue index 0d01f2d8..401ee7ef 100644 --- a/client/components/ChatInput.vue +++ b/client/components/ChatInput.vue @@ -13,6 +13,7 @@ :aria-label="getInputPlaceholder(channel)" @input="setPendingMessage" @keypress.enter.exact.prevent="onSubmit" + @blur="onBlur" /> diff --git a/client/js/autocompletion.js b/client/js/autocompletion.js index 33ef04a0..f362a749 100644 --- a/client/js/autocompletion.js +++ b/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 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", () => { diff --git a/package.json b/package.json index 40d40f70..0acec36d 100644 --- a/package.json +++ b/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", diff --git a/yarn.lock b/yarn.lock index 51d3d86f..64f5d22a 100644 --- a/yarn.lock +++ b/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"