wip

Author: shaneeza

packages/code/src/Code.stories.tsx

@@ -60,10 +60,11 @@ const customActionButtons = [
 // `;
 
 const jsSnippet = `
-/** 
- * comment 
+/**
+ * comment
  */
-import ***shaneeza*** from './';
+_shaneeza_
+import shaneeza from './';
 import {{ shaneeza }} from './';
 import {{ datetime }} from './';
 
@@ -79,6 +80,10 @@ var myObj = {
 const check = { hello }
 `;
 
+// const jsSnippet = `
+//  This is a ((( line ))) that i want to highlight
+// `;
+
 // > 5 lines to trigger expandable code block
 const shortJsSnippet = `
   function greeting(entity) {

packages/code/src/Syntax/Syntax.tsx

@@ -1,4 +1,5 @@
 import React, { useMemo } from 'react';
+import { renderToString } from 'react-dom/server';
 import { HLJSOptions, HLJSPlugin } from 'highlight.js';
 import hljs from 'highlight.js/lib/core'; // Skip highlight's auto-registering
 import hljsDefineGraphQL from 'highlightjs-graphql';
@@ -132,6 +133,13 @@ function Syntax({
       highlightedContent.react
     );
 
+  const string = renderToString(content).replace(
+    /_shaneeza_/g,
+    '<span class="highlighted">shaneeza</span>',
+  );
+
+  console.log({ beforeString: renderToString(content), string });
+
   const { theme, darkMode } = useDarkMode();
 
   const baseFontSize = useBaseFontSize();
@@ -166,7 +174,8 @@ function Syntax({
             border-spacing: 0;
           `}
         >
-          <tbody>{content}</tbody>
+          {/* <tbody>{content}</tbody> */}
+          <tbody dangerouslySetInnerHTML={{ __html: string }} />
         </table>
       </code>
     </SyntaxContext.Provider>

packages/code/src/renderingPlugin/renderingPlugin.tsx

@@ -158,6 +158,28 @@ function getHighlightedRowStyle(darkMode: boolean) {
   `;
 }
 
+const mergeAsterisks = arr => {
+  return arr.reduce((acc, curr, i, array) => {
+    if (
+      curr === '*' &&
+      array[i + 1] === '*' &&
+      array[i + 2] === '*' &&
+      typeof array[i + 3] === 'string' &&
+      array[i + 4] === '*' &&
+      array[i + 5] === '*' &&
+      array[i + 6] === '*'
+    ) {
+      // Push the transformed string
+      acc.push(`***${array[i + 3]}***`);
+      // Skip the next 6 elements
+      array.splice(i, 7);
+    } else {
+      acc.push(curr);
+    }
+    return acc;
+  }, []);
+};
+
 interface LineTableRowProps {
   lineNumber?: number;
   children: React.ReactNode;
@@ -247,7 +269,7 @@ export function flattenNestedTree(
     return function (
       entity: string | TokenObject,
     ): string | FlatTokenObject | Array<string | FlatTokenObject> {
-      console.log({ entity });
+      // console.log({ entity });
       if (isString(entity)) {
         if (parentKinds.length > 0) {
           return {
@@ -258,52 +280,54 @@ export function flattenNestedTree(
             ),
             children: [entity],
           };
-        } else if (bracketArray.some(sub => entity.includes(sub))) {
-          // The plugin returns {{ testing }} like this:
-          // entity: "{"
-          // entity: "{ "
-          // entity: "testing }} "
-
-          if (entity.includes('{')) {
-            // This is a bracket that has no space after it, meaning there is a string directly after it e.g. "{{"
-            const singleBracket = '{';
-
-            // This is a bracket with a space after it and without a new line e.g. "{\n "
-            const singleBracketWithSpaceAfter = '{ ';
-
-            // Check it the entity is a bracket with no space after it
-            const isOnlySingleBracket = entity === singleBracket;
-
-            console.log({ entity, isOnlySingleBracket, lastStringEntity });
-
-            // If there is no space after it then remove it
-            if (isOnlySingleBracket) {
-              console.log({ entity });
-              // save this entity as the last entity so that we can check if this directly follows another bracket
-              lastStringEntity = entity;
-              return '';
-            }
-
-            // Check if the entity is a bracket with a space after it and if a empty bracket was the last entity before it e.g. "{{ "
-            const isSingleBracketWithSpace =
-              entity === singleBracketWithSpaceAfter &&
-              lastStringEntity === singleBracket;
-
-            // If the entity is a bracket with a space after it and a single bracket was the last entity before it then remove it
-            if (isSingleBracketWithSpace) {
-              lastStringEntity = entity;
-              return '';
-            }
-          }
+        }
+        // } else if (bracketArray.some(sub => entity.includes(sub))) {
+        //   // The plugin returns {{ testing }} like this:
+        //   // entity: "{"
+        //   // entity: "{ "
+        //   // entity: "testing }} "
+
+        //   if (entity.includes('{')) {
+        //     // This is a bracket that has no space after it, meaning there is a string directly after it e.g. "{{"
+        //     const singleBracket = '{';
+
+        //     // This is a bracket with a space after it and without a new line e.g. "{\n "
+        //     const singleBracketWithSpaceAfter = '{ ';
+
+        //     // Check it the entity is a bracket with no space after it
+        //     const isOnlySingleBracket = entity === singleBracket;
+
+        //     // console.log({ entity, isOnlySingleBracket, lastStringEntity });
+
+        //     // If there is no space after it then remove it
+        //     if (isOnlySingleBracket) {
+        //       // console.log({ entity });
+        //       // save this entity as the last entity so that we can check if this directly follows another bracket
+        //       lastStringEntity = entity;
+        //       return '';
+        //     }
 
-          // If this entity has double brackets then remove them and add a special class to it e.g. 'testing }}'
-          const cleanedEntity = entity.replace(' }}', '');
+        //     // Check if the entity is a bracket with a space after it and if a empty bracket was the last entity before it e.g. "{{ "
+        //     const isSingleBracketWithSpace =
+        //       entity === singleBracketWithSpaceAfter &&
+        //       lastStringEntity === singleBracket;
 
-          return {
-            kind: generateKindClassName(`special ${prefix}special__${count++}`),
-            children: [cleanedEntity],
-          };
-        } else {
+        //     // If the entity is a bracket with a space after it and a single bracket was the last entity before it then remove it
+        //     if (isSingleBracketWithSpace) {
+        //       lastStringEntity = entity;
+        //       return '';
+        //     }
+        //   }
+
+        //   // If this entity has double brackets then remove them and add a special class to it e.g. 'testing }}'
+        //   const cleanedEntity = entity.replace(' }}', '');
+
+        //   return {
+        //     kind: generateKindClassName(`special ${prefix}special__${count++}`),
+        //     children: [cleanedEntity],
+        //   };
+        // }
+        else {
           return entity;
         }
         // return parentKinds.length > 0
@@ -392,8 +416,10 @@ export function treeToLines(
     lines[currentLineIndex] = [];
   };
 
+  console.log('🤡🤡🤡🤡', { children });
+
   flattenNestedTree(children).forEach(child => {
-    console.log({ child });
+    // console.log({ child });
 
     // If the current element includes a line break, we need to handle it differently
     if (containsLineBreak(child)) {
@@ -427,9 +453,20 @@ export function treeToLines(
     }
   });
 
-  console.log('🤡🤡', { lines });
+  // console.log('🤡🤡', { lines });
+
+  const mergedLines = lines.map(line => {
+    const mergedLine = mergeAsterisks(line);
+
+    console.log({ line, mergedLine });
 
-  return lines;
+    return mergedLine;
+  });
+
+  // console.log('🌈🌈🌈🌈', { mergedLines });
+
+  // return lines;
+  return mergedLines;
 }
 
 interface TableContentProps {
@@ -507,11 +544,15 @@ export function TableContent({ lines }: TableContentProps) {
 }
 
 const plugin: LeafyGreenHLJSPlugin = {
+  'before:highlight': function (result: LeafyGreenHighlightResult) {
+    console.log('🤡 before', { result });
+  },
   'after:highlight': function (result: LeafyGreenHighlightResult) {
     // console.log('💚', { result });
 
     const { rootNode } = result._emitter;
     // console.log(JSON.stringify(rootNode.children, null, 2));
+    console.log({ rootNode });
     result.react = <TableContent lines={treeToLines(rootNode.children)} />;
 
     // console.log('💚💚💚', { result: result.react });