From 43f1a7fd2e5b935366c42f56ea56b207b0fbbc9c Mon Sep 17 00:00:00 2001
From: Alf Eaton <alf.eaton@overleaf.com>
Date: Thu, 19 Oct 2023 09:35:48 +0100
Subject: [PATCH] Enable editor toolbar for read-only users (#15279)

* Make the editor toolbar available for read-only users
* Hide replace in search form when read-only

GitOrigin-RevId: 2867868d0914da797294084df37163e92578cd57
---
 .../components/codemirror-search-form.tsx     | 68 +++++++++++--------
 .../components/codemirror-toolbar.tsx         |  6 +-
 .../extensions/toolbar/toolbar-panel.ts       |  3 -
 3 files changed, 43 insertions(+), 34 deletions(-)

diff --git a/services/web/frontend/js/features/source-editor/components/codemirror-search-form.tsx b/services/web/frontend/js/features/source-editor/components/codemirror-search-form.tsx
index 270949c023..f04299fbb0 100644
--- a/services/web/frontend/js/features/source-editor/components/codemirror-search-form.tsx
+++ b/services/web/frontend/js/features/source-editor/components/codemirror-search-form.tsx
@@ -214,6 +214,8 @@ const CodeMirrorSearchForm: FC = () => {
     return getSearchQuery(state)
   }, [state])
 
+  const showReplace = !state.readOnly
+
   return (
     // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
     <form
@@ -330,24 +332,26 @@ const CodeMirrorSearchForm: FC = () => {
           </InputGroup.Button>
         </InputGroup>
 
-        <InputGroup
-          bsSize="small"
-          className="ol-cm-search-input-group ol-cm-search-replace-input"
-        >
-          <FormControl
-            type="text"
-            name="replace"
-            placeholder={t('search_replace_with')}
-            autoComplete="off"
-            value={query.replace || ''}
-            onChange={handleChange}
-            onKeyDown={handleReplaceKeyDown}
-            className="ol-cm-search-form-input"
+        {showReplace && (
+          <InputGroup
             bsSize="small"
-            inputRef={handleReplaceRef}
-            aria-label={t('search_command_replace')}
-          />
-        </InputGroup>
+            className="ol-cm-search-input-group ol-cm-search-replace-input"
+          >
+            <FormControl
+              type="text"
+              name="replace"
+              placeholder={t('search_replace_with')}
+              autoComplete="off"
+              value={query.replace || ''}
+              onChange={handleChange}
+              onKeyDown={handleReplaceKeyDown}
+              className="ol-cm-search-form-input"
+              bsSize="small"
+              inputRef={handleReplaceRef}
+              aria-label={t('search_command_replace')}
+            />
+          </InputGroup>
+        )}
 
         <div className="ol-cm-search-hidden-inputs">
           <input
@@ -427,19 +431,25 @@ const CodeMirrorSearchForm: FC = () => {
           )}
         </div>
 
-        <div className="ol-cm-search-form-group ol-cm-search-replace-buttons">
-          <Button
-            type="button"
-            bsSize="small"
-            onClick={() => replaceNext(view)}
-          >
-            {t('search_replace')}
-          </Button>
+        {showReplace && (
+          <div className="ol-cm-search-form-group ol-cm-search-replace-buttons">
+            <Button
+              type="button"
+              bsSize="small"
+              onClick={() => replaceNext(view)}
+            >
+              {t('search_replace')}
+            </Button>
 
-          <Button type="button" bsSize="small" onClick={() => replaceAll(view)}>
-            {t('search_replace_all')}
-          </Button>
-        </div>
+            <Button
+              type="button"
+              bsSize="small"
+              onClick={() => replaceAll(view)}
+            >
+              {t('search_replace_all')}
+            </Button>
+          </div>
+        )}
       </div>
 
       <div className="ol-cm-search-form-close">
diff --git a/services/web/frontend/js/features/source-editor/components/codemirror-toolbar.tsx b/services/web/frontend/js/features/source-editor/components/codemirror-toolbar.tsx
index cac609ff86..6fcafa912f 100644
--- a/services/web/frontend/js/features/source-editor/components/codemirror-toolbar.tsx
+++ b/services/web/frontend/js/features/source-editor/components/codemirror-toolbar.tsx
@@ -113,10 +113,12 @@ const Toolbar = memo(function Toolbar() {
     return null
   }
 
+  const showActions = !state.readOnly && !insideTable
+
   return (
     <div className="ol-cm-toolbar toolbar-editor" ref={elementRef}>
       {showSourceToolbar && <EditorSwitch />}
-      {!insideTable && (
+      {showActions && (
         <ToolbarItems
           state={state}
           languageName={languageName}
@@ -125,7 +127,7 @@ const Toolbar = memo(function Toolbar() {
         />
       )}
       <div className="ol-cm-toolbar-button-group ol-cm-toolbar-stretch">
-        {!insideTable && (
+        {showActions && (
           <ToolbarOverflow
             overflowed={overflowed}
             overflowOpen={overflowOpen}
diff --git a/services/web/frontend/js/features/source-editor/extensions/toolbar/toolbar-panel.ts b/services/web/frontend/js/features/source-editor/extensions/toolbar/toolbar-panel.ts
index 7c3eb8248f..836cd55699 100644
--- a/services/web/frontend/js/features/source-editor/extensions/toolbar/toolbar-panel.ts
+++ b/services/web/frontend/js/features/source-editor/extensions/toolbar/toolbar-panel.ts
@@ -5,9 +5,6 @@ const toggleToolbarEffect = StateEffect.define<boolean>()
 const toolbarState = StateField.define<boolean>({
   create: () => true,
   update: (value, tr) => {
-    if (tr.state.readOnly) {
-      return false
-    }
     for (const effect of tr.effects) {
       if (effect.is(toggleToolbarEffect)) {
         value = effect.value