diff --git a/src/components/esquery-selector-input.tsx b/src/components/esquery-selector-input.tsx index 5bff62f9..77f5f744 100644 --- a/src/components/esquery-selector-input.tsx +++ b/src/components/esquery-selector-input.tsx @@ -4,9 +4,10 @@ import { TextField } from "@/components/ui/text-field"; import { useExplorer } from "@/hooks/use-explorer"; import { useAST } from "@/hooks/use-ast"; import { cn } from "@/lib/utils"; +import { esquerySelectorPlaceholder } from "@/lib/const"; export const EsquerySelectorInput: FC = () => { - const { esquerySelector, setEsquerySelector } = useExplorer(); + const { esquerySelector, setEsquerySelector, language } = useExplorer(); const astParseResult = useAST(); const htmlId = useId(); @@ -21,7 +22,7 @@ export const EsquerySelectorInput: FC = () => { Literal"'} + placeholder={esquerySelectorPlaceholder[language]} className={cn( "flex-1", !astParseResult.ok || diff --git a/src/lib/const.ts b/src/lib/const.ts index 79d2e6f3..ee29ff82 100644 --- a/src/lib/const.ts +++ b/src/lib/const.ts @@ -256,6 +256,14 @@ export const pathViewOptions = [ }, ]; +export const esquerySelectorPlaceholder = { + javascript: 'e.g. "ImportDeclaration > Literal"', + json: 'e.g. "Member > String"', + markdown: 'e.g. "Heading > Text"', + css: 'e.g. "Block > Declaration"', + html: 'e.g. "Document > Doctype"', +}; + export const defaultJsCode = ` /** * Type or paste some JavaScript here to learn more about