🐛 fix: Update TemplatePreview to use MonacoEditor for content display and improve error handling

apps/admin/app/dashboard/subscribe/template-preview.tsx

@@ -4,8 +4,8 @@ import { previewSubscribeTemplate } from '@/services/admin/application';
 import { useQuery } from '@tanstack/react-query';
 import { Button } from '@workspace/ui/components/button';
 import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@workspace/ui/components/sheet';
+import { MonacoEditor } from '@workspace/ui/custom-components/editor/monaco-editor';
 import { Icon } from '@workspace/ui/custom-components/icon';
-import { Markdown } from '@workspace/ui/custom-components/markdown';
 import { useTranslations } from 'next-intl';
 import { useState } from 'react';
 
@@ -27,7 +27,6 @@ export function TemplatePreview({ applicationId, output_format }: TemplatePrevie
 
   const originalContent = data?.data?.data?.template || '';
   const errorMessage = (error as any)?.data?.msg || error?.message || t('failed');
-  const displayContent = originalContent || (error ? errorMessage : '');
 
   const getDecodedContent = () => {
     if (output_format === 'base64' && originalContent) {
@@ -41,19 +40,31 @@ export function TemplatePreview({ applicationId, output_format }: TemplatePrevie
   };
 
   const getDisplayContent = () => {
+    if (error) return errorMessage;
+    if (!originalContent) return '';
     switch (output_format) {
-      case 'base64':
+      case 'base64': {
-        return `\`\`\`base64\n# ${t('base64.originalContent')}\n${displayContent}\n\n# ${t('base64.decodedContent')}\n${getDecodedContent()}\n\`\`\``;
+        const decoded = getDecodedContent();
-      case 'yaml':
+        return `${t('base64.originalContent')}:\n${originalContent}\n\n${t('base64.decodedContent')}:\n${decoded}`;
-        return `\`\`\`yaml\n${displayContent}\n\`\`\``;
+      }
-      case 'json':
-        return `\`\`\`json\n${displayContent}\n\`\`\``;
-      case 'conf':
-        return `\`\`\`ini\n${displayContent}\n\`\`\``;
-      case 'plain':
-        return `\`\`\`text\n${displayContent}\n\`\`\``;
       default:
-        return displayContent;
+        return originalContent;
+    }
+  };
+  const mapLanguage = (fmt?: string) => {
+    switch (fmt) {
+      case 'json':
+        return 'json';
+      case 'yaml':
+        return 'yaml';
+      case 'base64':
+        return 'ini';
+      case 'plain':
+        return 'ini';
+      case 'conf':
+        return 'ini';
+      default:
+        return 'ini';
     }
   };
 
@@ -68,19 +79,21 @@ export function TemplatePreview({ applicationId, output_format }: TemplatePrevie
         {t('preview')}
       </Button>
       <Sheet open={isOpen} onOpenChange={handleOpenChange}>
+        <SheetHeader>
+          <SheetTitle></SheetTitle>
+        </SheetHeader>
         <SheetContent className='w-[800px] max-w-[90vw] md:max-w-screen-md'>
-          <SheetHeader>
-            <SheetTitle>{t('title')}</SheetTitle>
-          </SheetHeader>
           {isLoading ? (
             <div className='flex items-center justify-center'>
               <Icon icon='mdi:loading' className='h-6 w-6 animate-spin' />
               <span className='ml-2'>{t('loading')}</span>
             </div>
           ) : (
-            <div className='*:text-sm [&_pre>div>div+div]:max-h-[calc(100dvh-48px-36px-36px)] [&_pre>div>div+div]:overflow-auto'>
+            <MonacoEditor
-              <Markdown>{getDisplayContent()}</Markdown>
+              title={t('title')}
-            </div>
+              value={getDisplayContent()}
+              language={mapLanguage(output_format)}
+            />
           )}
         </SheetContent>
       </Sheet>

packages/ui/src/custom-components/editor/monaco-editor.tsx

@@ -112,9 +112,9 @@ export function MonacoEditor({
             </div>
           </div>
 
-          <div className={cn('relative flex flex-1 overflow-hidden')}>
+          <div className={cn('relative flex flex-1')}>
             <div
-              className={cn('flex-1 overflow-hidden p-4 invert dark:invert-0', {
+              className={cn('flex-1 overflow-auto p-4 invert dark:invert-0', {
                 'w-1/2': isPreviewVisible,
               })}
             >
@@ -142,10 +142,11 @@ export function MonacoEditor({
                   scrollBeyondLastLine: false,
                   scrollbar: {
                     useShadows: false,
-                    vertical: 'hidden',
+                    vertical: 'auto',
                   },
                   tabSize: 2,
                   wordWrap: 'off',
+                  readOnly: !onChange,
                 }}
                 theme='transparentTheme'
                 beforeMount={(monaco: Monaco) => {