From 34fa28c90b2958956b7eec29529c4191c318c16a Mon Sep 17 00:00:00 2001
From: Alf Eaton <alf.eaton@overleaf.com>
Date: Tue, 11 Jul 2023 14:28:53 +0100
Subject: [PATCH] Hide most toolbar buttons for non-latex documents (#13725)

GitOrigin-RevId: 3bf487d86d1a465a1653b40891277380270ea7ff
---
 .../components/codemirror-toolbar.tsx         |  13 +-
 .../components/toolbar/toolbar-items.tsx      | 256 +++++++++---------
 .../languages/bibtex/bibtex-language.ts       |   1 +
 .../languages/latex/latex-language.ts         |   1 +
 4 files changed, 147 insertions(+), 124 deletions(-)

diff --git a/services/web/frontend/js/features/source-editor/components/codemirror-toolbar.tsx b/services/web/frontend/js/features/source-editor/components/codemirror-toolbar.tsx
index 7b92b0fb10..3203687d07 100644
--- a/services/web/frontend/js/features/source-editor/components/codemirror-toolbar.tsx
+++ b/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']}
diff --git a/services/web/frontend/js/features/source-editor/components/toolbar/toolbar-items.tsx b/services/web/frontend/js/features/source-editor/components/toolbar/toolbar-items.tsx
index e967a37ba6..c990e61872 100644
--- a/services/web/frontend/js/features/source-editor/components/toolbar/toolbar-items.tsx
+++ b/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') && (
-        <div
-          className="ol-cm-toolbar-button-group"
-          data-overflow="group-section"
-        >
-          <SectionHeadingDropdown />
-        </div>
-      )}
-      {showGroup('group-format') && (
-        <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"
-            />
+      {languageName === 'latex' && (
+        <>
+          {showGroup('group-section') && (
+            <div
+              className="ol-cm-toolbar-button-group"
+              data-overflow="group-section"
+            >
+              <SectionHeadingDropdown />
+            </div>
           )}
-        </div>
-      )}
-      {showGroup('group-misc') && (
-        <div className="ol-cm-toolbar-button-group" data-overflow="group-misc">
-          <ToolbarButton
-            id="toolbar-href"
-            label={t('toolbar_insert_link')}
-            command={commands.wrapInHref}
-            icon="link"
-          />
-          <ToolbarButton
-            id="toolbar-ref"
-            label={t('toolbar_insert_cross_reference')}
-            command={commands.insertRef}
-            icon="tag"
-          />
-          <ToolbarButton
-            id="toolbar-cite"
-            label={t('toolbar_insert_citation')}
-            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"
-            />
+          {showGroup('group-format') && (
+            <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>
           )}
-          <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>
+          {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-misc') && (
+            <div
+              className="ol-cm-toolbar-button-group"
+              data-overflow="group-misc"
+            >
+              <ToolbarButton
+                id="toolbar-href"
+                label={t('toolbar_insert_link')}
+                command={commands.wrapInHref}
+                icon="link"
+              />
+              <ToolbarButton
+                id="toolbar-ref"
+                label={t('toolbar_insert_cross_reference')}
+                command={commands.insertRef}
+                icon="tag"
+              />
+              <ToolbarButton
+                id="toolbar-cite"
+                label={t('toolbar_insert_citation')}
+                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>
+          )}
+        </>
       )}
     </>
   )
diff --git a/services/web/frontend/js/features/source-editor/languages/bibtex/bibtex-language.ts b/services/web/frontend/js/features/source-editor/languages/bibtex/bibtex-language.ts
index e0f9d45d9a..c9dbdb4d26 100644
--- a/services/web/frontend/js/features/source-editor/languages/bibtex/bibtex-language.ts
+++ b/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,
diff --git a/services/web/frontend/js/features/source-editor/languages/latex/latex-language.ts b/services/web/frontend/js/features/source-editor/languages/latex/latex-language.ts
index 8b3dd5ce77..f906154539 100644
--- a/services/web/frontend/js/features/source-editor/languages/latex/latex-language.ts
+++ b/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({