[cm6] Add toolbar event for figure modal trigger (#13168)

* [cm6] Add toolbar event for figure modal trigger

* [cm6] Add event to figure modal edit button

GitOrigin-RevId: 04add4f801647dfcc38a54e1969b03c4a31b2462

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

@@ -4,16 +4,23 @@ import Icon from '../../../../shared/components/icon'
 import { useCallback } from 'react'
 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'
 
 export const InsertFigureDropdown = () => {
   const { t } = useTranslation()
-  const openFigureModal = useCallback((source: FigureModalSource) => {
-    window.dispatchEvent(
-      new CustomEvent('figure-modal:open', {
-        detail: source,
-      })
-    )
-  }, [])
+  const view = useCodeMirrorViewContext()
+  const openFigureModal = useCallback(
+    (source: FigureModalSource, sourceName: string) => {
+      emitCommandEvent(view, `toolbar-figure-modal-${sourceName}`)
+      window.dispatchEvent(
+        new CustomEvent('figure-modal:open', {
+          detail: source,
+        })
+      )
+    },
+    [view]
+  )
   return (
     <ToolbarButtonMenu
       id="toolbar-figure"
@@ -21,22 +28,28 @@ export const InsertFigureDropdown = () => {
       icon="picture-o"
     >
       <ListGroupItem
-        onClick={() => openFigureModal(FigureModalSource.FILE_UPLOAD)}
+        onClick={() =>
+          openFigureModal(FigureModalSource.FILE_UPLOAD, 'file-upload')
+        }
       >
         <Icon type="upload" fw /> Upload from computer
       </ListGroupItem>
       <ListGroupItem
-        onClick={() => openFigureModal(FigureModalSource.FILE_TREE)}
+        onClick={() =>
+          openFigureModal(FigureModalSource.FILE_TREE, 'current-project')
+        }
       >
         <Icon type="archive" fw /> From project files
       </ListGroupItem>
       <ListGroupItem
-        onClick={() => openFigureModal(FigureModalSource.OTHER_PROJECT)}
+        onClick={() =>
+          openFigureModal(FigureModalSource.OTHER_PROJECT, 'other-project')
+        }
       >
         <Icon type="folder-open" fw /> From another project
       </ListGroupItem>
       <ListGroupItem
-        onClick={() => openFigureModal(FigureModalSource.FROM_URL)}
+        onClick={() => openFigureModal(FigureModalSource.FROM_URL, 'from-url')}
       >
         <Icon type="globe" fw /> From URL
       </ListGroupItem>

services/web/frontend/js/features/source-editor/extensions/visual/visual-widgets/editable-graphics.ts

@@ -1,6 +1,7 @@
 import { EditorView } from '@codemirror/view'
 import { GraphicsWidget } from './graphics'
 import { editFigureDataEffect } from '../../figure-modal'
+import { emitCommandEvent } from '../../toolbar/utils/analytics'
 
 export class EditableGraphicsWidget extends GraphicsWidget {
   setEditDispatcher(button: HTMLButtonElement, view: EditorView) {
@@ -11,6 +12,7 @@ export class EditableGraphicsWidget extends GraphicsWidget {
         event.stopImmediatePropagation()
         view.dispatch({ effects: editFigureDataEffect.of(this.figureData) })
         window.dispatchEvent(new CustomEvent('figure-modal:open-modal'))
+        emitCommandEvent(view, 'toolbar-figure-modal-edit')
         return false
       }
     } else {