From 05042d33d5e2d7b07a51f082d4801f2b346c46dc Mon Sep 17 00:00:00 2001
From: Rob Dominguez <rob.dominguez@hasura.io>
Date: Thu, 2 Feb 2023 13:58:46 -0600
Subject: [PATCH] docs: optimize code elements inside tables

PR-URL: https://github.com/hasura/graphql-engine-mono/pull/7776
GitOrigin-RevId: eea30d61c6ba04cb1c6b49d6cfaa4c561b21226b
---
 docs/.prettierrc.json                       |  2 +-
 docs/src/components/CustomDocItem/index.tsx | 25 ++++++++++++++++++---
 2 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/docs/.prettierrc.json b/docs/.prettierrc.json
index c47c4e1ffd5..f7e5da14569 100644
--- a/docs/.prettierrc.json
+++ b/docs/.prettierrc.json
@@ -5,7 +5,7 @@
   "htmlWhitespaceSensitivity": "css",
   "insertPragma": false,
   "jsxSingleQuote": false,
-  "proseWrap": "preserve",
+  "proseWrap": "always",
   "quoteProps": "as-needed",
   "requirePragma": false,
   "semi": true,
diff --git a/docs/src/components/CustomDocItem/index.tsx b/docs/src/components/CustomDocItem/index.tsx
index 4296e6491d5..172cd16b2e7 100644
--- a/docs/src/components/CustomDocItem/index.tsx
+++ b/docs/src/components/CustomDocItem/index.tsx
@@ -1,12 +1,31 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import ActualDocItem from '@theme/DocItem';
 import HasuraConBanner from '@site/src/components/HasuraConBanner';
 import GraphQLWithHasuraBanner from '@site/src/components/GraphQLWithHasuraBanner';
 import CustomFooter from '@site/src/components/CustomFooter';
 import styles from './styles.module.scss';
-import {ScrollToFeedbackButton} from "@site/src/components/Feedback/ScrollToFeedbackButton";
+import { ScrollToFeedbackButton } from '@site/src/components/Feedback/ScrollToFeedbackButton';
 
 const CustomDocItem = props => {
+  useEffect(() => {
+    // This function is adds <wbr> tags to code blocks within a table
+    // wherever an _ or . is present. We do this since so many environment
+    // variables are incredibly long and the word breaks are not happening
+    // in a user-friendly way.
+    const tables = document.querySelectorAll('table');
+    tables.forEach(table => {
+      const cells = table.querySelectorAll('td');
+      cells.forEach(cell => {
+        const codeBlocks = cell.querySelectorAll('code');
+        codeBlocks.forEach(codeBlock => {
+          codeBlock.innerHTML = codeBlock.innerHTML.replace(/_/g, '_<wbr>');
+          codeBlock.innerHTML = codeBlock.innerHTML.replace(/\./g, '.<wbr>');
+          console.log(codeBlock.innerHTML);
+        });
+      });
+    });
+  }, []);
+
   return (
     <div
       className={
@@ -18,7 +37,7 @@ const CustomDocItem = props => {
       <ActualDocItem {...props} />
       <div className={styles['custom_doc_item_footer']}>
         {/*<PageHelpful />*/}
-        <ScrollToFeedbackButton/>
+        <ScrollToFeedbackButton />
         <HasuraConBanner {...props} />
         <GraphQLWithHasuraBanner />
         <CustomFooter />