LG-4798: code custom snippets

packages/code/src/Code.stories.tsx

@@ -37,6 +37,8 @@ const customActionButtons = [
 const jsSnippet = `
 import datetime from './';
 
+hello there _hi_ and ok this is _great_ yup
+
 const myVar = 42;
 
 var myObj = {
@@ -54,10 +56,24 @@ export default class myClass {
 function greeting(entity) {
   return \`Hello, \${entity}! Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper.\`;
 }
- 
+
 console.log(greeting('World'));
 `;
 
+const jsCustomSnippet = `
+hi _hi_  _--hi_
+
+hi {{hi}} {{--hi}}
+
+hi ~~hi~~  ~~--hi~~
+
+whats up yall
+
+const hey hey
+
+mongosh "mongodb+srv://cluster0.abcde.mongodb.net/test" ~~--api~~ 1 ~~--username~~ elmo
+`;
+
 // > 5 lines to trigger expandable code block
 const shortJsSnippet = `
   function greeting(entity) {
@@ -136,6 +152,10 @@ export const LiveExample: StoryType<typeof Code, FontSizeProps> = ({
       highlightLines={highlightLines ? [6, [10, 15]] : undefined}
       className={css`
         width: 100%;
+
+        .lg-highlight-custom {
+          color: red;
+        }
       `}
     >
       {jsSnippet}
@@ -148,6 +168,33 @@ LiveExample.parameters = {
   },
 };
 
+export const CustomWord: StoryType<typeof Code, FontSizeProps> = ({
+  baseFontSize,
+  highlightLines,
+  ...args
+}: CodeProps & FontSizeProps) => (
+  <LeafygreenProvider baseFontSize={baseFontSize}>
+    <Code
+      {...(args as CodeProps)}
+      highlightLines={highlightLines ? [6, [10, 15]] : undefined}
+      className={css`
+        width: 100%;
+
+        .lg-highlight-custom {
+          color: red;
+        }
+      `}
+    >
+      {jsCustomSnippet}
+    </Code>
+  </LeafygreenProvider>
+);
+LiveExample.parameters = {
+  chromatic: {
+    disableSnapshot: true,
+  },
+};
+
 export const WithCustomActions: StoryType<typeof Code, FontSizeProps> = ({
   baseFontSize,
   highlightLines,

packages/code/src/Code/Code.tsx

@@ -74,6 +74,8 @@ function Code({
   const { theme, darkMode } = useDarkMode(darkModeProp);
   const baseFontSize = useBaseFontSize();
 
+  console.log({ className });
+
   useIsomorphicLayoutEffect(() => {
     const scrollableElement = scrollableElementRef.current;
 
@@ -233,7 +235,6 @@ function Code({
                 collapsedCodeHeight,
                 isMultiline,
                 showExpandButton,
-                className,
               })}
               onScroll={onScroll}
               ref={scrollableElementRef}

packages/code/src/Syntax/Syntax.tsx

@@ -103,6 +103,7 @@ function Syntax({
       />
     ) : (
       highlightedContent.react
+      // highlightedContent.string
     );
 
   const { theme, darkMode } = useDarkMode();
@@ -140,6 +141,11 @@ function Syntax({
           `}
         >
           <tbody>{content}</tbody>
+          {/* {language === Language.None ? (
+            <tbody>{content}</tbody>
+          ) : (
+            <tbody dangerouslySetInnerHTML={{ __html: content }} />
+          )} */}
         </table>
       </code>
     </SyntaxContext.Provider>

packages/code/src/renderingPlugin/renderingPlugin.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import flatMap from 'lodash/flatMap';
+// import ReactDOMServer from 'react-dom/server';
 
 import { css, cx } from '@leafygreen-ui/emotion';
 import { palette } from '@leafygreen-ui/palette';
@@ -17,8 +18,9 @@ interface TokenProps {
   children: React.ReactNode;
 }
 
+const prefix = 'lg-highlight-';
+
 export function generateKindClassName(...kinds: Array<any>): string {
-  const prefix = 'lg-highlight-';
   return kinds
     .filter((str): str is string => isString(str) && str.length > 0)
     .map(kind => {
@@ -169,6 +171,33 @@ export function LineTableRow({
     ? palette.gray.light3
     : palette.yellow.dark2;
 
+  // const childrenToHtmlString = children => {
+  //   return ReactDOMServer.renderToStaticMarkup(<>{children}</>);
+  // };
+
+  // console.log({ children, string: childrenToHtmlString(children) });
+
+  // const mergeStringsIntoString = children => {
+  //   const childArray = React.Children.toArray(children); // Ensure it's an array
+
+  //   return childArray.reduce((acc, child) => {
+  //     const lastItem = acc[acc.length - 1];
+
+  //     if (typeof child === 'string') {
+  //       if (typeof lastItem === 'string') {
+  //         acc[acc.length - 1] = lastItem + child; // Merge consecutive strings
+  //       } else {
+  //         acc.push(child);
+  //       }
+  //     } else {
+  //       acc.push(child); // Keep React elements untouched
+  //     }
+
+  //     return acc;
+  //   }, []);
+  // };
+
+  // console.log({ mergeStringsIntoString: mergeStringsIntoString(children) });
   return (
     <tr className={cx({ [getHighlightedRowStyle(darkMode)]: highlighted })}>
       {lineNumber && (
@@ -189,6 +218,10 @@ export function LineTableRow({
       )}
 
       <td className={cellStyle}>{children}</td>
+      {/* <td
+        className={cellStyle}
+        dangerouslySetInnerHTML={{ __html: childrenToHtmlString(children) }}
+      /> */}
     </tr>
   );
 }
@@ -228,10 +261,46 @@ export function flattenNestedTree(
     parentKinds = parentKinds.filter(
       (str): str is string => isString(str) && str.length > 0,
     );
+
     return function (
       entity: string | TokenObject,
     ): string | FlatTokenObject | Array<string | FlatTokenObject> {
+      console.log({ entity });
       if (isString(entity)) {
+        // if (parentKinds.length > 0) {
+        //   return {
+        //     kind: generateKindClassName(
+        //       kind,
+        //       ...parentKinds,
+        //       ...childrenAsKeywords(entity),
+        //     ),
+        //     children: [entity],
+        //   };
+        // } else {
+        //   // Splits up the string by underscores
+        //   // E.g. "This is before _hi_ this is after" => ["This is before ", "_hi_", " this is after"]
+        //   const splitContentByUnderscore = entity.split(/(~~[\w-]+~~)/);
+
+        //   console.log({ entity, splitContentByUnderscore });
+
+        //   // If the array is greater than one then there are underscores in the string and we want to return each item in the array as an entity.
+        //   if (splitContentByUnderscore.length > 1) {
+        //     return splitContentByUnderscore.map(str => {
+        //       // If the string starts and ends with an underscore, we want to remove them and return a new entity with a custom kind.
+        //       if (str.startsWith('~~') && str.endsWith('~~')) {
+        //         const removeUnderscores = str.slice(2, -2);
+        //         return {
+        //           kind: generateKindClassName(`${prefix}custom`),
+        //           children: [removeUnderscores],
+        //         };
+        //       }
+
+        //       return str;
+        //     });
+        //   }
+
+        //   return entity;
+        // }
         return parentKinds.length > 0
           ? {
               kind: generateKindClassName(
@@ -299,6 +368,8 @@ export function treeToLines(
   const lines: LineDefinition = [];
   let currentLineIndex = 0;
 
+  // console.log({ children });
+
   // Create a new line, if no lines exist yet
   if (lines[currentLineIndex] == null) {
     lines[currentLineIndex] = [];
@@ -309,7 +380,11 @@ export function treeToLines(
     lines[currentLineIndex] = [];
   };
 
+  console.log({ flatArray: flattenNestedTree(children) });
+
   flattenNestedTree(children).forEach(child => {
+    // console.log({ child });
+
     // If the current element includes a line break, we need to handle it differently
     if (containsLineBreak(child)) {
       if (isString(child)) {
@@ -386,14 +461,65 @@ export function TableContent({ lines }: TableContentProps) {
         const currentLineNumber = index + (lineNumberStart ?? 1);
         const highlightLine = lineShouldHighlight(currentLineNumber);
 
+        const mergeStringsIntoString = children => {
+          return children.reduce((acc, child) => {
+            const lastItem = acc[acc.length - 1];
+
+            if (typeof child === 'string') {
+              if (typeof lastItem === 'string') {
+                acc[acc.length - 1] = lastItem + child; // Merge consecutive strings
+              } else {
+                acc.push(child);
+              }
+            } else {
+              acc.push(child); // Keep React elements untouched
+            }
+
+            return acc;
+          }, []);
+        };
+
+        const mergedLines = mergeStringsIntoString(line);
+
+        const newLines = mergedLines.map((line, index) => {
+          if (typeof line === 'string') {
+            const splitContentByUnderscore = line.split(/(~~[\w-]+~~)/);
+
+            if (splitContentByUnderscore.length > 1) {
+              return splitContentByUnderscore.map(str => {
+                // If the string starts and ends with an underscore, we want to remove them and return a new entity with a custom kind.
+                if (str.startsWith('~~') && str.endsWith('~~')) {
+                  const removeUnderscores = str.slice(2, -2);
+                  return {
+                    kind: generateKindClassName(`${prefix}custom`),
+                    children: [removeUnderscores],
+                  };
+                }
+
+                return str;
+              });
+            }
+          }
+
+          return line;
+        });
+
+        // TODO: if any merged line is a string, we need to split it by the special character and add a kind. This would avoid turning the component into a string.
+
+        console.log({
+          line,
+          mergedLines,
+          newLines,
+        });
+
         let displayLineNumber;
 
         if (showLineNumbers) {
           displayLineNumber = currentLineNumber;
         }
 
-        const processedLine = line?.length ? (
-          line.map(processToken)
+        const processedLine = newLines?.length ? (
+          newLines.map(processToken)
         ) : (
           // We create placeholder content when a line break appears to preserve the line break's height
           // It needs to be inline-block for the table row to not collapse.
@@ -404,6 +530,8 @@ export function TableContent({ lines }: TableContentProps) {
           />
         );
 
+        // console.log({ processedLine });
+
         return (
           <LineTableRow
             key={currentLineNumber}
@@ -422,8 +550,25 @@ export function TableContent({ lines }: TableContentProps) {
 const plugin: LeafyGreenHLJSPlugin = {
   'after:highlight': function (result: LeafyGreenHighlightResult) {
     const { rootNode } = result._emitter;
-    // console.log(JSON.stringify(rootNode.children, null, 2));
+    // console.log(JSON.stringify(treeToLines(rootNode.children), null, 2));
     result.react = <TableContent lines={treeToLines(rootNode.children)} />;
+
+    // const transformUnderscoreWords = htmlString => {
+    //   // console.log({ htmlString });
+    //   // return htmlString.replace(
+    //   //   /~~([-\w]+)~~/g,
+    //   //   `<span class=${prefix}custom>$1</span>`,
+    //   // );
+    //   return htmlString;
+    // };
+
+    // // Example usage:
+    // const string = ReactDOMServer.renderToStaticMarkup(result.react);
+
+    // // console.log({ string });
+    // const transformedString = transformUnderscoreWords(string);
+
+    // result.string = transformedString;
   },
 };