How to tell if page is in view/edit mode in SPFx?

Question

Trying to build an extension to display differently based on if the page is in view or edit mode.

Is there a built in way to see if a modern Site Page is in Read or Edit display mode?

I know of DisplayMode in the @microsoft/sp-core-library, but that only seems to support whether or not an SPFx app is in Read or Edit mode.

Answer 1

The correct answer is valid but it will not cover all the scenarios, if you need to detect the edit mode from an SPFx solution on a classic page the Mode=Edit will not be available. A more reliable solution would be to use the DisplayMode

//Detect display mode on classic and modern pages pages
if(Environment.type == EnvironmentType.ClassicSharePoint){
let isInEditMode: boolean;
let interval: any;
interval = setInterval(function(){
  if (typeof (<any>window).SP.Ribbon !== 'undefined'){
    isInEditMode = (<any>window).SP.Ribbon.PageState.Handlers.isInEditMode();
    if(isInEditMode){
      //Classic SharePoint in Edit Mode
    }else{
      //Classic SharePoint in Read Mode
    }
    clearInterval(interval);
  }
},100) 
}else if(Environment.type == EnvironmentType.SharePoint){
if(this.displayMode == DisplayMode.Edit){
  //Modern SharePoint in Edit Mode
}else if(this.displayMode == DisplayMode.Read){
  //Modern SharePoint in Read Mode
}
}

More information about this can be fount here

Answer 2

When the modern page is in edit mode. you can find there will be query string added on the url Mode=Edit. if you remove that query string the page will go in read mode. you can get query string values in the spfx webparts.

ex: https://tenant.sharepoint.com/sites/demosite1/SitePages/modernpage.aspx?Mode=Edit