From 66902d89e567ab1ae6dfb828636999c61ff0149e Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Sat, 16 Mar 2024 19:34:38 +0800 Subject: [PATCH] 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. --- modules/markup/markdown/ast.go | 7 ------- modules/markup/markdown/goldmark.go | 24 +++++++++--------------- modules/markup/sanitizer.go | 13 +++---------- web_src/css/base.css | 17 +++++++++++------ 4 files changed, 23 insertions(+), 38 deletions(-) diff --git a/modules/markup/markdown/ast.go b/modules/markup/markdown/ast.go index 77ce5cb359b..624c35d9453 100644 --- 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 67817ce27bf..bdb77482470 100644 --- 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(``) - - 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("\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 ffc33c3b8e5..79a2ba0dfb8 100644 --- 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 2c055b74399..d995f510380 100644 --- 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); }