Feature/sql query formatting

[Victor1890]

This pull request introduces SQL formatting capabilities to the Monaco editor by integrating the sql-formatter library and adding formatting providers. The main changes focus on improving the SQL editing experience by enabling automatic formatting for both entire documents and selected ranges, and refactoring formatting logic into a dedicated hook for better code organization.

SQL Formatting Integration:

• Added sql-formatter as a dependency to package.json to enable SQL formatting features.
• Implemented the useSqlFormattingProviders hook in ui/src/lib/monaco/sql-formatting.ts to register document and range formatting providers for SQL in Monaco, using sensible defaults and error handling.
• Exported the new formatting hook from ui/src/lib/monaco/index.ts for use in other components.

Editor Component Enhancements:

• Integrated the formatting providers into the editor by using useSqlFormattingProviders in ui/src/components/editor.tsx, keeping the component lean and maintainable. [1] [2]
• Enabled automatic formatting on paste in the Monaco editor configuration for a smoother user experience.

[Copilot]

Pull request overview

This pull request adds SQL formatting capabilities to the Monaco editor by integrating the sql-formatter library. The implementation creates a reusable hook that registers document and range formatting providers, enabling users to format their SQL code both for entire documents and selected ranges with proper error handling.

Key Changes:

• Added sql-formatter library as a dependency for SQL formatting functionality
• Created useSqlFormattingProviders hook to encapsulate formatting provider registration logic
• Enabled formatOnPaste option in the Monaco editor for improved user experience

Reviewed changes

Copilot reviewed 4 out of 5 changed files in this pull request and generated 3 comments.

File	Description
ui/package.json	Added sql-formatter dependency to enable SQL formatting features
ui/src/lib/monaco/sql-formatting.ts	Implemented reusable hook for registering document and range formatting providers with error handling
ui/src/lib/monaco/index.ts	Exported the new formatting hook for use in components
ui/src/components/editor.tsx	Integrated formatting providers using the new hook and enabled format-on-paste

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The sql-formatter version is missing the caret (^) prefix that is used consistently for all other dependencies in this file. This could lead to stricter version locking than intended. Consider using "^15.4.6" to allow minor and patch updates while preventing breaking major version changes.

Suggested change

	"sql-formatter": "15.4.6",
	"sql-formatter": "^15.4.6",

[Copilot]

Missing semicolon at the end of the export statement. The codebase consistently uses semicolons (see ui/src/lib/utils.ts and ui/src/components/editor.tsx), so this should have one as well for consistency.

Suggested change

	export { useSqlFormattingProviders } from "./sql-formatting"
	export { useSqlFormattingProviders } from "./sql-formatting";

[Copilot]

Including getOptions in the dependency array will cause the formatting providers to be re-registered whenever a new function reference is passed, even if the function's behavior is identical. Since getOptions is an optional callback function, it's likely to be recreated on every render unless the caller memoizes it. Consider either: (1) removing getOptions from the dependency array with an ESLint disable comment explaining it's intentionally stable, or (2) documenting that callers should use useCallback to memoize getOptions.

[frectonz]

Thank you. I will handle the AI reviews.