feat(client): implement code wrapper export to image like carbon

client/package.json

@@ -8,6 +8,7 @@
     "@tanstack/react-query": "^5.90.20",
     "date-fns": "^4.1.0",
     "framer-motion": "^11.11.9",
+    "html-to-image": "^1.11.13",
     "i18next": "^25.8.0",
     "i18next-browser-languagedetector": "^8.2.0",
     "jszip": "^3.10.1",

client/src/components/common/buttons/CopyButton.tsx

@@ -42,7 +42,7 @@ const CopyButton: React.FC<CopyButtonProps> = ({ text }) => {
   return (
     <button
       onClick={handleCopy}
-      className="absolute top-2 right-2 p-1 bg-light-surface dark:bg-dark-surface rounded-md 
+      className="p-1 bg-light-surface dark:bg-dark-surface rounded-md 
         hover:bg-light-hover dark:hover:bg-dark-hover transition-colors text-light-text dark:text-dark-text"
       title={translate('copyButton.title')}
     >

client/src/components/common/buttons/RawButton.tsx

@@ -32,7 +32,7 @@ const RawButton: React.FC<RawButtonProps> = ({ isPublicView, snippetId, fragment
   return (
     <button
       onClick={handleOpenRaw}
-      className="absolute top-2 right-10 p-1 bg-light-surface dark:bg-dark-surface rounded-md 
+      className="p-1 bg-light-surface dark:bg-dark-surface rounded-md 
         hover:bg-light-hover dark:hover:bg-dark-hover transition-colors text-light-text dark:text-dark-text"
       title={translate('rawButton.title')}
     >

client/src/components/editor/FullCodeBlock.tsx

@@ -8,6 +8,8 @@ import {
 import CopyButton from "../common/buttons/CopyButton";
 import { useTheme } from "../../contexts/ThemeContext";
 import RawButton from "../common/buttons/RawButton";
+import ExportImageButton from "./export/ExportImageButton";
+import ExportImageModal from "./export/ExportImageModal";
 
 export interface FullCodeBlockProps {
   code: string;
@@ -34,6 +36,8 @@ export const FullCodeBlock: React.FC<FullCodeBlockProps> = ({
         : "light"
       : theme
   );
+
+  const [isExportModalOpen, setIsExportModalOpen] = useState(false);
 
   useEffect(() => {
     if (theme === "system") {
@@ -132,17 +136,27 @@ export const FullCodeBlock: React.FC<FullCodeBlockProps> = ({
           </div>
         )}
 
-        <CopyButton text={code} />
-        {isPublicView !== undefined &&
-          snippetId !== undefined &&
-          fragmentId !== undefined && (
-            <RawButton
-              isPublicView={isPublicView}
-              snippetId={snippetId}
-              fragmentId={fragmentId}
-            />
-          )}
+        <div className="absolute top-2 right-2 flex items-center gap-2 z-10">
+          <CopyButton text={code} />
+          <ExportImageButton onClick={() => setIsExportModalOpen(true)} />
+          {isPublicView !== undefined &&
+            snippetId !== undefined &&
+            fragmentId !== undefined && (
+              <RawButton
+                isPublicView={isPublicView}
+                snippetId={snippetId}
+                fragmentId={fragmentId}
+              />
+            )}
+        </div>
       </div>
+
+      <ExportImageModal
+        isOpen={isExportModalOpen}
+        onClose={() => setIsExportModalOpen(false)}
+        code={code}
+        language={language}
+      />
     </div>
   );
 };

client/src/components/editor/PreviewCodeBlock.tsx

@@ -152,17 +152,19 @@ export const PreviewCodeBlock: React.FC<PreviewCodeBlockProps> = ({
           }}
         />
 
-        <CopyButton text={code} />
-        {!isRecycleView &&
-          isPublicView !== undefined &&
-          snippetId !== undefined &&
-          fragmentId !== undefined && (
-            <RawButton
-              isPublicView={isPublicView}
-              snippetId={snippetId}
-              fragmentId={fragmentId}
-            />
-          )}
+        <div className="absolute top-2 right-2 flex items-center gap-2 z-10">
+          <CopyButton text={code} />
+          {!isRecycleView &&
+            isPublicView !== undefined &&
+            snippetId !== undefined &&
+            fragmentId !== undefined && (
+              <RawButton
+                isPublicView={isPublicView}
+                snippetId={snippetId}
+                fragmentId={fragmentId}
+              />
+            )}
+        </div>
       </div>
     </div>
   );

client/src/components/editor/export/CarbonExportPreview.tsx

@@ -0,0 +1,79 @@
+import { forwardRef } from 'react';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { vscDarkPlus, vs } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import { useTheme } from '../../../contexts/ThemeContext';
+
+export interface CarbonExportPreviewProps {
+  code: string;
+  language: string;
+  showLineNumbers: boolean;
+}
+
+export const CarbonExportPreview = forwardRef<HTMLDivElement, CarbonExportPreviewProps>(
+  ({ code, language, showLineNumbers }, ref) => {
+    const { theme } = useTheme();
+    const isDark = theme === 'dark' || (theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
+    const syntaxTheme = isDark ? vscDarkPlus : vs;
+
+    return (
+      <div 
+        ref={ref} 
+        className="p-8 flex items-center justify-center font-sans"
+        style={{
+          background: 'linear-gradient(140deg, rgb(142, 197, 252), rgb(224, 195, 252))',
+          width: 'max-content',
+          minWidth: '600px',
+        }}
+      >
+        <div 
+          className="rounded-xl overflow-hidden shadow-2xl flex flex-col w-full"
+          style={{
+            backgroundColor: isDark ? '#1E1E1E' : '#ffffff',
+            boxShadow: 'rgba(0, 0, 0, 0.55) 0px 20px 68px'
+          }}
+        >
+          {/* macOS window controls */}
+          <div 
+            className="flex items-center h-10 px-4"
+            style={{ 
+              backgroundColor: isDark ? '#2D2D2D' : '#f5f5f5',
+              borderBottom: isDark ? '1px solid #404040' : '1px solid #e5e5e5'
+            }}
+          >
+            <div className="flex gap-2">
+              <div className="w-3 h-3 rounded-full bg-[#FF5F56]"></div>
+              <div className="w-3 h-3 rounded-full bg-[#FFBD2E]"></div>
+              <div className="w-3 h-3 rounded-full bg-[#27C93F]"></div>
+            </div>
+          </div>
+
+          {/* Code content */}
+          <div className="p-4 text-sm" style={{ maxHeight: 'none', overflow: 'visible' }}>
+            <SyntaxHighlighter
+              language={language.toLowerCase()}
+              style={syntaxTheme}
+              showLineNumbers={showLineNumbers}
+              customStyle={{
+                margin: 0,
+                padding: 0,
+                background: 'transparent',
+                overflow: 'visible'
+              }}
+              codeTagProps={{
+                style: {
+                  fontFamily: '"SF Mono", "Fira Code", format, Consolas, "Liberation Mono", Menlo, Courier, monospace',
+                  fontSize: '14px',
+                  lineHeight: '1.5'
+                }
+              }}
+            >
+              {code}
+            </SyntaxHighlighter>
+          </div>
+        </div>
+      </div>
+    );
+  }
+);
+
+CarbonExportPreview.displayName = 'CarbonExportPreview';

client/src/components/editor/export/ExportImageButton.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Camera as ImageIcon } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+
+export interface ExportImageButtonProps {
+  onClick: (e: React.MouseEvent) => void;
+}
+
+const ExportImageButton: React.FC<ExportImageButtonProps> = ({ onClick }) => {
+  const { t } = useTranslation('components/common/buttons');
+
+  return (
+    <button
+      onClick={onClick}
+      className="p-1 bg-light-surface dark:bg-dark-surface rounded-md 
+        hover:bg-light-hover dark:hover:bg-dark-hover transition-colors text-light-text dark:text-dark-text"
+      title={t('exportButton.tooltip')}
+    >
+      <ImageIcon size={16} className="text-light-text dark:text-dark-text" />
+    </button>
+  );
+};
+
+export default ExportImageButton;

client/src/components/editor/export/ExportImageModal.tsx

@@ -0,0 +1,180 @@
+import React, { useRef, useState } from 'react';
+import Modal from '../../common/modals/Modal';
+import { CarbonExportPreview } from './CarbonExportPreview';
+import { useTranslation } from 'react-i18next';
+import { toPng, toSvg } from 'html-to-image';
+import { Download, Copy, Share2, Linkedin } from 'lucide-react';
+
+export interface ExportImageModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  code: string;
+  language: string;
+}
+
+const ExportImageModal: React.FC<ExportImageModalProps> = ({
+  isOpen,
+  onClose,
+  code,
+  language,
+}) => {
+  const { t } = useTranslation('components/common/buttons');
+  const previewRef = useRef<HTMLDivElement>(null);
+  const [isExporting, setIsExporting] = useState(false);
+  const [copiedMessage, setCopiedMessage] = useState('');
+
+  const handleDownloadPng = async () => {
+    if (!previewRef.current) return;
+    setIsExporting(true);
+    try {
+      const dataUrl = await toPng(previewRef.current, { pixelRatio: 2 });
+      const link = document.createElement('a');
+      link.download = `carbon-${Date.now()}.png`;
+      link.href = dataUrl;
+      link.click();
+    } catch (err) {
+      console.error('Failed to generate PNG', err);
+      alert(t('exportModal.errorGenerate'));
+    } finally {
+      setIsExporting(false);
+    }
+  };
+
+  const handleDownloadSvg = async () => {
+    if (!previewRef.current) return;
+    setIsExporting(true);
+    try {
+      const dataUrl = await toSvg(previewRef.current);
+      const link = document.createElement('a');
+      link.download = `carbon-${Date.now()}.svg`;
+      link.href = dataUrl;
+      link.click();
+    } catch (err) {
+      console.error('Failed to generate SVG', err);
+      alert(t('exportModal.errorGenerate'));
+    } finally {
+      setIsExporting(false);
+    }
+  };
+
+  const handleCopyClipboard = async () => {
+    if (!previewRef.current) return;
+    setIsExporting(true);
+    try {
+      const dataUrl = await toPng(previewRef.current, { pixelRatio: 2 });
+      // Convert base64 to blob
+      const res = await fetch(dataUrl);
+      const blob = await res.blob();
+
+      const item = new ClipboardItem({ 'image/png': blob });
+      await navigator.clipboard.write([item]);
+
+      setCopiedMessage(t('exportModal.successCopy'));
+      setTimeout(() => setCopiedMessage(''), 3000);
+    } catch (err) {
+      console.error('Failed to copy to clipboard', err);
+      alert(t('exportModal.errorCopy'));
+    } finally {
+      setIsExporting(false);
+    }
+  };
+
+  const getTwitterShareUrl = () => {
+    const text = encodeURIComponent('Check out this code snippet!');
+    return `https://twitter.com/intent/tweet?text=${text}`;
+  };
+
+  const getLinkedInShareUrl = () => {
+    // LinkedIn doesn't support pre-filling images via URL intent well,
+    // but users can copy to clipboard and paste in the post intent.
+    return `https://www.linkedin.com/sharing/share-offsite/`;
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      title={t('exportModal.title')}
+      width="max-w-5xl"
+    >
+      <div className="flex flex-col gap-6">
+
+        {/* Preview Area */}
+        <div className="flex justify-center bg-light-background dark:bg-dark-background rounded-lg border border-light-border dark:border-dark-border overflow-x-auto p-4 max-h-[500px]">
+          <div className="transform scale-75 origin-top relative" style={{ height: 'max-content' }}>
+            <CarbonExportPreview
+              ref={previewRef}
+              code={code}
+              language={language}
+              showLineNumbers={true}
+            />
+          </div>
+        </div>
+
+        {/* Actions Area */}
+        <div className="flex flex-col gap-4 border-t border-light-border dark:border-dark-border pt-4">
+          <div className="flex flex-wrap justify-between items-center gap-4">
+
+            <div className="flex gap-3">
+              <button
+                disabled={isExporting}
+                onClick={handleDownloadPng}
+                className="flex items-center gap-2 px-4 py-2 bg-light-primary dark:bg-dark-primary text-white rounded-md hover:opacity-90 transition-opacity disabled:opacity-50"
+              >
+                <Download size={16} />
+                {t('exportModal.downloadPng')}
+              </button>
+
+              <button
+                disabled={isExporting}
+                onClick={handleDownloadSvg}
+                className="flex items-center gap-2 px-4 py-2 border border-light-border dark:border-dark-border rounded-md hover:bg-light-surface dark:hover:bg-dark-surface transition-colors disabled:opacity-50 text-light-text dark:text-dark-text"
+              >
+                <Download size={16} />
+                {t('exportModal.downloadSvg')}
+              </button>
+
+              <button
+                disabled={isExporting}
+                onClick={handleCopyClipboard}
+                className="flex items-center gap-2 px-4 py-2 border border-light-border dark:border-dark-border rounded-md hover:bg-light-surface dark:hover:bg-dark-surface transition-colors disabled:opacity-50 text-light-text dark:text-dark-text"
+              >
+                <Copy size={16} />
+                {t('exportModal.copyClipboard')}
+              </button>
+
+              {copiedMessage && (
+                <span className="text-sm text-green-500 self-center">{copiedMessage}</span>
+              )}
+            </div>
+
+            <div className="flex gap-3">
+              <a
+                href={getTwitterShareUrl()}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex items-center gap-2 px-3 py-2 bg-[#1DA1F2] text-white rounded-md hover:opacity-90 transition-opacity"
+              >
+                <Share2 size={16} />
+                {t('exportModal.shareTwitter')}
+              </a>
+              <a
+                href={getLinkedInShareUrl()}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex items-center gap-2 px-3 py-2 bg-[#0A66C2] text-white rounded-md hover:opacity-90 transition-opacity"
+              >
+                <Linkedin size={16} />
+                {t('exportModal.shareLinkedIn')}
+              </a>
+            </div>
+
+          </div>
+        </div>
+
+      </div>
+    </Modal>
+  );
+};
+
+export default ExportImageModal;