feat(PrismCode): react renderer * 15

Author: tenphi

src/components/content/PrismCode/PrismCode.tsx

@@ -9,7 +9,7 @@ import {
   tasty,
 } from '../../../tasty';
 
-import { Prism } from './prismSetup';
+import { ensureYamlSqlExtensions, Prism } from './prismSetup';
 
 import 'prismjs/components/prism-javascript';
 import 'prismjs/components/prism-yaml';
@@ -33,6 +33,28 @@ const PreElement = tasty({
   },
 });
 
+export interface CubePrismCodeProps extends ContainerStyleProps {
+  /** The CSS style map */
+  style?: BaseProps['style'];
+  styles?: Styles;
+  /** The code snippet */
+  code?: string;
+  /** The language of the code snippet */
+  language?:
+    | 'javascript'
+    | 'css'
+    | 'sql'
+    | 'less'
+    | 'html'
+    | 'json'
+    | 'yaml'
+    | 'bash'
+    | 'editorconfig'
+    | 'php'
+    | 'python'
+    | 'typescript';
+}
+
 function isDiffCode(code: string): boolean {
   // Split the code into lines
   const lines = code.split('\n');
@@ -57,28 +79,6 @@ function isDiffCode(code: string): boolean {
   return false;
 }
 
-export interface CubePrismCodeProps extends ContainerStyleProps {
-  /** The CSS style map */
-  style?: BaseProps['style'];
-  styles?: Styles;
-  /** The code snippet */
-  code?: string;
-  /** The language of the code snippet */
-  language?:
-    | 'javascript'
-    | 'css'
-    | 'sql'
-    | 'less'
-    | 'html'
-    | 'json'
-    | 'yaml'
-    | 'bash'
-    | 'editorconfig'
-    | 'php'
-    | 'python'
-    | 'typescript';
-}
-
 function PrismCode(props: CubePrismCodeProps, ref) {
   const { code = '', language = 'javascript', ...otherProps } = props;
 
@@ -97,6 +97,11 @@ function PrismCode(props: CubePrismCodeProps, ref) {
     Prism.languages[grammarLang] = Prism.languages.diff;
   }
 
+  // Ensure YAML SQL extensions are applied for YAML content
+  if (language === 'yaml' || grammarLang === 'diff-yaml') {
+    ensureYamlSqlExtensions();
+  }
+
   return (
     <PreElement ref={ref} {...otherProps}>
       <Highlight prism={Prism} code={code} language={grammarLang as any}>

src/components/content/PrismCode/__tests__/diffHighlight.test.ts

@@ -1,4 +1,4 @@
-import { Prism } from '../prismSetup';
+import { ensureYamlSqlExtensions, Prism } from '../prismSetup';
 
 describe('Prism diff-highlight plugin', () => {
   const code = `+console.log('hi');\n-const a = 1;`;
@@ -223,6 +223,8 @@ describe('Prism diff-highlight plugin', () => {
   });
 
   test('YAML grammar supports SQL highlighting in sql fields', () => {
+    ensureYamlSqlExtensions();
+
     const yamlCode = `cubes:
   - name: orders
     sql: SELECT id, name FROM orders WHERE active = 1
@@ -243,6 +245,8 @@ describe('Prism diff-highlight plugin', () => {
   });
 
   test('YAML grammar supports SQL highlighting in multiline folded blocks', () => {
+    ensureYamlSqlExtensions();
+
     const yamlCode = `cubes:
   - name: orders
     sql: >
@@ -261,4 +265,125 @@ describe('Prism diff-highlight plugin', () => {
     expect(hasKeywords).toBe(true);
     expect(hasSqlKeywords).toBe(true);
   });
+
+  test('PrismDiffCode with YAML containing multiline SQL blocks', () => {
+    ensureYamlSqlExtensions();
+
+    // Test that PrismDiffCode properly handles YAML with multiline SQL
+    const { diffLines } = require('diff');
+
+    const originalYaml = `cubes:
+  - name: orders
+    sql: >
+      SELECT id, amount, status
+      FROM orders
+      WHERE active = 1
+    measures:
+      - name: count
+        type: count`;
+
+    const modifiedYaml = `cubes:
+  - name: orders
+    sql: >
+      SELECT id, amount, status, created_at
+      FROM orders
+      WHERE active = 1 AND status != 'cancelled'
+    measures:
+      - name: count
+        type: count
+      - name: total_amount
+        sql: amount
+        type: sum`;
+
+    const diff = diffLines(originalYaml, modifiedYaml);
+    const diffString = diff
+      .map((part: any) => {
+        const value = part.value.trimEnd();
+        if (part.added) {
+          return value
+            .split('\n')
+            .map((val: string) => (val ? `+${val}` : ''))
+            .join('\n');
+        }
+        if (part.removed) {
+          return value
+            .split('\n')
+            .map((val: string) => (val ? `-${val}` : ''))
+            .join('\n');
+        }
+        return value
+          .split('\n')
+          .map((val: string) => (val ? ` ${val}` : ''))
+          .join('\n');
+      })
+      .join('\n');
+
+    // Capture tokens from diff-yaml processing
+    let capturedTokens: any;
+    const originalHook =
+      Prism.hooks.all['after-tokenize'][
+        Prism.hooks.all['after-tokenize'].length - 1
+      ];
+    Prism.hooks.all['after-tokenize'][
+      Prism.hooks.all['after-tokenize'].length - 1
+    ] = function (env: any) {
+      originalHook.call(this, env);
+      if (env.language === 'diff-yaml') {
+        capturedTokens = env.tokens;
+      }
+    };
+
+    // Manually register diff-yaml like PrismDiffCode would
+    if (!Prism.languages['diff-yaml']) {
+      Prism.languages['diff-yaml'] = Prism.languages.diff;
+    }
+
+    // Process the diff string with diff-yaml language
+    Prism.highlight(diffString, Prism.languages.diff, 'diff-yaml');
+
+    expect(capturedTokens).toBeDefined();
+
+    // Check that we have diff tokens (added/removed lines)
+    const hasAddedTokens = capturedTokens.some(
+      (t: any) => typeof t !== 'string' && t.type === 'inserted-sign',
+    );
+    const hasRemovedTokens = capturedTokens.some(
+      (t: any) => typeof t !== 'string' && t.type === 'deleted-sign',
+    );
+
+    expect(hasAddedTokens).toBe(true);
+    expect(hasRemovedTokens).toBe(true);
+
+    // Check that within the diff tokens, we have nested YAML and SQL highlighting
+    const diffTokens = capturedTokens.filter(
+      (t: any) =>
+        typeof t !== 'string' &&
+        (t.type === 'inserted-sign' || t.type === 'deleted-sign'),
+    );
+
+    // Look for nested SQL tokens within the YAML content
+    const hasNestedSqlHighlighting = diffTokens.some((token: any) => {
+      const lineTokens = Array.isArray(token.content)
+        ? token.content.filter(
+            (c: any) => typeof c !== 'string' && c.type === 'line',
+          )
+        : [];
+
+      return lineTokens.some((lineToken: any) => {
+        if (!Array.isArray(lineToken.content)) return false;
+
+        // Check for SQL keywords, YAML keys, or sql-scalar tokens
+        const tokenString = JSON.stringify(lineToken.content);
+        return (
+          (tokenString.includes('"keyword"') &&
+            (tokenString.includes('SELECT') ||
+              tokenString.includes('WHERE') ||
+              tokenString.includes('FROM'))) ||
+          tokenString.includes('"sql-scalar"')
+        );
+      });
+    });
+
+    expect(hasNestedSqlHighlighting).toBe(true);
+  });
 });

src/components/content/PrismCode/prismSetup.tsx

@@ -183,20 +183,29 @@ import { Prism as RendererPrism } from 'prism-react-renderer';
   });
 })(RendererPrism);
 
-// Extend YAML to support SQL syntax highlighting in sql: fields
-(function (Prism) {
-  if (Prism.languages.yaml && Prism.languages.sql) {
+// Function to ensure YAML SQL extensions are applied
+function ensureYamlSqlExtensions() {
+  // Check if extensions are already applied
+  if (
+    RendererPrism.languages.yaml &&
+    RendererPrism.languages.yaml['sql-scalar']
+  ) {
+    return; // Already applied
+  }
+
+  // Apply extensions if both YAML and SQL grammars are available
+  if (RendererPrism.languages.yaml && RendererPrism.languages.sql) {
     // Insert SQL patterns before existing YAML patterns for higher priority
-    Prism.languages.insertBefore('yaml', 'key', {
+    RendererPrism.languages.insertBefore('yaml', 'key', {
       'sql-inline': {
         pattern: /((?:^|\n)\s*sql\s*:\s*)([^\n\r|>]+)/,
         lookbehind: true,
-        inside: Prism.languages.sql,
+        inside: RendererPrism.languages.sql,
       },
     });
 
     // Handle multiline SQL blocks with proper indentation
-    Prism.languages.insertBefore('yaml', 'key', {
+    RendererPrism.languages.insertBefore('yaml', 'key', {
       'sql-multiline': {
         pattern:
           /((?:^|\n)\s*sql\s*:\s*[|>][-+]?\s*\n)((?:\s{2,}[^\n\r]+(?:\n|$))+)/,
@@ -208,7 +217,7 @@ import { Prism as RendererPrism } from 'prism-react-renderer';
               indent: /^\s+/,
               'sql-code': {
                 pattern: /.+/,
-                inside: Prism.languages.sql,
+                inside: RendererPrism.languages.sql,
               },
             },
           },
@@ -217,14 +226,15 @@ import { Prism as RendererPrism } from 'prism-react-renderer';
     });
 
     // Handle YAML scalar content that follows sql: > or sql: | indicators
-    Prism.languages.insertBefore('yaml', 'scalar', {
+    RendererPrism.languages.insertBefore('yaml', 'scalar', {
       'sql-scalar': {
         pattern:
           /^\s*(SELECT|INSERT|UPDATE|DELETE|WITH|CREATE|DROP|ALTER|UNION|FROM|WHERE|JOIN|GROUP|ORDER|HAVING)[\s\S]*$/im,
-        inside: Prism.languages.sql,
+        inside: RendererPrism.languages.sql,
       },
     });
   }
-})(RendererPrism);
+}
 
 export { RendererPrism as Prism };
+export { ensureYamlSqlExtensions };