[BUG] Center icon and callout text
- Wrap the icon and callout into a seperate `<p>` which has `display: flex; align-items: center` set. To center the icon with the callout text. - Resolves #3006 (cherry picked from commit 6ffae461d43b649ebdc247f63bfd5a9b63563c04)
This commit is contained in:
parent
bc873f2e83
commit
06e72e22d5
4 changed files with 16 additions and 2 deletions
|
@ -72,6 +72,7 @@ func (g *GitHubCalloutTransformer) Transform(node *ast.Document, reader text.Rea
|
||||||
|
|
||||||
// create an emphasis to make it bold
|
// create an emphasis to make it bold
|
||||||
attentionParagraph := ast.NewParagraph()
|
attentionParagraph := ast.NewParagraph()
|
||||||
|
attentionParagraph.SetAttributeString("class", []byte("attention-title"))
|
||||||
emphasis := ast.NewEmphasis(2)
|
emphasis := ast.NewEmphasis(2)
|
||||||
emphasis.SetAttributeString("class", []byte("attention-"+attentionType))
|
emphasis.SetAttributeString("class", []byte("attention-"+attentionType))
|
||||||
firstParagraph.InsertBefore(firstParagraph, firstTextNode, emphasis)
|
firstParagraph.InsertBefore(firstParagraph, firstTextNode, emphasis)
|
||||||
|
|
|
@ -51,8 +51,15 @@ func (g *GitHubLegacyCalloutTransformer) Transform(node *ast.Document, reader te
|
||||||
// color the blockquote
|
// color the blockquote
|
||||||
v.SetAttributeString("class", []byte("attention-header attention-"+calloutType))
|
v.SetAttributeString("class", []byte("attention-header attention-"+calloutType))
|
||||||
|
|
||||||
// Prepend callout icon before the callout node itself
|
// Create new parargaph.
|
||||||
firstParagraph.InsertBefore(firstParagraph, calloutNode, NewAttention(calloutType))
|
attentionParagraph := ast.NewParagraph()
|
||||||
|
attentionParagraph.SetAttributeString("class", []byte("attention-title"))
|
||||||
|
|
||||||
|
// Move the callout node to the paragraph and insert the paragraph.
|
||||||
|
attentionParagraph.AppendChild(attentionParagraph, NewAttention(calloutType))
|
||||||
|
attentionParagraph.AppendChild(attentionParagraph, calloutNode)
|
||||||
|
firstParagraph.Parent().InsertBefore(firstParagraph.Parent(), firstParagraph, attentionParagraph)
|
||||||
|
firstParagraph.RemoveChild(firstParagraph, calloutNode)
|
||||||
}
|
}
|
||||||
|
|
||||||
return ast.WalkContinue, nil
|
return ast.WalkContinue, nil
|
||||||
|
|
|
@ -64,6 +64,7 @@ func createDefaultPolicy() *bluemonday.Policy {
|
||||||
policy.AllowAttrs("class").Matching(regexp.MustCompile(`^color-preview$`)).OnElements("span")
|
policy.AllowAttrs("class").Matching(regexp.MustCompile(`^color-preview$`)).OnElements("span")
|
||||||
|
|
||||||
// For attention
|
// For attention
|
||||||
|
policy.AllowAttrs("class").Matching(regexp.MustCompile(`^attention-title$`)).OnElements("p")
|
||||||
policy.AllowAttrs("class").Matching(regexp.MustCompile(`^attention-header 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(`^attention-\w+$`)).OnElements("strong")
|
||||||
policy.AllowAttrs("class").Matching(regexp.MustCompile(`^attention-icon attention-\w+ svg octicon-[\w-]+$`)).OnElements("svg")
|
policy.AllowAttrs("class").Matching(regexp.MustCompile(`^attention-icon attention-\w+ svg octicon-[\w-]+$`)).OnElements("svg")
|
||||||
|
|
|
@ -1127,6 +1127,11 @@ input:-webkit-autofill:active,
|
||||||
margin: auto 0.5em auto 0;
|
margin: auto 0.5em auto 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.attention-title {
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
blockquote.attention-note {
|
blockquote.attention-note {
|
||||||
border-left-color: var(--color-blue-dark-1);
|
border-left-color: var(--color-blue-dark-1);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue