mirrors/cinny
1
0
Fork 0
mirror of https://github.com/cinnyapp/cinny.git synced 2025-03-12 14:10:01 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Fix editor focus after autocomplete (#2233)

Browse source 
* upgrade slatejs

* collapse autocomplete on escape

* make FN_KEYS_REGEX const in module scope
This commit is contained in:
Ajay Bura 2025-02-26 21:42:42 +11:00 • committed by GitHub
parent 2c7038cd1f
commit ccfe30cd68
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 84 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

116
package-lock.json generated
View file

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

8
package.json
View file

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

6
src/app/features/room/RoomInput.tsx
View file

@ -353,10 +353,14 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
} }
if (isKeyHotkey('escape', evt)) { if (isKeyHotkey('escape', evt)) {
evt.preventDefault(); evt.preventDefault();
if (autocompleteQuery) {
setAutocompleteQuery(undefined);
return;
}
setReplyDraft(undefined); setReplyDraft(undefined);
} }
}, },
[submit, setReplyDraft, enterForNewline] [submit, setReplyDraft, enterForNewline, autocompleteQuery]
); );
const handleKeyUp: KeyboardEventHandler = useCallback( const handleKeyUp: KeyboardEventHandler = useCallback(

3
src/app/features/room/RoomView.tsx
View file

@ -20,6 +20,7 @@ import { useKeyDown } from '../../hooks/useKeyDown';
import { editableActiveElement } from '../../utils/dom'; import { editableActiveElement } from '../../utils/dom';
import navigation from '../../../client/state/navigation'; import navigation from '../../../client/state/navigation';
const FN_KEYS_REGEX = /^F\d+$/;
const shouldFocusMessageField = (evt: KeyboardEvent): boolean => { const shouldFocusMessageField = (evt: KeyboardEvent): boolean => {
const { code } = evt; const { code } = evt;
if (evt.metaKey || evt.altKey || evt.ctrlKey) { if (evt.metaKey || evt.altKey || evt.ctrlKey) {
@ -27,7 +28,7 @@ const shouldFocusMessageField = (evt: KeyboardEvent): boolean => {
} }
// do not focus on F keys // 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 // do not focus on numlock/scroll lock
if ( if (