cedaro / satispress

Expose installed WordPress plugins and themes as Composer packages.
521 stars 51 forks source link

Unescape visible code tags in release-actions component #197

Closed GaryJones closed 1 month ago

GaryJones commented 2 years ago

The combination of the tagged template literal, and sprintf() in a placeholder, means that the <code> tags around the composer.json file name are visible in the release actions:

Screenshot 2022-11-12 at 01 09 25

While the most straightforward and sensible thing to do would be to just remove the tags / sprintf(), I tried to see if I could unescape them. There may be a simpler way than this messy and non-performant hack, that I stole from here.

It works though:

Screenshot 2022-11-12 at 02 02 38

This is the only instance in the code where a JS sprintf() call in a template literal is used with a replacement value that includes HTML that should be treated as HTML.

bradyvercher commented 2 years ago

@GaryJones I guess I never noticed that before! This approach seems to strip the <code> tags out, though:

Screen Shot 2022-11-14 at 8 22 41 AM

I poked around in the Gutenberg source and something like this might work:

const copyPasteHtml = createInterpolateElement(
    __( 'Copy and paste into <code>composer.json</code>', 'satispress' ),
    { code: createElement( 'code' ) }
);
GaryJones commented 2 years ago

Now updated:

Screenshot 2022-11-19 at 10 27 40