Query Builder Search Editor (QuerySearch/QuerySearch.tsx)

CodeMirror-based query input component with autocompletion, syntax highlighting, and validation for building filter queries in SigNoz's query builder.

// Source: https://github.com/SigNoz/signoz | License: MIT | Copyright 2020-present SigNoz Inc
// Provided via justclaw.it.com; keep this notice with the code.
/* eslint-disable sonarjs/cognitive-complexity */
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { CircleCheck, Info, TriangleAlert, Filter } from '@signozhq/icons';
import {
	autocompletion,
	closeCompletion,
	CompletionContext,
	completionKeymap,
	CompletionResult,
	startCompletion,
} from '@codemirror/autocomplete';
import { javascript } from '@codemirror/lang-javascript';
import { Color } from '@signozhq/design-tokens';
import { copilot } from '@uiw/codemirror-theme-copilot';
import { githubLight } from '@uiw/codemirror-theme-github';
import CodeMirror, { EditorView, keymap, Prec } from '@uiw/r

... (truncated -- full source via MCP)