useAddDefinitions.ts 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. import { Monaco } from '@monaco-editor/react'
  2. import { LOCAL_STORAGE_KEYS } from 'common'
  3. import type { IDisposable } from 'monaco-editor'
  4. import { useEffect, useRef } from 'react'
  5. import getPgsqlCompletionProvider from '@/components/ui/CodeEditor/Providers/PgSQLCompletionProvider'
  6. import getPgsqlSignatureHelpProvider from '@/components/ui/CodeEditor/Providers/PgSQLSignatureHelpProvider'
  7. import { useDatabaseFunctionsQuery } from '@/data/database-functions/database-functions-query'
  8. import { useKeywordsQuery } from '@/data/database/keywords-query'
  9. import { useSchemasQuery } from '@/data/database/schemas-query'
  10. import { useTableColumnsQuery } from '@/data/database/table-columns-query'
  11. import { useLocalStorageQuery } from '@/hooks/misc/useLocalStorage'
  12. import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
  13. import { formatSql } from '@/lib/formatSql'
  14. import { useSqlEditorV2StateSnapshot } from '@/state/sql-editor-v2'
  15. export const useAddDefinitions = (id: string, monaco: Monaco | null) => {
  16. const { data: project } = useSelectedProjectQuery()
  17. const snapV2 = useSqlEditorV2StateSnapshot()
  18. const [intellisenseEnabled] = useLocalStorageQuery(
  19. LOCAL_STORAGE_KEYS.SQL_EDITOR_INTELLISENSE,
  20. true
  21. )
  22. const { data: keywords, isSuccess: isKeywordsSuccess } = useKeywordsQuery(
  23. {
  24. projectRef: project?.ref,
  25. connectionString: project?.connectionString,
  26. },
  27. { enabled: intellisenseEnabled }
  28. )
  29. const { data: functions, isSuccess: isFunctionsSuccess } = useDatabaseFunctionsQuery(
  30. {
  31. projectRef: project?.ref,
  32. connectionString: project?.connectionString,
  33. },
  34. { enabled: intellisenseEnabled }
  35. )
  36. const { data: schemas, isSuccess: isSchemasSuccess } = useSchemasQuery(
  37. {
  38. projectRef: project?.ref,
  39. connectionString: project?.connectionString,
  40. },
  41. { enabled: intellisenseEnabled }
  42. )
  43. const { data: tableColumns, isSuccess: isTableColumnsSuccess } = useTableColumnsQuery(
  44. {
  45. projectRef: project?.ref,
  46. connectionString: project?.connectionString,
  47. },
  48. { enabled: intellisenseEnabled }
  49. )
  50. const pgInfoRef = useRef<any>(null)
  51. const isPgInfoReady =
  52. intellisenseEnabled &&
  53. isTableColumnsSuccess &&
  54. isSchemasSuccess &&
  55. isKeywordsSuccess &&
  56. isFunctionsSuccess
  57. if (isPgInfoReady) {
  58. if (pgInfoRef.current === null) {
  59. pgInfoRef.current = {}
  60. }
  61. pgInfoRef.current.tableColumns = tableColumns
  62. pgInfoRef.current.schemas = schemas
  63. pgInfoRef.current.keywords = keywords
  64. pgInfoRef.current.functions = functions
  65. }
  66. // Enable pgsql format
  67. useEffect(() => {
  68. if (monaco) {
  69. const formatProvider = monaco.languages.registerDocumentFormattingEditProvider('pgsql', {
  70. async provideDocumentFormattingEdits(model) {
  71. const value = model.getValue()
  72. const formatted = formatSql(value)
  73. if (id) snapV2.setSql({ id, sql: formatted })
  74. return [{ range: model.getFullModelRange(), text: formatted }]
  75. },
  76. })
  77. return () => formatProvider.dispose()
  78. }
  79. // eslint-disable-next-line react-hooks/exhaustive-deps
  80. }, [monaco])
  81. // Register auto completion item provider for pgsql
  82. useEffect(() => {
  83. let completeProvider: IDisposable | null = null
  84. let signatureHelpProvider: IDisposable | null = null
  85. if (isPgInfoReady) {
  86. if (monaco && isPgInfoReady) {
  87. completeProvider = monaco.languages.registerCompletionItemProvider(
  88. 'pgsql',
  89. getPgsqlCompletionProvider(monaco, pgInfoRef)
  90. )
  91. signatureHelpProvider = monaco.languages.registerSignatureHelpProvider(
  92. 'pgsql',
  93. getPgsqlSignatureHelpProvider(monaco, pgInfoRef)
  94. )
  95. }
  96. }
  97. return () => {
  98. completeProvider?.dispose()
  99. signatureHelpProvider?.dispose()
  100. }
  101. }, [isPgInfoReady, monaco])
  102. }