mirror of
https://github.com/overleaf/overleaf.git
synced 2024-11-21 20:47:08 -05:00
Hide most toolbar buttons for non-latex documents (#13725)
GitOrigin-RevId: 3bf487d86d1a465a1653b40891277380270ea7ff
This commit is contained in:
parent
5236cb0ca1
commit
34fa28c90b
4 changed files with 147 additions and 124 deletions
|
@ -20,6 +20,7 @@ import DetachCompileButtonWrapper from '../../pdf-preview/components/detach-comp
|
||||||
import getMeta from '../../../utils/meta'
|
import getMeta from '../../../utils/meta'
|
||||||
import { isVisual } from '../extensions/visual/visual'
|
import { isVisual } from '../extensions/visual/visual'
|
||||||
import SplitTestBadge from '../../../shared/components/split-test-badge'
|
import SplitTestBadge from '../../../shared/components/split-test-badge'
|
||||||
|
import { language } from '@codemirror/language'
|
||||||
|
|
||||||
export const CodeMirrorToolbar = () => {
|
export const CodeMirrorToolbar = () => {
|
||||||
const view = useCodeMirrorViewContext()
|
const view = useCodeMirrorViewContext()
|
||||||
|
@ -44,6 +45,8 @@ const Toolbar = memo(function Toolbar() {
|
||||||
const overflowBeforeRef = useRef<HTMLDivElement>(null)
|
const overflowBeforeRef = useRef<HTMLDivElement>(null)
|
||||||
const overflowedItemsRef = useRef<Set<string>>(new Set())
|
const overflowedItemsRef = useRef<Set<string>>(new Set())
|
||||||
|
|
||||||
|
const languageName = state.facet(language)?.name
|
||||||
|
|
||||||
const {
|
const {
|
||||||
open: overflowOpen,
|
open: overflowOpen,
|
||||||
onToggle: setOverflowOpen,
|
onToggle: setOverflowOpen,
|
||||||
|
@ -97,7 +100,7 @@ const Toolbar = memo(function Toolbar() {
|
||||||
return (
|
return (
|
||||||
<div className="ol-cm-toolbar toolbar-editor" ref={resizeRef}>
|
<div className="ol-cm-toolbar toolbar-editor" ref={resizeRef}>
|
||||||
{showSourceToolbar && <EditorSwitch />}
|
{showSourceToolbar && <EditorSwitch />}
|
||||||
<ToolbarItems state={state} />
|
<ToolbarItems state={state} languageName={languageName} />
|
||||||
<div
|
<div
|
||||||
className="ol-cm-toolbar-button-group ol-cm-toolbar-stretch"
|
className="ol-cm-toolbar-button-group ol-cm-toolbar-stretch"
|
||||||
ref={overflowBeforeRef}
|
ref={overflowBeforeRef}
|
||||||
|
@ -109,7 +112,11 @@ const Toolbar = memo(function Toolbar() {
|
||||||
setOverflowOpen={setOverflowOpen}
|
setOverflowOpen={setOverflowOpen}
|
||||||
overflowRef={overflowRef}
|
overflowRef={overflowRef}
|
||||||
>
|
>
|
||||||
<ToolbarItems state={state} overflowed={overflowedItemsRef.current} />
|
<ToolbarItems
|
||||||
|
state={state}
|
||||||
|
overflowed={overflowedItemsRef.current}
|
||||||
|
languageName={languageName}
|
||||||
|
/>
|
||||||
</ToolbarOverflow>
|
</ToolbarOverflow>
|
||||||
<div className="formatting-buttons-wrapper" />
|
<div className="formatting-buttons-wrapper" />
|
||||||
</div>
|
</div>
|
||||||
|
@ -121,7 +128,7 @@ const Toolbar = memo(function Toolbar() {
|
||||||
active={searchPanelOpen(state)}
|
active={searchPanelOpen(state)}
|
||||||
icon="search"
|
icon="search"
|
||||||
/>
|
/>
|
||||||
{!isVisual(view) && (
|
{languageName === 'latex' && !isVisual(view) && (
|
||||||
<SplitTestBadge
|
<SplitTestBadge
|
||||||
splitTestName="source-editor-toolbar"
|
splitTestName="source-editor-toolbar"
|
||||||
displayOnVariants={['enabled']}
|
displayOnVariants={['enabled']}
|
||||||
|
|
|
@ -23,7 +23,8 @@ const isMac = /Mac/.test(window.navigator?.platform)
|
||||||
export const ToolbarItems: FC<{
|
export const ToolbarItems: FC<{
|
||||||
state: EditorState
|
state: EditorState
|
||||||
overflowed?: Set<string>
|
overflowed?: Set<string>
|
||||||
}> = memo(function ToolbarItems({ state, overflowed }) {
|
languageName?: string
|
||||||
|
}> = memo(function ToolbarItems({ state, overflowed, languageName }) {
|
||||||
const { t } = useTranslation()
|
const { t } = useTranslation()
|
||||||
const { toggleSymbolPalette, showSymbolPalette } = useEditorContext()
|
const { toggleSymbolPalette, showSymbolPalette } = useEditorContext()
|
||||||
const isActive = withinFormattingCommand(state)
|
const isActive = withinFormattingCommand(state)
|
||||||
|
@ -70,6 +71,8 @@ export const ToolbarItems: FC<{
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
{languageName === 'latex' && (
|
||||||
|
<>
|
||||||
{showGroup('group-section') && (
|
{showGroup('group-section') && (
|
||||||
<div
|
<div
|
||||||
className="ol-cm-toolbar-button-group"
|
className="ol-cm-toolbar-button-group"
|
||||||
|
@ -99,7 +102,10 @@ export const ToolbarItems: FC<{
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{showGroup('group-math') && (
|
{showGroup('group-math') && (
|
||||||
<div className="ol-cm-toolbar-button-group" data-overflow="group-math">
|
<div
|
||||||
|
className="ol-cm-toolbar-button-group"
|
||||||
|
data-overflow="group-math"
|
||||||
|
>
|
||||||
<MathDropdown />
|
<MathDropdown />
|
||||||
{symbolPaletteAvailable && (
|
{symbolPaletteAvailable && (
|
||||||
<ToolbarButton
|
<ToolbarButton
|
||||||
|
@ -115,7 +121,10 @@ export const ToolbarItems: FC<{
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{showGroup('group-misc') && (
|
{showGroup('group-misc') && (
|
||||||
<div className="ol-cm-toolbar-button-group" data-overflow="group-misc">
|
<div
|
||||||
|
className="ol-cm-toolbar-button-group"
|
||||||
|
data-overflow="group-misc"
|
||||||
|
>
|
||||||
<ToolbarButton
|
<ToolbarButton
|
||||||
id="toolbar-href"
|
id="toolbar-href"
|
||||||
label={t('toolbar_insert_link')}
|
label={t('toolbar_insert_link')}
|
||||||
|
@ -162,7 +171,10 @@ export const ToolbarItems: FC<{
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{showGroup('group-list') && (
|
{showGroup('group-list') && (
|
||||||
<div className="ol-cm-toolbar-button-group" data-overflow="group-list">
|
<div
|
||||||
|
className="ol-cm-toolbar-button-group"
|
||||||
|
data-overflow="group-list"
|
||||||
|
>
|
||||||
<ToolbarButton
|
<ToolbarButton
|
||||||
id="toolbar-bullet-list"
|
id="toolbar-bullet-list"
|
||||||
label={t('toolbar_bullet_list')}
|
label={t('toolbar_bullet_list')}
|
||||||
|
@ -194,5 +206,7 @@ export const ToolbarItems: FC<{
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
)
|
)
|
||||||
})
|
})
|
||||||
|
|
|
@ -3,6 +3,7 @@ import { parser } from '../../lezer-bibtex/bibtex.mjs'
|
||||||
import { bibtexEntryCompletions } from './completions/snippets'
|
import { bibtexEntryCompletions } from './completions/snippets'
|
||||||
|
|
||||||
export const BibTeXLanguage = LRLanguage.define({
|
export const BibTeXLanguage = LRLanguage.define({
|
||||||
|
name: 'bibtex',
|
||||||
parser,
|
parser,
|
||||||
languageData: {
|
languageData: {
|
||||||
autocomplete: bibtexEntryCompletions,
|
autocomplete: bibtexEntryCompletions,
|
||||||
|
|
|
@ -48,6 +48,7 @@ const typeMap: Record<string, string[]> = {
|
||||||
}
|
}
|
||||||
|
|
||||||
export const LaTeXLanguage = LRLanguage.define({
|
export const LaTeXLanguage = LRLanguage.define({
|
||||||
|
name: 'latex',
|
||||||
parser: parser.configure({
|
parser: parser.configure({
|
||||||
props: [
|
props: [
|
||||||
foldNodeProp.add({
|
foldNodeProp.add({
|
||||||
|
|
Loading…
Reference in a new issue