mirror of
https://github.com/overleaf/overleaf.git
synced 2024-10-24 21:12:38 -04:00
b1d1432183
* Update add comment tooltip to match new designs * Rename AddCommentTooltip to ReviewTooltipMenu * Split off add-comment-button specific padding GitOrigin-RevId: 12a69b13b52b007eb97ba7ad6f290e3a98d741cd
81 lines
2.2 KiB
TypeScript
81 lines
2.2 KiB
TypeScript
import { Dispatch, FC, SetStateAction, useEffect, useState } from 'react'
|
|
import ReactDOM from 'react-dom'
|
|
import MaterialIcon from '@/shared/components/material-icon'
|
|
import { useTranslation } from 'react-i18next'
|
|
import {
|
|
useCodeMirrorStateContext,
|
|
useCodeMirrorViewContext,
|
|
} from '@/features/source-editor/components/codemirror-context'
|
|
import {
|
|
addCommentStateField,
|
|
buildAddNewCommentRangeEffect,
|
|
} from '@/features/source-editor/extensions/add-comment'
|
|
import { getTooltip } from '@codemirror/view'
|
|
import useViewerPermissions from '@/shared/hooks/use-viewer-permissions'
|
|
import usePreviousValue from '@/shared/hooks/use-previous-value'
|
|
|
|
const ReviewTooltipMenu: FC = () => {
|
|
const state = useCodeMirrorStateContext()
|
|
const view = useCodeMirrorViewContext()
|
|
const isViewer = useViewerPermissions()
|
|
const [show, setShow] = useState(true)
|
|
|
|
const tooltipState = state.field(addCommentStateField, false)?.tooltip
|
|
const previousTooltipState = usePreviousValue(tooltipState)
|
|
|
|
useEffect(() => {
|
|
if (tooltipState !== null && previousTooltipState === null) {
|
|
setShow(true)
|
|
}
|
|
}, [tooltipState, previousTooltipState])
|
|
|
|
if (isViewer || !show || !tooltipState) {
|
|
return null
|
|
}
|
|
|
|
const tooltipView = getTooltip(view, tooltipState)
|
|
|
|
if (!tooltipView) {
|
|
return null
|
|
}
|
|
|
|
return ReactDOM.createPortal(
|
|
<ReviewTooltipMenuContent setShow={setShow} />,
|
|
tooltipView.dom
|
|
)
|
|
}
|
|
|
|
const ReviewTooltipMenuContent: FC<{
|
|
setShow: Dispatch<SetStateAction<boolean>>
|
|
}> = ({ setShow }) => {
|
|
const { t } = useTranslation()
|
|
const view = useCodeMirrorViewContext()
|
|
const state = useCodeMirrorStateContext()
|
|
|
|
const handleClick = () => {
|
|
window.dispatchEvent(
|
|
new CustomEvent<{ isOpen: boolean }>('set-review-panel-open', {
|
|
detail: { isOpen: true },
|
|
})
|
|
)
|
|
|
|
view.dispatch({
|
|
effects: buildAddNewCommentRangeEffect(state.selection.main),
|
|
})
|
|
setShow(false)
|
|
}
|
|
|
|
return (
|
|
<div className="review-tooltip-menu">
|
|
<button
|
|
className="review-tooltip-menu-button review-tooltip-add-comment-button"
|
|
onClick={handleClick}
|
|
>
|
|
<MaterialIcon type="chat" />
|
|
{t('add_comment')}
|
|
</button>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default ReviewTooltipMenu
|