Fix editor focus after autocomplete (#2233)

* upgrade slatejs

* collapse autocomplete on escape

* make FN_KEYS_REGEX const in module scope

diff --git a/package-lock.json b/package-lock.json
index f0211ee473b8a739d65da15109b2cce40b96f25c..7b28bcc26eb43e60241058eeb974b702a110772e 100644 (file)
--- a/package-lock.json
+++ b/package-lock.json
@@ -62,9 +62,10 @@
         "react-range": "1.8.14",
         "react-router-dom": "6.20.0",
         "sanitize-html": "2.12.1",
-        "slate": "0.94.1",
-        "slate-history": "0.93.0",
-        "slate-react": "0.98.4",
+        "slate": "0.112.0",
+        "slate-dom": "0.112.2",
+        "slate-history": "0.110.3",
+        "slate-react": "0.112.1",
         "tippy.js": "6.3.7",
         "ua-parser-js": "1.0.35"
       },
@@ -73,6 +74,7 @@
         "@rollup/plugin-inject": "5.0.3",
         "@rollup/plugin-wasm": "6.1.1",
         "@types/file-saver": "2.0.5",
+        "@types/is-hotkey": "0.1.10",
         "@types/node": "18.11.18",
         "@types/prismjs": "1.26.0",
         "@types/react": "18.2.39",
@@ -4598,7 +4600,9 @@
     "node_modules/@types/is-hotkey": {
       "version": "0.1.10",
       "resolved": "https://registry.npmjs.org/@types/is-hotkey/-/is-hotkey-0.1.10.tgz",
-      "integrity": "sha512-RvC8KMw5BCac1NvRRyaHgMMEtBaZ6wh0pyPTBu7izn4Sj/AX9Y4aXU5c7rX8PnM/knsuUpC1IeoBkANtxBypsQ=="
+      "integrity": "sha512-RvC8KMw5BCac1NvRRyaHgMMEtBaZ6wh0pyPTBu7izn4Sj/AX9Y4aXU5c7rX8PnM/knsuUpC1IeoBkANtxBypsQ==",
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
@@ -4612,11 +4616,6 @@
       "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
       "dev": true
     },
-    "node_modules/@types/lodash": {
-      "version": "4.17.14",
-      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.14.tgz",
-      "integrity": "sha512-jsxagdikDiDBeIRaPYtArcT8my4tN1og7MtMRquFT3XNA6axxyHDRUemqDz/taRDdOUn0GnGHRCuff4q48sW9A=="
-    },
     "node_modules/@types/node": {
       "version": "18.11.18",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.18.tgz",
@@ -5797,9 +5796,10 @@
       }
     },
     "node_modules/compute-scroll-into-view": {
-      "version": "1.0.20",
-      "resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-1.0.20.tgz",
-      "integrity": "sha512-UCB0ioiyj8CRjtrvaceBLqqhZCVP+1B8+NWQhmdsm0VXOJtobBCf1dBQmebCCo34qZmUwZfIH2MZLqNHazrfjg=="
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-3.1.1.tgz",
+      "integrity": "sha512-VRhuHOLoKYOy4UbilLbUzbYg93XLjv2PncJC50EuTWPA3gaja1UjBsUP/D/9/juV3vQFr6XBEzn9KCAHdUvOHw==",
+      "license": "MIT"
     },
     "node_modules/computed-style": {
       "version": "0.1.4",
@@ -8145,7 +8145,8 @@
     "node_modules/is-hotkey": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/is-hotkey/-/is-hotkey-0.2.0.tgz",
-      "integrity": "sha512-UknnZK4RakDmTgz4PI1wIph5yxSs/mvChWs9ifnlXsKuXgWmOkY/hAE0H/k2MIqH0RlRye0i1oC07MCRSD28Mw=="
+      "integrity": "sha512-UknnZK4RakDmTgz4PI1wIph5yxSs/mvChWs9ifnlXsKuXgWmOkY/hAE0H/k2MIqH0RlRye0i1oC07MCRSD28Mw==",
+      "license": "MIT"
     },
     "node_modules/is-map": {
       "version": "2.0.3",
@@ -10225,11 +10226,12 @@
       }
     },
     "node_modules/scroll-into-view-if-needed": {
-      "version": "2.2.31",
-      "resolved": "https://registry.npmjs.org/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.31.tgz",
-      "integrity": "sha512-dGCXy99wZQivjmjIqihaBQNjryrz5rueJY7eHfTdyWEiR4ttYpsajb14rn9s5d4DY4EcY6+4+U/maARBXJedkA==",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/scroll-into-view-if-needed/-/scroll-into-view-if-needed-3.1.0.tgz",
+      "integrity": "sha512-49oNpRjWRvnU8NyGVmUaYG4jtTkNonFZI86MmGRDqBphEK2EXT9gdEUoQPZhuBM8yWHxCWbobltqYO5M4XrUvQ==",
+      "license": "MIT",
       "dependencies": {
-        "compute-scroll-into-view": "^1.0.20"
+        "compute-scroll-into-view": "^3.0.2"
       }
     },
     "node_modules/sdp-transform": {
@@ -10458,19 +10460,39 @@
       }
     },
     "node_modules/slate": {
-      "version": "0.94.1",
-      "resolved": "https://registry.npmjs.org/slate/-/slate-0.94.1.tgz",
-      "integrity": "sha512-GH/yizXr1ceBoZ9P9uebIaHe3dC/g6Plpf9nlUwnvoyf6V1UOYrRwkabtOCd3ZfIGxomY4P7lfgLr7FPH8/BKA==",
+      "version": "0.112.0",
+      "resolved": "https://registry.npmjs.org/slate/-/slate-0.112.0.tgz",
+      "integrity": "sha512-PRnfFgDA3tSop4OH47zu4M1R4Uuhm/AmASu29Qp7sGghVFb713kPBKEnSf1op7Lx/nCHkRlCa3ThfHtCBy+5Yw==",
+      "license": "MIT",
       "dependencies": {
-        "immer": "^9.0.6",
+        "immer": "^10.0.3",
         "is-plain-object": "^5.0.0",
         "tiny-warning": "^1.0.3"
       }
     },
+    "node_modules/slate-dom": {
+      "version": "0.112.2",
+      "resolved": "https://registry.npmjs.org/slate-dom/-/slate-dom-0.112.2.tgz",
+      "integrity": "sha512-cozITMlpcBxrov854reM6+TooiHiqpfM/nZPrnjpN1wSiDsAQmYbWUyftC+jlwcpFj80vywfDHzlG6hXIc5h6A==",
+      "license": "MIT",
+      "dependencies": {
+        "@juggle/resize-observer": "^3.4.0",
+        "direction": "^1.0.4",
+        "is-hotkey": "^0.2.0",
+        "is-plain-object": "^5.0.0",
+        "lodash": "^4.17.21",
+        "scroll-into-view-if-needed": "^3.1.0",
+        "tiny-invariant": "1.3.1"
+      },
+      "peerDependencies": {
+        "slate": ">=0.99.0"
+      }
+    },
     "node_modules/slate-history": {
-      "version": "0.93.0",
-      "resolved": "https://registry.npmjs.org/slate-history/-/slate-history-0.93.0.tgz",
-      "integrity": "sha512-Gr1GMGPipRuxIz41jD2/rbvzPj8eyar56TVMyJBvBeIpQSSjNISssvGNDYfJlSWM8eaRqf6DAcxMKzsLCYeX6g==",
+      "version": "0.110.3",
+      "resolved": "https://registry.npmjs.org/slate-history/-/slate-history-0.110.3.tgz",
+      "integrity": "sha512-sgdff4Usdflmw5ZUbhDkxFwCBQ2qlDKMMkF93w66KdV48vHOgN2BmLrf+2H8SdX8PYIpP/cTB0w8qWC2GwhDVA==",
+      "license": "MIT",
       "dependencies": {
         "is-plain-object": "^5.0.0"
       },
@@ -10479,30 +10501,35 @@
       }
     },
     "node_modules/slate-react": {
-      "version": "0.98.4",
-      "resolved": "https://registry.npmjs.org/slate-react/-/slate-react-0.98.4.tgz",
-      "integrity": "sha512-8Of3v9hFuX8rIRc86LuuBhU9t8ps+9ARKL4yyhCrKQYZ93Ep/LFA3GvPGvtf3zYuVadZ8tkhRH8tbHOGNAndLw==",
+      "version": "0.112.1",
+      "resolved": "https://registry.npmjs.org/slate-react/-/slate-react-0.112.1.tgz",
+      "integrity": "sha512-V9b+waxPweXqAkSQmKQ1afG4Me6nVQACPpxQtHPIX02N7MXa5f5WilYv+bKt7vKKw+IZC2F0Gjzhv5BekVgP/A==",
+      "license": "MIT",
       "dependencies": {
         "@juggle/resize-observer": "^3.4.0",
-        "@types/is-hotkey": "^0.1.1",
-        "@types/lodash": "^4.14.149",
-        "direction": "^1.0.3",
-        "is-hotkey": "^0.1.6",
+        "direction": "^1.0.4",
+        "is-hotkey": "^0.2.0",
         "is-plain-object": "^5.0.0",
-        "lodash": "^4.17.4",
-        "scroll-into-view-if-needed": "^2.2.20",
-        "tiny-invariant": "1.0.6"
+        "lodash": "^4.17.21",
+        "scroll-into-view-if-needed": "^3.1.0",
+        "tiny-invariant": "1.3.1"
       },
       "peerDependencies": {
-        "react": ">=16.8.0",
-        "react-dom": ">=16.8.0",
-        "slate": ">=0.65.3"
+        "react": ">=18.2.0",
+        "react-dom": ">=18.2.0",
+        "slate": ">=0.99.0",
+        "slate-dom": ">=0.110.2"
       }
     },
-    "node_modules/slate-react/node_modules/is-hotkey": {
-      "version": "0.1.8",
-      "resolved": "https://registry.npmjs.org/is-hotkey/-/is-hotkey-0.1.8.tgz",
-      "integrity": "sha512-qs3NZ1INIS+H+yeo7cD9pDfwYV/jqRh1JG9S9zYrNudkoUQg7OL7ziXqRKu+InFjUIDoP2o6HIkLYMh1pcWgyQ=="
+    "node_modules/slate/node_modules/immer": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-10.1.1.tgz",
+      "integrity": "sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
     },
     "node_modules/smob": {
       "version": "1.5.0",
@@ -10866,9 +10893,10 @@
       "dev": true
     },
     "node_modules/tiny-invariant": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.0.6.tgz",
-      "integrity": "sha512-FOyLWWVjG+aC0UqG76V53yAWdXfH8bO6FNmyZOuUrzDzK8DI3/JRY25UD7+g49JWM1LXwymsKERB+DzI0dTEQA=="
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.1.tgz",
+      "integrity": "sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw==",
+      "license": "MIT"
     },
     "node_modules/tiny-warning": {
       "version": "1.0.3",

diff --git a/package.json b/package.json
index 3f7af56bd8cb6ef681f469416286db8c71b7f8fa..2b11a9302e82f76992146824fdaf3aa2abcb3833 100644 (file)
--- a/package.json
+++ b/package.json
@@ -73,9 +73,10 @@
     "react-range": "1.8.14",
     "react-router-dom": "6.20.0",
     "sanitize-html": "2.12.1",
-    "slate": "0.94.1",
-    "slate-history": "0.93.0",
-    "slate-react": "0.98.4",
+    "slate": "0.112.0",
+    "slate-dom": "0.112.2",
+    "slate-history": "0.110.3",
+    "slate-react": "0.112.1",
     "tippy.js": "6.3.7",
     "ua-parser-js": "1.0.35"
   },
@@ -84,6 +85,7 @@
     "@rollup/plugin-inject": "5.0.3",
     "@rollup/plugin-wasm": "6.1.1",
     "@types/file-saver": "2.0.5",
+    "@types/is-hotkey": "0.1.10",
     "@types/node": "18.11.18",
     "@types/prismjs": "1.26.0",
     "@types/react": "18.2.39",

diff --git a/src/app/features/room/RoomInput.tsx b/src/app/features/room/RoomInput.tsx
index 4d21f440138a56822310b02bdcc3a83615c2e4c9..3141a5d5d048ab7e2b08e9fbe6fd0d0cd01a69a3 100644 (file)
--- a/src/app/features/room/RoomInput.tsx
+++ b/src/app/features/room/RoomInput.tsx
@@ -353,10 +353,14 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
         }
         if (isKeyHotkey('escape', evt)) {
           evt.preventDefault();
+          if (autocompleteQuery) {
+            setAutocompleteQuery(undefined);
+            return;
+          }
           setReplyDraft(undefined);
         }
       },
-      [submit, setReplyDraft, enterForNewline]
+      [submit, setReplyDraft, enterForNewline, autocompleteQuery]
     );
 
     const handleKeyUp: KeyboardEventHandler = useCallback(

diff --git a/src/app/features/room/RoomView.tsx b/src/app/features/room/RoomView.tsx
index 250afc930b2cdc049063515071a7218e1f38f1cf..b72d2685588833166710a32fdb40881a5b07b2cb 100644 (file)
--- a/src/app/features/room/RoomView.tsx
+++ b/src/app/features/room/RoomView.tsx
@@ -20,6 +20,7 @@ import { useKeyDown } from '../../hooks/useKeyDown';
 import { editableActiveElement } from '../../utils/dom';
 import navigation from '../../../client/state/navigation';
 
+const FN_KEYS_REGEX = /^F\d+$/;
 const shouldFocusMessageField = (evt: KeyboardEvent): boolean => {
   const { code } = evt;
   if (evt.metaKey || evt.altKey || evt.ctrlKey) {
@@ -27,7 +28,7 @@ const shouldFocusMessageField = (evt: KeyboardEvent): boolean => {
   }
 
   // do not focus on F keys
-  if (/^F\d+$/.test(code)) return false;
+  if (FN_KEYS_REGEX.test(code)) return false;
 
   // do not focus on numlock/scroll lock
   if (