Hide most toolbar buttons for non-latex documents (#13725)

GitOrigin-RevId: 3bf487d86d1a465a1653b40891277380270ea7ff

services/web/frontend/js/features/source-editor/components/codemirror-toolbar.tsx

@@ -20,6 +20,7 @@ import DetachCompileButtonWrapper from '../../pdf-preview/components/detach-comp
 import getMeta from '../../../utils/meta'
 import { isVisual } from '../extensions/visual/visual'
 import SplitTestBadge from '../../../shared/components/split-test-badge'
+import { language } from '@codemirror/language'
 
 export const CodeMirrorToolbar = () => {
   const view = useCodeMirrorViewContext()
@@ -44,6 +45,8 @@ const Toolbar = memo(function Toolbar() {
   const overflowBeforeRef = useRef<HTMLDivElement>(null)
   const overflowedItemsRef = useRef<Set<string>>(new Set())
 
+  const languageName = state.facet(language)?.name
+
   const {
     open: overflowOpen,
     onToggle: setOverflowOpen,
@@ -97,7 +100,7 @@ const Toolbar = memo(function Toolbar() {
   return (
     <div className="ol-cm-toolbar toolbar-editor" ref={resizeRef}>
       {showSourceToolbar && <EditorSwitch />}
-      <ToolbarItems state={state} />
+      <ToolbarItems state={state} languageName={languageName} />
       <div
         className="ol-cm-toolbar-button-group ol-cm-toolbar-stretch"
         ref={overflowBeforeRef}
@@ -109,7 +112,11 @@ const Toolbar = memo(function Toolbar() {
           setOverflowOpen={setOverflowOpen}
           overflowRef={overflowRef}
         >
-          <ToolbarItems state={state} overflowed={overflowedItemsRef.current} />
+          <ToolbarItems
+            state={state}
+            overflowed={overflowedItemsRef.current}
+            languageName={languageName}
+          />
         </ToolbarOverflow>
         <div className="formatting-buttons-wrapper" />
       </div>
@@ -121,7 +128,7 @@ const Toolbar = memo(function Toolbar() {
           active={searchPanelOpen(state)}
           icon="search"
         />
-        {!isVisual(view) && (
+        {languageName === 'latex' && !isVisual(view) && (
           <SplitTestBadge
             splitTestName="source-editor-toolbar"
             displayOnVariants={['enabled']}

services/web/frontend/js/features/source-editor/components/toolbar/toolbar-items.tsx

@@ -23,7 +23,8 @@ const isMac = /Mac/.test(window.navigator?.platform)
 export const ToolbarItems: FC<{
   state: EditorState
   overflowed?: Set<string>
-}> = memo(function ToolbarItems({ state, overflowed }) {
+  languageName?: string
+}> = memo(function ToolbarItems({ state, overflowed, languageName }) {
   const { t } = useTranslation()
   const { toggleSymbolPalette, showSymbolPalette } = useEditorContext()
   const isActive = withinFormattingCommand(state)
@@ -70,128 +71,141 @@ export const ToolbarItems: FC<{
           />
         </div>
       )}
-      {showGroup('group-section') && (
+      {languageName === 'latex' && (
-        <div
+        <>
-          className="ol-cm-toolbar-button-group"
+          {showGroup('group-section') && (
-          data-overflow="group-section"
+            <div
-        >
+              className="ol-cm-toolbar-button-group"
-          <SectionHeadingDropdown />
+              data-overflow="group-section"
-        </div>
+            >
-      )}
+              <SectionHeadingDropdown />
-      {showGroup('group-format') && (
+            </div>
-        <div className="ol-cm-toolbar-button-group">
-          <ToolbarButton
-            id="toolbar-format-bold"
-            label={t('toolbar_format_bold')}
-            command={commands.toggleBold}
-            active={isActive('\\textbf')}
-            icon="bold"
-            shortcut={isMac ? '⌘B' : 'Ctrl+B'}
-          />
-          <ToolbarButton
-            id="toolbar-format-italic"
-            label={t('toolbar_format_italic')}
-            command={commands.toggleItalic}
-            active={isActive('\\textit')}
-            icon="italic"
-            shortcut={isMac ? '⌘I' : 'Ctrl+I'}
-          />
-        </div>
-      )}
-      {showGroup('group-math') && (
-        <div className="ol-cm-toolbar-button-group" data-overflow="group-math">
-          <MathDropdown />
-          {symbolPaletteAvailable && (
-            <ToolbarButton
-              id="toolbar-toggle-symbol-palette"
-              label={t('toolbar_toggle_symbol_palette')}
-              active={showSymbolPalette}
-              command={toggleSymbolPalette}
-              icon="Ω"
-              textIcon
-              className="ol-cm-toolbar-button-math"
-            />
           )}
-        </div>
+          {showGroup('group-format') && (
-      )}
+            <div className="ol-cm-toolbar-button-group">
-      {showGroup('group-misc') && (
+              <ToolbarButton
-        <div className="ol-cm-toolbar-button-group" data-overflow="group-misc">
+                id="toolbar-format-bold"
-          <ToolbarButton
+                label={t('toolbar_format_bold')}
-            id="toolbar-href"
+                command={commands.toggleBold}
-            label={t('toolbar_insert_link')}
+                active={isActive('\\textbf')}
-            command={commands.wrapInHref}
+                icon="bold"
-            icon="link"
+                shortcut={isMac ? '⌘B' : 'Ctrl+B'}
-          />
+              />
-          <ToolbarButton
+              <ToolbarButton
-            id="toolbar-ref"
+                id="toolbar-format-italic"
-            label={t('toolbar_insert_cross_reference')}
+                label={t('toolbar_format_italic')}
-            command={commands.insertRef}
+                command={commands.toggleItalic}
-            icon="tag"
+                active={isActive('\\textit')}
-          />
+                icon="italic"
-          <ToolbarButton
+                shortcut={isMac ? '⌘I' : 'Ctrl+I'}
-            id="toolbar-cite"
+              />
-            label={t('toolbar_insert_citation')}
+            </div>
-            command={commands.insertCite}
-            icon="book"
-          />
-          <ToolbarButton
-            id="toolbar-add-comment"
-            label={t('toolbar_add_comment')}
-            command={addComment}
-            disabled={!canAddComment(state)}
-            icon="comment"
-            hidden // enable this if an alternative to the floating "Add Comment" button is needed
-          />
-          {showFigureModal ? (
-            <InsertFigureDropdown />
-          ) : (
-            <ToolbarButton
-              id="toolbar-figure"
-              label={t('toolbar_insert_figure')}
-              command={commands.insertFigure}
-              icon="picture-o"
-            />
           )}
-          <ToolbarButton
+          {showGroup('group-math') && (
-            id="toolbar-table"
+            <div
-            label={t('toolbar_insert_table')}
+              className="ol-cm-toolbar-button-group"
-            command={commands.insertTable}
+              data-overflow="group-math"
-            icon="table"
+            >
-            hidden
+              <MathDropdown />
-          />
+              {symbolPaletteAvailable && (
-        </div>
+                <ToolbarButton
-      )}
+                  id="toolbar-toggle-symbol-palette"
-      {showGroup('group-list') && (
+                  label={t('toolbar_toggle_symbol_palette')}
-        <div className="ol-cm-toolbar-button-group" data-overflow="group-list">
+                  active={showSymbolPalette}
-          <ToolbarButton
+                  command={toggleSymbolPalette}
-            id="toolbar-bullet-list"
+                  icon="Ω"
-            label={t('toolbar_bullet_list')}
+                  textIcon
-            command={commands.toggleBulletList}
+                  className="ol-cm-toolbar-button-math"
-            icon="list-ul"
+                />
-          />
+              )}
-          <ToolbarButton
+            </div>
-            id="toolbar-numbered-list"
+          )}
-            label={t('toolbar_numbered_list')}
+          {showGroup('group-misc') && (
-            command={commands.toggleNumberedList}
+            <div
-            icon="list-ol"
+              className="ol-cm-toolbar-button-group"
-          />
+              data-overflow="group-misc"
-          <ToolbarButton
+            >
-            id="toolbar-format-indent-decrease"
+              <ToolbarButton
-            label={t('toolbar_decrease_indent')}
+                id="toolbar-href"
-            command={commands.indentDecrease}
+                label={t('toolbar_insert_link')}
-            icon="outdent"
+                command={commands.wrapInHref}
-            shortcut={isMac ? '⌘[' : 'Ctrl+['}
+                icon="link"
-            disabled={listDepth < 2}
+              />
-          />
+              <ToolbarButton
-          <ToolbarButton
+                id="toolbar-ref"
-            id="toolbar-format-indent-increase"
+                label={t('toolbar_insert_cross_reference')}
-            label={t('toolbar_increase_indent')}
+                command={commands.insertRef}
-            command={commands.indentIncrease}
+                icon="tag"
-            icon="indent"
+              />
-            shortcut={isMac ? '⌘]' : 'Ctrl+]'}
+              <ToolbarButton
-            disabled={listDepth < 1}
+                id="toolbar-cite"
-          />
+                label={t('toolbar_insert_citation')}
-        </div>
+                command={commands.insertCite}
+                icon="book"
+              />
+              <ToolbarButton
+                id="toolbar-add-comment"
+                label={t('toolbar_add_comment')}
+                command={addComment}
+                disabled={!canAddComment(state)}
+                icon="comment"
+                hidden // enable this if an alternative to the floating "Add Comment" button is needed
+              />
+              {showFigureModal ? (
+                <InsertFigureDropdown />
+              ) : (
+                <ToolbarButton
+                  id="toolbar-figure"
+                  label={t('toolbar_insert_figure')}
+                  command={commands.insertFigure}
+                  icon="picture-o"
+                />
+              )}
+              <ToolbarButton
+                id="toolbar-table"
+                label={t('toolbar_insert_table')}
+                command={commands.insertTable}
+                icon="table"
+                hidden
+              />
+            </div>
+          )}
+          {showGroup('group-list') && (
+            <div
+              className="ol-cm-toolbar-button-group"
+              data-overflow="group-list"
+            >
+              <ToolbarButton
+                id="toolbar-bullet-list"
+                label={t('toolbar_bullet_list')}
+                command={commands.toggleBulletList}
+                icon="list-ul"
+              />
+              <ToolbarButton
+                id="toolbar-numbered-list"
+                label={t('toolbar_numbered_list')}
+                command={commands.toggleNumberedList}
+                icon="list-ol"
+              />
+              <ToolbarButton
+                id="toolbar-format-indent-decrease"
+                label={t('toolbar_decrease_indent')}
+                command={commands.indentDecrease}
+                icon="outdent"
+                shortcut={isMac ? '⌘[' : 'Ctrl+['}
+                disabled={listDepth < 2}
+              />
+              <ToolbarButton
+                id="toolbar-format-indent-increase"
+                label={t('toolbar_increase_indent')}
+                command={commands.indentIncrease}
+                icon="indent"
+                shortcut={isMac ? '⌘]' : 'Ctrl+]'}
+                disabled={listDepth < 1}
+              />
+            </div>
+          )}
+        </>
       )}
     </>
   )

services/web/frontend/js/features/source-editor/languages/bibtex/bibtex-language.ts

@@ -3,6 +3,7 @@ import { parser } from '../../lezer-bibtex/bibtex.mjs'
 import { bibtexEntryCompletions } from './completions/snippets'
 
 export const BibTeXLanguage = LRLanguage.define({
+  name: 'bibtex',
   parser,
   languageData: {
     autocomplete: bibtexEntryCompletions,

services/web/frontend/js/features/source-editor/languages/latex/latex-language.ts

@@ -48,6 +48,7 @@ const typeMap: Record<string, string[]> = {
 }
 
 export const LaTeXLanguage = LRLanguage.define({
+  name: 'latex',
   parser: parser.configure({
     props: [
       foldNodeProp.add({