Example YAML configuration breaks menu item edit form when pasted directly without escaping < and > characters

Issue information

From user: makbay

Related to !31 (merged)

Contribution record

Fork management

Problem/Motivation

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.

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.

issue description

Steps to reproduce

  • Navigate to the *Menu Link Attributes* module configuration page.
  • Remove the default or previously modified configuration in the text area.
  • Locate the example YAML code provided in the configuration form.
  • Copy the example code as is.
  • Paste it into a related configuration text area.
  • Save the configuration and attempt to edit a menu item that relies on the updated configuration.

Observed behavior:

Menu editing pages fail to render properly due to invalid or unsafe configurations.

Expected behavior:

The provided example YAML code should be escaped to ensure safe usage when copied and pasted.

Proposed resolution

  • Escape the YAML content displayed in the example section using Html::escape() to ensure all characters like &lt; and &gt; are rendered safely.
  • This ensures that users copying and pasting the example do not inadvertently break their menu editing functionality.

Remaining tasks

  • Review the MR.
  • Review and test the patch for various scenarios:
    • Ensure the example renders correctly with escaped characters.
    • Validate that menu editing functionality remains unaffected.
  • Document the change in the module's README or release notes, if necessary.

User interface changes

No significant UI changes. The example YAML content will now be rendered in its escaped form, visually identical but safe for copying and pasting.

API changes

No API changes introduced.

Data model changes

No changes to the data model.

Edited by drupalbot
To upload designs, you'll need to enable LFS and have an admin enable hashed storage. More information