Merge pull request #26583 from overleaf/td-editor-scope-values-to-context

Move scope values starting with `editor.` to contexts

GitOrigin-RevId: 7ca349ceff002228cf4e931c644c8c386eb6c597

services/web/test/frontend/features/source-editor/components/codemirror-editor-figure-modal.spec.tsx

@@ -1,5 +1,8 @@
 import CodemirrorEditor from '../../../../../frontend/js/features/source-editor/components/codemirror-editor'
-import { EditorProviders } from '../../../helpers/editor-providers'
+import {
+  EditorProviders,
+  makeEditorPropertiesProvider,
+} from '../../../helpers/editor-providers'
 import { mockScope, rootFolderId } from '../helpers/mock-scope'
 import { FC } from 'react'
 import { FileTreePathContext } from '@/features/file-tree/contexts/file-tree-path'
@@ -41,7 +44,6 @@ describe('<FigureModal />', function () {
   function mount() {
     const content = ''
     const scope = mockScope(content)
-    scope.editor.showVisual = true
 
     const FileTreePathProvider: FC<React.PropsWithChildren> = ({
       children,
@@ -63,7 +65,16 @@ describe('<FigureModal />', function () {
 
     cy.mount(
       <TestContainer>
-        <EditorProviders scope={scope} providers={{ FileTreePathProvider }}>
+        <EditorProviders
+          scope={scope}
+          providers={{
+            FileTreePathProvider,
+            EditorPropertiesProvider: makeEditorPropertiesProvider({
+              showVisual: true,
+              showSymbolPalette: false,
+            }),
+          }}
+        >
           <CodemirrorEditor />
         </EditorProviders>
       </TestContainer>

services/web/test/frontend/features/source-editor/components/codemirror-editor-table-generator.spec.tsx

@@ -1,6 +1,9 @@
 // Needed since eslint gets confused by mocha-each
 /* eslint-disable mocha/prefer-arrow-callback */
-import { EditorProviders } from '../../../helpers/editor-providers'
+import {
+  EditorProviders,
+  makeEditorPropertiesProvider,
+} from '../../../helpers/editor-providers'
 import CodemirrorEditor from '../../../../../frontend/js/features/source-editor/components/codemirror-editor'
 import { mockScope } from '../helpers/mock-scope'
 import forEach from 'mocha-each'
@@ -14,11 +17,18 @@ const mountEditor = (content: string | string[]) => {
     content = '\n' + content
   }
   const scope = mockScope(content)
-  scope.editor.showVisual = true
   cy.viewport(1000, 800)
   cy.mount(
     <TestContainer style={{ width: 1000, height: 800 }}>
-      <EditorProviders scope={scope}>
+      <EditorProviders
+        scope={scope}
+        providers={{
+          EditorPropertiesProvider: makeEditorPropertiesProvider({
+            showVisual: true,
+            showSymbolPalette: false,
+          }),
+        }}
+      >
         <CodemirrorEditor />
       </EditorProviders>
     </TestContainer>

services/web/test/frontend/features/source-editor/components/codemirror-editor-visual-command-tooltip.spec.tsx

@@ -1,15 +1,25 @@
-import { EditorProviders } from '../../../helpers/editor-providers'
+import {
+  EditorProviders,
+  makeEditorPropertiesProvider,
+} from '../../../helpers/editor-providers'
 import CodemirrorEditor from '../../../../../frontend/js/features/source-editor/components/codemirror-editor'
 import { mockScope } from '../helpers/mock-scope'
 import { TestContainer } from '../helpers/test-container'
 
 const mountEditor = (content: string) => {
   const scope = mockScope(content)
-  scope.editor.showVisual = true
 
   cy.mount(
     <TestContainer>
-      <EditorProviders scope={scope}>
+      <EditorProviders
+        scope={scope}
+        providers={{
+          EditorPropertiesProvider: makeEditorPropertiesProvider({
+            showVisual: true,
+            showSymbolPalette: false,
+          }),
+        }}
+      >
         <CodemirrorEditor />
       </EditorProviders>
     </TestContainer>

services/web/test/frontend/features/source-editor/components/codemirror-editor-visual-floats.spec.tsx

@@ -1,15 +1,25 @@
-import { EditorProviders } from '../../../helpers/editor-providers'
+import {
+  EditorProviders,
+  makeEditorPropertiesProvider,
+} from '../../../helpers/editor-providers'
 import CodemirrorEditor from '../../../../../frontend/js/features/source-editor/components/codemirror-editor'
 import { mockScope } from '../helpers/mock-scope'
 import { TestContainer } from '../helpers/test-container'
 
 const mountEditor = (content: string) => {
   const scope = mockScope(content)
-  scope.editor.showVisual = true
 
   cy.mount(
     <TestContainer>
-      <EditorProviders scope={scope}>
+      <EditorProviders
+        scope={scope}
+        providers={{
+          EditorPropertiesProvider: makeEditorPropertiesProvider({
+            showVisual: true,
+            showSymbolPalette: false,
+          }),
+        }}
+      >
         <CodemirrorEditor />
       </EditorProviders>
     </TestContainer>

services/web/test/frontend/features/source-editor/components/codemirror-editor-visual-list.spec.tsx

@@ -1,4 +1,7 @@
-import { EditorProviders } from '../../../helpers/editor-providers'
+import {
+  EditorProviders,
+  makeEditorPropertiesProvider,
+} from '../../../helpers/editor-providers'
 import CodemirrorEditor from '../../../../../frontend/js/features/source-editor/components/codemirror-editor'
 import { mockScope } from '../helpers/mock-scope'
 import { TestContainer } from '../helpers/test-container'
@@ -6,11 +9,18 @@ import { isMac } from '@/shared/utils/os'
 
 const mountEditor = (content: string) => {
   const scope = mockScope(content)
-  scope.editor.showVisual = true
 
   cy.mount(
     <TestContainer>
-      <EditorProviders scope={scope}>
+      <EditorProviders
+        scope={scope}
+        providers={{
+          EditorPropertiesProvider: makeEditorPropertiesProvider({
+            showVisual: true,
+            showSymbolPalette: false,
+          }),
+        }}
+      >
         <CodemirrorEditor />
       </EditorProviders>
     </TestContainer>

services/web/test/frontend/features/source-editor/components/codemirror-editor-visual-paste-html.spec.tsx

@@ -1,4 +1,7 @@
-import { EditorProviders } from '../../../helpers/editor-providers'
+import {
+  EditorProviders,
+  makeEditorPropertiesProvider,
+} from '../../../helpers/editor-providers'
 import CodemirrorEditor from '../../../../../frontend/js/features/source-editor/components/codemirror-editor'
 import { mockScope } from '../helpers/mock-scope'
 import { TestContainer } from '../helpers/test-container'
@@ -7,11 +10,18 @@ const menuIconsText = 'content_copyexpand_more'
 
 const mountEditor = (content = '') => {
   const scope = mockScope(content)
-  scope.editor.showVisual = true
 
   cy.mount(
     <TestContainer>
-      <EditorProviders scope={scope}>
+      <EditorProviders
+        scope={scope}
+        providers={{
+          EditorPropertiesProvider: makeEditorPropertiesProvider({
+            showVisual: true,
+            showSymbolPalette: false,
+          }),
+        }}
+      >
         <CodemirrorEditor />
       </EditorProviders>
     </TestContainer>

services/web/test/frontend/features/source-editor/components/codemirror-editor-visual-readonly.spec.tsx

@@ -1,5 +1,8 @@
 import { mockScope } from '../helpers/mock-scope'
-import { EditorProviders } from '../../../helpers/editor-providers'
+import {
+  EditorProviders,
+  makeEditorPropertiesProvider,
+} from '../../../helpers/editor-providers'
 import CodemirrorEditor from '../../../../../frontend/js/features/source-editor/components/codemirror-editor'
 import { FC } from 'react'
 import { FileTreePathContext } from '@/features/file-tree/contexts/file-tree-path'
@@ -43,13 +46,19 @@ const mountEditor = (content: string) => {
   const scope = mockScope(content)
   scope.permissions.write = false
   scope.permissions.trackedWrite = false
-  scope.editor.showVisual = true
 
   cy.mount(
     <TestContainer>
       <EditorProviders
         scope={scope}
-        providers={{ FileTreePathProvider, PermissionsProvider }}
+        providers={{
+          FileTreePathProvider,
+          PermissionsProvider,
+          EditorPropertiesProvider: makeEditorPropertiesProvider({
+            showVisual: true,
+            showSymbolPalette: false,
+          }),
+        }}
       >
         <CodemirrorEditor />
       </EditorProviders>

services/web/test/frontend/features/source-editor/components/codemirror-editor-visual-toolbar.spec.tsx

@@ -1,4 +1,7 @@
-import { EditorProviders } from '../../../helpers/editor-providers'
+import {
+  EditorProviders,
+  makeEditorPropertiesProvider,
+} from '../../../helpers/editor-providers'
 import CodemirrorEditor from '../../../../../frontend/js/features/source-editor/components/codemirror-editor'
 import { mockScope } from '../helpers/mock-scope'
 import { TestContainer } from '../helpers/test-container'
@@ -18,11 +21,18 @@ const clickToolbarButton = (name: string) => {
 
 const mountEditor = (content: string) => {
   const scope = mockScope(content)
-  scope.editor.showVisual = true
 
   cy.mount(
     <TestContainer>
-      <EditorProviders scope={scope}>
+      <EditorProviders
+        scope={scope}
+        providers={{
+          EditorPropertiesProvider: makeEditorPropertiesProvider({
+            showVisual: true,
+            showSymbolPalette: false,
+          }),
+        }}
+      >
         <CodemirrorEditor />
       </EditorProviders>
     </TestContainer>

services/web/test/frontend/features/source-editor/components/codemirror-editor-visual-tooltips.spec.tsx

@@ -1,5 +1,8 @@
 import { mockScope } from '../helpers/mock-scope'
-import { EditorProviders } from '../../../helpers/editor-providers'
+import {
+  EditorProviders,
+  makeEditorPropertiesProvider,
+} from '../../../helpers/editor-providers'
 import CodemirrorEditor from '../../../../../frontend/js/features/source-editor/components/codemirror-editor'
 import { TestContainer } from '../helpers/test-container'
 
@@ -11,11 +14,18 @@ describe('<CodeMirrorEditor/> tooltips in Visual mode', function () {
     cy.interceptEvents()
 
     const scope = mockScope('\n\n\n')
-    scope.editor.showVisual = true
 
     cy.mount(
       <TestContainer>
-        <EditorProviders scope={scope}>
+        <EditorProviders
+          scope={scope}
+          providers={{
+            EditorPropertiesProvider: makeEditorPropertiesProvider({
+              showVisual: true,
+              showSymbolPalette: false,
+            }),
+          }}
+        >
           <CodemirrorEditor />
         </EditorProviders>
       </TestContainer>

services/web/test/frontend/features/source-editor/components/codemirror-editor-visual.spec.tsx

@@ -1,7 +1,10 @@
 // Needed since eslint gets confused by mocha-each
 /* eslint-disable mocha/prefer-arrow-callback */
 import { FC } from 'react'
-import { EditorProviders } from '../../../helpers/editor-providers'
+import {
+  EditorProviders,
+  makeEditorPropertiesProvider,
+} from '../../../helpers/editor-providers'
 import CodemirrorEditor from '../../../../../frontend/js/features/source-editor/components/codemirror-editor'
 import { mockScope } from '../helpers/mock-scope'
 import forEach from 'mocha-each'
@@ -19,7 +22,6 @@ describe('<CodeMirrorEditor/> in Visual mode', function () {
     const content = '\n'.repeat(3)
 
     const scope = mockScope(content)
-    scope.editor.showVisual = true
 
     const FileTreePathProvider: FC<React.PropsWithChildren> = ({
       children,
@@ -41,7 +43,16 @@ describe('<CodeMirrorEditor/> in Visual mode', function () {
 
     cy.mount(
       <TestContainer>
-        <EditorProviders scope={scope} providers={{ FileTreePathProvider }}>
+        <EditorProviders
+          scope={scope}
+          providers={{
+            FileTreePathProvider,
+            EditorPropertiesProvider: makeEditorPropertiesProvider({
+              showVisual: true,
+              showSymbolPalette: false,
+            }),
+          }}
+        >
           <CodemirrorEditor />
         </EditorProviders>
       </TestContainer>

services/web/test/frontend/features/source-editor/components/codemirror-editor.spec.tsx

@@ -622,7 +622,7 @@ describe('<CodeMirrorEditor/>', { scrollBehavior: false }, function () {
 
         const rect = selection.getRangeAt(0).getBoundingClientRect()
         expect(Math.round(rect.top)).to.be.gte(100)
-        expect(Math.round(rect.left)).to.be.gte(90)
+        expect(Math.round(rect.left)).to.be.gte(80)
       })
   })
 })

services/web/test/frontend/features/source-editor/helpers/mock-scope.ts

@@ -19,7 +19,6 @@ export const mockScope = (
       sharejs_doc: mockDoc(content, docOptions),
       openDocName: 'test.tex',
       currentDocumentId: docId,
-      showVisual: false,
       wantTrackChanges: false,
     },
     project: {