Adds icons to commonmark alerts (#42603).

git-svn-id: https://svn.redmine.org/redmine/trunk@23796 e93f8b46-1217-0410-a6f0-8f06a7374b81
2025-10-17 17:01:01 +00:00 · 2025-05-24 21:29:21 +00:00 · 2025-05-24 21:29:21 +00:00 · 3090bf6906
commit 3090bf6906
parent c3460f5936
6 changed files with 96 additions and 2 deletions
--- a/app/assets/images/icons.svg
+++ b/app/assets/images/icons.svg
@ -11,6 +11,11 @@
      <path d="M9 12h6"/>
      <path d="M12 9v6"/>
    </symbol>
+    <symbol viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" id="icon--alert-circle">
+      <path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"/>
+      <path d="M12 8v4"/>
+      <path d="M12 16h.01"/>
+    </symbol>
    <symbol viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" id="icon--angle-down">
      <path d="M6 9l6 6l6 -6"/>
    </symbol>
@ -72,6 +77,11 @@
    <symbol viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" id="icon--bookmarked">
      <path d="M18 7v14l-6 -4l-6 4v-14a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4z"/>
    </symbol>
+    <symbol viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" id="icon--bulb">
+      <path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"/>
+      <path d="M9 16a5 5 0 1 1 6 0a3.5 3.5 0 0 0 -1 3a2 2 0 0 1 -4 0a3.5 3.5 0 0 0 -1 -3"/>
+      <path d="M9.7 17l4.6 0"/>
+    </symbol>
    <symbol viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" id="icon--bullet-end">
      <path d="M12 21a9 9 0 1 0 0 -18a9 9 0 0 0 0 18"/>
      <path d="M8 12l4 4"/>
@ -294,6 +304,11 @@
      <path d="M8 13h6"/>
      <path d="M18 4a3 3 0 0 1 3 3v8a3 3 0 0 1 -3 3h-5l-5 3v-3h-2a3 3 0 0 1 -3 -3v-8a3 3 0 0 1 3 -3h12z"/>
    </symbol>
+    <symbol viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" id="icon--message-report">
+      <path d="M18 4a3 3 0 0 1 3 3v8a3 3 0 0 1 -3 3h-5l-5 3v-3h-2a3 3 0 0 1 -3 -3v-8a3 3 0 0 1 3 -3h12z"/>
+      <path d="M12 8v3"/>
+      <path d="M12 14v.01"/>
+    </symbol>
    <symbol viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" id="icon--move">
      <path d="M15 14l4 -4l-4 -4"/>
      <path d="M19 10h-11a4 4 0 1 0 0 8h1"/>
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@ -1303,18 +1303,23 @@ div.flash.warning svg.icon-svg, .conflict svg.icon-svg {

 .markdown-alert-tip { border-color: #5db651; }
 .markdown-alert-tip .markdown-alert-title { color: #005f00; }
+.markdown-alert-tip .markdown-alert-title svg {stroke: #005f00; }

 .markdown-alert-important { border-color: #800080; }
 .markdown-alert-important .markdown-alert-title { color: #4b006e; }
+.markdown-alert-important .markdown-alert-title svg { stroke: #4b006e; }

 .markdown-alert-caution { border-color: #c22; }
 .markdown-alert-caution .markdown-alert-title { color: #880000; }
+.markdown-alert-caution .markdown-alert-title svg { stroke: #880000; }

 .markdown-alert-warning { border-color: #e4bc4b; }
 .markdown-alert-warning .markdown-alert-title { color: #a7760c; }
+.markdown-alert-warning .markdown-alert-title svg { stroke: #a7760c; }

 .markdown-alert-note { border-color: #169; }
 .markdown-alert-note .markdown-alert-title { color: #1e40af; }
+.markdown-alert-note .markdown-alert-title svg { stroke: #1e40af; }

 /***** Ajax indicator ******/
 #ajax-indicator {
--- a/config/icon_source.yml
+++ b/config/icon_source.yml
@ -227,3 +227,9 @@
 - name: thumb-up-filled
  svg: thumb-up
  style: filled
+- name: alert-circle
+  svg: alert-circle
+- name: bulb
+  svg: bulb
+- name: message-report
+  svg: message-report
--- a/lib/redmine/wiki_formatting/common_mark/alerts_icons_filter.rb
+++ b/lib/redmine/wiki_formatting/common_mark/alerts_icons_filter.rb
@ -0,0 +1,63 @@
+# frozen_string_literal: true
+
+# Redmine - project management software
+# Copyright (C) 2006-  Jean-Philippe Lang
+#
+# This program is free software; you can redistribute it and/or
+# modify it under the terms of the GNU General Public License
+# as published by the Free Software Foundation; either version 2
+# of the License, or (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU General Public License for more details.
+#
+# You should have received a copy of the GNU General Public License
+# along with this program; if not, write to the Free Software
+# Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+
+module Redmine
+  module WikiFormatting
+    module CommonMark
+      # Defines the mapping from alert type (from CSS class) to SVG icon name.
+      # These icon names must correspond to IDs in your SVG sprite sheet (e.g., icons.svg).
+      ALERT_TYPE_TO_ICON_NAME = {
+        'note' => 'help',
+        'tip' => 'bulb',
+        'warning' => 'warning',
+        'caution' => 'alert-circle',
+        'important' => 'message-report',
+      }.freeze
+
+      class AlertsIconsFilter < HTML::Pipeline::Filter
+        def call
+          doc.search("p.markdown-alert-title").each do |node|
+            parent_node = node.parent
+            parent_class_attr = parent_node['class'] # e.g., "markdown-alert markdown-alert-note"
+            next unless parent_class_attr
+
+            # Extract the specific alert type (e.g., "note", "tip", "warning")
+            # from the parent div's classes.
+            match_data = parent_class_attr.match(/markdown-alert-(\w+)/)
+            next unless match_data && match_data[1] # Ensure a type is found
+
+            alert_type = match_data[1]
+
+            # Get the corresponding icon name from our map.
+            icon_name = ALERT_TYPE_TO_ICON_NAME[alert_type]
+            next unless icon_name # Skip if no specific icon is defined for this alert type
+
+            icon_html = ApplicationController.helpers.sprite_icon(icon_name, node.text)
+
+            if icon_html
+              # Replace the existing text node with the icon HTML and label (text).
+              node.children.first.replace(icon_html)
+            end
+          end
+          doc
+        end
+      end
+    end
+  end
+end
--- a/lib/redmine/wiki_formatting/common_mark/formatter.rb
+++ b/lib/redmine/wiki_formatting/common_mark/formatter.rb
@ -58,7 +58,8 @@ module Redmine
        SanitizationFilter,
        SyntaxHighlightFilter,
        FixupAutoLinksFilter,
-        ExternalLinksFilter
+        ExternalLinksFilter,
+        AlertsIconsFilter
      ], PIPELINE_CONFIG

      class Formatter
--- a/test/unit/lib/redmine/wiki_formatting/common_mark/formatter_test.rb
+++ b/test/unit/lib/redmine/wiki_formatting/common_mark/formatter_test.rb
@ -319,7 +319,11 @@ class Redmine::WikiFormatting::CommonMark::FormatterTest < ActionView::TestCase

      html = to_html(text)
      %w[note tip warning caution important].each do |alert|
-        assert_include "<div class=\"markdown-alert markdown-alert-note\">\n<p class=\"markdown-alert-title\">Note</p>\n<p>This is a note.</p>\n</div>", html
+        icon = Redmine::WikiFormatting::CommonMark::ALERT_TYPE_TO_ICON_NAME[alert]
+        # rubocop:disable Layout/LineLength
+        expected = %r{<div class="markdown-alert markdown-alert-#{alert}">\n<p class="markdown-alert-title"><svg class="s18 icon-svg" aria-hidden="true"><use href="/assets/icons-\w+.svg\#icon--#{icon}"></use></svg><span class="icon-label">#{alert.capitalize}</span></p>\n<p>This is a #{alert}.</p>\n</div>}
+        # rubocop:enable Layout/LineLength
+        assert_match expected, html
      end
    end