In Modern Office 365, one of the neat new features is the ability to edit HTML files by opening up a file from a Modern library. The HTML contents would load in the browser and were able to edit the HTML without having to download the file or edit the file using SharePoint Designer — this was a very powerful capability for many people.
Well, recently Microsoft has removed this capability (not sure why) as noted by Mark Rackley. Please vote in the UserVoice!
Bring back the ability to edit HTML files in the Modern Text Editor in #SharePoint Online! Vote! https://t.co/p0JSbZ28bA pic.twitter.com/cBDmb6xFNs
— Mark Rackley (@mrackley) June 25, 2018
What to do?
This wasn’t the first occurrence of this issue. I have found others posted about this topic on other social forums such as Reddit and Facebook. Because of this, I have decided to just build a simple little CommandSet button that will run on SharePoint libraries, which bypasses the new Microsoft changes and allows you to edit an HTML file in the browser. In order to do this, all we need to do is append &p=5 into the browser URL.
The Solution
The solution was quite simple. Build a SPFx CommandSet button, which allows the user to select an HTML file and then navigate to the view page with &p=5 appended to it.
The code is quite simple. When a user selects a file with a file type of “html”, show the command button. When the button is clicked, grab the FileName, file path and folder path. Construct a new URL, and append &p=5.
What it looks like
Select an HTML file, the CommandSet button shows up
Click “Edit HTML”, the page will redirect to the modern list view display form, with &p=5 to load the default edit view of the file.
Try it out
If you’d like to try it out, please do. I have uploaded the source and the sppkg file to my GitHub Repository. The sppkg file will be in the sppkg folder. Upload this to your app catalog. Subsequently, you can deploy the app via Site Contents or using PowerShell. Below is a sample PowerShell command for you. (This is old code, there are other ways to provision this)
Connect-PnPOnline -Url https://test.sharepoint.com/sites/MySite
$context = Get-PnPContext
$web = Get-PnPWeb
$context.Load($web)
Execute-PnPQuery
$ca = $web.UserCustomActions.Add()
$ca.RegistrationType = "List"
$ca.RegistrationId = "101"
$ca.ClientSideComponentId = "6599b3cc-7631-4a55-962e-43d1757977ec"
$ca.ClientSideComponentProperties = "{""sampleTextOne"":""Edit HTML""}"
$ca.Location = "ClientSideExtension.ListViewCommandSet.CommandBar"
$ca.Name = "EditHTML CommandButton"
$ca.Title = "EditHTML CommandButton"
$ca.Description = "EditHTML CommandButton"
$ca.Update()
$context.Load($web.UserCustomActions)
Execute-PnPQuery
Beau Cameron 