fix monaco imports

Author: emrberk

packages/web-console/src/providers/EditorProvider/index.tsx

@@ -1,4 +1,4 @@
-import { Monaco } from "@monaco-editor/react"
+import type { Monaco } from "@monaco-editor/react"
 import type { editor } from "monaco-editor"
 import React, {
   createContext,
@@ -9,7 +9,6 @@ import React, {
   useRef,
   useState,
   useCallback,
-  useMemo,
 } from "react"
 import {
   appendQuery,

packages/web-console/src/scenes/Editor/Monaco/index.tsx

@@ -1,4 +1,6 @@
-import Editor, { loader, Monaco } from "@monaco-editor/react"
+import Editor from "@monaco-editor/react"
+import type { Monaco } from "@monaco-editor/react"
+import { loader } from "@monaco-editor/react"
 import { Box, Button, Checkbox, Dialog, ForwardRef, Overlay } from "@questdb/react-components"
 import { Stop } from "@styled-icons/remix-line"
 import type { editor, IDisposable } from "monaco-editor"

packages/web-console/src/scenes/Editor/Monaco/questdb-sql/conf.ts

@@ -1,6 +1,6 @@
-import * as monaco from "monaco-editor"
+import type { languages } from "monaco-editor"
 
-export const conf: monaco.languages.LanguageConfiguration = {
+export const conf: languages.LanguageConfiguration = {
   /**
    * Override the default word definition regex to also allow single quotes and dots.
    * This way we can highlight table names escaped with quotes and the ones created from CSV files.

packages/web-console/src/scenes/Editor/Monaco/questdb-sql/createSchemaCompletionProvider.ts

@@ -1,5 +1,5 @@
 import { Table, uniq, InformationSchemaColumn } from "../../../../utils"
-import * as monaco from "monaco-editor"
+import type { editor, languages } from "monaco-editor"
 import { CompletionItemPriority } from "./types"
 import { findMatches, getQueryFromCursor } from "../utils"
 import { getTableCompletions } from "./getTableCompletions"
@@ -16,11 +16,11 @@ const isInColumnListing = (text: string) =>
   )
 
 export const createSchemaCompletionProvider = (
-  editor: monaco.editor.IStandaloneCodeEditor,
+  editor: editor.IStandaloneCodeEditor,
   tables: Table[] = [],
   informationSchemaColumns: InformationSchemaColumn[] = [],
 ) => {
-  const completionProvider: monaco.languages.CompletionItemProvider = {
+  const completionProvider: languages.CompletionItemProvider = {
     triggerCharacters:
       'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz\n ."'.split(""),
     provideCompletionItems(model, position) {

packages/web-console/src/scenes/Editor/Monaco/questdb-sql/formatting.ts

@@ -1,11 +1,10 @@
-import { IRange } from "monaco-editor"
-import * as monaco from "monaco-editor"
+import type { IRange, editor, languages } from "monaco-editor"
 import { formatSql } from "../../../../utils"
 
 export const documentFormattingEditProvider = {
   provideDocumentFormattingEdits(
-    model: monaco.editor.IModel,
-    options: monaco.languages.FormattingOptions,
+    model: editor.IModel,
+    options: languages.FormattingOptions,
   ) {
     const formatted = formatSql(model.getValue(), {
       indent: " ".repeat(options.tabSize),
@@ -21,9 +20,9 @@ export const documentFormattingEditProvider = {
 
 export const documentRangeFormattingEditProvider = {
   provideDocumentRangeFormattingEdits(
-    model: monaco.editor.IModel,
+    model: editor.IModel,
     range: IRange,
-    options: monaco.languages.FormattingOptions,
+    options: languages.FormattingOptions,
   ) {
     const formatted = formatSql(model.getValueInRange(range), {
       indent: " ".repeat(options.tabSize),

packages/web-console/src/scenes/Editor/Monaco/questdb-sql/language.ts

@@ -1,8 +1,8 @@
 import { operators } from "./operators"
-import * as monaco from "monaco-editor"
+import type { languages } from "monaco-editor"
 import { dataTypes, functions, keywords } from "@questdb/sql-grammar"
 
-export const language: monaco.languages.IMonarchLanguage = {
+export const language: languages.IMonarchLanguage = {
   defaultToken: "",
   tokenPostfix: ".sql",
   ignoreCase: true,

packages/web-console/src/scenes/Search/SearchPanel.tsx

@@ -7,6 +7,7 @@ import { bufferStore } from '../../store/buffers'
 import { SearchResults } from './SearchResults'
 import { eventBus } from '../../modules/EventBus'
 import { EventType } from '../../modules/EventBus/types'
+import { useEditor } from '../../providers/EditorProvider'
 
 const Wrapper = styled(PaneWrapper)<{
   $open?: boolean
@@ -118,6 +119,7 @@ export interface SearchPanelRef {
 }
 
 export const SearchPanel = React.forwardRef<SearchPanelRef, SearchPanelProps>(({ open }, ref) => {
+  const { monacoRef } = useEditor()
   const inputRef = useRef<HTMLInputElement>(null)
   const [searchQuery, setSearchQuery] = useState('')
   const [searchOptions, setSearchOptions] = useState<SearchOptions>({
@@ -136,7 +138,7 @@ export const SearchPanel = React.forwardRef<SearchPanelRef, SearchPanelProps>(({
       return
     }
 
-    const result = SearchService.searchInBuffers(allBuffers, searchQuery, searchOptions)
+    const result = SearchService.searchInBuffers(allBuffers, searchQuery, searchOptions, monacoRef.current)
     setSearchResult(result)
   }, [searchQuery, searchOptions])
 

packages/web-console/src/services/search.ts

@@ -1,10 +1,11 @@
-import * as monaco from 'monaco-editor'
+import type { IRange } from 'monaco-editor'
+import type { Monaco } from '@monaco-editor/react'
 import { QuestDBLanguageName } from '../scenes/Editor/Monaco/utils'
 
 export interface SearchMatch {
   bufferId: number
   bufferLabel: string
-  range: monaco.IRange
+  range: IRange
   text: string
   previewText: string
   isArchived?: boolean
@@ -29,7 +30,8 @@ export class SearchService {
   static searchInBuffers(
     buffers: Array<{ id?: number; label: string; value: string; archived?: boolean; archivedAt?: number; isTemporary?: boolean }>,
     query: string,
-    options: SearchOptions = {}
+    options: SearchOptions = {},
+    monaco: Monaco | null
   ): SearchResult {
     const {
       caseSensitive = false,
@@ -63,7 +65,8 @@ export class SearchService {
         buffer as { id: number; label: string; value: string; archived?: boolean; archivedAt?: number },
         query,
         { caseSensitive, wholeWord, useRegex },
-        remainingCapacity
+        monaco,
+        remainingCapacity,
       )
 
       matches = [...matches, ...bufferMatches]
@@ -85,11 +88,13 @@ export class SearchService {
     buffer: { id: number; label: string; value: string; archived?: boolean; archivedAt?: number },
     query: string,
     options: Pick<SearchOptions, 'caseSensitive' | 'wholeWord' | 'useRegex'>,
-    limit?: number
+    monaco: Monaco | null,
+    limit?: number,
   ): SearchMatch[] {
     const { caseSensitive, wholeWord, useRegex } = options
+    if (!monaco) return []
 
-    const model = monaco.editor.createModel(buffer.value, QuestDBLanguageName)
+    const model = monaco?.editor.createModel(buffer.value, QuestDBLanguageName)
 
     try {
       let searchString = query