Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(docs): link first child of every description term in post-processing #9862

Merged
merged 6 commits into from
Oct 30, 2023
Merged

fix(docs): link first child of every description term in post-processing #9862

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
6b1536c
fix(m2h): make `<dt>` clickable in postprocessing
KartikSoneji Oct 20, 2023
24d9bb7
test(m2h): update test output
KartikSoneji Oct 20, 2023
367fec9
Merge branch 'main' into fix/dont-modify-md-engine
caugner Oct 27, 2023
bcf3f19
fix(m2h): only hyperlink first `<code>` child
KartikSoneji Oct 27, 2023
342005b
fix(docs): add anchor link on first child if it has no link
caugner Oct 30, 2023
b44e2ff
test(markdown): update test expectation
caugner Oct 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 5 additions & 9 deletions kumascript/src/api/util.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -224,15 +224,11 @@ export class HTMLTool {
$element.attr("id", id);

if (isDt) {
// Remove empty anchor links.
// This happens if the term already links to a page.
$element.find("a[data-link-to-id = true]:empty").remove();

// Link remaining anchor links to the term's ID.
$element
.find("a[data-link-to-id = true]")
.attr("href", "#" + id)
.removeAttr("data-link-to-id");
// Link the first element child to the ID.
const firstContent = $element.contents().first();
if (!firstContent.is("a") && firstContent.find("a").length === 0) {
$(firstContent).wrap(`<a href="#${encodeURIComponent(id)}"></a>`);
}
}
});
return this;
Expand Down
26 changes: 12 additions & 14 deletions markdown/m2h/handlers/dl.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,21 +38,19 @@ export function asDefinitionList(h, node) {
DEFINITION_PREFIX.length
);

const [firstDtChild, ...dtChildren] = all(h, {
...node,
children:
terms.length == 1 && terms[0].type == "paragraph"
? terms[0].children
: terms,
});
if (firstDtChild) {
dtChildren.unshift(
h(node, "a", { "data-link-to-id": "true" }, [firstDtChild])
);
}

return [
h(node, "dt", {}, dtChildren),
h(
node,
"dt",
{},
all(h, {
...node,
children:
terms.length == 1 && terms[0].type == "paragraph"
? terms[0].children
: terms,
})
),
h(
node,
"dd",
Expand Down
12 changes: 6 additions & 6 deletions testing/content/files/en-us/markdown/tool/m2h/expected.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,23 +11,23 @@ <h2>Hello</h2>
<h2>Definition lists</h2>
<p>We have our own syntax for <code>&#x3C;dl></code>.</p>
<dl>
<dt><a data-link-to-id="true">a term</a></dt>
<dt>a term</dt>
<dd>
<p>a definition</p>
</dd>
<dt><a data-link-to-id="true">another term</a></dt>
<dt>another term</dt>
<dd>
<p>another definition</p>
<p>Definitions can include block elements:</p>
<pre class="brush: js">const suchAsCodeBlocks = true;
</pre>
<p>And of course <code>&#x3C;dl></code> elements can be nested inside <code>&#x3C;dd></code>:</p>
<dl>
<dt><a data-link-to-id="true">a nested term</a></dt>
<dt>a nested term</dt>
<dd>
<p>a definition</p>
</dd>
<dt><a data-link-to-id="true">another nested term</a></dt>
<dt>another nested term</dt>
<dd>
<p>another nested definition</p>
</dd>
Expand Down Expand Up @@ -62,11 +62,11 @@ <h2>Callouts, notes, and warnings</h2>
</ul>
<p>...and even definition lists:</p>
<dl>
<dt><a data-link-to-id="true">with terms</a></dt>
<dt>with terms</dt>
<dd>
<p>that have definitions</p>
</dd>
<dt><a data-link-to-id="true">and more terms</a></dt>
<dt>and more terms</dt>
<dd>
<p>and as usual, the definitions can include block elements:</p>
<pre class="brush: css">.likeCodeBlocks {
Expand Down
2 changes: 1 addition & 1 deletion testing/tests/index.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1559,7 +1559,7 @@ test("basic markdown rendering", () => {
expect($("article em")).toHaveLength(1);
expect($("article ul li")).toHaveLength(6);
expect($('article a[href^="/"]')).toHaveLength(2);
expect($('article a[href^="#"]')).toHaveLength(5);
expect($('article a[href^="#"]')).toHaveLength(6);
expect($("article pre")).toHaveLength(4);
expect($("article pre.notranslate")).toHaveLength(4);
expect($("article pre.css").hasClass("brush:")).toBe(true);
Expand Down