fix: fold only outer reading quotes

This commit is contained in:
Peter Li 2026-07-17 08:18:16 +08:00
parent 7cdd52ad79
commit 7adabb313c
5 changed files with 16 additions and 10 deletions

View file

@ -43,11 +43,11 @@ body {
color: var(--blockquote-color);
}
.markdown-rendered blockquote::before {
.markdown-rendered blockquote:not(blockquote blockquote)::before {
@include quote-fold-cutout;
}
.markdown-rendered blockquote::after {
.markdown-rendered blockquote:not(blockquote blockquote)::after {
@include quote-fold-paper;
}

View file

@ -24,8 +24,8 @@ const allowedSelectors = new Set([
":where(.markdown-rendered pre:not(.frontmatter))",
":where(.markdown-source-view.mod-cm6 .HyperMD-codeblock)",
".markdown-rendered blockquote",
".markdown-rendered blockquote::before",
".markdown-rendered blockquote::after",
".markdown-rendered blockquote:not(blockquote blockquote)::before",
".markdown-rendered blockquote:not(blockquote blockquote)::after",
".markdown-source-view.mod-cm6.is-live-preview .HyperMD-quote-1:not(.HyperMD-quote + .HyperMD-quote)",
".markdown-source-view.mod-cm6.is-live-preview .HyperMD-quote-1:not(.HyperMD-quote + .HyperMD-quote)::before",
".markdown-source-view.mod-cm6.is-live-preview .HyperMD-quote-1:not(.HyperMD-quote + .HyperMD-quote)::after",

View file

@ -52,6 +52,8 @@ test("defines quote and horizontal rule variables", () => {
});
const readingQuoteSelector = ".markdown-rendered blockquote";
const readingFoldSelector =
".markdown-rendered blockquote:not(blockquote blockquote)";
const livePreviewQuoteSelector =
".markdown-source-view.mod-cm6.is-live-preview .HyperMD-quote-1:not(.HyperMD-quote + .HyperMD-quote)";
const sourceQuoteSelector =
@ -84,7 +86,7 @@ test("styles reading quotes as bordered paper cards", () => {
test("renders a folded corner on reading quotes", () => {
assert.deepEqual(
Object.fromEntries(declarationsFor(css, `${readingQuoteSelector}::before`)),
Object.fromEntries(declarationsFor(css, `${readingFoldSelector}::before`)),
{
...foldBase,
background: "var(--background-primary)",
@ -92,13 +94,17 @@ test("renders a folded corner on reading quotes", () => {
},
);
assert.deepEqual(
Object.fromEntries(declarationsFor(css, `${readingQuoteSelector}::after`)),
Object.fromEntries(declarationsFor(css, `${readingFoldSelector}::after`)),
{
...foldBase,
background: "var(--aera-quote-fold)",
"clip-path": "polygon(100% 0, 100% 100%, 0 100%)",
},
);
const selectors = selectorsFor(css);
assert.equal(selectors.has(`${readingQuoteSelector}::before`), false);
assert.equal(selectors.has(`${readingQuoteSelector}::after`), false);
});
test("adds one folded corner to the first live preview quote line", () => {

View file

@ -14,8 +14,8 @@ const allowedThemeSelectors = new Set([
":where(.markdown-rendered pre:not(.frontmatter))",
":where(.markdown-source-view.mod-cm6 .HyperMD-codeblock)",
".markdown-rendered blockquote",
".markdown-rendered blockquote::before",
".markdown-rendered blockquote::after",
".markdown-rendered blockquote:not(blockquote blockquote)::before",
".markdown-rendered blockquote:not(blockquote blockquote)::after",
".markdown-source-view.mod-cm6.is-live-preview .HyperMD-quote-1:not(.HyperMD-quote + .HyperMD-quote)",
".markdown-source-view.mod-cm6.is-live-preview .HyperMD-quote-1:not(.HyperMD-quote + .HyperMD-quote)::before",
".markdown-source-view.mod-cm6.is-live-preview .HyperMD-quote-1:not(.HyperMD-quote + .HyperMD-quote)::after",

View file

@ -179,7 +179,7 @@ body {
color: var(--blockquote-color);
}
.markdown-rendered blockquote::before {
.markdown-rendered blockquote:not(blockquote blockquote)::before {
content: "";
position: absolute;
inset-block-start: -1px;
@ -191,7 +191,7 @@ body {
clip-path: polygon(0 0, 100% 0, 0 100%);
}
.markdown-rendered blockquote::after {
.markdown-rendered blockquote:not(blockquote blockquote)::after {
content: "";
position: absolute;
inset-block-start: -1px;