Add button to copy list of broken links #10
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
This PR does 2 things, but only 1 of them is important.
Style maps explainer
When we import .doc/docx files, we use mammoth to convert them to HTML first. It does a pretty good job, but sometimes it doesn't know what to do with specific formatting (you can see how text is formatted using the styles pane in Word).
Style maps are explicit conversion rules that we can add. As an example:
This style looks for text formatted with "Emphasis A" and will convert it to a
<strong>
tag with a classname of "emphasis". I've written a little container class around them, but the actual rule itself is thestyle_rule
.If you don't specify a style tag, mammoth does a 'best guess' conversion.
There are usually new style tags that come in when we get sent new documents and I initially thought we should capture them all so that all of our conversions were explicit rather than implicit.
However, 2 problems with this idea:
Given all that, it's still generally a reasonable idea to add explicit conversions if they aren't doing anything too complex, so this PR contains some that have come in recently.
This PR adds a 'Copy links' button to the broken links alert box on the nofo_edit page. If you click the button, the number of broken links and a list of broken links is copied to your clipboard. The use case here is that you can click the button and then email the list to someone.
The button works whether the
<details>
element in the alert box is open or closed.The JS is added to a script tag near the page footer. This app has very minimal JS needs (deliberately), so there is no sophisticated JS build pipeline, and I'd prefer to keep it that was as long as possible. This means there is some duplication with JS here and there but I think it's okay.
The button styling comes from the 'outline inverse' version of the US Web Design System (USWDS) button component.
gif
Why are we doing this?
Adam has asked about this because sometimes he sends back NOFOs with too many broken links to the writing teams and he pulls out the list of links for them to fix up.
Also, recently, Betty asked for this same thing. Here is the ticket on Airtable: https://airtable.com/appdaa5AqUwI8jdOo/tblziL3G1qZkr0oV3/viwQ7YCJq9yxJq21f/recvgcYiBgNfhHWL7?blocks=hide
How to test this