Merge pull request #12236 from ethereum/adding-glossary-tooltips

Improving comprehension epic - glossary tooltip setup

Author: pettinarip

src/components/Glossary/GlossaryDefinition/index.tsx

@@ -1,14 +1,29 @@
+import { ComponentProps } from "react"
 import { Box, Text } from "@chakra-ui/react"
 
+import InlineLink from "@/components/Link"
 import OldHeading from "@/components/OldHeading"
 import Translation from "@/components/Translation"
 
+import { DEFAULT_GLOSSARY_NS } from "@/lib/constants"
+
 interface GlossaryDefinitionProps {
   term: string
   size?: "md" | "sm"
+  options?: ComponentProps<typeof Translation>["options"]
+}
+
+// Override the default `a` mapping to prevent displaying the glossary tooltip
+// in the glossary definition
+const components = {
+  a: InlineLink,
 }
 
-const GlossaryDefinition = ({ term, size = "md" }: GlossaryDefinitionProps) => {
+const GlossaryDefinition = ({
+  term,
+  size = "md",
+  options = { ns: DEFAULT_GLOSSARY_NS },
+}: GlossaryDefinitionProps) => {
   const headingStyles =
     size === "sm"
       ? { fontSize: "md", mt: 0, mb: 2 }
@@ -17,12 +32,20 @@ const GlossaryDefinition = ({ term, size = "md" }: GlossaryDefinitionProps) => {
   const textStyles = size === "sm" ? { mb: 0 } : {}
 
   return (
-    <Box>
+    <Box textAlign="start">
       <OldHeading as="h3" lineHeight={1.4} id={term} {...headingStyles}>
-        <Translation id={"glossary:" + term + "-term"} />
+        <Translation
+          id={term + "-term"}
+          options={options}
+          transform={components}
+        />
       </OldHeading>
       <Text {...textStyles}>
-        <Translation id={"glossary:" + term + "-definition"} />
+        <Translation
+          id={term + "-definition"}
+          options={options}
+          transform={components}
+        />
       </Text>
     </Box>
   )

src/components/Glossary/GlossaryTooltip/index.tsx

@@ -13,7 +13,15 @@ const GlossaryTooltip = ({ children, termKey }: GlossaryTooltipProps) => {
   const isLargeScreen = useBreakpointValue({ base: false, lg: true })
 
   return isLargeScreen ? (
-    <Tooltip content={<GlossaryDefinition term={termKey} size="sm" />}>
+    <Tooltip
+      content={
+        <GlossaryDefinition
+          term={termKey}
+          size="sm"
+          options={{ ns: "glossary-tooltip" }}
+        />
+      }
+    >
       <Text
         as="u"
         textDecorationStyle="dotted"

src/components/MdComponents.tsx

@@ -27,9 +27,9 @@ import { ButtonLink } from "@/components/Buttons"
 import Contributors from "@/components/Contributors"
 import Link from "@/components/Link"
 import MarkdownImage from "@/components/MarkdownImage"
-import MdLink from "@/components/MdLink"
 import OldHeading from "@/components/OldHeading"
 import { mdxTableComponents } from "@/components/Table"
+import TooltipLink from "@/components/TooltipLink"
 import YouTube from "@/components/YouTube"
 
 import GlossaryTooltip from "./Glossary/GlossaryTooltip"
@@ -148,7 +148,7 @@ export const HR = () => (
 
 // All base html element components
 export const htmlElements = {
-  a: MdLink,
+  a: TooltipLink,
   div: Box,
   h1: Heading1,
   h2: Heading2,

src/components/MdLink.tsx renamed to src/components/TooltipLink.tsx

@@ -4,8 +4,8 @@ import GlossaryTooltip from "./Glossary/GlossaryTooltip"
 import InlineLink from "./Link"
 
 interface Props {
-  href: string
-  children: ReactNode
+  href?: string
+  children?: ReactNode
 }
 
 /**
@@ -18,9 +18,14 @@ interface Props {
  * inside of our MD files. The native link syntax has a better UX with Crowdin
  * translations.
  */
-function MdLink(props: Props) {
+function TooltipLink(props: Props) {
+  const { href } = props
+  if (!href) {
+    return <InlineLink {...props} />
+  }
+
   const regex = new RegExp(/\/glossary\/#(.+)/)
-  const matches = props.href.match(regex)
+  const matches = href.match(regex)
 
   // get the `termKey` from the `href`
   // e.g. in `/glossary/#new-term` => "new-term" is the `termKey`
@@ -33,4 +38,4 @@ function MdLink(props: Props) {
   return <InlineLink {...props} />
 }
 
-export default MdLink
+export default TooltipLink

src/components/Translation.tsx

@@ -1,35 +1,37 @@
-import htmr from "htmr"
+import htmr, { type HtmrOptions } from "htmr"
 import type { TOptions } from "i18next"
 import { useRouter } from "next/router"
 import { useTranslation } from "next-i18next"
 
 import { getRequiredNamespacesForPage } from "@/lib/utils/translations"
 
-import InlineLink from "./Link"
+import TooltipLink from "./TooltipLink"
 
 type TranslationProps = {
   id: string
   options?: TOptions
+  transform?: HtmrOptions["transform"]
 }
 
 // Custom components mapping to be used by `htmr` when parsing the translation
 // text
-const transform = {
-  a: InlineLink,
+const defaultTransform = {
+  a: TooltipLink,
 }
 
 // Renders the translation string for the given translation key `id`. It
 // fallback to English if it doesn't find the given key in the current language
-const Translation = ({ id, options }: TranslationProps) => {
+const Translation = ({ id, options, transform = {} }: TranslationProps) => {
   const { asPath } = useRouter()
   const requiredNamespaces = getRequiredNamespacesForPage(asPath)
 
   const { t } = useTranslation(requiredNamespaces)
   const translatedText = t(id, options)
 
   // Use `htmr` to parse html content in the translation text
-  // @ts-ignore
-  return htmr(translatedText, { transform })
+  return htmr(translatedText, {
+    transform: { ...defaultTransform, ...transform },
+  })
 }
 
 export default Translation