squidfunk/mkdocs-material

Unescaped '>' in `data-clipboard-target` attribute string that probably should be replaced by its HTML entity '>'

Closed this issue · 3 comments

mixio commented

Context

In file: mkdocs-material/src/templates/assets/javascripts/templates/clipboard/index.tsx

The function renderClipboardButton() line 42:

export function renderClipboardButton(id: string): HTMLElement {
  return (
    <button
      class="md-clipboard md-icon"
      title={translation("clipboard.copy")}
      data-clipboard-target={`#${id} > code`} // The '>' should be escaped because it appears as data-clipboard-target="#__code_8 > code" in the final HTML.
    ></button>
  )
}


### Description

The '>' in the mentioned function should be escaped because it appears as **data-clipboard-target="#__code_8 > code"** in the final HTML.


### Related links

mkdocs-material/src/templates/assets/javascripts/templates/clipboard/index.tsx

### Use Cases

This should fix the HTML invalid presence of an unescaped '>' in a tag attribute string.

### Visuals

_No response_

### Before submitting

- [X] I have read and followed the [change request guidelines](https://squidfunk.github.io/mkdocs-material/contributing/requesting-a-change/).
- [X] I have verified that [my idea is a change request and not a bug report](https://squidfunk.github.io/mkdocs-material/contributing/requesting-a-change/#its-not-a-bug-its-a-feature).
- [X] I have ensured that, to the best of my knowledge, [my idea will benefit the entire community](https://squidfunk.github.io/mkdocs-material/contributing/requesting-a-change/#benefit-for-the-community).
- [X] I have included relevant links to [the documentation](https://squidfunk.github.io/mkdocs-material/), related [issues](https://github.com/squidfunk/mkdocs-material/issues), and [discussions](https://github.com/squidfunk/mkdocs-material/discussions) to underline the need for my idea.

This is not a proper bug report. Please follow our bug reporting guide lines and provide a minimal reproduction, as we do not know how to actually observe the error that you're trying to report. Closing as incomplete.

I am also not sure why the '>' would need to be 'escaped' (== turned into an entity?)

This

<!DOCTYPE html>
<html data-test="2 > 1" lang="en">
<head>
<title>Test</title>
</head>
</html>

is valid according to https://validator.w3.org/. Now, perhaps the validator does not pick up something that is invalid according to the spec.

mixio commented