[dyad] Added keyword highlighting - wrote 3 file(s)

src/components/meta-form.tsx

@@ -29,6 +29,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { ImageAltDisplay } from "./image-alt-display";
 import { TabIndicator } from "./tab-indicator";
 import { getLengthIndicatorColor, type IndicatorColor } from "@/lib/analysis";
+import { KeywordHighlighter } from "./keyword-highlighter";
 
 interface MetaData {
   title: string;
@@ -259,6 +260,7 @@ export function MetaForm() {
                         title={editableTitle}
                         description={editableDescription}
                         url={url}
+                        keyword={metaData.keyword}
                       />
                     </div>
                     {metaData.image && (
@@ -331,7 +333,14 @@ export function MetaForm() {
                         />
                       ) : (
                         <p className="text-muted-foreground bg-muted p-3 rounded-md min-h-[40px] break-words">
-                          {editableTitle || "Not found"}
+                          {editableTitle ? (
+                            <KeywordHighlighter
+                              text={editableTitle}
+                              keyword={metaData.keyword}
+                            />
+                          ) : (
+                            "Not found"
+                          )}
                         </p>
                       )}
                     </div>
@@ -385,7 +394,14 @@ export function MetaForm() {
                         />
                       ) : (
                         <p className="text-muted-foreground bg-muted p-3 rounded-md min-h-[100px] break-words">
-                          {editableDescription || "Not found"}
+                          {editableDescription ? (
+                            <KeywordHighlighter
+                              text={editableDescription}
+                              keyword={metaData.keyword}
+                            />
+                          ) : (
+                            "Not found"
+                          )}
                         </p>
                       )}
                     </div>