From 276baefcb00dee9070b1b0597a6453a9915ec000 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=A3=A8=EB=B0=80LuMir?= <rpfos@naver.com>
Date: Wed, 14 May 2025 14:21:50 +0900
Subject: [PATCH 1/2] feat: change ESQuery Selector placeholder text based on
 language

---
 src/components/esquery-selector-input.tsx | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/components/esquery-selector-input.tsx b/src/components/esquery-selector-input.tsx
index 5bff62f9..bfde0ee8 100644
--- a/src/components/esquery-selector-input.tsx
+++ b/src/components/esquery-selector-input.tsx
@@ -1,12 +1,27 @@
 import { useId, type FC } from "react";
 import { Label } from "@/components/ui/label";
 import { TextField } from "@/components/ui/text-field";
-import { useExplorer } from "@/hooks/use-explorer";
+import { useExplorer, type Language } from "@/hooks/use-explorer";
 import { useAST } from "@/hooks/use-ast";
 import { cn } from "@/lib/utils";
 
+const esquerySelectorPlaceholder = (language: Language) => {
+	switch (language) {
+		case "javascript":
+			return 'e.g. "ImportDeclaration > Literal"';
+		case "json":
+			return 'e.g. "Member > String"';
+		case "markdown":
+			return 'e.g. "Heading > Text"';
+		case "css":
+			return 'e.g. "Block > Declaration"';
+		case "html":
+			return 'e.g. "Document > Doctype"';
+	}
+};
+
 export const EsquerySelectorInput: FC = () => {
-	const { esquerySelector, setEsquerySelector } = useExplorer();
+	const { esquerySelector, setEsquerySelector, language } = useExplorer();
 	const astParseResult = useAST();
 	const htmlId = useId();
 
@@ -21,7 +36,7 @@ export const EsquerySelectorInput: FC = () => {
 			</Label>
 			<TextField
 				id={htmlId}
-				placeholder={'e.g. "ImportDeclaration > Literal"'}
+				placeholder={esquerySelectorPlaceholder(language)}
 				className={cn(
 					"flex-1",
 					!astParseResult.ok ||

From cdccb99a654bda7eaa8fdae7f57de85257586888 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=A3=A8=EB=B0=80LuMir?= <rpfos@naver.com>
Date: Wed, 14 May 2025 19:50:51 +0900
Subject: [PATCH 2/2] wip: refactoring

---
 src/components/esquery-selector-input.tsx | 20 +++-----------------
 src/lib/const.ts                          |  8 ++++++++
 2 files changed, 11 insertions(+), 17 deletions(-)

diff --git a/src/components/esquery-selector-input.tsx b/src/components/esquery-selector-input.tsx
index bfde0ee8..77f5f744 100644
--- a/src/components/esquery-selector-input.tsx
+++ b/src/components/esquery-selector-input.tsx
@@ -1,24 +1,10 @@
 import { useId, type FC } from "react";
 import { Label } from "@/components/ui/label";
 import { TextField } from "@/components/ui/text-field";
-import { useExplorer, type Language } from "@/hooks/use-explorer";
+import { useExplorer } from "@/hooks/use-explorer";
 import { useAST } from "@/hooks/use-ast";
 import { cn } from "@/lib/utils";
-
-const esquerySelectorPlaceholder = (language: Language) => {
-	switch (language) {
-		case "javascript":
-			return 'e.g. "ImportDeclaration > Literal"';
-		case "json":
-			return 'e.g. "Member > String"';
-		case "markdown":
-			return 'e.g. "Heading > Text"';
-		case "css":
-			return 'e.g. "Block > Declaration"';
-		case "html":
-			return 'e.g. "Document > Doctype"';
-	}
-};
+import { esquerySelectorPlaceholder } from "@/lib/const";
 
 export const EsquerySelectorInput: FC = () => {
 	const { esquerySelector, setEsquerySelector, language } = useExplorer();
@@ -36,7 +22,7 @@ export const EsquerySelectorInput: FC = () => {
 			</Label>
 			<TextField
 				id={htmlId}
-				placeholder={esquerySelectorPlaceholder(language)}
+				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