github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2025-04-20 13:33:42 +00:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #24177 from overleaf/mj-ide-symbol-palette

Browse source 
[web] Editor redesign: Add symbol palette

GitOrigin-RevId: c9c1e15adef86023b18a6d6efea854777fa4fb11
This commit is contained in:
David 2025-03-12 09:33:41 +00:00 • committed by Copybot
parent 1fcf046c81
commit 10b0d6333f
1 changed files with 34 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
services/web/frontend/js/features/ide-redesign/components/editor.tsx
View file

@ -5,6 +5,11 @@ import { useFileTreeOpenContext } from '@/features/ide-react/context/file-tree-o
import useScopeValue from '@/shared/hooks/use-scope-value'
import classNames from 'classnames'
import SourceEditor from '@/features/source-editor/components/source-editor'
import { Panel, PanelGroup } from 'react-resizable-panels'
import { VerticalResizeHandle } from '@/features/ide-react/components/resize/vertical-resize-handle'
import { Suspense } from 'react'
import { FullSizeLoadingSpinner } from '@/shared/components/loading-spinner'
import SymbolPalettePane from '@/features/ide-react/components/editor/symbol-palette-pane'
export const Editor = () => {
const [editor] = useScopeValue<EditorScopeValue>('editor')
@ -27,8 +32,35 @@ export const Editor = () => {
hidden: openEntity?.type !== 'doc' || selectedEntityCount !== 1,
})}
>
<SourceEditor />
{isLoading && <LoadingPane />}
<PanelGroup
autoSaveId="ide-redesign-editor-symbol-palette"
direction="vertical"
>
<Panel
id="ide-redesign-panel-source-editor"
order={1}
className="ide-redesign-editor-panel"
>
<SourceEditor />
{isLoading && <LoadingPane />}
</Panel>
{editor.showSymbolPalette && (
<>
<VerticalResizeHandle id="ide-redesign-editor-symbol-palette" />
<Panel
id="ide-redesign-panel-symbol-palette"
order={2}
defaultSize={25}
minSize={10}
maxSize={50}
>
<Suspense fallback={<FullSizeLoadingSpinner delay={500} />}>
<SymbolPalettePane />
</Suspense>
</Panel>
</>
)}
</PanelGroup>
</div>
)
}