mirror of
				https://github.com/cinnyapp/cinny.git
				synced 2025-11-03 22:10:29 +03:00 
			
		
		
		
	Fix editor focus after autocomplete (#2233)
* upgrade slatejs * collapse autocomplete on escape * make FN_KEYS_REGEX const in module scope
This commit is contained in:
		
							parent
							
								
									2c7038cd1f
								
							
						
					
					
						commit
						ccfe30cd68
					
				
					 4 changed files with 84 additions and 49 deletions
				
			
		
							
								
								
									
										116
									
								
								package-lock.json
									
										
									
										generated
									
									
									
								
							
							
						
						
									
										116
									
								
								package-lock.json
									
										
									
										generated
									
									
									
								
							| 
						 | 
				
			
			@ -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",
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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",
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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(
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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 (
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue