agw/overleaf-cep
1
0
Fork 0
mirror of https://github.com/yu-i-i/overleaf-cep.git synced 2026-11-12 21:23:45 +01:00
Code Issues Packages Projects Releases Wiki Activity

[web] Add a focus mode to the editor (#32245)

Browse Source 
* Basic focus mode implementation

* Exit button

* Toggle between editor pdf mode

* Keep the rail and file tree mounted for editor tabs to work properly

* Hide Switch to editor button in focus mode

* Show shortcuts in layout menu

* Gate the feature behind a focus-mode feature flag

* Add split test badges in the focus mode dropdown item and top bar

* Add analytics tracking for focusMode changes

* Cleanup leftover IdeView value

* Allow passing focusMode value in layout test provider

* Remove redundant listener for focus mode shortcut

* Update focus mode and full project search listeners to use the event key

* Post-rebase cleanup

---------

Co-authored-by: Anna Fields <acfields11@gmail.com>
GitOrigin-RevId: 207f8d136fa6662558c474cca4a867a9842191e7
This commit is contained in:
Alexandre Bourdin
2026-06-08 08:06:05 +00:00
committed by Copybot
co-authored by Anna Fields
parent 757735b075
commit c8a3bdd13f
15 changed files with 223 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
services/web/frontend/js/features/ide-react/components/rail/rail-panel.tsx
+3 -1
View File
@@ -12,10 +12,12 @@ export default function RailPanel({
isReviewPanelOpen,
isHistoryView,
railTabs,
focusMode,
}: {
isReviewPanelOpen: boolean
isHistoryView: boolean
railTabs: RailElement[]
focusMode: boolean
}) {
const { selectedTab, panelRef, handlePaneExpand, handlePaneCollapse } =
useRailContext()
@@ -35,7 +37,7 @@ export default function RailPanel({
return (
<Panel
id={`ide-redesign-sidebar-panel-${isHistoryView ? 'file-tree' : selectedTab}`}
className={classNames({ hidden: isReviewPanelOpen })}
className={classNames({ hidden: isReviewPanelOpen || focusMode })}
order={1}
defaultSize={selectedTab === 'workbench' ? 20 : 15}
minSize={5}
services/web/frontend/js/features/ide-react/components/rail/rail-resize-handle.tsx
+3 -1
View File
@@ -6,15 +6,17 @@ import { useTranslation } from 'react-i18next'
export default function RailResizeHandle({
isReviewPanelOpen,
focusMode,
}: {
isReviewPanelOpen: boolean
focusMode: boolean
}) {
const { isOpen, setIsOpen, togglePane, setResizing } = useRailContext()
const { t } = useTranslation()
return (
<HorizontalResizeHandle
className={classNames({ hidden: isReviewPanelOpen })}
className={classNames({ hidden: isReviewPanelOpen || focusMode })}
resizable
hitAreaMargins={{ coarse: 0, fine: 0 }}
onDoubleClick={togglePane}
services/web/frontend/js/features/ide-react/components/rail/rail.tsx
+13 -8
View File
@@ -73,7 +73,7 @@ export const RailLayout = () => {
const gitBridgeEnabled = getMeta('ol-gitBridgeEnabled')
const { isOverleaf } = getMeta('ol-ExposedSettings')
const { view, setLeftMenuShown } = useLayoutContext()
const { view, setLeftMenuShown, focusMode } = useLayoutContext()
const { markMessagesAsRead } = useChatContext()
@@ -271,7 +271,9 @@ export const RailLayout = () => {
But it should be identified as a navigation landmark.
Therefore, we nest them: the parent <nav> is the landmark, and its child gets the "role="tablist"". */}
<nav
className={classNames('ide-rail', { hidden: isHistoryView })}
className={classNames('ide-rail', {
hidden: isHistoryView || focusMode,
})}
aria-label={t('sidebar')}
>
<Nav activeKey={selectedTab} className="ide-rail-tabs-nav">
@@ -306,17 +308,20 @@ export const RailLayout = () => {
</nav>
</Nav>
</nav>
{moduleRailPopovers
.filter(shouldIncludeElement)
.map(({ key, Component, ref }) => (
<Component key={key} ref={ref} />
))}
{!focusMode &&
moduleRailPopovers
.filter(shouldIncludeElement)
.map(({ key, Component, ref }) => <Component key={key} ref={ref} />)}
<RailPanel
isReviewPanelOpen={isReviewPanelOpen}
isHistoryView={isHistoryView}
railTabs={railTabs}
focusMode={focusMode}
/>
<RailResizeHandle
isReviewPanelOpen={isReviewPanelOpen}
focusMode={focusMode}
/>
<RailResizeHandle isReviewPanelOpen={isReviewPanelOpen} />
<RailModals />
</TabContainer>
)
services/web/frontend/js/features/ide-react/components/toolbar/change-layout-options.tsx
+40 -2
View File
@@ -1,6 +1,7 @@
import {
DropdownItem,
DropdownHeader,
DropdownDivider,
} from '@/shared/components/dropdown/dropdown-menu'
import {
IdeLayout,
@@ -14,8 +15,16 @@ import OLSpinner from '@/shared/components/ol/ol-spinner'
import { isMac } from '@/shared/utils/os'
import { Shortcut } from '@/shared/components/shortcut'
import classNames from 'classnames'
import { useEditorAnalytics } from '@/shared/hooks/use-editor-analytics'
import { useFeatureFlag } from '@/shared/context/split-test-context'
import SplitTestBadge from '@/shared/components/split-test-badge'
type LayoutOption = 'sideBySide' | 'editorOnly' | 'pdfOnly' | 'detachedPdf'
type LayoutOption =
| 'sideBySide'
| 'editorOnly'
| 'pdfOnly'
| 'detachedPdf'
| 'focusMode'
const getActiveLayoutOption = ({
pdfLayout,
@@ -45,7 +54,6 @@ const getActiveLayoutOption = ({
if (pdfLayout === 'sideBySide') {
return 'sideBySide'
}
return null
}
@@ -93,12 +101,14 @@ const shortcuts: Record<LayoutOption, string[] | null> = isMac
pdfOnly: ['⌃', '⌘', '→'],
sideBySide: ['⌃', '⌘', '↓'],
detachedPdf: ['⌃', '⌘', '↑'],
focusMode: ['⌘', '⇧', 'M'],
}
: {
editorOnly: null,
pdfOnly: null,
sideBySide: null,
detachedPdf: null,
focusMode: ['⌃', '⇧', 'M'],
}
export default function ChangeLayoutOptions() {
@@ -109,9 +119,13 @@ export default function ChangeLayoutOptions() {
pdfLayout,
handleChangeLayout,
handleDetach,
focusMode,
setFocusMode,
} = useLayoutContext()
const { t } = useTranslation()
const { sendEvent } = useEditorAnalytics()
const focusModeEnabled = useFeatureFlag('focus-mode')
const detachable = 'BroadcastChannel' in window
@@ -168,6 +182,30 @@ export default function ChangeLayoutOptions() {
>
{t('open_pdf_in_separate_tab')}
</LayoutDropdownItem>
{focusModeEnabled && (
<>
<DropdownDivider />
<LayoutDropdownItem
onClick={() => {
setFocusMode(!focusMode)
sendEvent('focus-mode-toggle', { focusMode: !focusMode })
}}
active={focusMode}
leadingIcon="self_improvement"
trailingIcon={
<span className="d-flex align-items-center gap-2">
<SplitTestBadge
splitTestName="focus-mode"
displayOnVariants={['enabled']}
/>
{shortcuts.focusMode && <Shortcut keys={shortcuts.focusMode} />}
</span>
}
>
{t('focus_mode')}
</LayoutDropdownItem>
</>
)}
</>
)
}
services/web/frontend/js/features/ide-react/components/toolbar/toolbar.tsx
+71 -1
View File
@@ -16,12 +16,16 @@ import UpgradeButton from './upgrade-button'
import getMeta from '@/utils/meta'
import { useIdeReactContext } from '@/features/ide-react/context/ide-react-context'
import { useFeatureFlag } from '@/shared/context/split-test-context'
import OLIconButton from '@/shared/components/ol/ol-icon-button'
import OLTooltip from '@/shared/components/ol/ol-tooltip'
import SplitTestBadge from '@/shared/components/split-test-badge'
const [publishModalModules] = importOverleafModules('publishModal')
const SubmitProjectButton = publishModalModules?.import.NewPublishToolbarButton
export const Toolbar = () => {
const { view, restoreView } = useLayoutContext()
const { view, restoreView, focusMode, setFocusMode, pdfLayout, setView } =
useLayoutContext()
const { cobranding, isRestrictedTokenMember } = useEditorContext()
const { permissionsLevel } = useIdeReactContext()
const showUpgradePrompt = getMeta('ol-showUpgradePrompt')
@@ -38,6 +42,72 @@ export const Toolbar = () => {
restoreView()
}, [restoreView])
const handleExitFocusMode = useCallback(() => {
setFocusMode(false)
eventTracking.sendMB('focus-mode-exit')
}, [setFocusMode])
const handleSwitchView = useCallback(() => {
const newView = view === 'pdf' ? 'editor' : 'pdf'
setView(newView)
eventTracking.sendMB('focus-mode-switch-view', { view: newView })
}, [view, setView])
if (focusMode) {
const showViewSwitcher = pdfLayout === 'flat'
const switchTooltip =
view === 'pdf' ? t('switch_to_editor') : t('switch_to_pdf')
const switchIcon = view === 'pdf' ? 'edit' : 'picture_as_pdf'
return (
<nav className="ide-redesign-toolbar" aria-label={t('project_actions')}>
<div className="ide-redesign-toolbar-menu">
<ToolbarLogos cobranding={cobranding} />
</div>
<ToolbarProjectTitle />
<div className="ide-redesign-toolbar-actions">
<div className="ide-redesign-toolbar-button-container">
<SplitTestBadge
splitTestName="focus-mode"
displayOnVariants={['enabled']}
/>
</div>
{showViewSwitcher && (
<div className="ide-redesign-toolbar-button-container">
<OLTooltip
id="tooltip-switch-view"
description={switchTooltip}
overlayProps={{ delay: 0, placement: 'bottom' }}
>
<OLIconButton
icon={switchIcon}
className="ide-redesign-toolbar-button-subdued ide-redesign-toolbar-button-icon"
onClick={handleSwitchView}
accessibilityLabel={switchTooltip}
/>
</OLTooltip>
</div>
)}
<ChangeLayoutButton />
<div className="ide-redesign-toolbar-button-container">
<OLTooltip
id="tooltip-exit-focus-mode"
description={t('exit_focus_mode')}
overlayProps={{ delay: 0, placement: 'bottom' }}
>
<OLIconButton
icon="close"
className="ide-redesign-toolbar-button-subdued ide-redesign-toolbar-button-icon"
onClick={handleExitFocusMode}
accessibilityLabel={t('exit_focus_mode')}
/>
</OLTooltip>
</div>
</div>
</nav>
)
}
if (view === 'history') {
return (
<nav className="ide-redesign-toolbar" aria-label={t('project_actions')}>