feat: enhance keymap handling in QuerySearch to prevent default line breaks on Enter keys

This commit is contained in:
ahrefabhi 2025-07-07 15:56:12 +05:30
parent 6d110870a4
commit f9414d2e8a
2 changed files with 40 additions and 12 deletions

View File

@ -12,8 +12,8 @@ import {
import { javascript } from '@codemirror/lang-javascript'; import { javascript } from '@codemirror/lang-javascript';
import { Color } from '@signozhq/design-tokens'; import { Color } from '@signozhq/design-tokens';
import { copilot } from '@uiw/codemirror-theme-copilot'; import { copilot } from '@uiw/codemirror-theme-copilot';
import CodeMirror, { EditorView, keymap } from '@uiw/react-codemirror'; import CodeMirror, { EditorView, keymap, Prec } from '@uiw/react-codemirror';
import { Button, Card, Collapse, Popover, Space, Tag, Typography } from 'antd'; import { Button, Card, Collapse, Popover, Tag } from 'antd';
import { getKeySuggestions } from 'api/querySuggestions/getKeySuggestions'; import { getKeySuggestions } from 'api/querySuggestions/getKeySuggestions';
import { getValueSuggestions } from 'api/querySuggestions/getValueSuggestion'; import { getValueSuggestions } from 'api/querySuggestions/getValueSuggestion';
import cx from 'classnames'; import cx from 'classnames';
@ -1046,13 +1046,42 @@ function QuerySearch({
javascript({ jsx: false, typescript: false }), javascript({ jsx: false, typescript: false }),
EditorView.lineWrapping, EditorView.lineWrapping,
stopEventsExtension, stopEventsExtension,
Prec.highest(
keymap.of([ keymap.of([
...completionKeymap, ...completionKeymap,
{ {
key: 'Escape', key: 'Escape',
run: closeCompletion, run: closeCompletion,
}, },
{
key: 'Enter',
preventDefault: true,
// Prevent default behavior of Enter to add new line
// and instead run a custom action
run: (): boolean => {
return true;
},
},
{
key: 'Mod-Enter',
preventDefault: true,
// Prevent default behavior of Mod-Enter to add new line
// and instead run a custom action
// Mod-Enter is usually Ctrl-Enter or Cmd-Enter based on OS
run: (): boolean => {
return true;
},
},
{
key: 'Shift-Enter',
preventDefault: true,
// Prevent default behavior of Shift-Enter to add new line
run: (): boolean => {
return true;
},
},
]), ]),
),
]} ]}
placeholder="Enter your query (e.g., status = 'error' AND service = 'frontend')" placeholder="Enter your query (e.g., status = 'error' AND service = 'frontend')"
basicSetup={{ basicSetup={{
@ -1154,7 +1183,7 @@ function QuerySearch({
</Card> </Card>
)} )}
{queryContext && ( {/* {queryContext && (
<Card size="small" title="Current Context" className="query-context"> <Card size="small" title="Current Context" className="query-context">
<div className="context-details"> <div className="context-details">
<Space direction="vertical" size={4}> <Space direction="vertical" size={4}>
@ -1196,7 +1225,7 @@ function QuerySearch({
</Space> </Space>
</div> </div>
</Card> </Card>
)} )} */}
</div> </div>
); );
} }

View File

@ -13,7 +13,6 @@ import {
isNonValueOperatorToken, isNonValueOperatorToken,
isOperatorToken, isOperatorToken,
isValueToken, isValueToken,
isWrappedUnderQuotes,
} from './tokenUtils'; } from './tokenUtils';
// Function to normalize multiple spaces to single spaces when not in quotes // Function to normalize multiple spaces to single spaces when not in quotes