feat: implement command handling and custom rendering in editor and message components

src/app/components/RenderMessageContent.tsx

@@ -33,6 +33,7 @@ import { TextViewer } from './text-viewer';
 import { testMatrixTo } from '../plugins/matrix-to';
 import { IImageContent } from '../../types/matrix/common';
 import { filterDisabledUrls } from '../hooks/useRoomEmbedFilters';
+import { pluginRegistry } from '../features/settings/plugins/PluginAPI';
 
 type RenderMessageContentProps = {
   displayName: string;
@@ -309,5 +310,36 @@ export function RenderMessageContent({
     return <MBadEncrypted />;
   }
 
+  // Check for custom renderer from plugins FIRST
+  const customRenderer = pluginRegistry.getRenderer('message');
+  console.log('[RenderMessageContent] customRenderer function:', typeof customRenderer);
+  if (customRenderer) {
+    try {
+      const messageData = {
+        msgtype: msgType,
+        ...getContent(),
+      };
+      console.log('[RenderMessageContent] Calling customRenderer with msgtype:', msgType);
+      console.log('[RenderMessageContent] messageData:', messageData);
+      const customContent = customRenderer(
+        messageData,
+        () => {
+          console.log('[RenderMessageContent] defaultRenderer called');
+          return null;
+        }
+      );
+      console.log('[RenderMessageContent] customRenderer returned:', customContent);
+      console.log('[RenderMessageContent] customContent type:', typeof customContent);
+      if (customContent) {
+        console.log('[RenderMessageContent] Returning custom content');
+        return customContent as React.ReactElement;
+      }
+    } catch (error) {
+      console.error('[RenderMessageContent] Custom renderer error:', error);
+    }
+  } else {
+    console.log('[RenderMessageContent] No custom renderer registered');
+  }
+
   return <UnsupportedContent />;
 }