feat: implement shared MarkdownViewer pattern

Refactor HeavyMarkdownEditor to use the shared MarkdownViewer component
while maintaining the heavy bundle demonstration.

Changes:
- Import shared MarkdownViewer component
- Add react-dom/server to convert ReactMarkdown output to HTML string
- Store processedHtml instead of MarkdownComponent in state
- Re-process markdown on every change for live preview
- Pass HTML to shared MarkdownViewer for display

Bundle impact (still heavy):
- Transferred: ~315KB (react-markdown + remark-gfm + react-dom/server)
- Uncompressed: ~1.53MB
- This demonstrates client-side bundle weight vs RSC's server-side processing

The shared component pattern is now complete:
- HeavyMarkdownEditor: Client-side processing → MarkdownViewer
- RSCMarkdownPage: Server-side processing → MarkdownViewer

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: ihabadham

app/javascript/src/HeavyMarkdownEditor/ror_components/HeavyMarkdownEditor.jsx

@@ -1,31 +1,29 @@
 "use client";
 
 import React, { useState, useEffect } from 'react';
+import MarkdownViewer from '../../MarkdownViewer/ror_components/MarkdownViewer';
 import * as style from './HeavyMarkdownEditor.module.css';
 
-// Import markdown components for client-side only
-let ReactMarkdown, remarkGfm;
-
 const HeavyMarkdownEditor = (props) => {
   const [markdown, setMarkdown] = useState(props.initialText || '# Start editing markdown here...');
   const [isLoaded, setIsLoaded] = useState(false);
-  const [MarkdownComponent, setMarkdownComponent] = useState(null);
+  const [processedHtml, setProcessedHtml] = useState('');
 
   useEffect(() => {
     const loadMarkdown = async () => {
       try {
-        const [{ default: ReactMarkdownComp }, { default: remarkGfmComp }] = await Promise.all([
+        const [{ default: ReactMarkdown }, { default: remarkGfm }, { renderToString }] = await Promise.all([
           import('react-markdown'),
-          import('remark-gfm')
+          import('remark-gfm'),
+          import('react-dom/server')
         ]);
-        
-        const Component = ({ children }) => (
-          <ReactMarkdownComp remarkPlugins={[remarkGfmComp]}>
-            {children}
-          </ReactMarkdownComp>
+
+        // Convert markdown to HTML using react-markdown, then use shared MarkdownViewer
+        const htmlString = renderToString(
+          React.createElement(ReactMarkdown, { remarkPlugins: [remarkGfm] }, markdown)
         );
-        
-        setMarkdownComponent(() => Component);
+
+        setProcessedHtml(htmlString);
         setIsLoaded(true);
       } catch (error) {
         console.warn('Failed to load markdown components:', error);
@@ -34,7 +32,7 @@ const HeavyMarkdownEditor = (props) => {
     };
 
     loadMarkdown();
-  }, []);
+  }, [markdown]);
 
   // Skeleton loader component that fills the preview space properly  
   const SkeletonLoader = () => (
@@ -131,9 +129,9 @@ const HeavyMarkdownEditor = (props) => {
               boxSizing: 'border-box'
             }}
           >
-            {isLoaded && MarkdownComponent ? (
+            {processedHtml ? (
               <div className={`${style.contentTransition} ${style.fadeIn}`}>
-                <MarkdownComponent>{markdown}</MarkdownComponent>
+                <MarkdownViewer processedHtml={processedHtml} />
               </div>
             ) : isLoaded ? (
               <div className={`${style.contentTransition} ${style.fadeIn}`}>