import { useProjectSettingsContext } from '@/features/editor-left-menu/context/project-settings-context' import { Dropdown, DropdownMenu, DropdownToggle, } from '@/features/ui/components/bootstrap-5/dropdown-menu' import OLButton from '@/features/ui/components/ol/ol-button' import OLModal, { OLModalBody, OLModalFooter, OLModalHeader, OLModalTitle, } from '@/features/ui/components/ol/ol-modal' import MaterialIcon from '@/shared/components/material-icon' import useEventListener from '@/shared/hooks/use-event-listener' import { FC, useCallback, useEffect, useRef, useState } from 'react' import { Trans, useTranslation } from 'react-i18next' import { useCodeMirrorStateContext, useCodeMirrorViewContext, } from './codemirror-context' import { mathPreviewStateField } from '../extensions/math-preview' import { getTooltip } from '@codemirror/view' import ReactDOM from 'react-dom' import OLDropdownMenuItem from '@/features/ui/components/ol/ol-dropdown-menu-item' import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher' import ControlledDropdown from '@/shared/components/controlled-dropdown' import { Dropdown as BS3Dropdown, MenuItem as BS3MenuItem, } from 'react-bootstrap' import { useSplitTestContext } from '@/shared/context/split-test-context' const MathPreviewTooltipContainer: FC = () => { const state = useCodeMirrorStateContext() const view = useCodeMirrorViewContext() const mathPreviewState = state.field(mathPreviewStateField, false) if (!mathPreviewState) { return null } const { tooltip, mathContent } = mathPreviewState if (!tooltip || !mathContent) { return null } const tooltipView = getTooltip(view, tooltip) if (!tooltipView) { return null } return ReactDOM.createPortal( , tooltipView.dom ) } const MathPreviewTooltip: FC<{ mathContent: HTMLDivElement }> = ({ mathContent, }) => { const { t } = useTranslation() const [showDisableModal, setShowDisableModal] = useState(false) const { setMathPreview } = useProjectSettingsContext() const openDisableModal = useCallback(() => setShowDisableModal(true), []) const closeDisableModal = useCallback(() => setShowDisableModal(false), []) const onHide = useCallback(() => { window.dispatchEvent(new Event('editor:hideMathTooltip')) }, []) const mathRef = useRef(null) const keyDownListener = useCallback( (event: KeyboardEvent) => { if (event.key === 'Escape') { onHide() } }, [onHide] ) useEventListener('keydown', keyDownListener) useEffect(() => { if (mathRef.current) { mathRef.current.replaceChildren(mathContent) } }, [mathContent]) return ( <> Esc } > {t('hide')} {t('disable')} } bs3={ {t('hide')} {t('temporarily_hides_the_preview')} Esc {t('disable')} {t('permanently_disables_the_preview')} } /> {showDisableModal && ( {t('disable_equation_preview')} {t('disable_equation_preview_confirm')} }} /> {t('cancel')} setMathPreview(false)}> {t('disable')} )} > ) } // Temporary SplitTest badge for just this component that always shows // as in beta and doesn't have a tooltip const CustomSplitTestBadge: FC = () => { const { splitTestVariants } = useSplitTestContext() const variant = splitTestVariants['math-preview'] if (!variant || variant !== 'enabled') { return null } return ( } bs5={} /> ) } export default MathPreviewTooltipContainer