[visual] Hide/disable editing features in href tooltip when doc is read-only (#15451)

GitOrigin-RevId: 22f07849c0a09a4536f7bbbe16a43514520cba8b

services/web/frontend/js/features/source-editor/components/command-tooltip/href-tooltip.tsx

@@ -93,6 +93,7 @@ export const HrefTooltipContent: FC = () => {
                 view.dispatch(spec)
               }
             }}
+            disabled={state.readOnly}
           />
         </FormGroup>
       </form>
@@ -110,21 +111,23 @@ export const HrefTooltipContent: FC = () => {
         {t('open_link')}
       </Button>
 
-      <Button
-        type="button"
-        bsStyle="link"
-        className="ol-cm-command-tooltip-link"
-        onClick={() => {
-          const spec = removeLink(state)
-          if (spec) {
-            view.dispatch(spec)
-            view.focus()
-          }
-        }}
-      >
-        <Icon type="chain-broken" fw />
-        {t('remove_link')}
-      </Button>
+      {!state.readOnly && (
+        <Button
+          type="button"
+          bsStyle="link"
+          className="ol-cm-command-tooltip-link"
+          onClick={() => {
+            const spec = removeLink(state)
+            if (spec) {
+              view.dispatch(spec)
+              view.focus()
+            }
+          }}
+        >
+          <Icon type="chain-broken" fw />
+          {t('remove_link')}
+        </Button>
+      )}
     </div>
   )
 }

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

@@ -118,4 +118,18 @@ describe('<CodeMirrorEditor/> in Visual mode with read-only permission', functio
     cy.get('img.ol-cm-graphics').should('have.length', 1)
     cy.findByRole('button', { name: 'Edit figure' }).should('not.exist')
   })
+
+  it('does not display editing features in the href tooltip', function () {
+    mountEditor('\\href{https://example.com/}{foo}\n\n')
+
+    // move the selection outside the link
+    cy.get('.cm-line').eq(2).click()
+
+    // put the selection inside the href command
+    cy.findByText('foo').click()
+
+    cy.findByRole('button', { name: 'Go to page' })
+    cy.findByLabelText('URL').should('be.disabled')
+    cy.findByRole('button', { name: 'Remove link' }).should('not.exist')
+  })
 })