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

GitOrigin-RevId: fa8c4105ace55d73447b3afc60772f275728994c
This commit is contained in:
Domagoj Kriskovic 2023-06-07 10:14:36 +02:00 committed by Copybot
parent e0980d652d
commit b70d5faca5
2 changed files with 18 additions and 3 deletions

View file

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

View file

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