Merge pull request #4626 from Ivy-Interactive/tendril/00549-TextWidgetThreadIdPropThroughAllNonheadingVariants

[00549] Text widget: thread id prop through all non-heading variants

Author: dcrjodle

src/frontend/src/widgets/primitives/TextBlockWidget.test.tsx

@@ -0,0 +1,67 @@
+import React from "react";
+import { describe, it, expect } from "vitest";
+import { renderToString } from "react-dom/server";
+import { TextBlockWidget } from "./TextBlockWidget";
+
+describe("TextBlockWidget id attribute", () => {
+  const variants = [
+    "Literal",
+    "Block",
+    "P",
+    "Inline",
+    "Blockquote",
+    "Monospaced",
+    "Lead",
+    "Muted",
+    "Danger",
+    "Warning",
+    "Success",
+    "Label",
+    "Strong",
+    "Display",
+  ] as const;
+
+  variants.forEach((variant) => {
+    it(`${variant} variant renders id attribute`, () => {
+      const testId = `test-anchor-${variant.toLowerCase()}`;
+      const html = renderToString(
+        <TextBlockWidget
+          id="test-widget"
+          content="Test content"
+          variant={variant}
+          anchor={testId}
+        />,
+      );
+
+      expect(html).toContain(`id="${testId}"`);
+    });
+  });
+
+  it("heading variants render id attribute", () => {
+    const headingVariants = ["H1", "H2", "H3", "H4", "H5", "H6"] as const;
+
+    headingVariants.forEach((variant) => {
+      const testId = `test-anchor-${variant.toLowerCase()}`;
+      const html = renderToString(
+        <TextBlockWidget
+          id="test-widget"
+          content="Test heading"
+          variant={variant}
+          anchor={testId}
+        />,
+      );
+
+      expect(html).toContain(`id="${testId}"`);
+    });
+  });
+
+  it("no id attribute when anchor is not provided", () => {
+    const html = renderToString(
+      <TextBlockWidget id="test-widget" content="Test content" variant="P" />,
+    );
+
+    const paragraph = html.match(/<p[^>]*>/)?.[0];
+    expect(paragraph).toBeDefined();
+    expect(paragraph).not.toContain('id="');
+  });
+});

src/frontend/src/widgets/primitives/TextBlockWidget.tsx

@@ -56,8 +56,8 @@ interface VariantMap {
   }>;
 }
 const variantMap: VariantMap = {
-  Literal: ({ children, className, style }) => (
-    <span className={className} style={style}>
+  Literal: ({ children, className, style, id }) => (
+    <span id={id} className={className} style={style}>
       {children}
     </span>
   ),
@@ -91,7 +91,7 @@ const variantMap: VariantMap = {
       {children}
     </h6>
   ),
-  Block: ({ children, className, style }) => {
+  Block: ({ children, className, style, id }) => {
     const spanRef = React.useRef<HTMLSpanElement>(null);
     const [isTruncated, setIsTruncated] = React.useState(false);
     const [showTooltip, setShowTooltip] = React.useState(false);
@@ -105,7 +105,7 @@ const variantMap: VariantMap = {
     };
 
     return (
-      <div className={cn(typography.block, className)} style={style}>
+      <div id={id} className={cn(typography.block, className)} style={style}>
         <TooltipProvider>
           <Tooltip>
             <TooltipTrigger asChild>
@@ -128,63 +128,63 @@ const variantMap: VariantMap = {
       </div>
     );
   },
-  P: ({ children, className, style }) => (
-    <p className={cn(typography.p, className)} style={style}>
+  P: ({ children, className, style, id }) => (
+    <p id={id} className={cn(typography.p, className)} style={style}>
       {children}
     </p>
   ),
-  Inline: ({ children, className, style }) => (
-    <span className={cn(className)} style={style}>
+  Inline: ({ children, className, style, id }) => (
+    <span id={id} className={cn(className)} style={style}>
       {children}
     </span>
   ),
-  Blockquote: ({ children, className, style }) => (
-    <blockquote className={cn(typography.blockquote, className)} style={style}>
+  Blockquote: ({ children, className, style, id }) => (
+    <blockquote id={id} className={cn(typography.blockquote, className)} style={style}>
       {children}
     </blockquote>
   ),
-  Monospaced: ({ children, className, style }) => (
-    <code className={cn(typography.code, className)} style={style}>
+  Monospaced: ({ children, className, style, id }) => (
+    <code id={id} className={cn(typography.code, className)} style={style}>
       {children}
     </code>
   ),
-  Lead: ({ children, className, style }) => (
-    <div className={cn(typography.lead, className)} style={style}>
+  Lead: ({ children, className, style, id }) => (
+    <div id={id} className={cn(typography.lead, className)} style={style}>
       <MarkdownRenderer content={children} />
     </div>
   ),
-  Muted: ({ children, className, style }) => (
-    <div className={cn(typography.muted, className)} style={style}>
+  Muted: ({ children, className, style, id }) => (
+    <div id={id} className={cn(typography.muted, className)} style={style}>
       {children}
     </div>
   ),
-  Danger: ({ children, className, style }) => (
-    <div className={cn(typography.danger, className)} style={style}>
+  Danger: ({ children, className, style, id }) => (
+    <div id={id} className={cn(typography.danger, className)} style={style}>
       {children}
     </div>
   ),
-  Warning: ({ children, className, style }) => (
-    <div className={cn(typography.warning, className)} style={style}>
+  Warning: ({ children, className, style, id }) => (
+    <div id={id} className={cn(typography.warning, className)} style={style}>
       {children}
     </div>
   ),
-  Success: ({ children, className, style }) => (
-    <div className={cn(typography.success, className)} style={style}>
+  Success: ({ children, className, style, id }) => (
+    <div id={id} className={cn(typography.success, className)} style={style}>
       {children}
     </div>
   ),
-  Label: ({ children, className, style }) => (
-    <div className={cn(typography.label, className)} style={style}>
+  Label: ({ children, className, style, id }) => (
+    <div id={id} className={cn(typography.label, className)} style={style}>
       {children}
     </div>
   ),
-  Strong: ({ children, className, style }) => (
-    <strong className={cn(typography.strong, className)} style={style}>
+  Strong: ({ children, className, style, id }) => (
+    <strong id={id} className={cn(typography.strong, className)} style={style}>
       {children}
     </strong>
   ),
-  Display: ({ children, className, style }) => (
-    <div className={cn(typography.display, className)} style={style}>
+  Display: ({ children, className, style, id }) => (
+    <div id={id} className={cn(typography.display, className)} style={style}>
       {children}
     </div>
   ),