Add syntax highlighting to config block

Signed-off-by: Joe Fusco <[email protected]>
wp-graphql · Dec 11, 2023 · 0ea6760 · 0ea6760
1 parent 1c773cd
commit 0ea6760
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 111 deletions.
diff --git a/lib/highlightCode.js b/lib/highlightCode.js
@@ -0,0 +1,37 @@
+import Highlight, { defaultProps } from 'prism-react-renderer';
+import clsx from 'clsx';
+
+export const highlightCode = (code, language, highlightLines = []) => {
+  return (
+    <Highlight {...defaultProps} code={code} language={language}>
+      {({ className, style, tokens, getLineProps, getTokenProps }) => (
+        <div className={clsx(className, 'code-highlight')} style={{ display: 'flex' }}>
+          <pre className="flex-1 overflow-x-auto" style={style}>
+            <code>
+              {tokens.map((line, i) => {
+                const lineNumber = i + 1;
+                const isHighlighted = highlightLines.includes(lineNumber);
+                const lineProps = getLineProps({ line, key: i });
+
+                return (
+                  <div
+                    key={i}
+                    {...lineProps}
+                    style={{ ...lineProps.style, display: 'flex' }}
+                    className={clsx({ 'highlighted-line': isHighlighted })}
+                  >
+                    <span className="line-content">
+                      {line.map((token, key) => (
+                        <span key={key} {...getTokenProps({ token, key })} />
+                      ))}
+                    </span>
+                  </div>
+                );
+              })}
+            </code>
+          </pre>
+        </div>
+      )}
+    </Highlight>
+  );
+};
diff --git a/wp-blocks/AcfFieldTypeConfigurationBlock.js b/wp-blocks/AcfFieldTypeConfigurationBlock.js
@@ -1,127 +1,60 @@
-import { gql } from '@apollo/client'
+import { gql } from '@apollo/client';
 import React, { useState, useEffect } from 'react';
-
-import {
-  Card,
-  CardHeader,
-} from '@/components/ui/card';
+import { Card, CardHeader } from '@/components/ui/card';
 import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
 import { snakeToPascalCase } from '@/lib/snakeToPascalCase';
 import { stringToHash } from '@/lib/stringToHash';
+import { highlightCode } from '@/lib/highlightCode';
 
-// Field Type is known:
-
-// Fetch the proper JSON to register that field within a field group.
-
-// Use fetched JSON as a param for the PHP tab.
-
-// Highlight relevant lines.
-
-const tabData = [
-  {
-    key: 'php',
-    name: 'PHP',
-    component: PHPTabContent
-  },
-  {
-    key: 'json',
-    name: 'JSON',
-    component: JSONTabContent
-  },
-];
-
-function PHPTabContent({fieldTypeConfigurationBlockFields, uniqueId}) {
-  const { acfFieldType } = fieldTypeConfigurationBlockFields;
+function generateData(uniqueId, acfFieldType) {
+  return {
+    key: `my_field_group_${uniqueId}`,
+    title: `My Field Group with ${acfFieldType}`,
+    show_in_graphql: 1,
+    graphql_field_name: `myFieldGroupWith${snakeToPascalCase(acfFieldType)}`,
+    map_graphql_types_from_location_rules: 0,
+    graphql_types: ['Page'],
+    fields: [{
+      key: `my_field_${uniqueId}`,
+      label: 'My Field',
+      name: 'my_field',
+      type: `${acfFieldType}`,
+      show_in_graphql: 1,
+      graphql_field_name: `myFieldWith${snakeToPascalCase(acfFieldType)}`,
+    }],
+    location: [[{
+      param: 'post_type',
+      operator: '==',
+      value: 'page',
+    }]],
+  };
+}
 
-  const phpGuts = `array(
-      'key'                   => 'my_field_group_${uniqueId}',
-      'title'                 => 'My Field Group with ${acfFieldType}',
-      'show_in_graphql'       => 1,
-      'graphql_field_name'    => 'myFieldGroupWith${snakeToPascalCase(acfFieldType)}',
-      'map_graphql_types_from_location_rules' => 0,
-      'graphql_types'         => array( 'Page' ),
-      'fields'                => array(
-        array(
-          'key'                => 'my_field_${uniqueId}',
-          'label'              => 'My Field',
-          'name'               => 'my_field',
-          'type'               => '${acfFieldType}',
-          'show_in_graphql'    => 1,
-          'graphql_field_name' => 'myFieldWith${snakeToPascalCase(acfFieldType)}',
-        ),
-      ),
-      'location'              => array(
-        array(
-          array(
-            'param'    => 'post_type',
-            'operator' => '==',
-            'value'    => 'page',
-          ),
-        ),
-      )
-    )`
-
-  let phpString = `<?php
+function generatePHPTabContent(data) {
+  const phpString = `<?php
 add_action( 'acf/include_fields', function() {
-  // Check if the ACF function exists
   if ( ! function_exists( 'acf_add_local_field_group' ) ) {
       return;
   }
-
-  // Add local field group
   acf_add_local_field_group(
-    ${phpGuts}
+    [
+      ${JSON.stringify(data, null, 2).replace(/\n/g, "\n      ") /* Fix rendered indentation */}
+    ]
   );
-});
-`;
+});`;
+  return highlightCode(phpString, "php", [3, 4, 5]);
+}
 
-  return(
-    <pre className='mb-4 mt-6 max-h-[650px] overflow-x-auto rounded-lg border py-4'>
-      {phpString}
-    </pre>
-  )
+function generateJSONTabContent(data) {
+  const jsonString = JSON.stringify(data, null, 2);
+  return highlightCode(jsonString, "json", [3, 4, 5]);
 }
 
-function JSONTabContent({fieldTypeConfigurationBlockFields, uniqueId}) {
+function TabContent({ fieldTypeConfigurationBlockFields, uniqueId, format }) {
   const { acfFieldType } = fieldTypeConfigurationBlockFields;
+  const data = generateData(uniqueId, acfFieldType);
 
-  const jsonData = {
-    key: `my_field_group_${uniqueId}`,
-    title:`My Field Group with ${acfFieldType}`,
-    show_in_graphql: 1,
-    graphql_field_name: `myFieldGroupWith${snakeToPascalCase(acfFieldType)}`,
-    map_graphql_types_from_location_rules: 0,
-    graphql_types: [ 
-      "Page"
-    ],
-    fields: [
-      {
-        key: `my_field_${uniqueId}`,
-        label: "My Field",
-        name: "my_field",
-        type: `${acfFieldType}`,
-        show_in_graphql: 1,
-        graphql_field_name: `myFieldWith${snakeToPascalCase(acfFieldType)}`,
-      },
-    ],
-    'location': [
-      [
-        {
-          param: 'post_type',
-          operator:'==',
-          value: 'page',
-        },
-      ],
-    ]
-  };
-
-  const jsonString = JSON.stringify(jsonData, null, 2);
-
-  return(
-    <pre className='mb-4 mt-6 max-h-[650px] overflow-x-auto rounded-lg border py-4'>
-      {jsonString}
-    </pre>
-  )
+  return format === 'php' ? generatePHPTabContent(data) : generateJSONTabContent(data);
 }
 
 export function AcfFieldTypeConfigurationBlock({ fieldTypeConfigurationBlockFields }) {
@@ -130,7 +63,12 @@ export function AcfFieldTypeConfigurationBlock({ fieldTypeConfigurationBlockFiel
 
   useEffect(() => {
     setUniqueId(stringToHash(acfFieldType));
-  }, []);
+  }, [acfFieldType]);
+
+  const tabData = [
+    { key: 'php', name: 'PHP' },
+    { key: 'json', name: 'JSON' },
+  ];
 
   return (
     <Card>
@@ -145,14 +83,14 @@ export function AcfFieldTypeConfigurationBlock({ fieldTypeConfigurationBlockFiel
           </TabsList>
           {tabData.map(tab => (
             <TabsContent key={tab.key} value={tab.key}>
-              {tab.component({ fieldTypeConfigurationBlockFields, uniqueId })}
+              <TabContent fieldTypeConfigurationBlockFields={fieldTypeConfigurationBlockFields} uniqueId={uniqueId} format={tab.key} />
             </TabsContent>
           ))}
         </Tabs>
       </CardHeader>
     </Card>
   );
-};
+}
 
 AcfFieldTypeConfigurationBlock.displayName = `AcfFieldTypeConfigurationBlock`
 AcfFieldTypeConfigurationBlock.config = {
@@ -167,4 +105,4 @@ AcfFieldTypeConfigurationBlock.fragments = {
       }
     }
   `,
-}
+}