Merge branch 'next'

Author: kellyjosephprice

.github/workflows/ci.yml

@@ -11,7 +11,7 @@ jobs:
           - lts/-1
           - lts/*
           - latest
-        react: [16, 17, 18]
+        react: [18, 19]
     steps:
       - uses: actions/checkout@v4
 
@@ -36,7 +36,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [20.x, 22.x]
+        node-version: [22.x]
         react: [18]
 
     steps:
@@ -51,6 +51,7 @@ jobs:
         with:
           name: snapshots-diffs
           path: __tests__/browser/__image_snapshots__/__diff_output__
+          overwrite: true
 
       - name: Update regression test snapshots
         if: ${{ failure() }}

__tests__/browser/__image_snapshots__/markdown-test-js-visual-regression-tests-rdmd-syntax-renders-callout-tests-in-legacy-mode-without-surprises-1-snap.png

@@ -47,5 +47,15 @@ describe('visual regression tests', () => {
       },
       10000,
     );
+
+    it('renders callout-tests in legacy mode without surprises', async () => {
+      const uri = 'http://localhost:9966/#/calloutTests?ci=true&darkModeDataAttribute=true&legacy=true';
+      await page.goto(uri, { waitUntil: 'networkidle0' });
+      await sleep(5000);
+
+      const image = await page.screenshot({ fullPage: true });
+
+      expect(image).toMatchImageSnapshot();
+    }, 10000);
   });
 });

__tests__/browser/__image_snapshots__/markdown-test-js-visual-regression-tests-rdmd-syntax-renders-callout-tests-without-surprises-1-snap.png

@@ -60,7 +60,7 @@ describe('callouts transformer', () => {
 
   it('can parse callouts with markdown in the heading immediately following the emoji', () => {
     const md = `
-> 🚧 **It works!**
+> 🚧**It works!**
 >
 > And, it no longer deletes your content!
 `;
@@ -70,6 +70,61 @@ describe('callouts transformer', () => {
     expect(tree.children[0].children[0].children[1].type).toBe('strong');
   });
 
+  it('can parse callouts with a link in the heading', () => {
+    const md = `
+> 🚧 [It works!](https://example.com)
+>
+> And, it no longer deletes your content!
+`;
+    const tree = mdast(md);
+    removePosition(tree, { force: true });
+
+    expect(tree.children[0]).toMatchInlineSnapshot(`
+      {
+        "children": [
+          {
+            "children": [
+              {
+                "type": "text",
+                "value": "",
+              },
+              {
+                "children": [
+                  {
+                    "type": "text",
+                    "value": "It works!",
+                  },
+                ],
+                "title": null,
+                "type": "link",
+                "url": "https://example.com",
+              },
+            ],
+            "depth": 3,
+            "type": "heading",
+          },
+          {
+            "children": [
+              {
+                "type": "text",
+                "value": "And, it no longer deletes your content!",
+              },
+            ],
+            "type": "paragraph",
+          },
+        ],
+        "data": {
+          "hName": "Callout",
+          "hProperties": {
+            "icon": "🚧",
+            "theme": "warn",
+          },
+        },
+        "type": "rdme-callout",
+      }
+    `);
+  });
+
   it('can parse a jsx callout into a rdme-callout', () => {
     const md = `
 <Callout icon="📘" theme="info">

__tests__/browser/__image_snapshots__/markdown-test-js-visual-regression-tests-rdmd-syntax-renders-callouts-without-surprises-1-snap.png

@@ -18,7 +18,7 @@ describe('readme-to-mdx transformer', () => {
     };
 
     expect(mdx(ast)).toMatchInlineSnapshot(`
-      "<TutorialTile backgroundColor="red" emoji="🦉" id="test-id" link="http://example.com" slug="test-id" title="Test" />
+      "<Recipe slug="test-id" title="Test" />
       "
     `);
   });

__tests__/browser/__image_snapshots__/markdown-test-js-visual-regression-tests-rdmd-syntax-renders-headings-without-surprises-1-snap.png

@@ -16,6 +16,7 @@
   border-color: var(--Callout-border);
   color: var(--text, var(--color-text-default));
   padding: $l-offset;
+  position: relative;
 
   @include dark-mode {
     --Callout-bg: rgba(var(--gray100-rgb), 0.05);
@@ -71,7 +72,6 @@
 
   > * {
     margin-left: $l-offset;
-    position: relative;
   }
 
   ul,
@@ -130,10 +130,15 @@
   }
 
   .callout-icon {
-    font-size: 1.25em; // match h3
-    left: -0.25em;
+    font-size: 17.5px; // match h3—CANNOT BE EM due to bg compatibility (heading size varies)
     line-height: 1.25; // match h3
+    margin-left: 0; // unset wildcard margin
     position: absolute;
+    transform: translateX(-50%);
+  }
+
+  .callout-heading > .callout-icon {
+    transform: translateX(-150%);
   }
 
   .callout-icon + .heading.heading {