Escape HTML characters in path item title for safe rendering

Saketh Pairequested to merge
gitlab-community/gitlab-org/gitlab:578911-escaped-characters-vsa-title into master

What does this MR do and why?

This merge request fixes several UX and test issues caused by over-escaped diagram source handling and minor attribute ordering in the Content Editor. It addresses the following problems reported in issue #578911:

  • Hide PlantUML/Kroki source blocks in the Content Editor preview so users only see the rendered diagram (source remains accessible to screen readers).
  • Ensure Kroki-rendered diagrams in the Content Editor include the copy-to-clipboard button (same behavior as rendered Markdown).
  • Update specs that used over-escaped regular expressions (remove unnecessary escaping of forward slashes and closing tags in %r{} literals).
  • Fix an ESLint vue/attributes-order warning by reordering attributes on a node-view-content element.

Why:

  • Improves editor UX by showing only the rendered diagram while keeping the source available for accessibility and copying.
  • Restores parity between Markdown-rendered diagrams and the in-editor preview (copy button present in both).
  • Stabilizes tests by removing excessive escaping that caused mismatches between expected regex and actual HTML outputs.
  • Removes an ESLint warning to satisfy CI lint rules.

Changes

  • app/assets/javascripts/content_editor/components/wrappers/code_block.vue

    • Hide the code source when showPreview is enabled for diagram languages (adds gl-sr-only class conditionally).
    • Wrap the preview in markdown-code-block js-markdown-code and add a data-diagram-source-id so existing copy-button behavior attaches.
    • Add a stable diagramSourceId id on the source element and place :id attribute before ref to satisfy ESLint attribute ordering.

  • Specs updated:

    • ee/spec/mailers/ee/emails/profile_spec.rb — remove unnecessary escaping of </a> in regex.
    • ee/spec/mailers/ee/emails/admin_notification_spec.rb — remove unnecessary escaping of </a> in regex.
    • ee/spec/support/shared_examples/services/group_saml/saml_provider/base_service_shared_examples.rb — replace https:\/\/ with https:// in regex.

References

  • Related issue: #578911
  • Relevant files and filters: lib/banzai/filter/kroki_filter.rb, lib/banzai/filter/plantuml_filter.rb, app/assets/javascripts/behaviors/copy_code.js

Screenshots

Before After
Editor preview showed both source and rendered diagram Editor preview shows only the rendered diagram; copy button available on hover

How to set up and validate locally

  1. Install JavaScript dependencies (if you want to run frontend lint locally):
yarn install --frozen-lockfile
  1. Run the ESLint check for the changed file(s):
# from repo root
node scripts/frontend/eslint.js --no-warn-ignored --no-error-on-unmatched-pattern --format gitlab app/assets/javascripts/content_editor/components/wrappers/code_block.vue
  1. Run the updated specs to verify behavior and regex changes:
bundle exec rspec ee/spec/mailers/ee/emails/profile_spec.rb
bundle exec rspec ee/spec/mailers/ee/emails/admin_notification_spec.rb
bundle exec rspec ee/spec/support/shared_examples/services/group_saml/saml_provider/base_service_shared_examples.rb
  1. Manual validation in the browser (WYSIWYG Content Editor):
  • Create or edit a document with a diagram code block (e.g. PlantUML or Kroki/nomnoml).
  • Toggle the diagram preview in the editor bubble menu. Confirm:
    • Only the rendered diagram is visible; the source code is not shown visually but remains accessible for screen readers.
    • The rendered diagram shows a copy-to-clipboard button on hover (same affordance as rendered Markdown).

MR acceptance checklist

  • Changes follow the MR acceptance checklist: performance, reliability, security, and maintainability considered.
  • Unit/feature tests added or updated where applicable (existing specs updated for escaping fixes).
  • Linting passes (yarn frontend lint or the command above).
  • Manual validation steps performed (editor preview and copy button behavior confirmed).
  • Documentation updated if necessary.

Related to #578911

Merge request reports