clean presidio

app/components/TextDisplay.tsx

@@ -6,44 +6,34 @@ interface TextDisplayProps {
   words: Word[];
   text: string;
   selectedWords: Set<number>;
-  hoveredWord: number | null;
-  onWordClick: (index: number, event: React.MouseEvent) => void;
   onContextMenu: (event: React.MouseEvent) => void;
-  onWordHover: (index: number | null) => void;
+  onWordClick: (index: number | null, event: React.MouseEvent) => void;
 }
 
 export const TextDisplay: React.FC<TextDisplayProps> = ({
   words,
   text,
   selectedWords,
-  hoveredWord,
-  onWordClick,
   onContextMenu,
-  onWordHover,
+  onWordClick,
 }) => {
   const renderWord = (word: Word, index: number) => {
     const isSelected = selectedWords.has(index);
-    const isHovered = hoveredWord === index;
 
-    let className =
-      "inline-block cursor-pointer transition-all duration-200  rounded-sm ";
+    let className = "inline-block transition-all duration-200 rounded-sm cursor-pointer select-text ";
     let backgroundColor = "transparent";
 
     if (word.isEntity) {
-      // Couleur personnalisée ou générée - Niveau 200
       if (word.mapping?.customColor) {
         backgroundColor = word.mapping.customColor;
       } else if (word.mapping?.displayName) {
-        // Utiliser generateColorFromName pour la cohérence
         backgroundColor = generateColorFromName(word.mapping.displayName).value;
       } else if (word.entityType) {
         backgroundColor = generateColorFromName(word.entityType).value;
       } else {
-        // Couleur par défaut si aucune information disponible
         backgroundColor = generateColorFromName("default").value;
       }
 
-      // Utiliser la classe CSS appropriée
       if (word.mapping?.displayName) {
         const colorClass = generateColorFromName(word.mapping.displayName);
         className += `${colorClass.bgClass} ${colorClass.textClass} border `;
@@ -53,55 +43,39 @@ export const TextDisplay: React.FC<TextDisplayProps> = ({
       }
     }
 
-    // Gestion du survol et sélection - Couleurs claires
     if (isSelected) {
-      className += "ring-2 ring-blue-400 ";
-    } else if (isHovered) {
-      if (!word.isEntity) {
-        className += "bg-gray-200 ";
-        backgroundColor = "#E5E7EB"; // gray-200
-      }
+      className += "ring-2 ring-gray-400 bg-gray-100 ";
+    } else {
+      className += "hover:bg-yellow-100 ";
     }
 
     className += "brightness-95 ";
     return (
       <span
         key={index}
+        data-word-index={index}
         className={className}
         style={{
           backgroundColor: backgroundColor,
-          userSelect: "none",
-          WebkitUserSelect: "none",
-        }}
-        onMouseEnter={() => onWordHover(index)}
-        onMouseLeave={() => onWordHover(null)}
-        onClick={(e) => {
-          if (e.metaKey || e.ctrlKey || e.shiftKey) {
-            e.preventDefault();
-            e.stopPropagation();
-          }
-          onWordClick(index, e);
-        }}
-        onContextMenu={onContextMenu}
-        onMouseDown={(e) => {
-          if (e.metaKey || e.ctrlKey || e.shiftKey) {
-            e.preventDefault();
-          }
         }}
+        onClick={(event) => onWordClick(index, event)}
         title={
           word.isEntity
             ? `Entité: ${word.entityType} (Original: ${word.text})`
-            : "Cliquez pour sélectionner"
+            : "Sélectionnez librement le texte ou cliquez sur les mots"
         }
       >
-        {word.displayText}{" "}
+        {word.displayText}
       </span>
     );
   };
 
   return (
-    <div className="p-4 bg-white border border-gray-200 rounded-lg min-h-[300px] leading-relaxed text-sm">
-      <div className="whitespace-pre-wrap">
+    <div 
+      className="p-4 bg-white border border-gray-200 rounded-lg min-h-[300px] leading-relaxed text-sm select-text"
+      onContextMenu={onContextMenu}
+    >
+      <div className="whitespace-pre-wrap select-text">
         {words.map((word, index) => {
           const nextWord = words[index + 1];
           const spaceBetween = nextWord
@@ -111,7 +85,7 @@ export const TextDisplay: React.FC<TextDisplayProps> = ({
           return (
             <React.Fragment key={index}>
               {renderWord(word, index)}
-              <span>{spaceBetween}</span>
+              <span className="select-text">{spaceBetween}</span>
             </React.Fragment>
           );
         })}