Refactor markdown attention render (#29833)

* Remove some deadcode
* Use 2-word name for CSS class names
* Remove "gt-*" rules for sanitizer

The UI doesn't change much.

diff --git a/modules/markup/markdown/ast.go b/modules/markup/markdown/ast.go
index 77ce5cb359b96295d93ef94fb9a94782fea286c0..624c35d94537149255e688f2cb30c4e53c34646d 100644 (file)
--- a/modules/markup/markdown/ast.go
+++ b/modules/markup/markdown/ast.go
@@ -175,13 +175,6 @@ func NewColorPreview(color []byte) *ColorPreview {
        }
 }
 
-// IsColorPreview returns true if the given node implements the ColorPreview interface,
-// otherwise false.
-func IsColorPreview(node ast.Node) bool {
-       _, ok := node.(*ColorPreview)
-       return ok
-}
-
 // Attention is an inline for an attention
 type Attention struct {
        ast.BaseInline

diff --git a/modules/markup/markdown/goldmark.go b/modules/markup/markdown/goldmark.go
index 67817ce27bf30c419aa27220d3ba1f29c2a8177d..bdb774824700a8b0db55e89c80636beef220263f 100644 (file)
--- a/modules/markup/markdown/goldmark.go
+++ b/modules/markup/markdown/goldmark.go
@@ -216,7 +216,7 @@ func (g *ASTTransformer) Transform(node *ast.Document, reader text.Reader, pc pa
                        attentionType := strings.ToLower(strings.TrimPrefix(string(secondTextNode.Segment.Value(reader.Source())), "!"))
 
                        // color the blockquote
-                       v.SetAttributeString("class", []byte("gt-py-3 attention attention-"+attentionType))
+                       v.SetAttributeString("class", []byte("attention-header attention-"+attentionType))
 
                        // create an emphasis to make it bold
                        attentionParagraph := ast.NewParagraph()
@@ -364,27 +364,21 @@ func (r *HTMLRenderer) renderCodeSpan(w util.BufWriter, source []byte, n ast.Nod
 // renderAttention renders a quote marked with i.e. "> **Note**" or "> **Warning**" with a corresponding svg
 func (r *HTMLRenderer) renderAttention(w util.BufWriter, source []byte, node ast.Node, entering bool) (ast.WalkStatus, error) {
        if entering {
-               _, _ = w.WriteString(`<span class="gt-mr-2 gt-vm attention-`)
                n := node.(*Attention)
-               _, _ = w.WriteString(strings.ToLower(n.AttentionType))
-               _, _ = w.WriteString(`">`)
-
-               var octiconType string
+               var octiconName string
                switch n.AttentionType {
-               case "note":
-                       octiconType = "info"
                case "tip":
-                       octiconType = "light-bulb"
+                       octiconName = "light-bulb"
                case "important":
-                       octiconType = "report"
+                       octiconName = "report"
                case "warning":
-                       octiconType = "alert"
+                       octiconName = "alert"
                case "caution":
-                       octiconType = "stop"
+                       octiconName = "stop"
+               default: // including "note"
+                       octiconName = "info"
                }
-               _, _ = w.WriteString(string(svg.RenderHTML("octicon-" + octiconType)))
-       } else {
-               _, _ = w.WriteString("</span>\n")
+               _, _ = w.WriteString(string(svg.RenderHTML("octicon-"+octiconName, 16, "attention-icon attention-"+n.AttentionType)))
        }
        return ast.WalkContinue, nil
 }

diff --git a/modules/markup/sanitizer.go b/modules/markup/sanitizer.go
index ffc33c3b8e5b953fc79eabbd7a60e36bbe21a620..79a2ba0dfb8d2caeae54e4a0607ca2503cb9a987 100644 (file)
--- a/modules/markup/sanitizer.go
+++ b/modules/markup/sanitizer.go
@@ -64,10 +64,9 @@ func createDefaultPolicy() *bluemonday.Policy {
        policy.AllowAttrs("class").Matching(regexp.MustCompile(`^color-preview$`)).OnElements("span")
 
        // For attention
-       policy.AllowAttrs("class").Matching(regexp.MustCompile(`^gt-py-3 attention attention-\w+$`)).OnElements("blockquote")
+       policy.AllowAttrs("class").Matching(regexp.MustCompile(`^attention-header attention-\w+$`)).OnElements("blockquote")
        policy.AllowAttrs("class").Matching(regexp.MustCompile(`^attention-\w+$`)).OnElements("strong")
-       policy.AllowAttrs("class").Matching(regexp.MustCompile(`^gt-mr-2 gt-vm attention-\w+$`)).OnElements("span", "strong")
-       policy.AllowAttrs("class").Matching(regexp.MustCompile(`^svg octicon-(\w|-)+$`)).OnElements("svg")
+       policy.AllowAttrs("class").Matching(regexp.MustCompile(`^attention-icon attention-\w+ svg octicon-[\w-]+$`)).OnElements("svg")
        policy.AllowAttrs("viewBox", "width", "height", "aria-hidden").OnElements("svg")
        policy.AllowAttrs("fill-rule", "d").OnElements("path")
 
@@ -105,18 +104,12 @@ func createDefaultPolicy() *bluemonday.Policy {
        // Allow icons
        policy.AllowAttrs("class").Matching(regexp.MustCompile(`^icon(\s+[\p{L}\p{N}_-]+)+$`)).OnElements("i")
 
-       // Allow unlabelled labels
-       policy.AllowNoAttrs().OnElements("label")
-
        // Allow classes for emojis
        policy.AllowAttrs("class").Matching(regexp.MustCompile(`emoji`)).OnElements("img")
 
        // Allow icons, emojis, chroma syntax and keyword markup on span
        policy.AllowAttrs("class").Matching(regexp.MustCompile(`^((icon(\s+[\p{L}\p{N}_-]+)+)|(emoji)|(language-math display)|(language-math inline))$|^([a-z][a-z0-9]{0,2})$|^` + keywordClass + `$`)).OnElements("span")
 
-       // Allow 'style' attribute on text elements.
-       policy.AllowAttrs("style").OnElements("span", "p")
-
        // Allow 'color' and 'background-color' properties for the style attribute on text elements.
        policy.AllowStyles("color", "background-color").OnElements("span", "p")
 
@@ -144,7 +137,7 @@ func createDefaultPolicy() *bluemonday.Policy {
 
        generalSafeElements := []string{
                "h1", "h2", "h3", "h4", "h5", "h6", "h7", "h8", "br", "b", "i", "strong", "em", "a", "pre", "code", "img", "tt",
-               "div", "ins", "del", "sup", "sub", "p", "ol", "ul", "table", "thead", "tbody", "tfoot", "blockquote",
+               "div", "ins", "del", "sup", "sub", "p", "ol", "ul", "table", "thead", "tbody", "tfoot", "blockquote", "label",
                "dl", "dt", "dd", "kbd", "q", "samp", "var", "hr", "ruby", "rt", "rp", "li", "tr", "td", "th", "s", "strike", "summary",
                "details", "caption", "figure", "figcaption",
                "abbr", "bdo", "cite", "dfn", "mark", "small", "span", "time", "video", "wbr",

diff --git a/web_src/css/base.css b/web_src/css/base.css
index 2c055b74399ed896838e940aac6510f87814e02e..d995f5103802bd3c6ba235c574955e6a29d60317 100644 (file)
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -1279,42 +1279,47 @@ input:-webkit-autofill:active,
   border-radius: var(--border-radius);
 }
 
-.attention {
+.attention-header {
+  padding: 0.5em 0.75em !important;
   color: var(--color-text) !important;
 }
 
+.attention-icon {
+  margin: 2px 6px 0 0;
+}
+
 blockquote.attention-note {
   border-left-color: var(--color-blue-dark-1);
 }
-strong.attention-note, span.attention-note {
+strong.attention-note, svg.attention-note {
   color: var(--color-blue-dark-1);
 }
 
 blockquote.attention-tip {
   border-left-color: var(--color-success-text);
 }
-strong.attention-tip, span.attention-tip {
+strong.attention-tip, svg.attention-tip {
   color: var(--color-success-text);
 }
 
 blockquote.attention-important {
   border-left-color: var(--color-violet-dark-1);
 }
-strong.attention-important, span.attention-important {
+strong.attention-important, svg.attention-important {
   color: var(--color-violet-dark-1);
 }
 
 blockquote.attention-warning {
   border-left-color: var(--color-warning-text);
 }
-strong.attention-warning, span.attention-warning {
+strong.attention-warning, svg.attention-warning {
   color: var(--color-warning-text);
 }
 
 blockquote.attention-caution {
   border-left-color: var(--color-red-dark-1);
 }
-strong.attention-caution, span.attention-caution {
+strong.attention-caution, svg.attention-caution {
   color: var(--color-red-dark-1);
 }