diff --git a/services/web/frontend/js/features/source-editor/components/codemirror-toolbar.tsx b/services/web/frontend/js/features/source-editor/components/codemirror-toolbar.tsx index 8fe6123e5c..23b4ff1e26 100644 --- a/services/web/frontend/js/features/source-editor/components/codemirror-toolbar.tsx +++ b/services/web/frontend/js/features/source-editor/components/codemirror-toolbar.tsx @@ -21,6 +21,7 @@ import getMeta from '../../../utils/meta' import { isVisual } from '../extensions/visual/visual' import SplitTestBadge from '../../../shared/components/split-test-badge' import { language } from '@codemirror/language' +import { minimumListDepthForSelection } from '../utils/tree-operations/ancestors' export const CodeMirrorToolbar = () => { const view = useCodeMirrorViewContext() @@ -48,6 +49,8 @@ const Toolbar = memo(function Toolbar() { const languageName = state.facet(language)?.name const visual = isVisual(view) + const listDepth = minimumListDepthForSelection(state) + const { open: overflowOpen, onToggle: setOverflowOpen, @@ -108,7 +111,12 @@ const Toolbar = memo(function Toolbar() { return (
{showSourceToolbar && } - +
diff --git a/services/web/frontend/js/features/source-editor/components/toolbar/button-menu.tsx b/services/web/frontend/js/features/source-editor/components/toolbar/button-menu.tsx index d3adeae023..48f23fe245 100644 --- a/services/web/frontend/js/features/source-editor/components/toolbar/button-menu.tsx +++ b/services/web/frontend/js/features/source-editor/components/toolbar/button-menu.tsx @@ -57,7 +57,7 @@ export const ToolbarButtonMenu: FC<{ show={open} target={target.current} placement="bottom" - container={document.querySelector('.cm-editor')} + container={view.dom} containerPadding={0} animation onHide={() => onToggle(false)} diff --git a/services/web/frontend/js/features/source-editor/components/toolbar/insert-figure-dropdown.tsx b/services/web/frontend/js/features/source-editor/components/toolbar/insert-figure-dropdown.tsx index bfd724a0fc..7915b159d0 100644 --- a/services/web/frontend/js/features/source-editor/components/toolbar/insert-figure-dropdown.tsx +++ b/services/web/frontend/js/features/source-editor/components/toolbar/insert-figure-dropdown.tsx @@ -1,14 +1,14 @@ import { ListGroupItem } from 'react-bootstrap' import { ToolbarButtonMenu } from './button-menu' import Icon from '../../../../shared/components/icon' -import { useCallback } from 'react' +import { memo, useCallback } from 'react' import { FigureModalSource } from '../figure-modal/figure-modal-context' import { useTranslation } from 'react-i18next' import { emitToolbarEvent } from '../../extensions/toolbar/utils/analytics' import { useCodeMirrorViewContext } from '../codemirror-editor' import { insertFigure } from '../../extensions/toolbar/commands' -export const InsertFigureDropdown = () => { +export const InsertFigureDropdown = memo(function InsertFigureDropdown() { const { t } = useTranslation() const view = useCodeMirrorViewContext() const openFigureModal = useCallback( @@ -57,4 +57,4 @@ export const InsertFigureDropdown = () => { ) -} +}) diff --git a/services/web/frontend/js/features/source-editor/components/toolbar/math-dropdown.tsx b/services/web/frontend/js/features/source-editor/components/toolbar/math-dropdown.tsx index ea0c35d5b0..cb5531a50f 100644 --- a/services/web/frontend/js/features/source-editor/components/toolbar/math-dropdown.tsx +++ b/services/web/frontend/js/features/source-editor/components/toolbar/math-dropdown.tsx @@ -8,8 +8,9 @@ import { wrapInDisplayMath, wrapInInlineMath, } from '../../extensions/toolbar/commands' +import { memo } from 'react' -export function MathDropdown() { +export const MathDropdown = memo(function MathDropdown() { const { t } = useTranslation() const view = useCodeMirrorViewContext() @@ -46,4 +47,4 @@ export function MathDropdown() { ) -} +}) diff --git a/services/web/frontend/js/features/source-editor/components/toolbar/overflow.tsx b/services/web/frontend/js/features/source-editor/components/toolbar/overflow.tsx index 91f8deac9a..333b928f1d 100644 --- a/services/web/frontend/js/features/source-editor/components/toolbar/overflow.tsx +++ b/services/web/frontend/js/features/source-editor/components/toolbar/overflow.tsx @@ -1,7 +1,8 @@ -import { FC, LegacyRef, memo } from 'react' +import { FC, LegacyRef } from 'react' import { Button, Overlay, Popover } from 'react-bootstrap' import classnames from 'classnames' import Icon from '../../../../shared/components/icon' +import { useCodeMirrorViewContext } from '../codemirror-editor' export const ToolbarOverflow: FC<{ overflowed: boolean @@ -9,14 +10,16 @@ export const ToolbarOverflow: FC<{ overflowOpen: boolean setOverflowOpen: (open: boolean) => void overflowRef?: LegacyRef -}> = memo(function ToolbarOverflow({ +}> = ({ overflowed, target, overflowOpen, setOverflowOpen, overflowRef, children, -}) { +}) => { + const view = useCodeMirrorViewContext() + const className = classnames( 'ol-cm-toolbar-button', 'ol-cm-toolbar-overflow-toggle', @@ -48,7 +51,7 @@ export const ToolbarOverflow: FC<{ show={overflowOpen} target={target} placement="bottom" - container={document.querySelector('.cm-editor')} + container={view.dom} containerPadding={0} animation onHide={() => setOverflowOpen(false)} @@ -59,4 +62,4 @@ export const ToolbarOverflow: FC<{ ) -}) +} diff --git a/services/web/frontend/js/features/source-editor/components/toolbar/section-heading-dropdown.tsx b/services/web/frontend/js/features/source-editor/components/toolbar/section-heading-dropdown.tsx index 8bb07a79c6..0f5cfd396c 100644 --- a/services/web/frontend/js/features/source-editor/components/toolbar/section-heading-dropdown.tsx +++ b/services/web/frontend/js/features/source-editor/components/toolbar/section-heading-dropdown.tsx @@ -7,7 +7,7 @@ import { findCurrentSectionHeadingLevel, setSectionHeadingLevel, } from '../../extensions/toolbar/sections' -import { useCallback, useRef } from 'react' +import { useCallback, useMemo, useRef } from 'react' import { Overlay, Popover } from 'react-bootstrap' import useEventListener from '../../../../shared/hooks/use-event-listener' import useDropdown from '../../../../shared/hooks/use-dropdown' @@ -42,7 +42,11 @@ export const SectionHeadingDropdown = () => { const toggleButtonRef = useRef(null) - const currentLevel = findCurrentSectionHeadingLevel(state) + const currentLevel = useMemo( + () => findCurrentSectionHeadingLevel(state), + [state] + ) + const currentLabel = currentLevel ? levels.get(currentLevel.level) ?? currentLevel.level : '---' @@ -64,52 +68,54 @@ export const SectionHeadingDropdown = () => { - setOverflowOpen(false)} - animation={false} - container={document.querySelector('.cm-editor')} - containerPadding={0} - placement="bottom" - rootClose - target={toggleButtonRef.current ?? undefined} - > - setOverflowOpen(false)} + animation={false} + container={view.dom} + containerPadding={0} + placement="bottom" + rootClose + target={toggleButtonRef.current ?? undefined} > - - - + + + + )} ) } diff --git a/services/web/frontend/js/features/source-editor/components/toolbar/toolbar-items.tsx b/services/web/frontend/js/features/source-editor/components/toolbar/toolbar-items.tsx index c9eb5d164c..b914296671 100644 --- a/services/web/frontend/js/features/source-editor/components/toolbar/toolbar-items.tsx +++ b/services/web/frontend/js/features/source-editor/components/toolbar/toolbar-items.tsx @@ -4,10 +4,7 @@ import { EditorView } from '@codemirror/view' import { useEditorContext } from '../../../../shared/context/editor-context' import useScopeEventEmitter from '../../../../shared/hooks/use-scope-event-emitter' import { useLayoutContext } from '../../../../shared/context/layout-context' -import { - minimumListDepthForSelection, - withinFormattingCommand, -} from '../../utils/tree-operations/ancestors' +import { withinFormattingCommand } from '../../utils/tree-operations/ancestors' import { ToolbarButton } from './toolbar-button' import { redo, undo } from '@codemirror/commands' import * as commands from '../../extensions/toolbar/commands' @@ -25,11 +22,17 @@ export const ToolbarItems: FC<{ overflowed?: Set languageName?: string visual: boolean -}> = memo(function ToolbarItems({ state, overflowed, languageName, visual }) { + listDepth: number +}> = memo(function ToolbarItems({ + state, + overflowed, + languageName, + visual, + listDepth, +}) { const { t } = useTranslation() const { toggleSymbolPalette, showSymbolPalette } = useEditorContext() const isActive = withinFormattingCommand(state) - const listDepth = minimumListDepthForSelection(state) const addCommentEmitter = useScopeEventEmitter('comment:start_adding') const { setReviewPanelOpen } = useLayoutContext() const splitTestVariants = getMeta('ol-splitTestVariants', {})