diff --git a/.changeset/good-donuts-deliver.md b/.changeset/good-donuts-deliver.md new file mode 100644 index 0000000000..ebbf9ebe74 --- /dev/null +++ b/.changeset/good-donuts-deliver.md @@ -0,0 +1,5 @@ +--- +"@latticexyz/explorer": patch +--- + +The SQL query editor now supports multi-line input. diff --git a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/SQLEditor.tsx b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/SQLEditor.tsx index 22b2a993f1..e619ac0800 100644 --- a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/SQLEditor.tsx +++ b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/SQLEditor.tsx @@ -1,8 +1,9 @@ "use client"; import { PlayIcon } from "lucide-react"; +import { editor } from "monaco-editor/esm/vs/editor/editor.api"; import { useQueryState } from "nuqs"; -import { useEffect, useState } from "react"; +import { useEffect, useRef, useState } from "react"; import { useForm } from "react-hook-form"; import { Table } from "@latticexyz/config"; import Editor from "@monaco-editor/react"; @@ -18,6 +19,8 @@ type Props = { }; export function SQLEditor({ table }: Props) { + const editorRef = useRef(null); + const containerRef = useRef(null); const [isFocused, setIsFocused] = useState(false); const [query, setQuery] = useQueryState("query", { defaultValue: "" }); const validateQuery = useQueryValidator(table); @@ -39,44 +42,54 @@ export function SQLEditor({ table }: Props) { form.reset({ query }); }, [query, form]); + const updateHeight = () => { + if (editorRef.current) { + const contentHeight = Math.min(200, editorRef.current.getContentHeight()); + if (containerRef.current) { + containerRef.current.style.height = `${contentHeight}px`; + } + + editorRef.current.layout({ + width: editorRef.current.getLayoutInfo().width, + height: contentHeight, + }); + } + }; + return (
( - field.onChange(value)} - onMount={(editor) => { - editor.onDidFocusEditorText(() => { - setIsFocused(true); - }); +
+ field.onChange(encodeURIComponent(value ?? ""))} + onMount={(editor) => { + editorRef.current = editor; - editor.onDidBlurEditorText(() => { - setIsFocused(false); - }); - }} - loading={null} - /> + updateHeight(); + editor.onDidContentSizeChange(updateHeight); + editor.onDidFocusEditorText(() => setIsFocused(true)); + editor.onDidBlurEditorText(() => setIsFocused(false)); + }} + loading={null} + /> +
)} /> - diff --git a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/TablesViewer.tsx b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/TablesViewer.tsx index 3d558c0539..51c137400e 100644 --- a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/TablesViewer.tsx +++ b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/TablesViewer.tsx @@ -173,6 +173,10 @@ export function TablesViewer({ table, query }: { table?: TableType; query?: stri
+
+ {tableData && `Total rows: ${tableData.rows.length.toLocaleString()}`} +
+