From b70d5faca56a522f2f8bc1b692a0030bb7eb24b7 Mon Sep 17 00:00:00 2001
From: Domagoj Kriskovic <dom.kriskovic@overleaf.com>
Date: Wed, 7 Jun 2023 10:14:36 +0200
Subject: [PATCH] [cm6] alt+click to generate snippet for figure modal (#13279)

GitOrigin-RevId: fa8c4105ace55d73447b3afc60772f275728994c
---
 .../components/toolbar/button-menu.tsx        | 19 ++++++++++++++++---
 .../toolbar/insert-figure-dropdown.tsx        |  2 ++
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/services/web/frontend/js/features/source-editor/components/toolbar/button-menu.tsx b/services/web/frontend/js/features/source-editor/components/toolbar/button-menu.tsx
index 55990c6d6b..97cdc709ff 100644
--- a/services/web/frontend/js/features/source-editor/components/toolbar/button-menu.tsx
+++ b/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={() => {
-        onToggle(!open)
+      onClick={event => {
+        if (event.altKey && altCommand && open === false) {
+          emitCommandEvent(view, id)
+          event.preventDefault()
+          altCommand(view)
+          view.focus()
+        } else {
+          onToggle(!open)
+        }
       }}
       ref={target}
     >
diff --git a/services/web/frontend/js/features/source-editor/components/toolbar/insert-figure-dropdown.tsx b/services/web/frontend/js/features/source-editor/components/toolbar/insert-figure-dropdown.tsx
index 809d971b33..c8d51f4bb0 100644
--- a/services/web/frontend/js/features/source-editor/components/toolbar/insert-figure-dropdown.tsx
+++ b/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={() =>