[web] Add editor commands to command registry and toolbar (#24538)

* [web] Add editor commands to command registry and toolbar

* [web] Omit empty groups

* [web] Editor redesign: Move toolbar commands to custom hook

* [web] Disable editor commands when editor is not visible

GitOrigin-RevId: be9f4060fc44e51223e16860fdcf6698c927998c

services/web/frontend/js/features/source-editor/components/codemirror-editor.tsx

@@ -19,6 +19,7 @@ import {
 import MathPreviewTooltip from './math-preview-tooltip'
 import Breadcrumbs from '@/features/ide-redesign/components/breadcrumbs'
 import { useIsNewEditorEnabled } from '@/features/ide-redesign/utils/new-editor-utils'
+import { useToolbarMenuBarEditorCommands } from '@/features/ide-redesign/hooks/use-toolbar-menu-editor-commands'
 
 // TODO: remove this when definitely no longer used
 export * from './codemirror-context'
@@ -39,8 +40,6 @@ function CodeMirrorEditor() {
 
   const isMounted = useIsMounted()
 
-  const newEditor = useIsNewEditorEnabled()
-
   // create the view using the initial state and intercept transactions
   const viewRef = useRef<EditorView | null>(null)
   if (viewRef.current === null) {
@@ -62,33 +61,42 @@ function CodeMirrorEditor() {
   return (
     <CodeMirrorStateContext.Provider value={state}>
       <CodeMirrorViewContext.Provider value={viewRef.current}>
-        <ReviewPanelProviders>
-          <CodemirrorOutline />
-          <CodeMirrorView />
-          <FigureModal />
-          <CodeMirrorSearch />
-          <CodeMirrorToolbar />
-          {sourceEditorToolbarComponents.map(
-            ({ import: { default: Component }, path }) => (
-              <Component key={path} />
-            )
-          )}
-          {newEditor && <Breadcrumbs />}
-          <CodeMirrorCommandTooltip />
-
-          <MathPreviewTooltip />
-          <ReviewTooltipMenu />
-          <ReviewPanelNew />
-
-          {sourceEditorComponents.map(
-            ({ import: { default: Component }, path }) => (
-              <Component key={path} />
-            )
-          )}
-        </ReviewPanelProviders>
+        <CodeMirrorEditorComponents />
       </CodeMirrorViewContext.Provider>
     </CodeMirrorStateContext.Provider>
   )
 }
 
+function CodeMirrorEditorComponents() {
+  const newEditor = useIsNewEditorEnabled()
+  useToolbarMenuBarEditorCommands()
+
+  return (
+    <ReviewPanelProviders>
+      <CodemirrorOutline />
+      <CodeMirrorView />
+      <FigureModal />
+      <CodeMirrorSearch />
+      <CodeMirrorToolbar />
+      {sourceEditorToolbarComponents.map(
+        ({ import: { default: Component }, path }) => (
+          <Component key={path} />
+        )
+      )}
+      {newEditor && <Breadcrumbs />}
+      <CodeMirrorCommandTooltip />
+
+      <MathPreviewTooltip />
+      <ReviewTooltipMenu />
+      <ReviewPanelNew />
+
+      {sourceEditorComponents.map(
+        ({ import: { default: Component }, path }) => (
+          <Component key={path} />
+        )
+      )}
+    </ReviewPanelProviders>
+  )
+}
+
 export default memo(CodeMirrorEditor)