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

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">

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}

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