refactor Monaco file

extract editor actions to dedicated file
refactor types

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

@@ -22,8 +22,8 @@ import { useLiveQuery } from "dexie-react-hooks"
 type IStandaloneCodeEditor = editor.IStandaloneCodeEditor
 
 type ContextProps = {
-  editorRef: MutableRefObject<IStandaloneCodeEditor | null> | null
-  monacoRef: MutableRefObject<Monaco | null> | null
+  editorRef: MutableRefObject<IStandaloneCodeEditor | null>
+  monacoRef: MutableRefObject<Monaco | null>
   insertTextAtCursor: (text: string) => void
   appendQuery: (query: string) => void
   buffers: Buffer[]
@@ -35,8 +35,8 @@ type ContextProps = {
 }
 
 const defaultValues = {
-  editorRef: null,
-  monacoRef: null,
+  editorRef: { current: null },
+  monacoRef: { current: null },
   insertTextAtCursor: () => undefined,
   appendQuery: () => undefined,
   buffers: [],
@@ -50,8 +50,8 @@ const defaultValues = {
 const EditorContext = createContext<ContextProps>(defaultValues)
 
 export const EditorProvider = ({ children }: PropsWithChildren<{}>) => {
-  const editorRef = useRef<IStandaloneCodeEditor | null>(null)
-  const monacoRef = useRef<Monaco | null>(null)
+  const editorRef = useRef<IStandaloneCodeEditor>(null)
+  const monacoRef = useRef<Monaco>(null)
   const buffers = useLiveQuery(() => db.buffers.toArray(), [])
   const activeBufferId = useLiveQuery(() => bufferStore.getActiveId(), [], {
     value: fallbackBuffer.id,
@@ -111,6 +111,7 @@ export const EditorProvider = ({ children }: PropsWithChildren<{}>) => {
     await setActiveBuffer(nextActive ?? fallbackBuffer)
   }
 
+  // buffers are available after `useLiveQuery` resolves
   if (!buffers) {
     return null
   }

packages/web-console/src/scenes/Editor/Monaco/editor-actions.ts

@@ -0,0 +1,77 @@
+/*******************************************************************************
+ *     ___                  _   ____  ____
+ *    / _ \ _   _  ___  ___| |_|  _ \| __ )
+ *   | | | | | | |/ _ \/ __| __| | | |  _ \
+ *   | |_| | |_| |  __/\__ \ |_| |_| | |_) |
+ *    \__\_\\__,_|\___||___/\__|____/|____/
+ *
+ *  Copyright (c) 2014-2019 Appsicle
+ *  Copyright (c) 2019-2022 QuestDB
+ *
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ *
+ ******************************************************************************/
+
+import { editor } from "monaco-editor"
+import type { Monaco } from "@monaco-editor/react"
+import { BusEvent } from "../../../consts"
+import { actions } from "../../../store"
+import { Dispatch } from "redux"
+
+enum Command {
+  EXECUTE = "execute",
+  FOCUS_GRID = "focus_grid",
+  CLEANUP_NOTIFICATIONS = "clean_notifications",
+}
+
+export const registerEditorActions = ({
+  editor,
+  monaco,
+  toggleRunning,
+  dispatch,
+}: {
+  editor: editor.IStandaloneCodeEditor
+  monaco: Monaco
+  toggleRunning: (isRefresh?: boolean) => void
+  dispatch: Dispatch
+}) => {
+  editor.addAction({
+    id: Command.FOCUS_GRID,
+    label: "Focus Grid",
+    keybindings: [monaco.KeyCode.F2],
+    run: () => {
+      window.bus.trigger(BusEvent.GRID_FOCUS)
+    },
+  })
+
+  editor.addAction({
+    id: Command.EXECUTE,
+    label: "Execute command",
+    keybindings: [
+      monaco.KeyCode.F9,
+      monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter,
+    ],
+    run: () => {
+      toggleRunning()
+    },
+  })
+
+  editor.addAction({
+    id: Command.CLEANUP_NOTIFICATIONS,
+    label: "Clear all notifications",
+    keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyK],
+    run: () => {
+      dispatch(actions.query.cleanupNotifications())
+    },
+  })
+}

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

@@ -38,6 +38,7 @@ import {
 } from "./questdb-sql"
 import { color } from "../../../utils"
 import { EditorTabs } from "./editor-tabs"
+import { registerEditorActions } from "./editor-actions"
 
 loader.config({
   paths: {
@@ -95,12 +96,6 @@ const Content = styled(PaneContent)`
   }
 `
 
-enum Command {
-  EXECUTE = "execute",
-  FOCUS_GRID = "focus_grid",
-  CLEANUP_NOTIFICATIONS = "clean_notifications",
-}
-
 const MonacoEditor = () => {
   const {
     editorRef,
@@ -251,91 +246,54 @@ const MonacoEditor = () => {
     editor: IStandaloneCodeEditor,
     monaco: Monaco,
   ) => {
+    monacoRef.current = monaco
+    editorRef.current = editor
     monaco.editor.setTheme("dracula")
+    setEditorReady(true)
 
-    if (monacoRef) {
-      monacoRef.current = monaco
-      setEditorReady(true)
-    }
+    // Support legacy bus events for non-react codebase
+    window.bus.on(BusEvent.MSG_EDITOR_INSERT_COLUMN, (_event, column) => {
+      insertTextAtCursor(column)
+    })
 
-    if (editorRef) {
-      editorRef.current = editor
-
-      // Support legacy bus events for non-react codebase
-      window.bus.on(BusEvent.MSG_EDITOR_INSERT_COLUMN, (_event, column) => {
-        insertTextAtCursor(column)
-      })
-
-      window.bus.on(BusEvent.MSG_QUERY_FIND_N_EXEC, (_event, query: string) => {
-        const text = `${query};`
-        appendQuery(editor, text)
-        toggleRunning()
-      })
-
-      window.bus.on(BusEvent.MSG_QUERY_EXEC, (_event, query: { q: string }) => {
-        const matches = editor
-          .getModel()
-          ?.findMatches(query.q, true, false, true, null, true)
-        if (matches) {
-          // TODO: Display a query marker on correct line
+    window.bus.on(BusEvent.MSG_QUERY_FIND_N_EXEC, (_event, query: string) => {
+      const text = `${query};`
+      appendQuery(editor, text)
+      toggleRunning()
+    })
+
+    window.bus.on(BusEvent.MSG_QUERY_EXEC, (_event, query: { q: string }) => {
+      const matches = editor
+        .getModel()
+        ?.findMatches(query.q, true, false, true, null, true)
+      if (matches) {
+        // TODO: Display a query marker on correct line
+      }
+      toggleRunning(true)
+    })
+
+    window.bus.on(
+      BusEvent.MSG_QUERY_EXPORT,
+      (_event, request?: { q: string }) => {
+        if (request) {
+          window.location.href = `/exp?query=${encodeURIComponent(request.q)}`
         }
-        toggleRunning(true)
-      })
-
-      window.bus.on(
-        BusEvent.MSG_QUERY_EXPORT,
-        (_event, request?: { q: string }) => {
-          if (request) {
-            window.location.href = `/exp?query=${encodeURIComponent(request.q)}`
-          }
-        },
-      )
+      },
+    )
 
-      window.bus.on(BusEvent.MSG_EDITOR_FOCUS, () => {
-        const position = editor.getPosition()
-        if (position) {
-          editor.setPosition({
-            lineNumber: position.lineNumber + 1,
-            column: position?.column,
-          })
-        }
-        editor.focus()
-      })
-
-      editor.addAction({
-        id: Command.FOCUS_GRID,
-        label: "Focus Grid",
-        keybindings: [monaco.KeyCode.F2],
-        run: () => {
-          window.bus.trigger(BusEvent.GRID_FOCUS)
-        },
-      })
-
-      editor.addAction({
-        id: Command.EXECUTE,
-        label: "Execute command",
-        keybindings: [
-          monaco.KeyCode.F9,
-          monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter,
-        ],
-        run: () => {
-          toggleRunning()
-        },
-      })
-
-      editor.addAction({
-        id: Command.CLEANUP_NOTIFICATIONS,
-        label: "Clear all notifications",
-        keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyK],
-        run: () => {
-          dispatch(actions.query.cleanupNotifications())
-        },
-      })
-
-      editor.onDidChangeCursorPosition(() => {
-        renderLineMarkings(monaco, editor)
-      })
-    }
+    window.bus.on(BusEvent.MSG_EDITOR_FOCUS, () => {
+      const position = editor.getPosition()
+      if (position) {
+        editor.setPosition({
+          lineNumber: position.lineNumber + 1,
+          column: position?.column,
+        })
+      }
+      editor.focus()
+    })
+
+    registerEditorActions({ editor, monaco, toggleRunning, dispatch })
+    editor.onDidChangeCursorPosition(() => renderLineMarkings(monaco, editor))
 
     loadPreferences(editor)
 
@@ -355,8 +313,7 @@ const MonacoEditor = () => {
       }
     }
 
-    const executeQuery = params.get("executeQuery")
-    if (executeQuery) {
+    if (params.get("executeQuery")) {
       toggleRunning()
     }
   }