From 9f1f62b9be4d70f59717910ae4c20f98d65d0577 Mon Sep 17 00:00:00 2001
From: Alf Eaton <alf.eaton@overleaf.com>
Date: Mon, 12 Dec 2022 11:17:41 +0000
Subject: [PATCH] Add rich-text mode to CM6 (#10775)

Co-Authored-By: Mathias Jakobsen <3295293+hrjakobsen@users.noreply.github.com>
GitOrigin-RevId: 00e015cb216bb8a52d083e71b34dbe91a7cd6cc5
---
 .../components/editor-switch.tsx              | 25 +++++++++++++++----
 .../frontend/js/ide/editor/EditorManager.js   | 18 +++++++++++++
 .../js/ide/file-tree/FileTreeManager.js       |  7 ++++++
 .../stylesheets/app/editor/toolbar.less       |  7 ++++++
 services/web/types/window.ts                  |  3 +++
 5 files changed, 55 insertions(+), 5 deletions(-)

diff --git a/services/web/frontend/js/features/source-editor/components/editor-switch.tsx b/services/web/frontend/js/features/source-editor/components/editor-switch.tsx
index cf0ee45859..6fbfa27c54 100644
--- a/services/web/frontend/js/features/source-editor/components/editor-switch.tsx
+++ b/services/web/frontend/js/features/source-editor/components/editor-switch.tsx
@@ -3,6 +3,8 @@ import useScopeValue from '../../../shared/hooks/use-scope-value'
 import Tooltip from '../../../shared/components/tooltip'
 import { sendMB } from '../../../infrastructure/event-tracking'
 
+const params = new URLSearchParams(window.location.search)
+
 function Badge() {
   const content = (
     <>
@@ -42,6 +44,10 @@ function EditorSwitch() {
   )
   const [richText, setRichText] = useScopeValue('editor.showRichText')
 
+  const [visual, setVisual] = useScopeValue('editor.showVisual')
+
+  const richTextOrVisual = richText || visual
+
   const handleChange = useCallback(
     event => {
       const editorType = event.target.value
@@ -49,22 +55,31 @@ function EditorSwitch() {
       switch (editorType) {
         case 'ace':
           setRichText(false)
+          setVisual(false)
           setNewSourceEditor(false)
           break
 
         case 'cm6':
           setRichText(false)
+          setVisual(false)
           setNewSourceEditor(true)
           break
 
         case 'rich-text':
-          setRichText(true)
+          if (params.has('cm_visual')) {
+            setRichText(false)
+            setVisual(true)
+            setNewSourceEditor(true)
+          } else {
+            setRichText(true)
+            setVisual(false)
+          }
           break
       }
 
       sendMB('editor-switch-change', { editorType })
     },
-    [setRichText, setNewSourceEditor]
+    [setRichText, setVisual, setNewSourceEditor]
   )
 
   return (
@@ -80,7 +95,7 @@ function EditorSwitch() {
           value="cm6"
           id="editor-switch-cm6"
           className="toggle-switch-input"
-          checked={!richText && !!newSourceEditor}
+          checked={!richTextOrVisual && !!newSourceEditor}
           onChange={handleChange}
         />
         <label htmlFor="editor-switch-cm6" className="toggle-switch-label">
@@ -93,7 +108,7 @@ function EditorSwitch() {
           value="ace"
           id="editor-switch-ace"
           className="toggle-switch-input"
-          checked={!richText && !newSourceEditor}
+          checked={!richTextOrVisual && !newSourceEditor}
           onChange={handleChange}
         />
         <label htmlFor="editor-switch-ace" className="toggle-switch-label">
@@ -106,7 +121,7 @@ function EditorSwitch() {
           value="rich-text"
           id="editor-switch-rich-text"
           className="toggle-switch-input"
-          checked={!!richText}
+          checked={!!richTextOrVisual}
           onChange={handleChange}
         />
         <label
diff --git a/services/web/frontend/js/ide/editor/EditorManager.js b/services/web/frontend/js/ide/editor/EditorManager.js
index 7ca9ad39ee..696b4db85e 100644
--- a/services/web/frontend/js/ide/editor/EditorManager.js
+++ b/services/web/frontend/js/ide/editor/EditorManager.js
@@ -24,6 +24,8 @@ import './controllers/SwitchToPDFButton'
 import getMeta from '../../utils/meta'
 import { hasSeenCM6SwitchAwaySurvey } from '../../features/source-editor/utils/switch-away-survey'
 
+const params = new URLSearchParams(window.location.search)
+
 let EditorManager
 
 export default EditorManager = (function () {
@@ -46,6 +48,7 @@ export default EditorManager = (function () {
         wantTrackChanges: false,
         docTooLongErrorShown: false,
         showRichText: this.showRichText(),
+        showVisual: this.showVisual(),
         newSourceEditor: this.newSourceEditor(),
         showSymbolPalette: false,
         toggleSymbolPalette: () => {
@@ -165,12 +168,27 @@ export default EditorManager = (function () {
     }
 
     showRichText() {
+      if (params.has('cm_visual')) {
+        return false
+      }
+
       return (
         this.localStorage(`editor.mode.${this.$scope.project_id}`) ===
         'rich-text'
       )
     }
 
+    showVisual() {
+      if (!params.has('cm_visual')) {
+        return false
+      }
+
+      return (
+        this.localStorage(`editor.visual-mode.${this.$scope.project_id}`) ===
+        'visual'
+      )
+    }
+
     newSourceEditor() {
       // only use the new source editor if the option to switch is available
       if (!getMeta('ol-showNewSourceEditorOption')) {
diff --git a/services/web/frontend/js/ide/file-tree/FileTreeManager.js b/services/web/frontend/js/ide/file-tree/FileTreeManager.js
index d293756d65..c4b220dcc0 100644
--- a/services/web/frontend/js/ide/file-tree/FileTreeManager.js
+++ b/services/web/frontend/js/ide/file-tree/FileTreeManager.js
@@ -292,6 +292,13 @@ export default FileTreeManager = class FileTreeManager {
     return this._findEntityByPathInFolder(this.$scope.rootFolder, path)
   }
 
+  getPreviewUrlByPath(path) {
+    const entity = this.findEntityByPath(path)
+    return entity
+      ? `/project/${this.$scope.project._id}/file/${entity.id}`
+      : null
+  }
+
   _findEntityByPathInFolder(folder, path) {
     if (path == null || folder == null) {
       return null
diff --git a/services/web/frontend/stylesheets/app/editor/toolbar.less b/services/web/frontend/stylesheets/app/editor/toolbar.less
index 884f48562b..b157cb2566 100644
--- a/services/web/frontend/stylesheets/app/editor/toolbar.less
+++ b/services/web/frontend/stylesheets/app/editor/toolbar.less
@@ -330,6 +330,13 @@
   display: flex;
 }
 
+.formatting-buttons-portal {
+  display: flex;
+  .formatting-btn--icon:last-of-type {
+    border-right: none;
+  }
+}
+
 .formatting-btn {
   color: @formatting-btn-color;
   background-color: @formatting-btn-bg;
diff --git a/services/web/types/window.ts b/services/web/types/window.ts
index 92cf812519..80d4acf8b6 100644
--- a/services/web/types/window.ts
+++ b/services/web/types/window.ts
@@ -28,5 +28,8 @@ declare global {
     isRestrictedTokenMember: boolean
     _reportCM6Perf: () => void
     _reportAcePerf: () => void
+    MathJax: {
+      Hub: Record<string, any>
+    }
   }
 }