quirk-ui 0.1.94 → 0.1.95
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index66.css +1 -1
- package/dist/index66.css.d.ts +6 -28
- package/dist/main.d.ts +1 -1
- package/dist/next/blocks/MarkdownBlock/MarkdownBlock.test.cjs +3 -10
- package/dist/next/blocks/MarkdownBlock/MarkdownBlock.test.mjs +119 -329
- package/dist/next/blocks/MarkdownBlock/index.cjs +52 -25
- package/dist/next/blocks/MarkdownBlock/index.mjs +7118 -6171
- package/dist/next.d.ts +1 -1
- package/package.json +3 -1
package/dist/index66.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._markdownBlock_udiov_8{width:100%;padding-top:var(--spacing-xl);padding-bottom:var(--spacing-xl)}._maxWidthSm_udiov_16{max-width:640px}._maxWidthMd_udiov_19{max-width:800px}._maxWidthLg_udiov_22{max-width:1000px}._maxWidthFull_udiov_25{max-width:100%}._container_udiov_4{width:100%;margin:0 auto;padding-left:var(--spacing-md);padding-right:var(--spacing-md)}._container_udiov_4>*+*{margin-top:var(--spacing-lg)}._container_udiov_4 h1{font-size:var(--font-size-4xl, 2.25rem);font-weight:var(--font-weight-bold);color:var(--color-text-primary);line-height:var(--line-height-tight, 1.2);padding-bottom:var(--spacing-md);border-bottom:2px solid var(--color-border)}._container_udiov_4 h2{font-size:var(--font-size-3xl, 1.75rem);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);line-height:var(--line-height-tight, 1.25);margin-top:var(--spacing-2xl, 3rem);padding-bottom:var(--spacing-sm);border-bottom:1px solid var(--color-border)}._container_udiov_4 h3{font-size:var(--font-size-2xl, 1.375rem);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);margin-top:var(--spacing-xl)}._container_udiov_4 h4{font-size:var(--font-size-xl, 1.125rem);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);margin-top:var(--spacing-lg)}._container_udiov_4 p{font-size:var(--font-size-md);line-height:var(--line-height-relaxed, 1.75);color:var(--color-text-secondary)}._container_udiov_4 ul,._container_udiov_4 ol{padding-left:var(--spacing-xl);display:flex;flex-direction:column;gap:var(--spacing-xs)}._container_udiov_4 ul{list-style:disc}._container_udiov_4 ol{list-style:decimal}._container_udiov_4 li{font-size:var(--font-size-md);line-height:var(--line-height-relaxed, 1.75);color:var(--color-text-secondary)}._container_udiov_4 :not(pre)>code{font-family:var(--font-family-mono, "Fira Code", "Courier New", monospace);font-size:.875em;background-color:var(--color-secondary-10);color:var(--color-primary-100);padding:.1em .4em;border-radius:var(--radius-sm)}._container_udiov_4 pre{border-radius:var(--radius-md);border:1px solid var(--color-border);overflow:hidden;background-color:var(--color-secondary-10)}._container_udiov_4 pre code{display:block;padding:var(--spacing-lg);overflow-x:auto;-webkit-overflow-scrolling:touch;font-family:var( --font-family-mono, "Fira Code", "Courier New", monospace );font-size:var(--font-size-sm);line-height:1.6;color:var(--color-text-primary);white-space:pre;background:none;border:none;border-radius:0;padding-top:var(--spacing-lg)}._container_udiov_4 blockquote{border-left:4px solid var(--color-primary-100);padding:var(--spacing-md) var(--spacing-lg);background-color:var(--color-primary-10);border-radius:0 var(--radius-md) var(--radius-md) 0;font-style:italic}._container_udiov_4 blockquote p{margin:0;color:var(--color-text-secondary)}._container_udiov_4 table{width:100%;border-collapse:collapse;font-size:var(--font-size-sm);border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden;display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}._container_udiov_4 thead{background-color:var(--color-secondary-10)}._container_udiov_4 th{padding:var(--spacing-sm) var(--spacing-md);text-align:left;font-weight:var(--font-weight-semibold);color:var(--color-text-primary);border-bottom:2px solid var(--color-border);white-space:nowrap}._container_udiov_4 td{padding:var(--spacing-sm) var(--spacing-md);color:var(--color-text-secondary);border-bottom:1px solid var(--color-border);vertical-align:top}._container_udiov_4 tr:last-child td{border-bottom:none}._container_udiov_4 hr{border:none;border-top:1px solid var(--color-border);margin:var(--spacing-xl) 0}._container_udiov_4 a{color:var(--color-primary-100);text-decoration:underline;text-underline-offset:2px;transition:color .2s ease}._container_udiov_4 a:hover{color:var(--color-primary-75)}._container_udiov_4 img{max-width:100%;height:auto;border-radius:var(--radius-md);border:1px solid var(--color-border)}._container_udiov_4 input[type=checkbox]{margin-right:var(--spacing-xs);accent-color:var(--color-primary-100)}
|
package/dist/index66.css.d.ts
CHANGED
|
@@ -1,32 +1,10 @@
|
|
|
1
1
|
declare const styles: {
|
|
2
|
-
readonly "
|
|
3
|
-
readonly "
|
|
4
|
-
readonly "
|
|
5
|
-
readonly "
|
|
6
|
-
readonly "
|
|
7
|
-
readonly "
|
|
8
|
-
readonly "_h1_1ls6v_41": string;
|
|
9
|
-
readonly "_h2_1ls6v_51": string;
|
|
10
|
-
readonly "_h3_1ls6v_62": string;
|
|
11
|
-
readonly "_h4_1ls6v_70": string;
|
|
12
|
-
readonly "_hr_1ls6v_215": string;
|
|
13
|
-
readonly "_img_1ls6v_236": string;
|
|
14
|
-
readonly "_inlineCode_1ls6v_112": string;
|
|
15
|
-
readonly "_li_1ls6v_104": string;
|
|
16
|
-
readonly "_markdownBlock_1ls6v_6": string;
|
|
17
|
-
readonly "_maxWidthFull_1ls6v_35": string;
|
|
18
|
-
readonly "_maxWidthLg_1ls6v_32": string;
|
|
19
|
-
readonly "_maxWidthMd_1ls6v_29": string;
|
|
20
|
-
readonly "_maxWidthSm_1ls6v_26": string;
|
|
21
|
-
readonly "_ol_1ls6v_89": string;
|
|
22
|
-
readonly "_p_1ls6v_80": string;
|
|
23
|
-
readonly "_pre_1ls6v_143": string;
|
|
24
|
-
readonly "_tableWrapper_1ls6v_176": string;
|
|
25
|
-
readonly "_table_1ls6v_176": string;
|
|
26
|
-
readonly "_td_1ls6v_202": string;
|
|
27
|
-
readonly "_th_1ls6v_189": string;
|
|
28
|
-
readonly "_thead_1ls6v_189": string;
|
|
29
|
-
readonly "_ul_1ls6v_88": string;
|
|
2
|
+
readonly "_container_udiov_4": string;
|
|
3
|
+
readonly "_markdownBlock_udiov_8": string;
|
|
4
|
+
readonly "_maxWidthFull_udiov_25": string;
|
|
5
|
+
readonly "_maxWidthLg_udiov_22": string;
|
|
6
|
+
readonly "_maxWidthMd_udiov_19": string;
|
|
7
|
+
readonly "_maxWidthSm_udiov_16": string;
|
|
30
8
|
};
|
|
31
9
|
export = styles;
|
|
32
10
|
|
package/dist/main.d.ts
CHANGED
|
@@ -1197,7 +1197,7 @@ declare const marginClassMap: {
|
|
|
1197
1197
|
readonly xl: string;
|
|
1198
1198
|
};
|
|
1199
1199
|
|
|
1200
|
-
export declare function MarkdownBlock({ content, styleOptions }: MarkdownBlockProps_2): JSX.Element | null
|
|
1200
|
+
export declare function MarkdownBlock({ content, styleOptions, id, }: MarkdownBlockProps_2): Promise<JSX.Element | null>;
|
|
1201
1201
|
|
|
1202
1202
|
export { MarkdownBlockProps }
|
|
1203
1203
|
|
|
@@ -1,10 +1,3 @@
|
|
|
1
|
-
"use strict";const
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
2. Second
|
|
5
|
-
3. Third`;e.it("renders an <ol> element with the ol class",()=>{const{container:t}=e.render(n.jsx(r.MarkdownBlock,{...l(o)})),a=t.querySelector("ol");e.globalExpect(a).toBeInTheDocument(),e.globalExpect(a==null?void 0:a.className).toContain("ol")}),e.it("renders three list items",()=>{const{container:t}=e.render(n.jsx(r.MarkdownBlock,{...l(o)}));e.globalExpect(t.querySelectorAll("li")).toHaveLength(3)})});e.describe("6. Inline code — <code> with inlineCode class",()=>{e.it("renders inline code with the inlineCode class",()=>{const{container:o}=e.render(n.jsx(r.MarkdownBlock,{...l("Use `console.log()` here.")})),t=o.querySelector("code");e.globalExpect(t).toBeInTheDocument(),e.globalExpect(t==null?void 0:t.className).toContain("inlineCode")}),e.it("does not wrap inline code in a codeBlock div",()=>{const{container:o}=e.render(n.jsx(r.MarkdownBlock,{...l("Use `console.log()` here.")}));e.globalExpect(o.querySelector(".codeBlock")).toBeNull()}),e.it("renders the inline code text",()=>{e.render(n.jsx(r.MarkdownBlock,{...l("Use `myFunction()` here.")})),e.globalExpect(e.screen.getByText("myFunction()")).toBeInTheDocument()})});e.describe("7. Fenced code block — codeBlock wrapper, pre, code",()=>{const o="```\nconst x = 1;\n```";e.it("renders a codeBlock wrapper div",()=>{const{container:t}=e.render(n.jsx(r.MarkdownBlock,{...l(o)}));e.globalExpect(t.querySelector(".codeBlock")).toBeInTheDocument()}),e.it("renders a <pre> inside the codeBlock",()=>{const{container:t}=e.render(n.jsx(r.MarkdownBlock,{...l(o)}));e.globalExpect(t.querySelector(".codeBlock pre")).toBeInTheDocument()}),e.it("renders a <code> inside the pre with the code class",()=>{const{container:t}=e.render(n.jsx(r.MarkdownBlock,{...l(o)})),a=t.querySelector(".codeBlock pre code");e.globalExpect(a).toBeInTheDocument(),e.globalExpect(a==null?void 0:a.className).toContain("code")}),e.it("renders the code content",()=>{e.render(n.jsx(r.MarkdownBlock,{...l(o)})),e.globalExpect(e.screen.getByText(/const x = 1/)).toBeInTheDocument()})});e.describe("8. Code language label — shown when language specified; absent when not",()=>{e.it("renders the language label when a language is specified",()=>{const o="```tsx\nconst x = 1;\n```",{container:t}=e.render(n.jsx(r.MarkdownBlock,{...l(o)})),a=t.querySelector(".codeLanguage");e.globalExpect(a).toBeInTheDocument(),e.globalExpect(a==null?void 0:a.textContent).toBe("tsx")}),e.it("does not render the language label when no language is specified",()=>{const o="```\nconst x = 1;\n```",{container:t}=e.render(n.jsx(r.MarkdownBlock,{...l(o)}));e.globalExpect(t.querySelector(".codeLanguage")).toBeNull()}),e.it("correctly extracts 'javascript' from language-javascript className",()=>{var a;const o="```javascript\nconsole.log('hi');\n```",{container:t}=e.render(n.jsx(r.MarkdownBlock,{...l(o)}));e.globalExpect((a=t.querySelector(".codeLanguage"))==null?void 0:a.textContent).toBe("javascript")})});e.describe("9. Blockquote — <blockquote> with class",()=>{e.it("renders a blockquote element",()=>{const{container:o}=e.render(n.jsx(r.MarkdownBlock,{...l("> This is a quote.")}));e.globalExpect(o.querySelector("blockquote")).toBeInTheDocument()}),e.it("applies the blockquote class",()=>{var t;const{container:o}=e.render(n.jsx(r.MarkdownBlock,{...l("> This is a quote.")}));e.globalExpect((t=o.querySelector("blockquote"))==null?void 0:t.className).toContain("blockquote")}),e.it("renders the blockquote text",()=>{e.render(n.jsx(r.MarkdownBlock,{...l("> Famous words.")})),e.globalExpect(e.screen.getByText("Famous words.")).toBeInTheDocument()})});e.describe("10. Table (GFM) — tableWrapper, table, thead, th, td rendered",()=>{const o=`
|
|
6
|
-
| Name | Age |
|
|
7
|
-
|-------|-----|
|
|
8
|
-
| Alice | 30 |
|
|
9
|
-
| Bob | 25 |
|
|
10
|
-
`.trim();e.it("renders a tableWrapper div",()=>{const{container:t}=e.render(n.jsx(r.MarkdownBlock,{...l(o)}));e.globalExpect(t.querySelector(".tableWrapper")).toBeInTheDocument()}),e.it("renders a table with the table class",()=>{const{container:t}=e.render(n.jsx(r.MarkdownBlock,{...l(o)})),a=t.querySelector("table");e.globalExpect(a).toBeInTheDocument(),e.globalExpect(a==null?void 0:a.className).toContain("table")}),e.it("renders a thead with the thead class",()=>{var a;const{container:t}=e.render(n.jsx(r.MarkdownBlock,{...l(o)}));e.globalExpect((a=t.querySelector("thead"))==null?void 0:a.className).toContain("thead")}),e.it("renders th elements with the th class",()=>{const{container:t}=e.render(n.jsx(r.MarkdownBlock,{...l(o)})),a=t.querySelectorAll("th");e.globalExpect(a.length).toBeGreaterThan(0),a.forEach(c=>e.globalExpect(c.className).toContain("th"))}),e.it("renders td elements with the td class",()=>{const{container:t}=e.render(n.jsx(r.MarkdownBlock,{...l(o)})),a=t.querySelectorAll("td");e.globalExpect(a.length).toBeGreaterThan(0),a.forEach(c=>e.globalExpect(c.className).toContain("td"))}),e.it("renders the table header text",()=>{e.render(n.jsx(r.MarkdownBlock,{...l(o)})),e.globalExpect(e.screen.getByText("Name")).toBeInTheDocument(),e.globalExpect(e.screen.getByText("Age")).toBeInTheDocument()}),e.it("renders the table cell content",()=>{e.render(n.jsx(r.MarkdownBlock,{...l(o)})),e.globalExpect(e.screen.getByText("Alice")).toBeInTheDocument(),e.globalExpect(e.screen.getByText("Bob")).toBeInTheDocument()})});e.describe("11. Horizontal rule — <hr> with class",()=>{e.it("renders an hr element",()=>{const{container:o}=e.render(n.jsx(r.MarkdownBlock,{...l("---")}));e.globalExpect(o.querySelector("hr")).toBeInTheDocument()}),e.it("applies the hr class",()=>{var t;const{container:o}=e.render(n.jsx(r.MarkdownBlock,{...l("---")}));e.globalExpect((t=o.querySelector("hr"))==null?void 0:t.className).toContain("hr")})});e.describe("12. External link — target=_blank and rel=noopener noreferrer",()=>{const o="[Visit Example](https://example.com)";e.it("renders an anchor element",()=>{e.render(n.jsx(r.MarkdownBlock,{...l(o)})),e.globalExpect(e.screen.getByRole("link")).toBeInTheDocument()}),e.it("sets target=_blank on external links",()=>{e.render(n.jsx(r.MarkdownBlock,{...l(o)})),e.globalExpect(e.screen.getByRole("link").getAttribute("target")).toBe("_blank")}),e.it("sets rel=noopener noreferrer on external links",()=>{e.render(n.jsx(r.MarkdownBlock,{...l(o)})),e.globalExpect(e.screen.getByRole("link").getAttribute("rel")).toBe("noopener noreferrer")}),e.it("applies the a class",()=>{e.render(n.jsx(r.MarkdownBlock,{...l(o)})),e.globalExpect(e.screen.getByRole("link").className).toContain("a")})});e.describe("13. Internal link — no target or rel on relative links",()=>{const o="[About](/about)";e.it("renders an anchor without target",()=>{e.render(n.jsx(r.MarkdownBlock,{...l(o)})),e.globalExpect(e.screen.getByRole("link").getAttribute("target")).toBeNull()}),e.it("renders an anchor without rel",()=>{e.render(n.jsx(r.MarkdownBlock,{...l(o)})),e.globalExpect(e.screen.getByRole("link").getAttribute("rel")).toBeNull()}),e.it("sets the correct href",()=>{e.render(n.jsx(r.MarkdownBlock,{...l(o)})),e.globalExpect(e.screen.getByRole("link").getAttribute("href")).toBe("/about")})});e.describe("14. Image — <img> with class; alt defaults to empty string",()=>{e.it("renders an img element",()=>{const{container:o}=e.render(n.jsx(r.MarkdownBlock,{...l("")}));e.globalExpect(o.querySelector("img")).toBeInTheDocument()}),e.it("applies the img class",()=>{var t;const{container:o}=e.render(n.jsx(r.MarkdownBlock,{...l("")}));e.globalExpect((t=o.querySelector("img"))==null?void 0:t.className).toContain("img")}),e.it("sets the alt text from the markdown",()=>{var t;const{container:o}=e.render(n.jsx(r.MarkdownBlock,{...l("")}));e.globalExpect((t=o.querySelector("img"))==null?void 0:t.alt).toBe("My Alt")}),e.it("defaults alt to empty string when not provided",()=>{var t;const{container:o}=e.render(n.jsx(r.MarkdownBlock,{...l("")}));e.globalExpect((t=o.querySelector("img"))==null?void 0:t.alt).toBe("")})});e.describe("15. maxWidth class — sm/md/lg/full applied; defaults to lg",()=>{const o=[["sm","maxWidthSm"],["md","maxWidthMd"],["lg","maxWidthLg"],["full","maxWidthFull"]];e.it.each(o)('maxWidth="%s" applies class "%s"',(t,a)=>{var s;const{container:c}=e.render(n.jsx(r.MarkdownBlock,{...l("Hello",{maxWidth:t})}));e.globalExpect((s=c.querySelector(".container"))==null?void 0:s.className).toContain(a)}),e.it("defaults to maxWidthLg when maxWidth is not provided",()=>{var a;const{container:t}=e.render(n.jsx(r.MarkdownBlock,{...l("Hello")}));e.globalExpect((a=t.querySelector(".container"))==null?void 0:a.className).toContain("maxWidthLg")})});e.describe("16. background class — capitalised and prefixed with 'background'",()=>{e.it("applies backgroundGray for background='gray'",()=>{var t;const{container:o}=e.render(n.jsx(r.MarkdownBlock,{...l("Hello",{background:"gray"})}));e.globalExpect((t=o.querySelector("section"))==null?void 0:t.className).toContain("backgroundGray")}),e.it("applies backgroundDark for background='dark'",()=>{var t;const{container:o}=e.render(n.jsx(r.MarkdownBlock,{...l("Hello",{background:"dark"})}));e.globalExpect((t=o.querySelector("section"))==null?void 0:t.className).toContain("backgroundDark")}),e.it("does not add a background class when background is not provided",()=>{var t;const{container:o}=e.render(n.jsx(r.MarkdownBlock,{...l("Hello")}));e.globalExpect((t=o.querySelector("section"))==null?void 0:t.className).not.toContain("background")})});e.describe("17. padding classes — array joined and applied to outer section",()=>{e.it("applies a single padding class",()=>{var t;const{container:o}=e.render(n.jsx(r.MarkdownBlock,{...l("Hello",{padding:["pt-8"]})}));e.globalExpect((t=o.querySelector("section"))==null?void 0:t.className).toContain("pt-8")}),e.it("applies multiple padding classes",()=>{var a;const{container:o}=e.render(n.jsx(r.MarkdownBlock,{...l("Hello",{padding:["pt-8","pb-16"]})})),t=((a=o.querySelector("section"))==null?void 0:a.className)??"";e.globalExpect(t).toContain("pt-8"),e.globalExpect(t).toContain("pb-16")}),e.it("does not add extra classes when padding is not provided",()=>{var t;const{container:o}=e.render(n.jsx(r.MarkdownBlock,{...l("Hello")}));e.globalExpect((t=o.querySelector("section"))==null?void 0:t.className.trim()).toBe("markdownBlock")})});
|
|
1
|
+
"use strict";const t=require("../../../react.esm-C_9Ma9mj.cjs"),c=require("./index.cjs");require("../../../index-CW_Ehh1q.cjs");t.vi.mock("remark",()=>({remark:()=>({use:function(){return this},process:t.vi.fn(async n=>({toString:()=>`<p>${n}</p>`}))})}));t.vi.mock("remark-gfm",()=>({default:()=>{}}));t.vi.mock("remark-html",()=>({default:()=>{}}));async function a(n){const e=await c.MarkdownBlock(n);return e?t.render(e):{container:document.createElement("div")}}t.describe("MarkdownBlock",()=>{const n=`# Hello
|
|
2
|
+
|
|
3
|
+
This is **markdown** content.`;t.describe("Rendering",()=>{t.it("renders a section element",async()=>{const{container:e}=await a({content:n});t.globalExpect(e.querySelector("section")).toBeInTheDocument()}),t.it("renders nothing when content is undefined",async()=>{const e=await c.MarkdownBlock({});t.globalExpect(e).toBeNull()}),t.it("renders nothing when content is empty string",async()=>{const e=await c.MarkdownBlock({content:""});t.globalExpect(e).toBeNull()}),t.it("renders processed HTML via dangerouslySetInnerHTML",async()=>{const{container:e}=await a({content:n});t.globalExpect(e.querySelector("p")).toBeInTheDocument()}),t.it("renders with id prop",async()=>{var o;const{container:e}=await a({content:n,id:"markdown-section"});t.globalExpect((o=e.querySelector("section"))==null?void 0:o.id).toBe("markdown-section")}),t.it("accepts _key prop without error",async()=>{await t.globalExpect(a({content:n})).resolves.not.toThrow()})}),t.describe("Max width",()=>{t.it("applies large max width by default",async()=>{const{container:e}=await a({content:n});t.globalExpect(e.querySelector("[class*=maxWidthLg]")).toBeInTheDocument()}),t.it("applies small max width",async()=>{const{container:e}=await a({content:n,styleOptions:{maxWidth:"sm"}});t.globalExpect(e.querySelector("[class*=maxWidthSm]")).toBeInTheDocument()}),t.it("applies medium max width",async()=>{const{container:e}=await a({content:n,styleOptions:{maxWidth:"md"}});t.globalExpect(e.querySelector("[class*=maxWidthMd]")).toBeInTheDocument()}),t.it("applies full max width",async()=>{const{container:e}=await a({content:n,styleOptions:{maxWidth:"full"}});t.globalExpect(e.querySelector("[class*=maxWidthFull]")).toBeInTheDocument()})}),t.describe("Style options",()=>{t.it("applies padding classes to section",async()=>{const{container:e}=await a({content:n,styleOptions:{padding:["paddingTop4","paddingBottom4"]}}),o=e.querySelector("section");t.globalExpect(o==null?void 0:o.className).toContain("paddingTop4"),t.globalExpect(o==null?void 0:o.className).toContain("paddingBottom4")}),t.it("applies capitalised background class to section",async()=>{const{container:e}=await a({content:n,styleOptions:{background:"primary"}}),o=e.querySelector("section");t.globalExpect(o==null?void 0:o.className).toContain("backgroundPrimary")}),t.it("renders without styleOptions",async()=>{const{container:e}=await a({content:n});t.globalExpect(e.querySelector("section")).toBeInTheDocument()}),t.it("accepts all styleOptions props without error",async()=>{await t.globalExpect(a({content:n,styleOptions:{padding:["paddingTop2","paddingBottom2"],background:"white",maxWidth:"md"}})).resolves.not.toThrow()})})});
|
|
@@ -1,333 +1,123 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { v as m, d, i as a, r, g as n, s as i } from "../../../react.esm-DjxyacK8.js";
|
|
1
|
+
import { v as r, d as i, i as o, g as n, r as d } from "../../../react.esm-DjxyacK8.js";
|
|
3
2
|
import { MarkdownBlock as c } from "./index.mjs";
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
3
|
+
import "../../../index-DPGXWTtt.js";
|
|
4
|
+
r.mock("remark", () => ({
|
|
5
|
+
remark: () => ({
|
|
6
|
+
use: function() {
|
|
7
|
+
return this;
|
|
8
|
+
},
|
|
9
|
+
process: r.fn(async (e) => ({
|
|
10
|
+
toString: () => `<p>${e}</p>`
|
|
11
|
+
}))
|
|
12
|
+
})
|
|
13
|
+
}));
|
|
14
|
+
r.mock("remark-gfm", () => ({ default: () => {
|
|
15
|
+
} }));
|
|
16
|
+
r.mock("remark-html", () => ({ default: () => {
|
|
17
|
+
} }));
|
|
18
|
+
async function s(e) {
|
|
19
|
+
const t = await c(e);
|
|
20
|
+
return t ? d(t) : { container: document.createElement("div") };
|
|
11
21
|
}
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
)
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
})
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
})
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
a("renders a codeBlock wrapper div", () => {
|
|
113
|
-
const { container: e } = r(/* @__PURE__ */ o(c, { ...s(t) }));
|
|
114
|
-
n(e.querySelector(".codeBlock")).toBeInTheDocument();
|
|
115
|
-
}), a("renders a <pre> inside the codeBlock", () => {
|
|
116
|
-
const { container: e } = r(/* @__PURE__ */ o(c, { ...s(t) }));
|
|
117
|
-
n(e.querySelector(".codeBlock pre")).toBeInTheDocument();
|
|
118
|
-
}), a("renders a <code> inside the pre with the code class", () => {
|
|
119
|
-
const { container: e } = r(/* @__PURE__ */ o(c, { ...s(t) })), l = e.querySelector(".codeBlock pre code");
|
|
120
|
-
n(l).toBeInTheDocument(), n(l == null ? void 0 : l.className).toContain("code");
|
|
121
|
-
}), a("renders the code content", () => {
|
|
122
|
-
r(/* @__PURE__ */ o(c, { ...s(t) })), n(i.getByText(/const x = 1/)).toBeInTheDocument();
|
|
123
|
-
});
|
|
124
|
-
});
|
|
125
|
-
d("8. Code language label — shown when language specified; absent when not", () => {
|
|
126
|
-
a("renders the language label when a language is specified", () => {
|
|
127
|
-
const t = "```tsx\nconst x = 1;\n```", { container: e } = r(/* @__PURE__ */ o(c, { ...s(t) })), l = e.querySelector(".codeLanguage");
|
|
128
|
-
n(l).toBeInTheDocument(), n(l == null ? void 0 : l.textContent).toBe("tsx");
|
|
129
|
-
}), a("does not render the language label when no language is specified", () => {
|
|
130
|
-
const t = "```\nconst x = 1;\n```", { container: e } = r(/* @__PURE__ */ o(c, { ...s(t) }));
|
|
131
|
-
n(e.querySelector(".codeLanguage")).toBeNull();
|
|
132
|
-
}), a("correctly extracts 'javascript' from language-javascript className", () => {
|
|
133
|
-
var l;
|
|
134
|
-
const t = "```javascript\nconsole.log('hi');\n```", { container: e } = r(/* @__PURE__ */ o(c, { ...s(t) }));
|
|
135
|
-
n((l = e.querySelector(".codeLanguage")) == null ? void 0 : l.textContent).toBe(
|
|
136
|
-
"javascript"
|
|
137
|
-
);
|
|
138
|
-
});
|
|
139
|
-
});
|
|
140
|
-
d("9. Blockquote — <blockquote> with class", () => {
|
|
141
|
-
a("renders a blockquote element", () => {
|
|
142
|
-
const { container: t } = r(
|
|
143
|
-
/* @__PURE__ */ o(c, { ...s("> This is a quote.") })
|
|
144
|
-
);
|
|
145
|
-
n(t.querySelector("blockquote")).toBeInTheDocument();
|
|
146
|
-
}), a("applies the blockquote class", () => {
|
|
147
|
-
var e;
|
|
148
|
-
const { container: t } = r(
|
|
149
|
-
/* @__PURE__ */ o(c, { ...s("> This is a quote.") })
|
|
150
|
-
);
|
|
151
|
-
n((e = t.querySelector("blockquote")) == null ? void 0 : e.className).toContain(
|
|
152
|
-
"blockquote"
|
|
153
|
-
);
|
|
154
|
-
}), a("renders the blockquote text", () => {
|
|
155
|
-
r(/* @__PURE__ */ o(c, { ...s("> Famous words.") })), n(i.getByText("Famous words.")).toBeInTheDocument();
|
|
156
|
-
});
|
|
157
|
-
});
|
|
158
|
-
d("10. Table (GFM) — tableWrapper, table, thead, th, td rendered", () => {
|
|
159
|
-
const t = `
|
|
160
|
-
| Name | Age |
|
|
161
|
-
|-------|-----|
|
|
162
|
-
| Alice | 30 |
|
|
163
|
-
| Bob | 25 |
|
|
164
|
-
`.trim();
|
|
165
|
-
a("renders a tableWrapper div", () => {
|
|
166
|
-
const { container: e } = r(/* @__PURE__ */ o(c, { ...s(t) }));
|
|
167
|
-
n(e.querySelector(".tableWrapper")).toBeInTheDocument();
|
|
168
|
-
}), a("renders a table with the table class", () => {
|
|
169
|
-
const { container: e } = r(/* @__PURE__ */ o(c, { ...s(t) })), l = e.querySelector("table");
|
|
170
|
-
n(l).toBeInTheDocument(), n(l == null ? void 0 : l.className).toContain("table");
|
|
171
|
-
}), a("renders a thead with the thead class", () => {
|
|
172
|
-
var l;
|
|
173
|
-
const { container: e } = r(/* @__PURE__ */ o(c, { ...s(t) }));
|
|
174
|
-
n((l = e.querySelector("thead")) == null ? void 0 : l.className).toContain("thead");
|
|
175
|
-
}), a("renders th elements with the th class", () => {
|
|
176
|
-
const { container: e } = r(/* @__PURE__ */ o(c, { ...s(t) })), l = e.querySelectorAll("th");
|
|
177
|
-
n(l.length).toBeGreaterThan(0), l.forEach((h) => n(h.className).toContain("th"));
|
|
178
|
-
}), a("renders td elements with the td class", () => {
|
|
179
|
-
const { container: e } = r(/* @__PURE__ */ o(c, { ...s(t) })), l = e.querySelectorAll("td");
|
|
180
|
-
n(l.length).toBeGreaterThan(0), l.forEach((h) => n(h.className).toContain("td"));
|
|
181
|
-
}), a("renders the table header text", () => {
|
|
182
|
-
r(/* @__PURE__ */ o(c, { ...s(t) })), n(i.getByText("Name")).toBeInTheDocument(), n(i.getByText("Age")).toBeInTheDocument();
|
|
183
|
-
}), a("renders the table cell content", () => {
|
|
184
|
-
r(/* @__PURE__ */ o(c, { ...s(t) })), n(i.getByText("Alice")).toBeInTheDocument(), n(i.getByText("Bob")).toBeInTheDocument();
|
|
185
|
-
});
|
|
186
|
-
});
|
|
187
|
-
d("11. Horizontal rule — <hr> with class", () => {
|
|
188
|
-
a("renders an hr element", () => {
|
|
189
|
-
const { container: t } = r(/* @__PURE__ */ o(c, { ...s("---") }));
|
|
190
|
-
n(t.querySelector("hr")).toBeInTheDocument();
|
|
191
|
-
}), a("applies the hr class", () => {
|
|
192
|
-
var e;
|
|
193
|
-
const { container: t } = r(/* @__PURE__ */ o(c, { ...s("---") }));
|
|
194
|
-
n((e = t.querySelector("hr")) == null ? void 0 : e.className).toContain("hr");
|
|
195
|
-
});
|
|
196
|
-
});
|
|
197
|
-
d("12. External link — target=_blank and rel=noopener noreferrer", () => {
|
|
198
|
-
const t = "[Visit Example](https://example.com)";
|
|
199
|
-
a("renders an anchor element", () => {
|
|
200
|
-
r(/* @__PURE__ */ o(c, { ...s(t) })), n(i.getByRole("link")).toBeInTheDocument();
|
|
201
|
-
}), a("sets target=_blank on external links", () => {
|
|
202
|
-
r(/* @__PURE__ */ o(c, { ...s(t) })), n(i.getByRole("link").getAttribute("target")).toBe("_blank");
|
|
203
|
-
}), a("sets rel=noopener noreferrer on external links", () => {
|
|
204
|
-
r(/* @__PURE__ */ o(c, { ...s(t) })), n(i.getByRole("link").getAttribute("rel")).toBe(
|
|
205
|
-
"noopener noreferrer"
|
|
206
|
-
);
|
|
207
|
-
}), a("applies the a class", () => {
|
|
208
|
-
r(/* @__PURE__ */ o(c, { ...s(t) })), n(i.getByRole("link").className).toContain("a");
|
|
209
|
-
});
|
|
210
|
-
});
|
|
211
|
-
d("13. Internal link — no target or rel on relative links", () => {
|
|
212
|
-
const t = "[About](/about)";
|
|
213
|
-
a("renders an anchor without target", () => {
|
|
214
|
-
r(/* @__PURE__ */ o(c, { ...s(t) })), n(i.getByRole("link").getAttribute("target")).toBeNull();
|
|
215
|
-
}), a("renders an anchor without rel", () => {
|
|
216
|
-
r(/* @__PURE__ */ o(c, { ...s(t) })), n(i.getByRole("link").getAttribute("rel")).toBeNull();
|
|
217
|
-
}), a("sets the correct href", () => {
|
|
218
|
-
r(/* @__PURE__ */ o(c, { ...s(t) })), n(i.getByRole("link").getAttribute("href")).toBe("/about");
|
|
219
|
-
});
|
|
220
|
-
});
|
|
221
|
-
d("14. Image — <img> with class; alt defaults to empty string", () => {
|
|
222
|
-
a("renders an img element", () => {
|
|
223
|
-
const { container: t } = r(
|
|
224
|
-
/* @__PURE__ */ o(
|
|
225
|
-
c,
|
|
226
|
-
{
|
|
227
|
-
...s("")
|
|
228
|
-
}
|
|
229
|
-
)
|
|
230
|
-
);
|
|
231
|
-
n(t.querySelector("img")).toBeInTheDocument();
|
|
232
|
-
}), a("applies the img class", () => {
|
|
233
|
-
var e;
|
|
234
|
-
const { container: t } = r(
|
|
235
|
-
/* @__PURE__ */ o(
|
|
236
|
-
c,
|
|
237
|
-
{
|
|
238
|
-
...s("")
|
|
239
|
-
}
|
|
240
|
-
)
|
|
241
|
-
);
|
|
242
|
-
n((e = t.querySelector("img")) == null ? void 0 : e.className).toContain("img");
|
|
243
|
-
}), a("sets the alt text from the markdown", () => {
|
|
244
|
-
var e;
|
|
245
|
-
const { container: t } = r(
|
|
246
|
-
/* @__PURE__ */ o(
|
|
247
|
-
c,
|
|
248
|
-
{
|
|
249
|
-
...s("")
|
|
250
|
-
}
|
|
251
|
-
)
|
|
252
|
-
);
|
|
253
|
-
n((e = t.querySelector("img")) == null ? void 0 : e.alt).toBe("My Alt");
|
|
254
|
-
}), a("defaults alt to empty string when not provided", () => {
|
|
255
|
-
var e;
|
|
256
|
-
const { container: t } = r(
|
|
257
|
-
/* @__PURE__ */ o(c, { ...s("") })
|
|
258
|
-
);
|
|
259
|
-
n((e = t.querySelector("img")) == null ? void 0 : e.alt).toBe("");
|
|
260
|
-
});
|
|
261
|
-
});
|
|
262
|
-
d("15. maxWidth class — sm/md/lg/full applied; defaults to lg", () => {
|
|
263
|
-
const t = [
|
|
264
|
-
["sm", "maxWidthSm"],
|
|
265
|
-
["md", "maxWidthMd"],
|
|
266
|
-
["lg", "maxWidthLg"],
|
|
267
|
-
["full", "maxWidthFull"]
|
|
268
|
-
];
|
|
269
|
-
a.each(t)(
|
|
270
|
-
'maxWidth="%s" applies class "%s"',
|
|
271
|
-
(e, l) => {
|
|
272
|
-
var u;
|
|
273
|
-
const { container: h } = r(
|
|
274
|
-
/* @__PURE__ */ o(c, { ...s("Hello", { maxWidth: e }) })
|
|
275
|
-
);
|
|
276
|
-
n((u = h.querySelector(".container")) == null ? void 0 : u.className).toContain(
|
|
277
|
-
l
|
|
278
|
-
);
|
|
279
|
-
}
|
|
280
|
-
), a("defaults to maxWidthLg when maxWidth is not provided", () => {
|
|
281
|
-
var l;
|
|
282
|
-
const { container: e } = r(/* @__PURE__ */ o(c, { ...s("Hello") }));
|
|
283
|
-
n((l = e.querySelector(".container")) == null ? void 0 : l.className).toContain(
|
|
284
|
-
"maxWidthLg"
|
|
285
|
-
);
|
|
286
|
-
});
|
|
287
|
-
});
|
|
288
|
-
d("16. background class — capitalised and prefixed with 'background'", () => {
|
|
289
|
-
a("applies backgroundGray for background='gray'", () => {
|
|
290
|
-
var e;
|
|
291
|
-
const { container: t } = r(
|
|
292
|
-
/* @__PURE__ */ o(c, { ...s("Hello", { background: "gray" }) })
|
|
293
|
-
);
|
|
294
|
-
n((e = t.querySelector("section")) == null ? void 0 : e.className).toContain(
|
|
295
|
-
"backgroundGray"
|
|
296
|
-
);
|
|
297
|
-
}), a("applies backgroundDark for background='dark'", () => {
|
|
298
|
-
var e;
|
|
299
|
-
const { container: t } = r(
|
|
300
|
-
/* @__PURE__ */ o(c, { ...s("Hello", { background: "dark" }) })
|
|
301
|
-
);
|
|
302
|
-
n((e = t.querySelector("section")) == null ? void 0 : e.className).toContain(
|
|
303
|
-
"backgroundDark"
|
|
304
|
-
);
|
|
305
|
-
}), a("does not add a background class when background is not provided", () => {
|
|
306
|
-
var e;
|
|
307
|
-
const { container: t } = r(/* @__PURE__ */ o(c, { ...s("Hello") }));
|
|
308
|
-
n((e = t.querySelector("section")) == null ? void 0 : e.className).not.toContain(
|
|
309
|
-
"background"
|
|
310
|
-
);
|
|
311
|
-
});
|
|
312
|
-
});
|
|
313
|
-
d("17. padding classes — array joined and applied to outer section", () => {
|
|
314
|
-
a("applies a single padding class", () => {
|
|
315
|
-
var e;
|
|
316
|
-
const { container: t } = r(
|
|
317
|
-
/* @__PURE__ */ o(c, { ...s("Hello", { padding: ["pt-8"] }) })
|
|
318
|
-
);
|
|
319
|
-
n((e = t.querySelector("section")) == null ? void 0 : e.className).toContain("pt-8");
|
|
320
|
-
}), a("applies multiple padding classes", () => {
|
|
321
|
-
var l;
|
|
322
|
-
const { container: t } = r(
|
|
323
|
-
/* @__PURE__ */ o(c, { ...s("Hello", { padding: ["pt-8", "pb-16"] }) })
|
|
324
|
-
), e = ((l = t.querySelector("section")) == null ? void 0 : l.className) ?? "";
|
|
325
|
-
n(e).toContain("pt-8"), n(e).toContain("pb-16");
|
|
326
|
-
}), a("does not add extra classes when padding is not provided", () => {
|
|
327
|
-
var e;
|
|
328
|
-
const { container: t } = r(/* @__PURE__ */ o(c, { ...s("Hello") }));
|
|
329
|
-
n((e = t.querySelector("section")) == null ? void 0 : e.className.trim()).toBe(
|
|
330
|
-
"markdownBlock"
|
|
331
|
-
);
|
|
22
|
+
i("MarkdownBlock", () => {
|
|
23
|
+
const e = `# Hello
|
|
24
|
+
|
|
25
|
+
This is **markdown** content.`;
|
|
26
|
+
i("Rendering", () => {
|
|
27
|
+
o("renders a section element", async () => {
|
|
28
|
+
const { container: t } = await s({
|
|
29
|
+
content: e
|
|
30
|
+
});
|
|
31
|
+
n(t.querySelector("section")).toBeInTheDocument();
|
|
32
|
+
}), o("renders nothing when content is undefined", async () => {
|
|
33
|
+
const t = await c({});
|
|
34
|
+
n(t).toBeNull();
|
|
35
|
+
}), o("renders nothing when content is empty string", async () => {
|
|
36
|
+
const t = await c({
|
|
37
|
+
content: ""
|
|
38
|
+
});
|
|
39
|
+
n(t).toBeNull();
|
|
40
|
+
}), o("renders processed HTML via dangerouslySetInnerHTML", async () => {
|
|
41
|
+
const { container: t } = await s({
|
|
42
|
+
content: e
|
|
43
|
+
});
|
|
44
|
+
n(t.querySelector("p")).toBeInTheDocument();
|
|
45
|
+
}), o("renders with id prop", async () => {
|
|
46
|
+
var a;
|
|
47
|
+
const { container: t } = await s({
|
|
48
|
+
content: e,
|
|
49
|
+
id: "markdown-section"
|
|
50
|
+
});
|
|
51
|
+
n((a = t.querySelector("section")) == null ? void 0 : a.id).toBe("markdown-section");
|
|
52
|
+
}), o("accepts _key prop without error", async () => {
|
|
53
|
+
await n(
|
|
54
|
+
s({
|
|
55
|
+
content: e
|
|
56
|
+
})
|
|
57
|
+
).resolves.not.toThrow();
|
|
58
|
+
});
|
|
59
|
+
}), i("Max width", () => {
|
|
60
|
+
o("applies large max width by default", async () => {
|
|
61
|
+
const { container: t } = await s({
|
|
62
|
+
content: e
|
|
63
|
+
});
|
|
64
|
+
n(
|
|
65
|
+
t.querySelector("[class*=maxWidthLg]")
|
|
66
|
+
).toBeInTheDocument();
|
|
67
|
+
}), o("applies small max width", async () => {
|
|
68
|
+
const { container: t } = await s({
|
|
69
|
+
content: e,
|
|
70
|
+
styleOptions: { maxWidth: "sm" }
|
|
71
|
+
});
|
|
72
|
+
n(
|
|
73
|
+
t.querySelector("[class*=maxWidthSm]")
|
|
74
|
+
).toBeInTheDocument();
|
|
75
|
+
}), o("applies medium max width", async () => {
|
|
76
|
+
const { container: t } = await s({
|
|
77
|
+
content: e,
|
|
78
|
+
styleOptions: { maxWidth: "md" }
|
|
79
|
+
});
|
|
80
|
+
n(
|
|
81
|
+
t.querySelector("[class*=maxWidthMd]")
|
|
82
|
+
).toBeInTheDocument();
|
|
83
|
+
}), o("applies full max width", async () => {
|
|
84
|
+
const { container: t } = await s({
|
|
85
|
+
content: e,
|
|
86
|
+
styleOptions: { maxWidth: "full" }
|
|
87
|
+
});
|
|
88
|
+
n(
|
|
89
|
+
t.querySelector("[class*=maxWidthFull]")
|
|
90
|
+
).toBeInTheDocument();
|
|
91
|
+
});
|
|
92
|
+
}), i("Style options", () => {
|
|
93
|
+
o("applies padding classes to section", async () => {
|
|
94
|
+
const { container: t } = await s({
|
|
95
|
+
content: e,
|
|
96
|
+
styleOptions: { padding: ["paddingTop4", "paddingBottom4"] }
|
|
97
|
+
}), a = t.querySelector("section");
|
|
98
|
+
n(a == null ? void 0 : a.className).toContain("paddingTop4"), n(a == null ? void 0 : a.className).toContain("paddingBottom4");
|
|
99
|
+
}), o("applies capitalised background class to section", async () => {
|
|
100
|
+
const { container: t } = await s({
|
|
101
|
+
content: e,
|
|
102
|
+
styleOptions: { background: "primary" }
|
|
103
|
+
}), a = t.querySelector("section");
|
|
104
|
+
n(a == null ? void 0 : a.className).toContain("backgroundPrimary");
|
|
105
|
+
}), o("renders without styleOptions", async () => {
|
|
106
|
+
const { container: t } = await s({
|
|
107
|
+
content: e
|
|
108
|
+
});
|
|
109
|
+
n(t.querySelector("section")).toBeInTheDocument();
|
|
110
|
+
}), o("accepts all styleOptions props without error", async () => {
|
|
111
|
+
await n(
|
|
112
|
+
s({
|
|
113
|
+
content: e,
|
|
114
|
+
styleOptions: {
|
|
115
|
+
padding: ["paddingTop2", "paddingBottom2"],
|
|
116
|
+
background: "white",
|
|
117
|
+
maxWidth: "md"
|
|
118
|
+
}
|
|
119
|
+
})
|
|
120
|
+
).resolves.not.toThrow();
|
|
121
|
+
});
|
|
332
122
|
});
|
|
333
123
|
});
|