fix(web): echo terminal not working in docs modal (novuhq#5875)

.cspell.json

@@ -648,7 +648,8 @@
     "liquidjs",
     "tailwindcss",
     "focusable",
-    "textareas"
+    "textareas",
+    "echoterminal"
   ],
   "flagWords": [],
   "patterns": [

apps/web/src/components/docs/Docs.tsx

@@ -10,6 +10,7 @@ import { PropsWithChildren, ReactNode, useEffect, useMemo } from 'react';
 import { DOCS_URL, MINTLIFY_IMAGE_URL } from './docs.const';
 import { Highlight } from './Highlight';
 import { DocsQueryResults } from './useLoadDocs';
+import { useEchoTerminalScript } from '../../hooks/useEchoTerminalScript';
 
 const Text = styled('p', text);
 const LiText = styled('span', text);
@@ -38,9 +39,15 @@ export const Docs = ({ code = '', description = '', title = '', isLoading, child
       return null;
     }
 
-    return getMDXComponent(code);
+    return getMDXComponent(code, {
+      echoterminal: {
+        EchoTerminal: () => <nv-echo-terminal></nv-echo-terminal>,
+      },
+    });
   }, [code]);
 
+  useEchoTerminalScript();
+
   // Workaround for img tags that is not parsed correctly by mdx-bundler
   useEffect(() => {
     if (Component === null || isLoading) {

apps/web/src/echo-terminal.d.ts

@@ -0,0 +1,12 @@
+import { DOMAttributes } from 'react';
+
+type CustomElement<T> = Partial<T & DOMAttributes<T> & { children: any }>;
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace JSX {
+    interface IntrinsicElements {
+      ['nv-echo-terminal']: CustomElement<any>;
+    }
+  }
+}

apps/web/src/hooks/useEchoTerminalScript.ts

@@ -0,0 +1,12 @@
+import { useEffect } from 'react';
+
+export const useEchoTerminalScript = () => {
+  useEffect(() => {
+    if (!document.getElementById('echo-terminal-loader')) {
+      const script = document.createElement('script');
+      script.src = 'https://cdn.jsdelivr.net/gh/novuhq/docs/echo-terminal.min.js';
+      script.id = 'echo-terminal-loader';
+      document.body.appendChild(script);
+    }
+  }, []);
+};

apps/web/src/pages/get-started/components/get-started-tabs/EchoTab.tsx

@@ -6,19 +6,9 @@ import { AdditionInformationLink } from '../AdditionInformationLink';
 import { CodeSnippet } from '../CodeSnippet';
 import { text, title } from '@novu/novui/recipes';
 import { IconCellTower, IconCloudQueue, IconCode, IconHealthAndSafety } from '@novu/design-system';
-import { DOMAttributes, useEffect } from 'react';
+import { useEffect } from 'react';
 import { useMantineTheme } from '@mantine/core';
-
-type CustomElement<T> = Partial<T & DOMAttributes<T> & { children: any }>;
-
-declare global {
-  // eslint-disable-next-line @typescript-eslint/no-namespace
-  namespace JSX {
-    interface IntrinsicElements {
-      ['nv-echo-terminal']: CustomElement<any>;
-    }
-  }
-}
+import { useEchoTerminalScript } from '../../../../hooks/useEchoTerminalScript';
 
 const link = 'https://docs.novu.co/framework/quickstart';
 
@@ -40,14 +30,7 @@ export const EchoTab = ({ className }: { className?: string }) => {
     segment.track(`Additional Info Link - [Get Started]`, { href: link, tab: OnboardingUseCasesTabsEnum.ECHO });
   };
 
-  useEffect(() => {
-    if (!document.getElementById('echo-terminal-loader')) {
-      const script = document.createElement('script');
-      script.src = 'https://cdn.jsdelivr.net/gh/novuhq/docs/echo-terminal.min.js';
-      script.id = 'echo-terminal-loader';
-      document.body.appendChild(script);
-    }
-  }, []);
+  useEchoTerminalScript();
 
   useEffect(() => {
     const tabs = document.getElementsByClassName('nv-terminal-tab');