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

src/app/components/message/MsgTypeRenderers.tsx

@@ -195,15 +195,10 @@ export function MImage({ content, renderImageContent, outlined }: MImageProps) {
   if (typeof mxcUrl !== 'string') {
     return <BrokenContent />;
   }
-  const height = scaleYDimension(imgInfo?.w || 400, 400, imgInfo?.h || 400);
 
   return (
     <Attachment outlined={outlined}>
-      <AttachmentBox
-        style={{
-          height: toRem(height < 48 ? 48 : height),
-        }}
-      >
+      <AttachmentBox>
         {renderImageContent({
           body: content.body || 'Image',
           info: imgInfo,
@@ -245,8 +240,6 @@ export function MVideo({ content, renderAsFile, renderVideoContent, outlined }:
     return <BrokenContent />;
   }
 
-  const height = scaleYDimension(videoInfo.w || 400, 400, videoInfo.h || 400);
-
   const filename = content.filename ?? content.body ?? 'Video';
 
   return (
@@ -265,11 +258,7 @@ export function MVideo({ content, renderAsFile, renderVideoContent, outlined }:
           }
         />
       </AttachmentHeader>
-      <AttachmentBox
-        style={{
-          height: toRem(height < 48 ? 48 : height),
-        }}
-      >
+      <AttachmentBox>
         {renderVideoContent({
           body: content.body || 'Video',
           info: videoInfo,

src/app/components/message/attachment/Attachment.css.ts

@@ -8,8 +8,7 @@ export const Attachment = recipe({
     color: color.SurfaceVariant.OnContainer,
     borderRadius: config.radii.R400,
     overflow: 'hidden',
-    maxWidth: '100%',
-    width: toRem(400),
+    maxWidth: toRem(400),
   },
   variants: {
     outlined: {
@@ -29,9 +28,8 @@ export const AttachmentHeader = style({
 export const AttachmentBox = style([
   DefaultReset,
   {
-    maxWidth: '100%',
-    maxHeight: toRem(600),
-    width: toRem(400),
+    maxWidth: toRem(400),
+    maxHeight: toRem(400),
     overflow: 'hidden',
   },
 ]);

src/app/components/message/content/style.css.ts

@@ -5,19 +5,20 @@ export const RelativeBase = style([
   DefaultReset,
   {
     position: 'relative',
-    width: '100%',
-    height: '100%',
+    display: 'flex',
+    maxWidth: '100%',
+    maxHeight: '100%',
   },
 ]);
 
 export const AbsoluteContainer = style([
   DefaultReset,
   {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    width: '100%',
-    height: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    maxWidth: '100%',
+    maxHeight: '100%',
   },
 ]);