fix: update plain (#1098)

kellyjosephprice · web-flow · commit e5dde85e8538 · 2025-05-06T11:15:14.000-07:00
| [![PR App][icn]][demo] | Fix RM-12618 | | :--------------------: | :----------: | ## 🧰 Changes Migrates `plain` to better support MDX. Primarly, it looks like we never updated the variable handler portion. This should support our indexing job and generating metadata (ie. `description`). ## 🧬 QA & Testing - [Broken on production][prod]. - [Working in this PR app][demo]. [demo]: https://markdown-pr-PR_NUMBER.herokuapp.com [prod]: https://SUBDOMAIN.readme.io [icn]: https://user-images.githubusercontent.com/886627/160426047-1bee9488-305a-4145-bb2b-09d8b757d38a.svg
diff --git a/__tests__/lib/plain.test.ts b/__tests__/lib/plain.test.ts
@@ -35,6 +35,19 @@ Is it _me_ you're looking for?
     expect(plain(tree)).toBe('Title Some body');
   });
 
+  it('compiles JSX callouts', () => {
+    const txt = `
+<Callout  icon="&#128216;">
+  Title
+
+  Some body
+</Callout>
+    `;
+    const tree = hast(txt);
+
+    expect(plain(tree)).toBe('Title Some body');
+  });
+
   it('compiles markdown tables', () => {
     const txt = `
 | Header 1 | Header 2 |
@@ -53,4 +66,41 @@ Is it _me_ you're looking for?
 
     expect(plain(tree)).toBe('entitled kittens');
   });
+
+  it('compiles JSX images to their title', () => {
+    const txt = `
+<Image src="http://placekitten.com/600/600" alt="image **label**" title="entitled kittens" />
+    `;
+    const tree = hast(txt);
+
+    expect(plain(tree)).toBe('entitled kittens');
+  });
+
+  it('compiles html blocks to their plain text', () => {
+    const txt = `
+<HTMLBlock>{\`
+  <p>Paragraph text</p>
+\`}</HTMLBlock>
+    `;
+
+    expect(plain(hast(txt))).toBe('Paragraph text');
+  });
+
+  it('compiles glossary items to their term', () => {
+    const txt = '<Glossary>parliament</Glossary>';
+
+    expect(plain(hast(txt))).toBe('parliament');
+  });
+
+  it('compiles variables to their name', () => {
+    const txt = '{user.name}';
+
+    expect(plain(hast(txt))).toBe('name');
+  });
+
+  it('compiles provided variables to their values', () => {
+    const txt = '{user.name}';
+
+    expect(plain(hast(txt), { variables: { name: 'Owlbert' } })).toBe('Owlbert');
+  });
 });
diff --git a/lib/plain.ts b/lib/plain.ts
@@ -35,19 +35,17 @@ function one(node: Nodes, opts: Options) {
 
         return [icon, ' ', title, title && body && ': ', body].filter(Boolean).join('');
       }
-      case 'readme-glossary-item': {
-        return node.properties.term;
-      }
-      case 'readme-variable': {
-        const key = node.properties.variable.toString();
-        const val = opts.variables[key];
-        return val || `<<${key}>>`;
+      case 'Variable': {
+        const key = node.properties.name.toString();
+        const val = 'variables' in opts && opts.variables[key];
+        return val || key;
       }
       case 'img': {
         return node.properties?.title || '';
       }
       case 'Accordion':
       case 'Card':
+      case 'Callout':
       case 'Tab': {
         const title = node.properties?.title || '';
         const children = node?.children;
