Strip html tags from processed markdown

Author: satya164

src/__tests__/process-markdown.test.ts

@@ -274,6 +274,183 @@ describe('processMarkdown', () => {
     assert.strictEqual(result, input);
   });
 
+  test('converts img tags to markdown images', async () => {
+    const input = dedent`
+      Some text.
+
+      <img src="/assets/blog/devtools.png" style={{ width: '425px' }} />
+
+      More text.
+    `;
+
+    const { content: result } = await processMarkdown(input);
+
+    assert.ok(!result.includes('<img'));
+    assert.ok(result.includes('![](/assets/blog/devtools.png)'));
+    assert.ok(result.includes('Some text.'));
+    assert.ok(result.includes('More text.'));
+  });
+
+  test('converts img tags with alt text', async () => {
+    const input = `<img src="/assets/screenshot.png" alt="App screenshot" />`;
+
+    const { content: result } = await processMarkdown(input);
+
+    assert.strictEqual(result, '![App screenshot](/assets/screenshot.png)');
+  });
+
+  test('converts video tags to source URLs', async () => {
+    const input = dedent`
+      Some text.
+
+      <video playsInline autoPlay muted loop style={{ width: '400px', aspectRatio: 4 / 5 }}>
+        <source src="/assets/icons/sf-symbol.mp4" />
+      </video>
+
+      More text.
+    `;
+
+    const { content: result } = await processMarkdown(input);
+
+    assert.ok(!result.includes('<video'));
+    assert.ok(!result.includes('<source'));
+    assert.ok(result.includes('/assets/icons/sf-symbol.mp4'));
+    assert.ok(result.includes('Some text.'));
+    assert.ok(result.includes('More text.'));
+  });
+
+  test('converts single-line video tags', async () => {
+    const input = `<video playsInline autoPlay muted loop><source src="/assets/demo.mp4" /></video>`;
+
+    const { content: result } = await processMarkdown(input);
+
+    assert.strictEqual(result, '/assets/demo.mp4');
+  });
+
+  test('strips device-frame wrapper divs', async () => {
+    const input = dedent`
+      <div className="device-frame">
+
+      ![Header button](/assets/fundamentals/header-button.png)
+
+      </div>
+    `;
+
+    const { content: result } = await processMarkdown(input);
+
+    assert.ok(!result.includes('<div'));
+    assert.ok(!result.includes('</div>'));
+    assert.ok(!result.includes('device-frame'));
+    assert.ok(
+      result.includes(
+        '![Header button](/assets/fundamentals/header-button.png)'
+      )
+    );
+  });
+
+  test('strips image-grid wrapper divs with style', async () => {
+    const input = dedent`
+      <div className="image-grid" style={{ '--img-width': '360px' }}>
+
+      ![Screenshot 1](/assets/themes/light-1.png)
+      ![Screenshot 2](/assets/themes/dark-1.png)
+
+      </div>
+    `;
+
+    const { content: result } = await processMarkdown(input);
+
+    assert.ok(!result.includes('<div'));
+    assert.ok(!result.includes('</div>'));
+    assert.ok(result.includes('![Screenshot 1](/assets/themes/light-1.png)'));
+    assert.ok(result.includes('![Screenshot 2](/assets/themes/dark-1.png)'));
+  });
+
+  test('strips device-frame div wrapping a video', async () => {
+    const input = dedent`
+      <div className="device-frame">
+      <video playsInline autoPlay muted loop>
+        <source src="/assets/fundamentals/navigate.mp4" />
+      </video>
+      </div>
+    `;
+
+    const { content: result } = await processMarkdown(input);
+
+    assert.ok(!result.includes('<div'));
+    assert.ok(!result.includes('<video'));
+    assert.ok(result.includes('/assets/fundamentals/navigate.mp4'));
+  });
+
+  test('strips nested decorative divs', async () => {
+    const input = dedent`
+      <div className="outer">
+      <div className="inner">
+
+      Content inside nested divs.
+
+      </div>
+      </div>
+    `;
+
+    const { content: result } = await processMarkdown(input);
+
+    assert.ok(!result.includes('<div'));
+    assert.ok(!result.includes('</div>'));
+    assert.ok(result.includes('Content inside nested divs.'));
+  });
+
+  test('strips feature-grid div with video list items', async () => {
+    const input = dedent`
+      <div className="feature-grid">
+
+      - <video playsInline autoPlay muted loop><source src="/assets/formsheet.mp4" /></video>
+
+        [Form sheet](#form-sheets)
+
+      - <video playsInline autoPlay muted loop><source src="/assets/search-bar.mp4" /></video>
+
+        [Search bar](#search-bar)
+
+      </div>
+    `;
+
+    const { content: result } = await processMarkdown(input);
+
+    assert.ok(!result.includes('<div'));
+    assert.ok(!result.includes('<video'));
+    assert.ok(result.includes('/assets/formsheet.mp4'));
+    assert.ok(result.includes('[Form sheet](#form-sheets)'));
+    assert.ok(result.includes('/assets/search-bar.mp4'));
+    assert.ok(result.includes('[Search bar](#search-bar)'));
+  });
+
+  test('preserves HTML inside code fences', async () => {
+    const input = dedent`
+      Some text.
+
+      \`\`\`jsx
+      function App() {
+        return (
+          <div className="container">
+            <img src="/logo.png" alt="Logo" />
+            <video autoPlay>
+              <source src="/intro.mp4" />
+            </video>
+          </div>
+        );
+      }
+      \`\`\`
+    `;
+
+    const { content: result } = await processMarkdown(input);
+
+    assert.ok(result.includes('<div className="container">'));
+    assert.ok(result.includes('<img src="/logo.png" alt="Logo" />'));
+    assert.ok(result.includes('<source src="/intro.mp4" />'));
+    assert.ok(result.includes('</div>'));
+  });
+
   test('strips frontmatter and returns parsed data', async () => {
     const input = dedent`
       ---

src/plugins/process-markdown.ts

@@ -27,6 +27,9 @@ export type ProcessedMarkdown = {
  * - Converts static2dynamic code fences into static + dynamic sections
  * - Strips code fence meta attributes (snack, name, static2dynamic, npm2yarn, etc.)
  * - Converts Docusaurus admonitions (:::note, :::warning, etc.) to blockquotes
+ * - Converts HTML <img> tags to markdown image syntax
+ * - Converts HTML <video> tags to plain video URLs
+ * - Strips decorative HTML divs (device-frame, image-grid, feature-grid, etc.)
  * - Cleans up extra blank lines
  */
 export async function processMarkdown(
@@ -52,6 +55,15 @@ export async function processMarkdown(
   // Convert admonitions to blockquotes
   result = convertAdmonitions(result);
 
+  // Convert HTML media tags and strip decorative divs,
+  // protecting code fences from modification
+  result = withProtectedCodeFences(result, (text) => {
+    text = convertImageTags(text);
+    text = convertVideoTags(text);
+    text = stripDecorativeDivs(text);
+    return text;
+  });
+
   // Clean up extra blank lines (max 2 consecutive)
   result = result.replace(/\n{3,}/g, '\n\n');
 
@@ -371,6 +383,139 @@ function stripCodeFenceMeta(content: string): string {
   );
 }
 
+/**
+ * Run a transform function on content while protecting code fences.
+ * Temporarily replaces code fences with placeholders, runs the transform,
+ * then restores the original code fences.
+ */
+function withProtectedCodeFences(
+  content: string,
+  transform: (text: string) => string
+): string {
+  const fences: string[] = [];
+
+  const placeholder = (i: number) => `\x00CODEFENCE${i}\x00`;
+
+  const protected_ = content.replace(/^```[^\n]*\n[\s\S]*?^```$/gm, (match) => {
+    fences.push(match);
+    return placeholder(fences.length - 1);
+  });
+
+  const transformed = transform(protected_);
+
+  return transformed.replace(/\x00CODEFENCE(\d+)\x00/g, (_match, i) => {
+    return fences[Number(i)];
+  });
+}
+
+/**
+ * Convert HTML <img> tags to markdown image syntax.
+ * Strips inline styles and other attributes, keeping only src and alt.
+ */
+function convertImageTags(content: string): string {
+  return content.replace(/<img\s+([^>]*?)\/?>/gi, (match, attrs: string) => {
+    const srcMatch = attrs.match(/\bsrc=["']([^"']+)["']/);
+
+    if (!srcMatch) {
+      return match;
+    }
+
+    const src = srcMatch[1];
+    const altMatch = attrs.match(/\balt=["']([^"']*)["']/);
+    const alt = altMatch ? altMatch[1] : '';
+
+    return `![${alt}](${src})`;
+  });
+}
+
+/**
+ * Convert HTML <video> tags to plain video source URLs.
+ */
+function convertVideoTags(content: string): string {
+  return content.replace(
+    /<video[^>]*>[\s\S]*?<source\s+src=["']([^"']+)["'][^>]*\/?>[\s\S]*?<\/video>/gi,
+    (_match, src: string) => src
+  );
+}
+
+/**
+ * Strip decorative HTML divs, keeping their inner content.
+ * Processes innermost divs first to handle nesting.
+ */
+function stripDecorativeDivs(content: string): string {
+  let result = content;
+  let iterations = 0;
+  const maxIterations = 50;
+
+  while (/<div[\s>]/i.test(result) && iterations < maxIterations) {
+    const transformed = stripInnermostDiv(result);
+
+    if (transformed === result) {
+      break;
+    }
+
+    result = transformed;
+    iterations++;
+  }
+
+  return result;
+}
+
+/**
+ * Find and strip the first innermost <div> (one with no nested divs).
+ * Returns original content if no strippable div is found.
+ */
+function stripInnermostDiv(content: string): string {
+  const divOpenRegex = /<div[\s>][^>]*>/gi;
+  let match: RegExpExecArray | null;
+
+  while ((match = divOpenRegex.exec(content)) !== null) {
+    const openStart = match.index;
+    const openEnd = openStart + match[0].length;
+
+    let depth = 1;
+    let pos = openEnd;
+    let closingStart = -1;
+
+    while (pos < content.length && depth > 0) {
+      const nextOpen = content.indexOf('<div', pos);
+      const nextClose = content.indexOf('</div>', pos);
+
+      if (nextClose === -1) {
+        break;
+      }
+
+      if (nextOpen !== -1 && nextOpen < nextClose) {
+        depth++;
+        pos = nextOpen + 4;
+      } else {
+        depth--;
+
+        if (depth === 0) {
+          closingStart = nextClose;
+        }
+
+        pos = nextClose + 6;
+      }
+    }
+
+    if (closingStart === -1) {
+      continue;
+    }
+
+    const innerContent = content.slice(openEnd, closingStart).trim();
+    const closingEnd = closingStart + '</div>'.length;
+
+    if (!innerContent.includes('<div')) {
+      return (
+        content.slice(0, openStart) + innerContent + content.slice(closingEnd)
+      );
+    }
+  }
+
+  return content;
+}
+
 /**
  * Convert Docusaurus admonitions (:::note, :::warning, etc.) to blockquotes.
  *