Merge pull request #8378 from overleaf/ii-cm6-three-way-toggle

[cm6] Make cm6 as the default source editor

GitOrigin-RevId: b56724d2c147792c55ce01cf272fbcce16f87916

services/web/app/src/Features/Project/ProjectController.js

@@ -1015,6 +1015,7 @@ const ProjectController = {
             const showNewSourceEditorOption =
               (newSourceEditorAssignment &&
                 newSourceEditorAssignment.variant === 'codemirror') ||
+              user.betaProgram ||
               shouldDisplayFeature('new_source_editor', false) // also allow override via ?new_source_editor=true
 
             const showSymbolPalette =

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

@@ -1,6 +1,39 @@
-import { memo, useCallback, useMemo } from 'react'
+import { memo, useCallback } from 'react'
 import useScopeValue from '../../../shared/hooks/use-scope-value'
-import BetaBadge from '../../../shared/components/beta-badge'
+import Tooltip from '../../../shared/components/tooltip'
+
+function Badge() {
+  const content = (
+    <>
+      Overleaf has upgraded the source editor. You can still use the old editor
+      by selecting "Source (legacy)".
+      <br />
+      <br />
+      Click to learn more and give feedback
+    </>
+  )
+
+  return (
+    <Tooltip
+      id="editor-switch"
+      description={content}
+      overlayProps={{
+        placement: 'bottom',
+        delayHide: 100,
+      }}
+      tooltipProps={{ className: 'tooltip-wide' }}
+    >
+      <a
+        href="https://forms.gle/GmSs6odZRKRp3VX98"
+        target="_blank"
+        rel="noopener noreferrer"
+        className="badge info-badge"
+      >
+        <span className="sr-only">{content}</span>
+      </a>
+    </Tooltip>
+  )
+}
 
 function EditorSwitch() {
   const [newSourceEditor, setNewSourceEditor] = useScopeValue(
@@ -31,26 +64,9 @@ function EditorSwitch() {
     [setRichText, setNewSourceEditor]
   )
 
-  const tooltip = useMemo(() => {
-    return {
-      id: 'editor-switch-tooltip',
-      placement: 'bottom',
-      className: 'tooltip-wide',
-      text: (
-        <>
-          We are upgrading the source editor. Please test it by selecting
-          "Source (Beta)".
-          <br />
-          <br />
-          Click to learn more and give feedback
-        </>
-      ),
-    }
-  }, [])
-
   return (
     <div className="editor-toggle-switch">
-      <BetaBadge tooltip={tooltip} url="https://forms.gle/GmSs6odZRKRp3VX98" />
+      <Badge />
 
       <fieldset className="toggle-switch">
         <legend className="sr-only">Editor mode.</legend>
@@ -65,7 +81,7 @@ function EditorSwitch() {
           onChange={handleChange}
         />
         <label htmlFor="editor-switch-cm6" className="toggle-switch-label">
-          <span>Source (Beta)</span>
+          <span>Source</span>
         </label>
 
         <input
@@ -78,7 +94,7 @@ function EditorSwitch() {
           onChange={handleChange}
         />
         <label htmlFor="editor-switch-ace" className="toggle-switch-label">
-          <span>Source</span>
+          <span>Source (legacy)</span>
         </label>
 
         <input

services/web/frontend/js/ide/editor/EditorManager.js

@@ -22,6 +22,7 @@ import './controllers/SavingNotificationController'
 import './controllers/CompileButton'
 import './controllers/EditorExpandButton'
 import getMeta from '../../utils/meta'
+
 let EditorManager
 
 export default EditorManager = (function () {
@@ -154,10 +155,11 @@ export default EditorManager = (function () {
         return false
       }
 
-      return (
-        this.localStorage(`editor.source_editor.${this.$scope.project_id}`) ===
-        'cm6'
+      const sourceEditor = this.localStorage(
+        `editor.source_editor.${this.$scope.project_id}`
       )
+
+      return sourceEditor === 'cm6' || sourceEditor == null
     }
 
     autoOpenDoc() {