@c2-markdown-ui/react 0.0.0-stage → 0.4.4

package/src/lib/MarkdownUI.tsx

@@ -0,0 +1,73 @@
+import React, { useRef, useEffect } from 'react';
+import { createRoot, Root } from 'react-dom/client';
+import { Widget } from '../widgets/Widget';
+
+export interface MarkdownUIProps {
+  html: string;
+  onWidgetEvent?: (event: CustomEvent<{id: string, value: unknown}>) => void;
+}
+
+// Custom element definition for markdown-ui-widget (browser only)
+let MarkdownUIWidgetElement: typeof HTMLElement | undefined;
+
+if (typeof HTMLElement !== 'undefined') {
+  MarkdownUIWidgetElement = class extends HTMLElement {
+    private reactRoot: Root | null = null;
+
+    connectedCallback() {
+      const id = this.getAttribute('id') || '';
+      const content = this.getAttribute('content') || '';
+      
+      console.log('🏗️ Custom element connected', { id, content });
+      
+      // Create a React component instance
+      this.innerHTML = '';
+      const div = document.createElement('div');
+      this.appendChild(div);
+      
+      // Use React 18+ createRoot API
+      this.reactRoot = createRoot(div);
+      this.reactRoot.render(React.createElement(Widget, { id, content }));
+    }
+
+    disconnectedCallback() {
+      if (this.reactRoot) {
+        this.reactRoot.unmount();
+        this.reactRoot = null;
+      }
+    }
+  };
+
+  // Register the custom element if not already registered
+  if (typeof window !== 'undefined' && !customElements.get('markdown-ui-widget')) {
+    customElements.define('markdown-ui-widget', MarkdownUIWidgetElement);
+  }
+}
+
+export const MarkdownUI: React.FC<MarkdownUIProps> = ({ html, onWidgetEvent }) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleWidgetEvent = (e: Event) => {
+      const customEvent = e as CustomEvent<{id: string, value: unknown}>;
+      if (onWidgetEvent) {
+        onWidgetEvent(customEvent);
+      }
+    };
+
+    const container = containerRef.current;
+    if (container) {
+      container.addEventListener('widget-event', handleWidgetEvent);
+      
+      return () => {
+        container.removeEventListener('widget-event', handleWidgetEvent);
+      };
+    }
+  }, [onWidgetEvent]);
+
+  return (
+    <div ref={containerRef} className="widget-container">
+      <div dangerouslySetInnerHTML={{ __html: html }} />
+    </div>
+  );
+};

package/src/lib/index.ts

@@ -0,0 +1,3 @@
+export { MarkdownUI } from './MarkdownUI';
+export type { MarkdownUIProps } from './MarkdownUI';
+export * from '../widgets';