complete language detection for code blocks

src/components/Messages/Embed.jsx

@@ -1,11 +1,11 @@
 import React from 'react';
 
-export default function Embed({ children, language = ''}) {
+export default function Embed({ children, language = '', matched}) {
   return (
     <pre>
       <div className="mb-4 rounded-md bg-black">
         <div className="relative flex items-center bg-gray-800 px-4 py-2 font-sans text-xs text-gray-200 rounded-tl-md rounded-tr-md">
-          <span className="">{ language }</span>
+          <span className="">{ (language === 'javascript' && !matched ? '' : language) }</span>
           <button className="ml-auto flex gap-2">
             <svg
               stroke="currentColor"

src/components/Messages/TextWrapper.jsx

@@ -49,12 +49,16 @@ export default function TextWrapper({ text }) {
     const codeParts = parts.map((part, i) => {
       if (part.match(codeRegex)) {
         let language = 'javascript';
+        let matched = false;
 
         if (part.match(languageMatch)) {
           language = part.match(languageMatch)[1].toLowerCase();
-          const validLanguage = languages.some((lang) => language === lang);
-          part = validLanguage ? part.replace(languageMatch, '```') : part;
-          language = validLanguage ? language : 'javascript';
+          part = part.replace(languageMatch, '```');
+          matched = true;
+          // highlight.js language validation
+          // const validLanguage = languages.some((lang) => language === lang);
+          // part = validLanguage ? part.replace(languageMatch, '```') : part;
+          // language = validLanguage ? language : 'javascript';
         }
 
         part = part.replace(newLineMatch, '```');
@@ -63,6 +67,7 @@ export default function TextWrapper({ text }) {
           <Embed
             key={i}
             language={language}
+            matched={matched}
           >
             <Highlight
               code={part.slice(3, -3)}

src/utils/regexSplit.mjs

@@ -0,0 +1,46 @@
+const primaryRegex = /```([^`\n]*?)\n([\s\S]*?)\n```/g;
+const secondaryRegex = /```([^`\n]*?)\n?([\s\S]*?)\n?```/g;
+
+const unenclosedCodeTest = (text) => {
+  let workingText = text;
+  // if (workingText.startsWith('<') || (!workingText.startsWith('`') && workingText.match(/```/g)?.length === 1)) {
+  //   workingText = `\`\`\`${workingText}`
+  // }
+
+  return workingText.trim();
+};
+
+export default function regexSplit(string) {
+  let matches = [...string.matchAll(primaryRegex)];
+
+  if (!matches[0]) {
+    matches = [...string.matchAll(secondaryRegex)];
+  }
+
+  const output = [matches[0].input.slice(0, matches[0].index)];
+
+  // console.log(matches);
+
+  for (let i = 0; i < matches.length; i++) {
+    const [fullMatch, language, code] = matches[i];
+    // const formattedCode = code.replace(/`+/g, '\\`');
+    output.push(`\`\`\`${language}\n${code}\n\`\`\``);
+    if (i < matches.length - 1) {
+      let nextText = string.slice(matches[i].index + fullMatch.length, matches[i + 1].index);
+      nextText = unenclosedCodeTest(nextText);
+      output.push(nextText);
+    } else {
+      const lastMatch = matches[matches.length - 1][0];
+      // console.log(lastMatch);
+      // console.log(matches[0].input.split(lastMatch));
+      let rest = matches[0].input.split(lastMatch)[1]
+
+      if (rest) {
+        rest = unenclosedCodeTest(rest);
+        output.push(rest);
+      }
+    }
+  }
+
+  return output;
+}