Add rich-text mode to CM6 (#10775)

Co-Authored-By: Mathias Jakobsen <3295293+hrjakobsen@users.noreply.github.com>
GitOrigin-RevId: 00e015cb216bb8a52d083e71b34dbe91a7cd6cc5

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

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')) {

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

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;

services/web/types/window.ts

@@ -28,5 +28,8 @@ declare global {
     isRestrictedTokenMember: boolean
     _reportCM6Perf: () => void
     _reportAcePerf: () => void
+    MathJax: {
+      Hub: Record<string, any>
+    }
   }
 }