[cm6] alt+click to generate snippet for figure modal (#13279)

GitOrigin-RevId: fa8c4105ace55d73447b3afc60772f275728994c

services/web/frontend/js/features/source-editor/components/toolbar/button-menu.tsx

@@ -3,14 +3,20 @@ import { Button, ListGroup, Overlay, Popover } from 'react-bootstrap'
 import Icon from '../../../../shared/components/icon'
 import useDropdown from '../../../../shared/hooks/use-dropdown'
 import Tooltip from '../../../../shared/components/tooltip'
+import { EditorView } from '@codemirror/view'
+import { emitCommandEvent } from '../../extensions/toolbar/utils/analytics'
+import { useCodeMirrorViewContext } from '../codemirror-editor'
 
 export const ToolbarButtonMenu: FC<{
   id: string
   label: string
   icon: string
-}> = memo(function ButtonMenu({ icon, id, label, children }) {
+  altCommand?: (view: EditorView) => void
+}> = memo(function ButtonMenu({ icon, id, label, altCommand, children }) {
   const target = useRef<any>(null)
   const { open, onToggle, ref } = useDropdown()
+  const view = useCodeMirrorViewContext()
+
   const button = (
     <Button
       type="button"
@@ -21,8 +27,15 @@ export const ToolbarButtonMenu: FC<{
         event.preventDefault()
         event.stopPropagation()
       }}
-      onClick={() => {
+      onClick={event => {
+        if (event.altKey && altCommand && open === false) {
+          emitCommandEvent(view, id)
+          event.preventDefault()
+          altCommand(view)
+          view.focus()
+        } else {
           onToggle(!open)
+        }
       }}
       ref={target}
     >

services/web/frontend/js/features/source-editor/components/toolbar/insert-figure-dropdown.tsx

@@ -6,6 +6,7 @@ import { FigureModalSource } from '../figure-modal/figure-modal-context'
 import { useTranslation } from 'react-i18next'
 import { emitCommandEvent } from '../../extensions/toolbar/utils/analytics'
 import { useCodeMirrorViewContext } from '../codemirror-editor'
+import { insertFigure } from '../../extensions/toolbar/commands'
 
 export const InsertFigureDropdown = () => {
   const { t } = useTranslation()
@@ -26,6 +27,7 @@ export const InsertFigureDropdown = () => {
       id="toolbar-figure"
       label={t('toolbar_insert_figure')}
       icon="picture-o"
+      altCommand={insertFigure}
     >
       <ListGroupItem
         onClick={() =>