Merge pull request #30774 from overleaf/em-bibtex-editor-list

Show list of entries in bibtex visual editor

GitOrigin-RevId: 2038f70c8c5b73547764d4f9ad535596f3faaf8f

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

@@ -1,4 +1,4 @@
-import { ChangeEvent, FC, memo, useCallback } from 'react'
+import { ChangeEvent, FC, memo, useCallback, useId } from 'react'
 import OLTooltip from '@/shared/components/ol/ol-tooltip'
 import { sendMB } from '../../../infrastructure/event-tracking'
 import { useTranslation } from 'react-i18next'
@@ -11,6 +11,7 @@ function EditorSwitch() {
   const { showVisual: visual, setShowVisual: setVisual } =
     useEditorPropertiesContext()
   const { openDocName } = useEditorOpenDocContext()
+  const inputId = useId()
 
   const richTextAvailable = openDocName
     ? isVisualEditorAvailable(openDocName)
@@ -40,28 +41,30 @@ function EditorSwitch() {
       className="editor-toggle-switch"
       aria-label={t('toolbar_code_visual_editor_switch')}
     >
-      <fieldset className="toggle-switch">
-        <legend className="visually-hidden">Editor mode.</legend>
+      <form>
+        <fieldset className="toggle-switch">
+          <legend className="visually-hidden">Editor mode.</legend>
 
-        <input
-          type="radio"
-          name="editor"
-          value="cm6"
-          id="editor-switch-cm6"
-          className="toggle-switch-input"
-          checked={!richTextAvailable || !visual}
-          onChange={handleChange}
-        />
-        <label htmlFor="editor-switch-cm6" className="toggle-switch-label">
-          <span>{t('code_editor')}</span>
-        </label>
+          <input
+            type="radio"
+            name="editor"
+            value="cm6"
+            id={inputId}
+            className="toggle-switch-input"
+            checked={!richTextAvailable || !visual}
+            onChange={handleChange}
+          />
+          <label htmlFor={inputId} className="toggle-switch-label">
+            <span>{t('code_editor')}</span>
+          </label>
 
-        <RichTextToggle
-          checked={richTextAvailable && visual}
-          disabled={!richTextAvailable}
-          handleChange={handleChange}
-        />
-      </fieldset>
+          <RichTextToggle
+            checked={richTextAvailable && visual}
+            disabled={!richTextAvailable}
+            handleChange={handleChange}
+          />
+        </fieldset>
+      </form>
     </div>
   )
 }
@@ -72,6 +75,7 @@ const RichTextToggle: FC<{
   handleChange: (event: ChangeEvent<HTMLInputElement>) => void
 }> = ({ checked, disabled, handleChange }) => {
   const { t } = useTranslation()
+  const inputId = useId()
 
   const toggle = (
     <span>
@@ -79,13 +83,13 @@ const RichTextToggle: FC<{
         type="radio"
         name="editor"
         value="rich-text"
-        id="editor-switch-rich-text"
+        id={inputId}
         className="toggle-switch-input"
         checked={checked}
         onChange={handleChange}
         disabled={disabled}
       />
-      <label htmlFor="editor-switch-rich-text" className="toggle-switch-label">
+      <label htmlFor={inputId} className="toggle-switch-label">
         <span>{t('visual_editor')}</span>
       </label>
     </span>

services/web/frontend/js/features/source-editor/hooks/use-codemirror-scope.ts

@@ -61,8 +61,8 @@ import { beforeChangeDocEffect } from '@/features/source-editor/extensions/befor
 import { useActiveOverallTheme } from '@/shared/hooks/use-active-overall-theme'
 import { useEditorSelectionContext } from '@/shared/context/editor-selection-context'
 import { useActiveEditorTheme } from '@/shared/hooks/use-active-editor-theme'
-import { isVisualEditorAvailable } from '../utils/visual-editor'
 import { useFeatureFlag } from '@/shared/context/split-test-context'
+import { isValidTeXFile } from '@/main/is-valid-tex-file'
 
 function useCodeMirrorScope(view: EditorView) {
   const { fileTreeData } = useFileTreeData()
@@ -276,8 +276,7 @@ function useCodeMirrorScope(view: EditorView) {
 
   const { previewByPath } = useFileTreePathContext()
 
-  const showVisual =
-    visual && !!openDocName && isVisualEditorAvailable(openDocName)
+  const showVisual = visual && !!openDocName && isValidTeXFile(openDocName)
 
   const visualRef = useRef({
     previewByPath,