@djangocfg/ui-tools 2.1.289 → 2.1.290

package/src/tools/PrettyCode/PrettyCode.client.tsx

@@ -8,6 +8,13 @@ import { useResolvedTheme } from '@djangocfg/ui-core/hooks';
 import { FloatingToolbar } from '../../components/FloatingToolbar';
 import { CopyAction } from '../../components/FloatingToolbar/actions';
 
+// Load extra Prism grammars (``bash``, ``ruby``, ``java``, ``php``)
+// that aren't in ``prism-react-renderer``'s default bundle. The hook
+// below subscribes to its ready state and re-renders this component
+// once loading completes, so the first tab click gets highlighted
+// correctly even if it happened before the dynamic import resolved.
+import { useEnsurePrismLanguages } from './registerPrismLanguages';
+
 interface PrettyCodeProps {
   data: string | object;
   language: Language;
@@ -23,13 +30,24 @@ interface PrettyCodeProps {
    * Set e.g. ``50`` to cap short snippets inline and scroll long ones.
    */
   maxLines?: number;
+  /**
+   * Visual variant. ``"card"`` (default) ships full chrome (border,
+   * background, hover toolbar, optional internal scroll). ``"plain"``
+   * is chrome-less — use when embedding inside another scroll
+   * container so the surface manages its own chrome and scroll. */
+  variant?: 'card' | 'plain';
 }
 
-const PrettyCode = ({ data, language, className, mode, inline = false, customBg, isCompact = false, scrollIsolation, maxLines }: PrettyCodeProps) => {
+const PrettyCode = ({ data, language, className, mode, inline = false, customBg, isCompact = false, scrollIsolation, maxLines, variant = 'card' }: PrettyCodeProps) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const t = useAppT();
   const detectedTheme = useResolvedTheme();
 
+  // Subscribe to the extra-grammars ready state. When ``bash`` /
+  // ``ruby`` / ``java`` / ``php`` finish loading, this hook triggers a
+  // re-render so the code block picks up the new grammar.
+  useEnsurePrismLanguages();
+
   const labels = useMemo(() => ({
     copyCode: t('tools.code.copyCode'),
     noContent: t('tools.code.noContent'),
@@ -110,6 +128,16 @@ const PrettyCode = ({ data, language, className, mode, inline = false, customBg,
         return 'Text';
       case 'mermaid':
         return 'Mermaid';
+      case 'ruby':
+      case 'rb':
+        return 'Ruby';
+      case 'java':
+        return 'Java';
+      case 'php':
+        return 'PHP';
+      case 'go':
+      case 'golang':
+        return 'Go';
       default:
         return lang.charAt(0).toUpperCase() + lang.slice(1);
     }
@@ -140,7 +168,18 @@ const PrettyCode = ({ data, language, className, mode, inline = false, customBg,
         return 'markup';
       case 'bash':
       case 'shell':
+      case 'sh':
         return 'bash';
+      case 'ruby':
+      case 'rb':
+        return 'ruby';
+      case 'java':
+        return 'java';
+      case 'php':
+        return 'php';
+      case 'go':
+      case 'golang':
+        return 'go';
       case 'sql':
         return 'sql';
       case 'yaml':
@@ -160,6 +199,54 @@ const PrettyCode = ({ data, language, className, mode, inline = false, customBg,
 
   const displayLanguage = getLanguageDisplayName(language);
 
+  // Plain variant — chrome-less render for embedding inside other
+  // scroll containers. No border, no background, no hover toolbar, no
+  // internal scroll. The caller's ScrollArea/panel owns the chrome
+  // and scroll responsibilities.
+  if (variant === 'plain') {
+    return (
+      <Highlight theme={prismTheme} code={contentJson} language={normalizedLanguage as Language}>
+        {({ className: prismClassName, style, tokens, getLineProps, getTokenProps }) => {
+          const { backgroundColor: _bg, ...restStyle } = style;
+          return (
+            <pre
+              className={`${prismClassName} ${className || ''}`}
+              style={{
+                ...restStyle,
+                background: 'transparent',
+                margin: 0,
+                padding: isCompact ? '0.75rem 1rem' : '1rem',
+                fontSize,
+                lineHeight: lineHeightRatio,
+                fontFamily: 'monospace',
+                // ``break-all`` (not ``break-word``) so long unbroken
+                // strings without whitespace — typical of escaped
+                // JSON bodies in generated code samples — wrap at any
+                // character rather than overflowing the container.
+                whiteSpace: 'pre-wrap',
+                wordBreak: 'break-all',
+                overflowWrap: 'anywhere',
+                // Hard cap on width — parents (grid cells, panels)
+                // should constrain us but some callers render inside
+                // ``flex: 1 1 auto`` which lets the pre grow past
+                // intended bounds. ``max-width: 100%`` pins to parent.
+                maxWidth: '100%',
+              }}
+            >
+              {tokens.map((line, i) => (
+                <div key={i} {...getLineProps({ line })}>
+                  {line.map((token, key) => (
+                    <span key={key} {...getTokenProps({ token })} />
+                  ))}
+                </div>
+              ))}
+            </pre>
+          );
+        }}
+      </Highlight>
+    );
+  }
+
   if (inline) {
     const inlineBgClass = customBg || (isDarkMode ? 'bg-zinc-800' : 'bg-zinc-100');
     return (