feat: apply dir="auto" to callout container elements for automatic …

…text direction
lin-stephanie · Nov 9, 2024 · 5e2dbd0 · 5e2dbd0
1 parent fa7aa88
commit 5e2dbd0
Show file tree

Hide file tree

Showing 14 changed files with 51 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -107,6 +107,7 @@ Then running `node example.js` or `pnpm astro dev` yields:
 
 ```html
 <div
+  dir="auto"
   class="callout"
   style="--callout-color-light: rgb(8, 109, 221); --callout-color-dark: rgb(2, 122, 255);"
 >
@@ -124,6 +125,7 @@ Then running `node example.js` or `pnpm astro dev` yields:
 </div>
 
 <details
+  dir="auto"
   class="callout callout-collapsible"
   style="--callout-color-light: rgb(236, 117, 0); --callout-color-dark: rgb(233, 151, 63);"
 >

diff --git a/src/index.ts b/src/index.ts
@@ -141,6 +141,7 @@ const rehypeCallouts: Plugin<[UserOptions?], Root> = (options) => {
       // modify the blockquote element
       // @ts-expect-error (Type '"div" | "details"' is not assignable to type '"blockquote"')
       node.tagName = collapsable ? 'details' : 'div'
+      node.properties.dir = 'auto'
       node.properties.className = [
         'callout',
         collapsable && 'callout-collapsible',

diff --git a/test/fixtures/basic/output.html b/test/fixtures/basic/output.html
@@ -1,4 +1,5 @@
 <div
+  dir="auto"
   class="callout"
   style="--callout-color-light: rgb(8, 109, 221); --callout-color-dark: rgb(2, 122, 255);"
 >
@@ -11,6 +12,7 @@
 </div>
 
 <div
+  dir="auto"
   class="callout"
   style="--callout-color-light: rgb(0, 191, 188); --callout-color-dark: rgb(83, 223, 221);"
 >
@@ -23,6 +25,7 @@
 </div>
 
 <div
+  dir="auto"
   class="callout"
   style="--callout-color-light: rgb(0, 191, 188); --callout-color-dark: rgb(83, 223, 221);"
 >
@@ -35,6 +38,7 @@
 </div>
 
 <div
+  dir="auto"
   class="callout"
   style="--callout-color-light: rgb(236, 117, 0); --callout-color-dark: rgb(233, 151, 63);"
 >

diff --git a/test/fixtures/collapsibleCallouts/output.html b/test/fixtures/collapsibleCallouts/output.html
@@ -1,4 +1,5 @@
 <details
+  dir="auto"
   class="callout callout-collapsible"
   style="--callout-color-light: rgb(8, 109, 221); --callout-color-dark: rgb(2, 122, 255);"
 >
@@ -26,6 +27,7 @@
 </details>
 
 <details
+  dir="auto"
   class="callout callout-collapsible"
   style="--callout-color-light: rgb(0, 191, 188); --callout-color-dark: rgb(83, 223, 221);"
 >
@@ -53,6 +55,7 @@
 </details>
 
 <details
+  dir="auto"
   class="callout callout-collapsible"
   style="--callout-color-light: rgb(0, 191, 188); --callout-color-dark: rgb(83, 223, 221);"
 >
@@ -80,6 +83,7 @@
 </details>
 
 <details
+  dir="auto"
   class="callout callout-collapsible"
   style="--callout-color-light: rgb(236, 117, 0); --callout-color-dark: rgb(233, 151, 63);"
 >

diff --git a/test/fixtures/customAliases/output.html b/test/fixtures/customAliases/output.html
@@ -1,4 +1,5 @@
 <div
+  dir="auto"
   class="callout"
   style="--callout-color-light: rgb(8, 109, 221); --callout-color-dark: rgb(2, 122, 255);"
 >
@@ -11,6 +12,7 @@
 </div>
 
 <div
+  dir="auto"
   class="callout"
   style="--callout-color-light: rgb(8, 109, 221); --callout-color-dark: rgb(2, 122, 255);"
 >
@@ -23,6 +25,7 @@
 </div>
 
 <div
+  dir="auto"
   class="callout"
   style="--callout-color-light: rgb(0, 191, 188); --callout-color-dark: rgb(83, 223, 221);"
 >
@@ -35,6 +38,7 @@
 </div>
 
 <div
+  dir="auto"
   class="callout"
   style="--callout-color-light: rgb(8, 109, 221); --callout-color-dark: rgb(2, 122, 255);"
 >

diff --git a/test/fixtures/customCallouts/output.html b/test/fixtures/customCallouts/output.html
@@ -1,4 +1,5 @@
 <div
+  dir="auto"
   class="callout"
   style="--callout-color-light: rgb(227, 107, 167); --callout-color-dark: rgb(227, 107, 167);"
 >
@@ -28,6 +29,7 @@
 </div>
 
 <div
+  dir="auto"
   class="callout"
   style="--callout-color-light: rgb(227, 107, 167); --callout-color-dark: rgb(227, 107, 167);"
 >
@@ -57,6 +59,7 @@
 </div>
 
 <div
+  dir="auto"
   class="callout"
   style="--callout-color-light: #e36ba7; --callout-color-dark: #f86bb7;"
 >
@@ -69,6 +72,7 @@
 </div>
 
 <div
+  dir="auto"
   class="callout"
   style="--callout-color-light: #e36ba7; --callout-color-dark: #f86bb7;"
 >
@@ -83,6 +87,7 @@
 </div>
 
 <div
+  dir="auto"
   class="callout"
   style="--callout-color-light: rgb(227, 107, 167); --callout-color-dark: rgb(227, 107, 167);"
 >
@@ -112,6 +117,7 @@
 </div>
 
 <div
+  dir="auto"
   class="callout"
   style="--callout-color-light: rgb(227, 107, 167); --callout-color-dark: rgb(227, 107, 167);"
 >
@@ -143,6 +149,7 @@
 </div>
 
 <div
+  dir="auto"
   class="callout"
   style="--callout-color-light: #888; --callout-color-dark: #888;"
 >
@@ -155,6 +162,7 @@
 </div>
 
 <div
+  dir="auto"
   class="callout"
   style="--callout-color-light: #888; --callout-color-dark: #888;"
 >

diff --git a/test/fixtures/customTheme/output.html b/test/fixtures/customTheme/output.html
@@ -1,4 +1,5 @@
 <div
+  dir="auto"
   class="callout"
   style="--callout-color-light: rgb(142, 150, 170); --callout-color-dark: rgb(101, 117, 133);"
 >
@@ -25,6 +26,7 @@
 </div>
 
 <div
+  dir="auto"
   class="callout"
   style="--callout-color-light: rgb(100, 108, 255); --callout-color-dark: rgb(100, 108, 255);"
 >
@@ -54,6 +56,7 @@
 </div>
 
 <div
+  dir="auto"
   class="callout"
   style="--callout-color-light: rgb(159, 122, 234); --callout-color-dark: rgb(159, 122, 234);"
 >
@@ -83,6 +86,7 @@
 </div>
 
 <div
+  dir="auto"
   class="callout"
   style="--callout-color-light: rgb(234, 179, 8); --callout-color-dark: rgb(234, 179, 8);"
 >
@@ -116,6 +120,7 @@
 </blockquote>
 
 <div
+  dir="auto"
   class="callout"
   style="--callout-color-light: #888; --callout-color-dark: #888;"
 >

diff --git a/test/fixtures/fromHtml/output.html b/test/fixtures/fromHtml/output.html
@@ -1,4 +1,5 @@
 <div
+  dir="auto"
   class="callout"
   style="--callout-color-light: rgb(8, 109, 221); --callout-color-dark: rgb(2, 122, 255);"
 >
@@ -11,6 +12,7 @@
 </div>
 
 <div
+  dir="auto"
   class="callout"
   style="--callout-color-light: rgb(0, 191, 188); --callout-color-dark: rgb(83, 223, 221);"
 >
@@ -23,6 +25,7 @@
 </div>
 
 <details
+  dir="auto"
   class="callout callout-collapsible"
   style="--callout-color-light: rgb(236, 117, 0); --callout-color-dark: rgb(233, 151, 63);"
 >

diff --git a/test/fixtures/markdownInTitle/output.html b/test/fixtures/markdownInTitle/output.html
@@ -1,4 +1,5 @@
 <div
+  dir="auto"
   class="callout"
   style="--callout-color-light: rgb(8, 109, 221); --callout-color-dark: rgb(2, 122, 255);"
 >

diff --git a/test/fixtures/modifyCallouts/output.html b/test/fixtures/modifyCallouts/output.html
@@ -1,4 +1,5 @@
 <div
+  dir="auto"
   class="callout"
   style="--callout-color-light: rgb(8, 109, 221); --callout-color-dark: rgb(2, 122, 255);"
 >
@@ -27,6 +28,7 @@
 </div>
 
 <div
+  dir="auto"
   class="callout"
   style="--callout-color-light: rgb(0, 191, 188); --callout-color-dark: rgb(83, 223, 221);"
 >
@@ -56,6 +58,7 @@
 </div>
 
 <div
+  dir="auto"
   class="callout"
   style="--callout-color-light: #e36ba7; --callout-color-dark: #f86bb7;"
 >

diff --git a/test/fixtures/nestedCallouts/output.html b/test/fixtures/nestedCallouts/output.html
@@ -1,4 +1,5 @@
 <div
+  dir="auto"
   class="callout"
   style="--callout-color-light: rgb(8, 109, 221); --callout-color-dark: rgb(2, 122, 255);"
 >
@@ -8,6 +9,7 @@
   <div class="callout-content">
     <p>This is the content!</p>
     <div
+      dir="auto"
       class="callout"
       style="--callout-color-light: rgb(0, 191, 188); --callout-color-dark: rgb(83, 223, 221);"
     >
@@ -20,6 +22,7 @@
 </div>
 
 <div
+  dir="auto"
   class="callout"
   style="--callout-color-light: rgb(8, 109, 221); --callout-color-dark: rgb(2, 122, 255);"
 >
@@ -29,6 +32,7 @@
   <div class="callout-content">
     <p>This is the content!</p>
     <div
+      dir="auto"
       class="callout"
       style="--callout-color-light: rgb(0, 191, 188); --callout-color-dark: rgb(83, 223, 221);"
     >
@@ -42,6 +46,7 @@
 </div>
 
 <details
+  dir="auto"
   class="callout callout-collapsible"
   style="--callout-color-light: rgb(8, 109, 221); --callout-color-dark: rgb(2, 122, 255);"
 >
@@ -66,6 +71,7 @@
   <div class="callout-content">
     <p>This is the content!</p>
     <details
+      dir="auto"
       class="callout callout-collapsible"
       style="--callout-color-light: rgb(0, 191, 188); --callout-color-dark: rgb(83, 223, 221);"
     >

diff --git a/test/fixtures/openOrClose/output.html b/test/fixtures/openOrClose/output.html
@@ -1,4 +1,5 @@
 <details
+  dir="auto"
   class="callout callout-collapsible"
   style="--callout-color-light: rgb(236, 117, 0); --callout-color-dark: rgb(233, 151, 63);"
 >
@@ -45,6 +46,7 @@
 </details>
 
 <details
+  dir="auto"
   class="callout callout-collapsible"
   style="--callout-color-light: rgb(236, 117, 0); --callout-color-dark: rgb(233, 151, 63);"
   open

diff --git a/test/fixtures/readmeExample/output.html b/test/fixtures/readmeExample/output.html
@@ -1,4 +1,5 @@
 <div
+  dir="auto"
   class="callout"
   style="--callout-color-light: rgb(8, 109, 221); --callout-color-dark: rgb(2, 122, 255);"
 >
@@ -27,6 +28,7 @@
 </div>
 
 <details
+  dir="auto"
   class="callout callout-collapsible"
   style="--callout-color-light: rgb(236, 117, 0); --callout-color-dark: rgb(233, 151, 63);"
 >

diff --git a/test/fixtures/showIndicator/output.html b/test/fixtures/showIndicator/output.html
@@ -1,4 +1,5 @@
 <div
+  dir="auto"
   class="callout"
   style="--callout-color-light: rgb(8, 109, 221); --callout-color-dark: rgb(2, 122, 255);"
 >
@@ -27,6 +28,7 @@
 </div>
 
 <div
+  dir="auto"
   class="callout"
   style="--callout-color-light: rgb(0, 191, 188); --callout-color-dark: rgb(83, 223, 221);"
 >
@@ -56,6 +58,7 @@
 </div>
 
 <div
+  dir="auto"
   class="callout"
   style="--callout-color-light: rgb(0, 191, 188); --callout-color-dark: rgb(83, 223, 221);"
 >
@@ -85,6 +88,7 @@
 </div>
 
 <div
+  dir="auto"
   class="callout"
   style="--callout-color-light: rgb(236, 117, 0); --callout-color-dark: rgb(233, 151, 63);"
 >
@@ -118,6 +122,7 @@
 <blockquote><p>[!cantio] This is a non-existent callout type!</p></blockquote>
 
 <details
+  dir="auto"
   class="callout callout-collapsible"
   style="--callout-color-light: rgb(8, 109, 221); --callout-color-dark: rgb(2, 122, 255);"
 >
@@ -158,6 +163,7 @@
   <div class="callout-content">
     <p>This is the content!</p>
     <details
+      dir="auto"
       class="callout callout-collapsible"
       style="--callout-color-light: rgb(0, 191, 188); --callout-color-dark: rgb(83, 223, 221);"
     >