@sakura-ui/sakura-ui 0.5.3 → 0.5.5

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.
Files changed (40) hide show
  1. package/package.json +4 -4
  2. package/packages/core/package.json +1 -1
  3. package/packages/core/src/components/Link.tsx +17 -0
  4. package/packages/core/tests/Link.test.tsx +41 -0
  5. package/packages/forms/.turbo/turbo-build.log +2 -2
  6. package/packages/helper/.turbo/turbo-build.log +2 -2
  7. package/packages/markdown/.turbo/turbo-build.log +5 -5
  8. package/packages/markdown/README.md +17 -1
  9. package/packages/markdown/dist/index.cjs.js +22 -22
  10. package/packages/markdown/dist/index.es.js +369 -335
  11. package/packages/markdown/dist/types/components/Markdown.d.ts.map +1 -1
  12. package/packages/markdown/dist/types/decorate.d.ts +2 -5
  13. package/packages/markdown/dist/types/decorate.d.ts.map +1 -1
  14. package/packages/markdown/dist/types/marked/attributes.d.ts +4 -7
  15. package/packages/markdown/dist/types/marked/attributes.d.ts.map +1 -1
  16. package/packages/markdown/dist/types/marked/directives/image.d.ts +3 -0
  17. package/packages/markdown/dist/types/marked/directives/image.d.ts.map +1 -0
  18. package/packages/markdown/dist/types/marked/directives/index.d.ts.map +1 -1
  19. package/packages/markdown/dist/types/marked/html.d.ts.map +1 -1
  20. package/packages/markdown/dist/types/marked/registry.d.ts.map +1 -1
  21. package/packages/markdown/dist/types/marked/renderer.d.ts +4 -6
  22. package/packages/markdown/dist/types/marked/renderer.d.ts.map +1 -1
  23. package/packages/markdown/dist/types/marked/tokenizer.d.ts.map +1 -1
  24. package/packages/markdown/dist/types/sanitize.d.ts.map +1 -1
  25. package/packages/markdown/package.json +1 -1
  26. package/packages/markdown/src/components/Markdown.tsx +12 -6
  27. package/packages/markdown/src/decorate.ts +23 -16
  28. package/packages/markdown/src/marked/attributes.ts +4 -7
  29. package/packages/markdown/src/marked/directives/card.ts +2 -2
  30. package/packages/markdown/src/marked/directives/image.ts +29 -0
  31. package/packages/markdown/src/marked/directives/index.ts +2 -0
  32. package/packages/markdown/src/marked/html.ts +17 -4
  33. package/packages/markdown/src/marked/registry.ts +3 -5
  34. package/packages/markdown/src/marked/renderer.ts +7 -9
  35. package/packages/markdown/src/marked/tokenizer.ts +5 -7
  36. package/packages/markdown/src/sanitize.ts +9 -2
  37. package/packages/markdown/tests/__snapshots__/Markdown.test.tsx.snap +61 -61
  38. package/packages/markdown/tests/image.test.ts +64 -0
  39. package/packages/markdown/tests/sanitize.test.ts +17 -0
  40. package/packages/tailwind-theme-plugin/.turbo/turbo-build.log +2 -2
package/packages/markdown/tests/__snapshots__/Markdown.test.tsx.snap CHANGED
@@ -1,96 +1,96 @@
1
1
  // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
2
2
 
3
3
  exports[`Markdown > directives > should render card 1`] = `
4
- "<div class="py-8 flex flex-col gap-8"><div><div class="border border-solid border-solid-gray-500 rounded-2xl sm:rounded-3xl text-solid-gray-900 overflow-hidden" data-sakura="card"><img class="object-cover mb-2 w-full aspect-[352/226]" src="/a.png" alt="図" data-sakura="card-img">
5
- <h3 class="m-0 text-base leading-[2rem] font-medium first:pt-4 pt-2 last:pb-4 px-6" data-sakura="card-title" id="タイトル">タイトル</h3>
6
- <div class="text-base-sm leading-[1.85rem] first:pt-4 pt-2 last:pb-4 px-6" data-sakura="card-description">説明</div>
4
+ "<div class="py-8 flex flex-col gap-8"><div class="flex flex-col gap-8"><div class="border border-solid border-solid-gray-500 rounded-2xl sm:rounded-3xl text-solid-gray-900 overflow-hidden" data-styled="card"><img class="object-cover mb-2 w-full aspect-[352/226]" src="/a.png" alt="図" data-styled="card-img">
5
+ <h3 class="m-0 text-base leading-[2rem] font-medium first:pt-4 pt-2 last:pb-4 px-6" data-styled="card-title" id="タイトル">タイトル</h3>
6
+ <div class="text-base-sm leading-[1.85rem] first:pt-4 pt-2 last:pb-4 px-6" data-styled="card-description">説明</div>
7
7
  </div>
8
8
  </div></div>"
9
9
  `;
10
10
 
11
11
  exports[`Markdown > directives > should render cell 1`] = `
12
- "<div class="py-8 flex flex-col gap-8"><div><div data-sakura="cell"><img class="mb-4" src="/a.png" alt="図" data-sakura="cell-img">
12
+ "<div class="py-8 flex flex-col gap-8"><div class="flex flex-col gap-8"><div data-styled="cell"><img class="mb-4" src="/a.png" alt="図" data-styled="cell-img">
13
13
  <p>本文</p>
14
14
  </div>
15
15
  </div></div>"
16
16
  `;
17
17
 
18
18
  exports[`Markdown > directives > should render faq 1`] = `
19
- "<div class="py-8 flex flex-col gap-8"><div><dl class="flex flex-col gap-8" data-sakura="faq"><dt class="flex flex-row gap-8 mt-8 text-h-med-m sm:text-h-med" data-sakura="faq-q"><span aria-hidden="true">Q</span><span>質問は？</span></dt>
20
- <dd class="flex flex-row items-start gap-8" data-sakura="faq-a"><span class="text-h-med-m sm:text-h-med !leading-none" aria-hidden="true">A</span><span>回答です。</span></dd>
21
- <dt class="flex flex-row gap-8 mt-8 text-h-med-m sm:text-h-med" data-sakura="faq-q"><span aria-hidden="true">Q</span><span>二つ目の質問は？</span></dt>
22
- <dd class="flex flex-row items-start gap-8" data-sakura="faq-a"><span class="text-h-med-m sm:text-h-med !leading-none" aria-hidden="true">A</span><span>二つ目の回答。</span></dd>
19
+ "<div class="py-8 flex flex-col gap-8"><div class="flex flex-col gap-8"><dl class="flex flex-col gap-8" data-styled="faq"><dt class="flex flex-row gap-8 mt-8 text-h-med-m sm:text-h-med" data-styled="faq-q"><span aria-hidden="true">Q</span><span>質問は？</span></dt>
20
+ <dd class="flex flex-row items-start gap-8" data-styled="faq-a"><span class="text-h-med-m sm:text-h-med !leading-none" aria-hidden="true">A</span><span>回答です。</span></dd>
21
+ <dt class="flex flex-row gap-8 mt-8 text-h-med-m sm:text-h-med" data-styled="faq-q"><span aria-hidden="true">Q</span><span>二つ目の質問は？</span></dt>
22
+ <dd class="flex flex-row items-start gap-8" data-styled="faq-a"><span class="text-h-med-m sm:text-h-med !leading-none" aria-hidden="true">A</span><span>二つ目の回答。</span></dd>
23
23
  </dl>
24
24
  </div></div>"
25
25
  `;
26
26
 
27
27
  exports[`Markdown > directives > should render grid 1`] = `
28
- "<div class="py-8 flex flex-col gap-8"><div><ul class="flex flex-col md:grid md:grid-cols-3 gap-8" data-sakura="grid-cols-3"><li class="sm:grid"><div class="border border-solid border-solid-gray-500 rounded-2xl sm:rounded-3xl text-solid-gray-900 overflow-hidden" data-sakura="card"><h3 class="m-0 text-base leading-[2rem] font-medium first:pt-4 pt-2 last:pb-4 px-6" data-sakura="card-title" id="1つ目">1つ目</h3>
28
+ "<div class="py-8 flex flex-col gap-8"><div class="flex flex-col gap-8"><ul class="flex flex-col md:grid md:grid-cols-3 gap-8" data-styled="grid-cols-3"><li class="sm:grid"><div class="border border-solid border-solid-gray-500 rounded-2xl sm:rounded-3xl text-solid-gray-900 overflow-hidden" data-styled="card"><h3 class="m-0 text-base leading-[2rem] font-medium first:pt-4 pt-2 last:pb-4 px-6" data-styled="card-title" id="1つ目">1つ目</h3>
29
29
  </div></li>
30
- <li class="sm:grid"><div class="border border-solid border-solid-gray-500 rounded-2xl sm:rounded-3xl text-solid-gray-900 overflow-hidden" data-sakura="card"><h3 class="m-0 text-base leading-[2rem] font-medium first:pt-4 pt-2 last:pb-4 px-6" data-sakura="card-title" id="2つ目">2つ目</h3>
30
+ <li class="sm:grid"><div class="border border-solid border-solid-gray-500 rounded-2xl sm:rounded-3xl text-solid-gray-900 overflow-hidden" data-styled="card"><h3 class="m-0 text-base leading-[2rem] font-medium first:pt-4 pt-2 last:pb-4 px-6" data-styled="card-title" id="2つ目">2つ目</h3>
31
31
  </div></li>
32
32
  </ul>
33
33
  </div></div>"
34
34
  `;
35
35
 
36
36
  exports[`Markdown > directives > should render gridMixed 1`] = `
37
- "<div class="py-8 flex flex-col gap-8"><div><div class="flex flex-col md:grid md:grid-cols-2 gap-8" data-sakura="grid-cols-2"><div class="border border-solid border-solid-gray-500 rounded-2xl sm:rounded-3xl text-solid-gray-900 overflow-hidden" data-sakura="card"><h3 class="m-0 text-base leading-[2rem] font-medium first:pt-4 pt-2 last:pb-4 px-6" data-sakura="card-title" id="1つ目">1つ目</h3>
37
+ "<div class="py-8 flex flex-col gap-8"><div class="flex flex-col gap-8"><div class="flex flex-col md:grid md:grid-cols-2 gap-8" data-styled="grid-cols-2"><div class="border border-solid border-solid-gray-500 rounded-2xl sm:rounded-3xl text-solid-gray-900 overflow-hidden" data-styled="card"><h3 class="m-0 text-base leading-[2rem] font-medium first:pt-4 pt-2 last:pb-4 px-6" data-styled="card-title" id="1つ目">1つ目</h3>
38
38
  </div>
39
- <div data-sakura="cell"><p>本文</p>
39
+ <div data-styled="cell"><p>本文</p>
40
40
  </div>
41
41
  </div>
42
42
  </div></div>"
43
43
  `;
44
44
 
45
45
  exports[`Markdown > directives > should render gridOfCells 1`] = `
46
- "<div class="py-8 flex flex-col gap-8"><div><div class="flex flex-col md:grid md:grid-cols-2 gap-8" data-sakura="grid-cols-2"><div data-sakura="cell"><p><img src="/a.png" alt="alt"><br>本文1</p>
46
+ "<div class="py-8 flex flex-col gap-8"><div class="flex flex-col gap-8"><div class="flex flex-col md:grid md:grid-cols-2 gap-8" data-styled="grid-cols-2"><div data-styled="cell"><p><img src="/a.png" alt="alt"><br>本文1</p>
47
47
  </div>
48
- <div data-sakura="cell"><p>本文2</p>
48
+ <div data-styled="cell"><p>本文2</p>
49
49
  </div>
50
50
  </div>
51
51
  </div></div>"
52
52
  `;
53
53
 
54
54
  exports[`Markdown > directives > should render linkButton 1`] = `
55
- "<div class="py-8 flex flex-col gap-8"><div><p>ご案内です。<a class="inline-block text-button text-center cursor-pointer select-none touch-manipulation whitespace-nowrap outline-offset-2 border border-solid border-blue-900 hover:border-blue-1000 active:border-blue-1200 disabled:border-solid-gray-500 disabled:cursor-not-allowed text-blue-900 hover:text-blue-1000 active:text-blue-1200 bg-transparent hover:bg-blue-200 active:bg-blue-300 disabled:bg-transparent disabled:text-solid-gray-500 hover:underline hover:underline-offset-[calc(3/16*1rem)] focus-visible:outline-4 focus-visible:outline-black focus-visible:ring-yellow-300 focus-visible:outline-offset-[calc(2/16*1rem)] focus-visible:ring-[calc(2/16*1rem)] focus-visible:rounded-sm p-4 text-button leading-snug rounded-lg" href="/services" data-sakura="link-button">サービス一覧</a> をどうぞ。</p>
55
+ "<div class="py-8 flex flex-col gap-8"><div class="flex flex-col gap-8"><p>ご案内です。<a class="inline-block text-button text-center cursor-pointer select-none touch-manipulation whitespace-nowrap outline-offset-2 border border-solid border-blue-900 hover:border-blue-1000 active:border-blue-1200 disabled:border-solid-gray-500 disabled:cursor-not-allowed text-blue-900 hover:text-blue-1000 active:text-blue-1200 bg-transparent hover:bg-blue-200 active:bg-blue-300 disabled:bg-transparent disabled:text-solid-gray-500 hover:underline hover:underline-offset-[calc(3/16*1rem)] focus-visible:outline-4 focus-visible:outline-black focus-visible:ring-yellow-300 focus-visible:outline-offset-[calc(2/16*1rem)] focus-visible:ring-[calc(2/16*1rem)] focus-visible:rounded-sm p-4 text-button leading-snug rounded-lg" href="/services" data-styled="link-button">サービス一覧</a> をどうぞ。</p>
56
56
  </div></div>"
57
57
  `;
58
58
 
59
59
  exports[`Markdown > directives > should render linkCard 1`] = `
60
- "<div class="py-8 flex flex-col gap-8"><div><div class="border border-solid border-solid-gray-500 rounded-2xl sm:rounded-3xl text-solid-gray-900 overflow-hidden relative z-0 group hover:outline hover:outline-2 hover:outline-black hover:bg-solid-gray-50 has-[a:focus-visible]:outline has-[a:focus-visible]:outline-4 has-[a:focus-visible]:outline-black has-[a:focus-visible]:outline-offset-[calc(2/16*1rem)] has-[a:focus-visible]:ring-[calc(2/16*1rem)] has-[a:focus-visible]:ring-yellow-300" data-sakura="card"><h3 class="m-0 text-base leading-[2rem] font-medium first:pt-4 pt-2 last:pb-4 px-6 decoration-blue-900 underline underline-offset-[calc(3/16*1rem)] group-hover:text-blue-900 group-hover:decoration-[calc(3/16*1rem)]" data-sakura="card-title" id="タイトル"><a class="after:content-[''] after:absolute after:inset-0 after:z-10 focus-visible:outline-none" href="/x" data-sakura="card-title">タイトル</a></h3>
61
- <div class="text-base-sm leading-[1.85rem] first:pt-4 pt-2 last:pb-4 px-6" data-sakura="card-description">説明</div>
62
- <div class="sticky top-full text-base-sm leading-[1.85rem] first:pt-4 pt-2 last:pb-4 px-6 flex justify-between items-center" data-sakura="card-footer"><span>2026年8月</span><span class="inline-flex items-center justify-center w-6 h-6 text-blue-1000 border border-blue-1000 rounded-full group-hover:bg-blue-1000 group-hover:text-white"><span aria-hidden="true" class="!text-[16px] font-icon font-light inline-block leading-none align-middle whitespace-nowrap">arrow_forward</span><span class="sr-only"></span></span></div>
60
+ "<div class="py-8 flex flex-col gap-8"><div class="flex flex-col gap-8"><div class="border border-solid border-solid-gray-500 rounded-2xl sm:rounded-3xl text-solid-gray-900 overflow-hidden relative z-0 group hover:outline hover:outline-2 hover:outline-black hover:bg-solid-gray-50 has-[a:focus-visible]:outline has-[a:focus-visible]:outline-4 has-[a:focus-visible]:outline-black has-[a:focus-visible]:outline-offset-[calc(2/16*1rem)] has-[a:focus-visible]:ring-[calc(2/16*1rem)] has-[a:focus-visible]:ring-yellow-300" data-styled="card"><h3 class="m-0 text-base leading-[2rem] font-medium first:pt-4 pt-2 last:pb-4 px-6 decoration-blue-900 underline underline-offset-[calc(3/16*1rem)] group-hover:text-blue-900 group-hover:decoration-[calc(3/16*1rem)]" data-styled="card-title" id="タイトル"><a class="after:content-[''] after:absolute after:inset-0 after:z-10 focus-visible:outline-none" href="/x" data-styled="card-title">タイトル</a></h3>
61
+ <div class="text-base-sm leading-[1.85rem] first:pt-4 pt-2 last:pb-4 px-6" data-styled="card-description">説明</div>
62
+ <div class="sticky top-full text-base-sm leading-[1.85rem] first:pt-4 pt-2 last:pb-4 px-6 flex justify-between items-center" data-styled="card-footer"><span>2026年8月</span><span class="inline-flex items-center justify-center w-6 h-6 text-blue-1000 border border-blue-1000 rounded-full group-hover:bg-blue-1000 group-hover:text-white"><span aria-hidden="true" class="!text-[16px] font-icon font-light inline-block leading-none align-middle whitespace-nowrap">arrow_forward</span><span class="sr-only"></span></span></div>
63
63
  </div>
64
64
  </div></div>"
65
65
  `;
66
66
 
67
67
  exports[`Markdown > directives > should render linkCardWithoutTitle 1`] = `
68
- "<div class="py-8 flex flex-col gap-8"><div><div class="border border-solid border-solid-gray-500 rounded-2xl sm:rounded-3xl text-solid-gray-900 overflow-hidden" data-sakura="card"><div class="text-base-sm leading-[1.85rem] first:pt-4 pt-2 last:pb-4 px-6" data-sakura="card-description">説明</div>
69
- <div class="sticky top-full text-base-sm leading-[1.85rem] first:pt-4 pt-2 last:pb-4 px-6" data-sakura="card-footer">2026年8月</div>
68
+ "<div class="py-8 flex flex-col gap-8"><div class="flex flex-col gap-8"><div class="border border-solid border-solid-gray-500 rounded-2xl sm:rounded-3xl text-solid-gray-900 overflow-hidden" data-styled="card"><div class="text-base-sm leading-[1.85rem] first:pt-4 pt-2 last:pb-4 px-6" data-styled="card-description">説明</div>
69
+ <div class="sticky top-full text-base-sm leading-[1.85rem] first:pt-4 pt-2 last:pb-4 px-6" data-styled="card-footer">2026年8月</div>
70
70
  </div>
71
71
  </div></div>"
72
72
  `;
73
73
 
74
74
  exports[`Markdown > directives > should render youtube 1`] = `
75
- "<div class="py-8 flex flex-col gap-8"><div><iframe title="動画タイトル" src="https://www.youtube-nocookie.com/embed/yXdbvBzxeb8" class="aspect-video w-full max-w-[470px]" style="width:560px;" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen="" loading="lazy" data-sakura="youtube"></iframe>
75
+ "<div class="py-8 flex flex-col gap-8"><div class="flex flex-col gap-8"><iframe title="動画タイトル" src="https://www.youtube-nocookie.com/embed/yXdbvBzxeb8" class="aspect-video w-full max-w-[470px]" style="width:560px;" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen="" loading="lazy" data-styled="youtube"></iframe>
76
76
  </div></div>"
77
77
  `;
78
78
 
79
79
  exports[`Markdown > heading shift > should move the headings down by the given amount 1`] = `
80
- "<div class="py-8 flex flex-col gap-8"><div><h2 id="見出し1" class="text-h-med-m sm:text-h-med pt-[4rem] sm:pt-[4.5rem]">見出し1</h2>
80
+ "<div class="py-8 flex flex-col gap-8"><div class="flex flex-col gap-8"><h2 id="見出し1" class="text-h-med-m sm:text-h-med pt-[4rem] sm:pt-[4.5rem]">見出し1</h2>
81
81
  <h3 id="見出し2" class="text-h-sm-m sm:text-h-sm pt-[4rem] sm:pt-[4.5rem]">見出し2</h3>
82
82
  </div></div>"
83
83
  `;
84
84
 
85
85
  exports[`Markdown > headings > should render duplicated 1`] = `
86
- "<div class="py-8 flex flex-col gap-8"><div><h2 id="概要" class="text-h-med-m sm:text-h-med pt-[4rem] sm:pt-[4.5rem]">概要</h2>
86
+ "<div class="py-8 flex flex-col gap-8"><div class="flex flex-col gap-8"><h2 id="概要" class="text-h-med-m sm:text-h-med pt-[4rem] sm:pt-[4.5rem]">概要</h2>
87
87
  <h2 id="概要-1" class="text-h-med-m sm:text-h-med pt-[4rem] sm:pt-[4.5rem]">概要</h2>
88
88
  <h2 id="概要-2" class="text-h-med-m sm:text-h-med pt-[4rem] sm:pt-[4.5rem]">概要</h2>
89
89
  </div></div>"
90
90
  `;
91
91
 
92
92
  exports[`Markdown > headings > should render japanese 1`] = `
93
- "<div class="py-8 flex flex-col gap-8"><div><h2 id="概要" class="text-h-med-m sm:text-h-med pt-[4rem] sm:pt-[4.5rem]">概要</h2>
93
+ "<div class="py-8 flex flex-col gap-8"><div class="flex flex-col gap-8"><h2 id="概要" class="text-h-med-m sm:text-h-med pt-[4rem] sm:pt-[4.5rem]">概要</h2>
94
94
  <h2 id="はじめに概要" class="text-h-med-m sm:text-h-med pt-[4rem] sm:pt-[4.5rem]">はじめに（概要）</h2>
95
95
  <h2 id="ab-テスト" class="text-h-med-m sm:text-h-med pt-[4rem] sm:pt-[4.5rem]">A/B テスト</h2>
96
96
  <h2 id="サービスアプリ" class="text-h-med-m sm:text-h-med pt-[4rem] sm:pt-[4.5rem]">サービス・アプリ</h2>
@@ -98,27 +98,27 @@ exports[`Markdown > headings > should render japanese 1`] = `
98
98
  `;
99
99
 
100
100
  exports[`Markdown > headings > should render withCode 1`] = `
101
- "<div class="py-8 flex flex-col gap-8"><div><h2 id="code-を含む見出し" class="text-h-med-m sm:text-h-med pt-[4rem] sm:pt-[4.5rem]"><code class="bg-solid-gray-50 font-mono">code</code> を含む見出し</h2>
101
+ "<div class="py-8 flex flex-col gap-8"><div class="flex flex-col gap-8"><h2 id="code-を含む見出し" class="text-h-med-m sm:text-h-med pt-[4rem] sm:pt-[4.5rem]"><code class="bg-solid-gray-50 font-mono">code</code> を含む見出し</h2>
102
102
  </div></div>"
103
103
  `;
104
104
 
105
105
  exports[`Markdown > headings > should render withImage 1`] = `
106
- "<div class="py-8 flex flex-col gap-8"><div><h2 id="-会社概要" class="text-h-med-m sm:text-h-med pt-[4rem] sm:pt-[4.5rem]"><img src="/a.png" alt="ロゴ"> 会社概要</h2>
106
+ "<div class="py-8 flex flex-col gap-8"><div class="flex flex-col gap-8"><h2 id="-会社概要" class="text-h-med-m sm:text-h-med pt-[4rem] sm:pt-[4.5rem]"><img src="/a.png" alt="ロゴ"> 会社概要</h2>
107
107
  </div></div>"
108
108
  `;
109
109
 
110
110
  exports[`Markdown > headings > should render withInlineHtml 1`] = `
111
- "<div class="py-8 flex flex-col gap-8"><div><h2 id="太字-タイトル" class="text-h-med-m sm:text-h-med pt-[4rem] sm:pt-[4.5rem]"><b>太字</b> タイトル</h2>
111
+ "<div class="py-8 flex flex-col gap-8"><div class="flex flex-col gap-8"><h2 id="太字-タイトル" class="text-h-med-m sm:text-h-med pt-[4rem] sm:pt-[4.5rem]"><b>太字</b> タイトル</h2>
112
112
  </div></div>"
113
113
  `;
114
114
 
115
115
  exports[`Markdown > malformed html > should recover from closingBr 1`] = `
116
- "<div class="py-8 flex flex-col gap-8"><div><p>一行目<br>二行目<br>三行目<br>四行目</p>
116
+ "<div class="py-8 flex flex-col gap-8"><div class="flex flex-col gap-8"><p>一行目<br>二行目<br>三行目<br>四行目</p>
117
117
  </div></div>"
118
118
  `;
119
119
 
120
120
  exports[`Markdown > malformed html > should recover from crossedNesting 1`] = `
121
- "<div class="py-8 flex flex-col gap-8"><div><ul class="list-disc [&amp;_&amp;]:list-circle [&amp;_&amp;_&amp;]:list-square pl-8">
121
+ "<div class="py-8 flex flex-col gap-8"><div class="flex flex-col gap-8"><ul class="list-disc [&amp;_&amp;]:list-circle [&amp;_&amp;_&amp;]:list-square pl-8">
122
122
  <details>
123
123
  <summary>まとめ</summary>
124
124
  中身
@@ -126,24 +126,24 @@ exports[`Markdown > malformed html > should recover from crossedNesting 1`] = `
126
126
  </ul></div></div>"
127
127
  `;
128
128
 
129
- exports[`Markdown > malformed html > should recover from mistypedClose 1`] = `"<div class="py-8 flex flex-col gap-8"><div><div class="w-full overflow-x-auto whitespace-nowrap print:overflow-visible print:whitespace-normal" data-sakura-table-container="true"><table class="border border-collapse border-solid-gray-420"><tbody><tr class="border border-collapse border-solid-gray-420"><td class="p-2 text-label border border-collapse border-solid-gray-420">値</td></tr></tbody></table></div></div></div>"`;
129
+ exports[`Markdown > malformed html > should recover from mistypedClose 1`] = `"<div class="py-8 flex flex-col gap-8"><div class="flex flex-col gap-8"><div class="w-full overflow-x-auto whitespace-nowrap print:overflow-visible print:whitespace-normal" data-table-container="true"><table class="border border-collapse border-solid-gray-420"><tbody><tr class="border border-collapse border-solid-gray-420"><td class="p-2 text-label border border-collapse border-solid-gray-420">値</td></tr></tbody></table></div></div></div>"`;
130
130
 
131
- exports[`Markdown > malformed html > should recover from unclosedCell 1`] = `"<div class="py-8 flex flex-col gap-8"><div><div class="w-full overflow-x-auto whitespace-nowrap print:overflow-visible print:whitespace-normal" data-sakura-table-container="true"><table class="border border-collapse border-solid-gray-420"><tbody><tr class="border border-collapse border-solid-gray-420"><td class="p-2 text-label border border-collapse border-solid-gray-420">閉じ忘れ</td></tr><tr class="border border-collapse border-solid-gray-420"><td class="p-2 text-label border border-collapse border-solid-gray-420">次の行</td></tr></tbody></table></div></div></div>"`;
131
+ exports[`Markdown > malformed html > should recover from unclosedCell 1`] = `"<div class="py-8 flex flex-col gap-8"><div class="flex flex-col gap-8"><div class="w-full overflow-x-auto whitespace-nowrap print:overflow-visible print:whitespace-normal" data-table-container="true"><table class="border border-collapse border-solid-gray-420"><tbody><tr class="border border-collapse border-solid-gray-420"><td class="p-2 text-label border border-collapse border-solid-gray-420">閉じ忘れ</td></tr><tr class="border border-collapse border-solid-gray-420"><td class="p-2 text-label border border-collapse border-solid-gray-420">次の行</td></tr></tbody></table></div></div></div>"`;
132
132
 
133
133
  exports[`Markdown > plain markdown > should render blockquote 1`] = `
134
- "<div class="py-8 flex flex-col gap-8"><div><blockquote>
134
+ "<div class="py-8 flex flex-col gap-8"><div class="flex flex-col gap-8"><blockquote>
135
135
  <p>引用文<br>続き</p>
136
136
  </blockquote>
137
137
  </div></div>"
138
138
  `;
139
139
 
140
140
  exports[`Markdown > plain markdown > should render cjkSoftBreak 1`] = `
141
- "<div class="py-8 flex flex-col gap-8"><div><p>東京都<br>港区</p>
141
+ "<div class="py-8 flex flex-col gap-8"><div class="flex flex-col gap-8"><p>東京都<br>港区</p>
142
142
  </div></div>"
143
143
  `;
144
144
 
145
145
  exports[`Markdown > plain markdown > should render codeFence 1`] = `
146
- "<div class="py-8 flex flex-col gap-8"><div><pre class="p-4 bg-solid-gray-50 rounded-lg whitespace-pre-wrap overflow-y-scroll"><code class="language-sh bg-solid-gray-50 font-mono">echo "hello"
146
+ "<div class="py-8 flex flex-col gap-8"><div class="flex flex-col gap-8"><pre class="p-4 bg-solid-gray-50 rounded-lg whitespace-pre-wrap overflow-y-scroll"><code class="language-sh bg-solid-gray-50 font-mono">echo "hello"
147
147
  </code></pre>
148
148
  <pre class="p-4 bg-solid-gray-50 rounded-lg whitespace-pre-wrap overflow-y-scroll"><code class="bg-solid-gray-50 font-mono">言語指定なし
149
149
  </code></pre>
@@ -151,12 +151,12 @@ exports[`Markdown > plain markdown > should render codeFence 1`] = `
151
151
  `;
152
152
 
153
153
  exports[`Markdown > plain markdown > should render footnote 1`] = `
154
- "<div class="py-8 flex flex-col gap-8"><div><p>本文<a href="%E8%84%9A%E6%B3%A8%E3%81%AE%E4%B8%AD%E8%BA%AB" class="cursor-pointer text-blue-1000 active:text-orange-700 visited:text-magenta-900 focus-visible:outline-4 focus-visible:outline-black focus-visible:ring-yellow-300 focus-visible:outline-offset-[calc(2/16*1rem)] focus-visible:ring-[calc(2/16*1rem)] focus-visible:bg-yellow-300 focus-visible:rounded-sm underline underline-offset-[calc(3/16*1rem)] hover:decoration-[calc(3/16*1rem)] disabled:border-solid-gray-500 [overflow-wrap:anywhere]">^1</a></p>
154
+ "<div class="py-8 flex flex-col gap-8"><div class="flex flex-col gap-8"><p>本文<a href="%E8%84%9A%E6%B3%A8%E3%81%AE%E4%B8%AD%E8%BA%AB" class="cursor-pointer text-blue-1000 active:text-orange-700 visited:text-magenta-900 focus-visible:outline-4 focus-visible:outline-black focus-visible:ring-yellow-300 focus-visible:outline-offset-[calc(2/16*1rem)] focus-visible:ring-[calc(2/16*1rem)] focus-visible:bg-yellow-300 focus-visible:rounded-sm underline underline-offset-[calc(3/16*1rem)] hover:decoration-[calc(3/16*1rem)] disabled:border-solid-gray-500 [overflow-wrap:anywhere]">^1</a></p>
155
155
  </div></div>"
156
156
  `;
157
157
 
158
158
  exports[`Markdown > plain markdown > should render gfmTable 1`] = `
159
- "<div class="py-8 flex flex-col gap-8"><div><div class="w-full overflow-x-auto whitespace-nowrap print:overflow-visible print:whitespace-normal" data-sakura-table-container="true"><table class="border border-collapse border-solid-gray-420">
159
+ "<div class="py-8 flex flex-col gap-8"><div class="flex flex-col gap-8"><div class="w-full overflow-x-auto whitespace-nowrap print:overflow-visible print:whitespace-normal" data-table-container="true"><table class="border border-collapse border-solid-gray-420">
160
160
  <thead>
161
161
  <tr class="border border-collapse border-solid-gray-420">
162
162
  <th class="p-2 bg-[#f8f8fb] text-label text-left border border-collapse border-solid-gray-420">見出し</th>
@@ -176,7 +176,7 @@ exports[`Markdown > plain markdown > should render gfmTable 1`] = `
176
176
  `;
177
177
 
178
178
  exports[`Markdown > plain markdown > should render headings 1`] = `
179
- "<div class="py-8 flex flex-col gap-8"><div><h1 id="見出し1" class="text-h-lg-m sm:text-h-lg pt-[2rem] sm:pt-[6.5rem]">見出し1</h1>
179
+ "<div class="py-8 flex flex-col gap-8"><div class="flex flex-col gap-8"><h1 id="見出し1" class="text-h-lg-m sm:text-h-lg pt-[2rem] sm:pt-[6.5rem]">見出し1</h1>
180
180
  <h2 id="見出し-2" class="text-h-med-m sm:text-h-med pt-[4rem] sm:pt-[4.5rem]">見出し 2</h2>
181
181
  <h3 id="見出し3" class="text-h-sm-m sm:text-h-sm pt-[4rem] sm:pt-[4.5rem]">見出し・3</h3>
182
182
  <h4 id="はじめに概要" class="text-h-xs-m sm:text-h-xs pt-[3.5rem] sm:pt-[4.5rem]">はじめに（概要）</h4>
@@ -184,17 +184,17 @@ exports[`Markdown > plain markdown > should render headings 1`] = `
184
184
  `;
185
185
 
186
186
  exports[`Markdown > plain markdown > should render image 1`] = `
187
- "<div class="py-8 flex flex-col gap-8"><div><p><img src="/images/a.png" alt="代替テキスト"></p>
187
+ "<div class="py-8 flex flex-col gap-8"><div class="flex flex-col gap-8"><p><img src="/images/a.png" alt="代替テキスト"></p>
188
188
  </div></div>"
189
189
  `;
190
190
 
191
191
  exports[`Markdown > plain markdown > should render links 1`] = `
192
- "<div class="py-8 flex flex-col gap-8"><div><p><a href="/foo" class="cursor-pointer text-blue-1000 active:text-orange-700 visited:text-magenta-900 focus-visible:outline-4 focus-visible:outline-black focus-visible:ring-yellow-300 focus-visible:outline-offset-[calc(2/16*1rem)] focus-visible:ring-[calc(2/16*1rem)] focus-visible:bg-yellow-300 focus-visible:rounded-sm underline underline-offset-[calc(3/16*1rem)] hover:decoration-[calc(3/16*1rem)] disabled:border-solid-gray-500 [overflow-wrap:anywhere]">内部</a> と <a href="https://example.com" target="_blank" rel="noopener noreferrer" class="cursor-pointer text-blue-1000 active:text-orange-700 visited:text-magenta-900 focus-visible:outline-4 focus-visible:outline-black focus-visible:ring-yellow-300 focus-visible:outline-offset-[calc(2/16*1rem)] focus-visible:ring-[calc(2/16*1rem)] focus-visible:bg-yellow-300 focus-visible:rounded-sm underline underline-offset-[calc(3/16*1rem)] hover:decoration-[calc(3/16*1rem)] disabled:border-solid-gray-500 [overflow-wrap:anywhere]">外部<span aria-hidden="true" data-sakura-new-tab="true" class="!text-[16px] font-icon font-light inline-block leading-none align-middle whitespace-nowrap ml-0.5">open_in_new</span><span class="sr-only">Opens in new tab</span></a> と <a href="https://example.com/bare" target="_blank" rel="noopener noreferrer" class="cursor-pointer text-blue-1000 active:text-orange-700 visited:text-magenta-900 focus-visible:outline-4 focus-visible:outline-black focus-visible:ring-yellow-300 focus-visible:outline-offset-[calc(2/16*1rem)] focus-visible:ring-[calc(2/16*1rem)] focus-visible:bg-yellow-300 focus-visible:rounded-sm underline underline-offset-[calc(3/16*1rem)] hover:decoration-[calc(3/16*1rem)] disabled:border-solid-gray-500 [overflow-wrap:anywhere]">https://example.com/bare<span aria-hidden="true" data-sakura-new-tab="true" class="!text-[16px] font-icon font-light inline-block leading-none align-middle whitespace-nowrap ml-0.5">open_in_new</span><span class="sr-only">Opens in new tab</span></a></p>
192
+ "<div class="py-8 flex flex-col gap-8"><div class="flex flex-col gap-8"><p><a href="/foo" class="cursor-pointer text-blue-1000 active:text-orange-700 visited:text-magenta-900 focus-visible:outline-4 focus-visible:outline-black focus-visible:ring-yellow-300 focus-visible:outline-offset-[calc(2/16*1rem)] focus-visible:ring-[calc(2/16*1rem)] focus-visible:bg-yellow-300 focus-visible:rounded-sm underline underline-offset-[calc(3/16*1rem)] hover:decoration-[calc(3/16*1rem)] disabled:border-solid-gray-500 [overflow-wrap:anywhere]">内部</a> と <a href="https://example.com" target="_blank" rel="noopener noreferrer" class="cursor-pointer text-blue-1000 active:text-orange-700 visited:text-magenta-900 focus-visible:outline-4 focus-visible:outline-black focus-visible:ring-yellow-300 focus-visible:outline-offset-[calc(2/16*1rem)] focus-visible:ring-[calc(2/16*1rem)] focus-visible:bg-yellow-300 focus-visible:rounded-sm underline underline-offset-[calc(3/16*1rem)] hover:decoration-[calc(3/16*1rem)] disabled:border-solid-gray-500 [overflow-wrap:anywhere]">外部<span aria-hidden="true" data-new-tab="true" class="!text-[16px] font-icon font-light inline-block leading-none align-middle whitespace-nowrap ml-0.5">open_in_new</span><span class="sr-only">Opens in new tab</span></a> と <a href="https://example.com/bare" target="_blank" rel="noopener noreferrer" class="cursor-pointer text-blue-1000 active:text-orange-700 visited:text-magenta-900 focus-visible:outline-4 focus-visible:outline-black focus-visible:ring-yellow-300 focus-visible:outline-offset-[calc(2/16*1rem)] focus-visible:ring-[calc(2/16*1rem)] focus-visible:bg-yellow-300 focus-visible:rounded-sm underline underline-offset-[calc(3/16*1rem)] hover:decoration-[calc(3/16*1rem)] disabled:border-solid-gray-500 [overflow-wrap:anywhere]">https://example.com/bare<span aria-hidden="true" data-new-tab="true" class="!text-[16px] font-icon font-light inline-block leading-none align-middle whitespace-nowrap ml-0.5">open_in_new</span><span class="sr-only">Opens in new tab</span></a></p>
193
193
  </div></div>"
194
194
  `;
195
195
 
196
196
  exports[`Markdown > plain markdown > should render list 1`] = `
197
- "<div class="py-8 flex flex-col gap-8"><div><ul class="list-disc [&amp;_&amp;]:list-circle [&amp;_&amp;_&amp;]:list-square pl-8">
197
+ "<div class="py-8 flex flex-col gap-8"><div class="flex flex-col gap-8"><ul class="list-disc [&amp;_&amp;]:list-circle [&amp;_&amp;_&amp;]:list-square pl-8">
198
198
  <li>項目1</li>
199
199
  <li>項目2<ul class="list-disc [&amp;_&amp;]:list-circle [&amp;_&amp;_&amp;]:list-square pl-8">
200
200
  <li>入れ子<ul class="list-disc [&amp;_&amp;]:list-circle [&amp;_&amp;_&amp;]:list-square pl-8">
@@ -212,21 +212,21 @@ exports[`Markdown > plain markdown > should render list 1`] = `
212
212
  `;
213
213
 
214
214
  exports[`Markdown > plain markdown > should render paragraph 1`] = `
215
- "<div class="py-8 flex flex-col gap-8"><div><p>段落です。<strong>強調</strong> と <em>斜体</em> と <code class="bg-solid-gray-50 font-mono">コード</code> と <del>取り消し</del>。</p>
215
+ "<div class="py-8 flex flex-col gap-8"><div class="flex flex-col gap-8"><p>段落です。<strong>強調</strong> と <em>斜体</em> と <code class="bg-solid-gray-50 font-mono">コード</code> と <del>取り消し</del>。</p>
216
216
  </div></div>"
217
217
  `;
218
218
 
219
219
  exports[`Markdown > plain markdown > should render rule 1`] = `
220
- "<div class="py-8 flex flex-col gap-8"><div><hr>
220
+ "<div class="py-8 flex flex-col gap-8"><div class="flex flex-col gap-8"><hr>
221
221
  </div></div>"
222
222
  `;
223
223
 
224
224
  exports[`Markdown > raw html > should render details 1`] = `
225
- "<div class="py-8 flex flex-col gap-8"><div><details>
225
+ "<div class="py-8 flex flex-col gap-8"><div class="flex flex-col gap-8"><details>
226
226
  <summary>詳細はこちら</summary><ul class="list-disc [&amp;_&amp;]:list-circle [&amp;_&amp;_&amp;]:list-square pl-8">
227
227
  <li>リスト項目</li>
228
228
  </ul>
229
- <div class="w-full overflow-x-auto whitespace-nowrap print:overflow-visible print:whitespace-normal" data-sakura-table-container="true"><table class="border border-collapse border-solid-gray-420">
229
+ <div class="w-full overflow-x-auto whitespace-nowrap print:overflow-visible print:whitespace-normal" data-table-container="true"><table class="border border-collapse border-solid-gray-420">
230
230
  <thead>
231
231
  <tr class="border border-collapse border-solid-gray-420">
232
232
  <th class="p-2 bg-[#f8f8fb] text-label text-left border border-collapse border-solid-gray-420">表</th>
@@ -242,25 +242,25 @@ exports[`Markdown > raw html > should render details 1`] = `
242
242
  `;
243
243
 
244
244
  exports[`Markdown > raw html > should render externalAnchor 1`] = `
245
- "<div class="py-8 flex flex-col gap-8"><div><p><a href="https://example.com" target="_blank" rel="noopener noreferrer" class="cursor-pointer text-blue-1000 active:text-orange-700 visited:text-magenta-900 focus-visible:outline-4 focus-visible:outline-black focus-visible:ring-yellow-300 focus-visible:outline-offset-[calc(2/16*1rem)] focus-visible:ring-[calc(2/16*1rem)] focus-visible:bg-yellow-300 focus-visible:rounded-sm underline underline-offset-[calc(3/16*1rem)] hover:decoration-[calc(3/16*1rem)] disabled:border-solid-gray-500 [overflow-wrap:anywhere]">外部リンク<span aria-hidden="true" data-sakura-new-tab="true" class="!text-[16px] font-icon font-light inline-block leading-none align-middle whitespace-nowrap ml-0.5">open_in_new</span><span class="sr-only">Opens in new tab</span></a></p>
245
+ "<div class="py-8 flex flex-col gap-8"><div class="flex flex-col gap-8"><p><a href="https://example.com" target="_blank" rel="noopener noreferrer" class="cursor-pointer text-blue-1000 active:text-orange-700 visited:text-magenta-900 focus-visible:outline-4 focus-visible:outline-black focus-visible:ring-yellow-300 focus-visible:outline-offset-[calc(2/16*1rem)] focus-visible:ring-[calc(2/16*1rem)] focus-visible:bg-yellow-300 focus-visible:rounded-sm underline underline-offset-[calc(3/16*1rem)] hover:decoration-[calc(3/16*1rem)] disabled:border-solid-gray-500 [overflow-wrap:anywhere]">外部リンク<span aria-hidden="true" data-new-tab="true" class="!text-[16px] font-icon font-light inline-block leading-none align-middle whitespace-nowrap ml-0.5">open_in_new</span><span class="sr-only">Opens in new tab</span></a></p>
246
246
  </div></div>"
247
247
  `;
248
248
 
249
249
  exports[`Markdown > raw html > should render inlineTags 1`] = `
250
- "<div class="py-8 flex flex-col gap-8"><div><p>本文に <strong>太字</strong> と <u>下線</u> と <sup>（※1）</sup> と <small>小</small>。</p>
250
+ "<div class="py-8 flex flex-col gap-8"><div class="flex flex-col gap-8"><p>本文に <strong>太字</strong> と <u>下線</u> と <sup>（※1）</sup> と <small>小</small>。</p>
251
251
  </div></div>"
252
252
  `;
253
253
 
254
254
  exports[`Markdown > raw html > should render styledBlock 1`] = `
255
- "<div class="py-8 flex flex-col gap-8"><div><div style="background-color: #E8F1FE; padding: 12px 16px; border-radius: 8px; margin: 0 24px;">
255
+ "<div class="py-8 flex flex-col gap-8"><div class="flex flex-col gap-8"><div style="background-color: #E8F1FE; padding: 12px 16px; border-radius: 8px; margin: 0 24px;">
256
256
  注記のボックス
257
257
  </div></div></div>"
258
258
  `;
259
259
 
260
- exports[`Markdown > raw html > should render styledImg 1`] = `"<div class="py-8 flex flex-col gap-8"><div><img src="/images/a.png" alt="図" style="width: 800px; color-scheme: light;"></div></div>"`;
260
+ exports[`Markdown > raw html > should render styledImg 1`] = `"<div class="py-8 flex flex-col gap-8"><div class="flex flex-col gap-8"><img src="/images/a.png" alt="図" style="width: 800px; color-scheme: light;"></div></div>"`;
261
261
 
262
262
  exports[`Markdown > raw html > should render tableSpan 1`] = `
263
- "<div class="py-8 flex flex-col gap-8"><div><div class="w-full overflow-x-auto whitespace-nowrap print:overflow-visible print:whitespace-normal" data-sakura-table-container="true"><table class="border border-collapse border-solid-gray-420">
263
+ "<div class="py-8 flex flex-col gap-8"><div class="flex flex-col gap-8"><div class="w-full overflow-x-auto whitespace-nowrap print:overflow-visible print:whitespace-normal" data-table-container="true"><table class="border border-collapse border-solid-gray-420">
264
264
  <caption class="text-left">表:01 キャプション</caption>
265
265
  <colgroup><col style="width: 15%;"><col style="width: auto;"></colgroup>
266
266
  <thead><tr class="border border-collapse border-solid-gray-420"><th colspan="2" class="p-2 bg-[#f8f8fb] text-label text-left border border-collapse border-solid-gray-420">見出し</th></tr></thead>
@@ -382,7 +382,7 @@ exports[`Markdown > table of contents > should render the table of contents when
382
382
 
383
383
  disabled:border-solid-gray-500
384
384
  [overflow-wrap:anywhere]
385
- " href="#章2">章2</a></li></ul></nav><div><h1 id="章1" class="text-h-lg-m sm:text-h-lg pt-[2rem] sm:pt-[6.5rem]">章1</h1>
385
+ " href="#章2">章2</a></li></ul></nav><div class="flex flex-col gap-8"><h1 id="章1" class="text-h-lg-m sm:text-h-lg pt-[2rem] sm:pt-[6.5rem]">章1</h1>
386
386
  <h2 id="節1" class="text-h-med-m sm:text-h-med pt-[4rem] sm:pt-[4.5rem]">節1</h2>
387
387
  <h3 id="項1" class="text-h-sm-m sm:text-h-sm pt-[4rem] sm:pt-[4.5rem]">項1</h3>
388
388
  <h2 id="節2" class="text-h-med-m sm:text-h-med pt-[4rem] sm:pt-[4.5rem]">節2</h2>
@@ -391,56 +391,56 @@ exports[`Markdown > table of contents > should render the table of contents when
391
391
  `;
392
392
 
393
393
  exports[`Markdown > text that only looks like a directive > should leave chapter alone 1`] = `
394
- "<div class="py-8 flex flex-col gap-8"><div><p>第1章:はじめに</p>
394
+ "<div class="py-8 flex flex-col gap-8"><div class="flex flex-col gap-8"><p>第1章:はじめに</p>
395
395
  </div></div>"
396
396
  `;
397
397
 
398
398
  exports[`Markdown > text that only looks like a directive > should leave colonWord alone 1`] = `
399
- "<div class="py-8 flex flex-col gap-8"><div><p>参照:example と note:important を見てください。</p>
399
+ "<div class="py-8 flex flex-col gap-8"><div class="flex flex-col gap-8"><p>参照:example と note:important を見てください。</p>
400
400
  </div></div>"
401
401
  `;
402
402
 
403
403
  exports[`Markdown > text that only looks like a directive > should leave emoji alone 1`] = `
404
- "<div class="py-8 flex flex-col gap-8"><div><p>絵文字 :smile: です。</p>
404
+ "<div class="py-8 flex flex-col gap-8"><div class="flex flex-col gap-8"><p>絵文字 :smile: です。</p>
405
405
  </div></div>"
406
406
  `;
407
407
 
408
408
  exports[`Markdown > text that only looks like a directive > should leave functionCall alone 1`] = `
409
- "<div class="py-8 flex flex-col gap-8"><div><p>関数 foo:bar() を呼びます。</p>
409
+ "<div class="py-8 flex flex-col gap-8"><div class="flex flex-col gap-8"><p>関数 foo:bar() を呼びます。</p>
410
410
  </div></div>"
411
411
  `;
412
412
 
413
413
  exports[`Markdown > text that only looks like a directive > should leave linkLabel alone 1`] = `
414
- "<div class="py-8 flex flex-col gap-8"><div><p><a href="https://example.com" target="_blank" rel="noopener noreferrer" class="cursor-pointer text-blue-1000 active:text-orange-700 visited:text-magenta-900 focus-visible:outline-4 focus-visible:outline-black focus-visible:ring-yellow-300 focus-visible:outline-offset-[calc(2/16*1rem)] focus-visible:ring-[calc(2/16*1rem)] focus-visible:bg-yellow-300 focus-visible:rounded-sm underline underline-offset-[calc(3/16*1rem)] hover:decoration-[calc(3/16*1rem)] disabled:border-solid-gray-500 [overflow-wrap:anywhere]">AWSドキュメント:AWS PrivateLink<span aria-hidden="true" data-sakura-new-tab="true" class="!text-[16px] font-icon font-light inline-block leading-none align-middle whitespace-nowrap ml-0.5">open_in_new</span><span class="sr-only">Opens in new tab</span></a></p>
414
+ "<div class="py-8 flex flex-col gap-8"><div class="flex flex-col gap-8"><p><a href="https://example.com" target="_blank" rel="noopener noreferrer" class="cursor-pointer text-blue-1000 active:text-orange-700 visited:text-magenta-900 focus-visible:outline-4 focus-visible:outline-black focus-visible:ring-yellow-300 focus-visible:outline-offset-[calc(2/16*1rem)] focus-visible:ring-[calc(2/16*1rem)] focus-visible:bg-yellow-300 focus-visible:rounded-sm underline underline-offset-[calc(3/16*1rem)] hover:decoration-[calc(3/16*1rem)] disabled:border-solid-gray-500 [overflow-wrap:anywhere]">AWSドキュメント:AWS PrivateLink<span aria-hidden="true" data-new-tab="true" class="!text-[16px] font-icon font-light inline-block leading-none align-middle whitespace-nowrap ml-0.5">open_in_new</span><span class="sr-only">Opens in new tab</span></a></p>
415
415
  </div></div>"
416
416
  `;
417
417
 
418
418
  exports[`Markdown > text that only looks like a directive > should leave ratio alone 1`] = `
419
- "<div class="py-8 flex flex-col gap-8"><div><p>比率は 16:9 です。</p>
419
+ "<div class="py-8 flex flex-col gap-8"><div class="flex flex-col gap-8"><p>比率は 16:9 です。</p>
420
420
  </div></div>"
421
421
  `;
422
422
 
423
423
  exports[`Markdown > text that only looks like a directive > should leave scopeName alone 1`] = `
424
- "<div class="py-8 flex flex-col gap-8"><div><p>スコープ chat:write を付与する。</p>
424
+ "<div class="py-8 flex flex-col gap-8"><div class="flex flex-col gap-8"><p>スコープ chat:write を付与する。</p>
425
425
  </div></div>"
426
426
  `;
427
427
 
428
428
  exports[`Markdown > text that only looks like a directive > should leave time alone 1`] = `
429
- "<div class="py-8 flex flex-col gap-8"><div><p>開始は 10:30 です。</p>
429
+ "<div class="py-8 flex flex-col gap-8"><div class="flex flex-col gap-8"><p>開始は 10:30 です。</p>
430
430
  </div></div>"
431
431
  `;
432
432
 
433
433
  exports[`Markdown > text that only looks like a directive > should leave timeFormat alone 1`] = `
434
- "<div class="py-8 flex flex-col gap-8"><div><p>開始時刻は HH:MM 形式で記載する。</p>
434
+ "<div class="py-8 flex flex-col gap-8"><div class="flex flex-col gap-8"><p>開始時刻は HH:MM 形式で記載する。</p>
435
435
  </div></div>"
436
436
  `;
437
437
 
438
438
  exports[`Markdown > text that only looks like a directive > should leave todo alone 1`] = `
439
- "<div class="py-8 flex flex-col gap-8"><div><p>TODO: あとで直す</p>
439
+ "<div class="py-8 flex flex-col gap-8"><div class="flex flex-col gap-8"><p>TODO: あとで直す</p>
440
440
  </div></div>"
441
441
  `;
442
442
 
443
443
  exports[`Markdown > text that only looks like a directive > should leave xmlAttr alone 1`] = `
444
- "<div class="py-8 flex flex-col gap-8"><div><p>属性は xml:lang です。</p>
444
+ "<div class="py-8 flex flex-col gap-8"><div class="flex flex-col gap-8"><p>属性は xml:lang です。</p>
445
445
  </div></div>"
446
446
  `;
package/packages/markdown/tests/image.test.ts ADDED
@@ -0,0 +1,64 @@
1
+ import { describe, expect, it } from 'vitest'
2
+ import { render } from '../src/render'
3
+
4
+ const html = (markdown: string) => render(markdown).html
5
+ const style = (markdown: string) => /style="([^"]*)"/.exec(html(markdown))?.[1]
6
+
7
+ /**
8
+ * `::img` is the Markdown image plus a size. A document that needs one reaches
9
+ * for raw HTML and an inline style otherwise.
10
+ */
11
+ describe('img', () => {
12
+ it('should render the source and the alternative text', () => {
13
+ const out = html('::img{src=/a.png alt="A field at dawn"}')
14
+ expect(out).toContain('src="/a.png"')
15
+ expect(out).toContain('alt="A field at dawn"')
16
+ })
17
+
18
+ it('should take no size', () => {
19
+ expect(style('::img{src=/a.png alt=図}')).toBeUndefined()
20
+ })
21
+
22
+ it('should draw at the width asked for', () => {
23
+ expect(style('::img{src=/a.png alt=図 width=520}')).toBe(
24
+ 'width:520px; max-width:100%;'
25
+ )
26
+ })
27
+
28
+ it('should keep the image inside a narrow column', () => {
29
+ // Without max-width a fixed width overflows on a phone.
30
+ expect(style('::img{src=/a.png alt=図 width=1200}')).toContain(
31
+ 'max-width:100%'
32
+ )
33
+ })
34
+
35
+ it('should draw at the height asked for', () => {
36
+ expect(style('::img{src=/a.png alt=図 height=300}')).toBe('height:300px;')
37
+ })
38
+
39
+ it('should take both', () => {
40
+ expect(style('::img{src=/a.png alt=図 width=520 height=300}')).toBe(
41
+ 'width:520px; height:300px; max-width:100%;'
42
+ )
43
+ })
44
+
45
+ it('should survive the sanitiser', () => {
46
+ // width and max-width are on the CSS allowlist; a property that is not
47
+ // would be dropped here rather than in the renderer.
48
+ expect(html('::img{src=/a.png alt=図 width=520}')).toContain('520px')
49
+ })
50
+
51
+ it('should refuse a javascript URL', () => {
52
+ expect(html('::img{src=javascript:alert(1) alt=図}')).not.toContain(
53
+ 'javascript:'
54
+ )
55
+ })
56
+
57
+ it('should answer to {#name}', () => {
58
+ expect(html('::img{#figure-1 src=/a.png alt=図}')).toContain('id="figure-1"')
59
+ })
60
+
61
+ it('should be empty alt when none is given', () => {
62
+ expect(html('::img{src=/a.png}')).toContain('alt=""')
63
+ })
64
+ })
package/packages/markdown/tests/sanitize.test.ts CHANGED
@@ -135,6 +135,23 @@ describe('sanitize', () => {
135
135
  expect(out).toContain('rel="noopener noreferrer"')
136
136
  })
137
137
 
138
+ it('should keep a rel the document asked for as well', () => {
139
+ const out = html(
140
+ '<a href="https://example.com" target="_blank" rel="nofollow">外部</a>'
141
+ )
142
+ const rel = /rel="([^"]*)"/.exec(out)?.[1].split(' ')
143
+ expect(rel).toContain('noopener')
144
+ expect(rel).toContain('noreferrer')
145
+ expect(rel).toContain('nofollow')
146
+ })
147
+
148
+ it('should not repeat a rel the document already asked for', () => {
149
+ const out = html(
150
+ '<a href="https://example.com" target="_blank" rel="noopener">外部</a>'
151
+ )
152
+ expect(out).toContain('rel="noopener noreferrer"')
153
+ })
154
+
138
155
  it('should say that the link opens elsewhere', () => {
139
156
  const out = html('[外部](https://example.com)')
140
157
  expect(out).toContain('Opens in new tab')
package/packages/tailwind-theme-plugin/.turbo/turbo-build.log CHANGED
@@ -1,7 +1,7 @@
1
1
  $ rimraf dist
2
2
  $ run-p build:*
3
- $ tsc && tsc-alias
4
3
  $ vite build
4
+ $ tsc && tsc-alias
5
5
  vite v7.3.6 building client environment for production...
6
6
  transforming...
7
7
  ✓ 5 modules transformed.
@@ -9,4 +9,4 @@ rendering chunks...
9
9
  computing gzip size...
10
10
  dist/index.es.js 160.05 kB │ gzip: 10.15 kB
11
11
  dist/index.cjs.js 88.17 kB │ gzip: 8.80 kB
12
- ✓ built in 706ms
12
+ ✓ built in 502ms