github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-21 20:47:08 -05:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source 
* [cm6] Add toolbar event for figure modal trigger

* [cm6] Add event to figure modal edit button

GitOrigin-RevId: 04add4f801647dfcc38a54e1969b03c4a31b2462
This commit is contained in:
Mathias Jakobsen 2023-05-31 09:05:28 +01:00 committed by Copybot
parent 174761850b
commit a4c684e266
2 changed files with 26 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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

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

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