61 lines
1.7 KiB
TypeScript
61 lines
1.7 KiB
TypeScript
import { canUseNewEditor } from '@/features/ide-redesign/utils/new-editor-utils'
|
|
import { Compartment, Extension, TransactionSpec } from '@codemirror/state'
|
|
import { EditorView, showPanel } from '@codemirror/view'
|
|
|
|
export function createBreadcrumbsPanel() {
|
|
const dom = document.createElement('div')
|
|
dom.classList.add('ol-cm-breadcrumbs-portal')
|
|
return { dom, top: true }
|
|
}
|
|
|
|
const breadcrumbsTheme = EditorView.baseTheme({
|
|
'.ol-cm-breadcrumbs': {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: 'var(--spacing-01)',
|
|
fontSize: 'var(--font-size-01)',
|
|
padding: 'var(--spacing-02)',
|
|
overflow: 'auto',
|
|
scrollbarWidth: 'thin',
|
|
'& > *': {
|
|
flexShrink: '0',
|
|
},
|
|
},
|
|
'&light .ol-cm-breadcrumbs': {
|
|
color: 'var(--content-secondary)',
|
|
backgroundColor: 'var(--bg-light-primary)',
|
|
borderBottom: '1px solid #ddd',
|
|
},
|
|
'&light .ol-cm-breadcrumb-chevron': {
|
|
color: 'var(--neutral-30)',
|
|
},
|
|
'&dark .ol-cm-breadcrumbs': {
|
|
color: 'var(--content-secondary-dark)',
|
|
backgroundColor: 'var(--bg-dark-primary)',
|
|
},
|
|
'&dark .ol-cm-breadcrumb-chevron': {
|
|
color: 'var(--neutral-50)',
|
|
},
|
|
})
|
|
|
|
const breadcrumbsConf = new Compartment()
|
|
|
|
const breadcrumbsEnabled: Extension = [
|
|
showPanel.of(createBreadcrumbsPanel),
|
|
breadcrumbsTheme,
|
|
]
|
|
const breadcrumbsDisabled: Extension = []
|
|
|
|
export const setBreadcrumbsEnabled = (enabled: boolean): TransactionSpec => ({
|
|
effects: breadcrumbsConf.reconfigure(
|
|
enabled ? breadcrumbsEnabled : breadcrumbsDisabled
|
|
),
|
|
})
|
|
|
|
/**
|
|
* A panel which contains the editor breadcrumbs
|
|
*/
|
|
export const breadcrumbPanel = (enableNewEditor: boolean) => {
|
|
const enabled = canUseNewEditor() && enableNewEditor
|
|
return breadcrumbsConf.of(enabled ? breadcrumbsEnabled : breadcrumbsDisabled)
|
|
}
|