Example YAML configuration breaks menu item edit form when pasted directly without escaping < and > characters
>>> [!note] Migrated issue
<!-- Drupal.org comment -->
<!-- Migrated from issue #3488192. -->
Reported by: [makbay](https://www.drupal.org/user/3518933)
Related to !31
>>>
<h3 id="summary-problem-motivation">Problem/Motivation</h3>
<p>The configuration form of the *Menu Link Attributes* module includes an example YAML configuration displayed to users. The example is rendered without escaping, causing < and > characters to appear as is.</p>
<p>If a user copies the unescaped example and pastes it directly into the configuration textarea, the resulting configuration is breaking the menu item editing pages, causing unexpected behavior and potential usability issues.</p>
<p><img src="https://www.drupal.org/files/issues/2024-11-18/Screenshot_3.png" alt="issue description"></p>
<h4 id="summary-steps-reproduce">Steps to reproduce</h4>
<ul>
<li>Navigate to the *Menu Link Attributes* module configuration page.</li>
<li>Remove the default or previously modified configuration in the text area.</li>
<li>Locate the example YAML code provided in the configuration form.</li>
<li>Copy the example code as is.</li>
<li>Paste it into a related configuration text area.</li>
<li>Save the configuration and attempt to edit a menu item that relies on the updated configuration.</li>
</ul>
<p> <strong>Observed behavior:</strong><br><br>
Menu editing pages fail to render properly due to invalid or unsafe configurations.</p>
<p> <strong>Expected behavior:</strong><br><br>
The provided example YAML code should be escaped to ensure safe usage when copied and pasted.
</p>
<h3 id="summary-proposed-resolution">
Proposed resolution<br>
</h3>
<ul>
<li>
Escape the YAML content displayed in the example section using <code>Html::escape()</code> to ensure all characters like <code>&lt;</code> and <code>&gt;</code> are rendered safely.
</li>
<li>
This ensures that users copying and pasting the example do not inadvertently break their menu editing functionality.
</li>
</ul>
<h3 id="summary-remaining-tasks">
Remaining tasks<br>
</h3>
<ul>
<li>
Review the MR.
</li>
<li>
Review and test the patch for various scenarios:
<ul>
<li>
Ensure the example renders correctly with escaped characters.
</li>
<li>
Validate that menu editing functionality remains unaffected.
</li>
</ul>
</li>
<li>
Document the change in the module's README or release notes, if necessary.
</li>
</ul>
<h3 id="summary-ui-changes">
User interface changes<br>
</h3>
<p>
No significant UI changes. The example YAML content will now be rendered in its escaped form, visually identical but safe for copying and pasting.
</p>
<h3 id="summary-api-changes">
API changes<br>
</h3>
<p>
No API changes introduced.
</p>
<h3 id="summary-data-model-changes">
Data model changes<br>
</h3>
<p>
No changes to the data model.
</p>
issue