Merge pull request '[port] gitea#29833: Refactor markdown attention render' (#2747) from algernon/forgejo:gitea/port/29833/refactor into forgejo

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/2747

modules/markup/markdown/callout/github.go

@@ -68,7 +68,7 @@ func (g *GitHubCalloutTransformer) Transform(node *ast.Document, reader text.Rea
 			}
 
 			// 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()
@@ -104,27 +104,24 @@ func (r *GitHubCalloutHTMLRenderer) RegisterFuncs(reg renderer.NodeRendererFuncR
 // renderAttention renders a quote marked with i.e. "> **Note**" or "> **Warning**" with a corresponding svg
 func (r *GitHubCalloutHTMLRenderer) 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"
+			octiconName = "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:
+			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
 }

modules/markup/markdown/callout/github_legacy.go

@@ -49,7 +49,7 @@ func (g *GitHubLegacyCalloutTransformer) Transform(node *ast.Document, reader te
 			calloutNode.SetAttributeString("class", []byte("attention-"+calloutType))
 
 			// color the blockquote
-			v.SetAttributeString("class", []byte("gt-py-3 attention attention-"+calloutType))
+			v.SetAttributeString("class", []byte("attention-header attention-"+calloutType))
 
 			// Prepend callout icon before the callout node itself
 			firstParagraph.InsertBefore(firstParagraph, calloutNode, NewAttention(calloutType))

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")
 

tests/integration/markup_test.go

@@ -25,9 +25,9 @@ func TestRenderAlertBlocks(t *testing.T) {
 	assertAlertBlock := func(t *testing.T, input, alertType, alertIcon string) {
 		t.Helper()
 
-		blockquoteAttr := fmt.Sprintf(`<blockquote class="gt-py-3 attention attention-%s"`, strings.ToLower(alertType))
+		blockquoteAttr := fmt.Sprintf(`<blockquote class="attention-header attention-%s"`, strings.ToLower(alertType))
 		classAttr := fmt.Sprintf(`class="attention-%s"`, strings.ToLower(alertType))
-		iconAttr := fmt.Sprintf(`class="svg octicon-%s"`, alertIcon)
+		iconAttr := fmt.Sprintf(`svg octicon-%s`, alertIcon)
 
 		req := NewRequestWithJSON(t, "POST", "/api/v1/markdown", &api.MarkdownOption{
 			Text: input,

web_src/css/base.css

@@ -1225,42 +1225,51 @@ input:-webkit-autofill:active,
   border-radius: var(--border-radius);
 }
 
-.attention {
+.attention-header {
+  padding: 0.5em 0.75em !important;
   color: var(--color-text) !important;
 }
 
+.attention-header :first-child {
+  display: flex;
+}
+
+.attention-icon {
+  margin: auto 0.5em auto 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);
 }