{"version":3,"file":"HighlightedText.Dsk4N_u2.mjs","names":["useState","useMemo"],"sources":["https:/framerusercontent.com/modules/39YwVKdC542TpudTxy5S/G2B6FXXoI5FVHwyECeOT/HighlightedText.js"],"sourcesContent":["// Highlighted Text Component\n// - Main text field, highlight substring inside it\n// - Highlight should be case-insensitive, have custom background, padding, border radius\n// - Main font, text color, font size, line height, font weight are configurable\n// - If no highlight provided, render text as-is\nimport{jsx as _jsx}from\"react/jsx-runtime\";import{addPropertyControls,ControlType}from\"framer\";import{useState,useMemo}from\"react\";/**\n * Highlighted Text Component\n *\n * @framerIntrinsicWidth 400\n * @framerIntrinsicHeight 60\n *\n * @framerSupportedLayoutWidth any\n * @framerSupportedLayoutHeight auto\n */export default function HighlightedText(props){const{text=\"The quick brown fox jumps over the lazy dog.\",highlight=\"brown fox\",textColor=\"#222\",font,highlightPadding=\"2px 5px\",tag=\"div\",highlightBorderWidth=0,highlightBorderColor=\"#000\",highlightBorderStyle=\"solid\",highlightBorderRadius=\"0px\",highlightLink=\"\",highlightHoverColor=\"inherit\",highlightHoverFillColor=\"transparent\",highlight2=\"\",highlight2Link=\"\",style={}}=props;const[hoveredIndex,setHoveredIndex]=useState(null);// Escape for use in RegExp\nconst escapeRegExp=str=>str.replace(/[.*+?^${}()|[\\]\\\\]/g,\"\\\\$&\");// Build array of highlight configs once\nconst highlights=useMemo(()=>{return[{text:highlight,link:highlightLink,index:0},{text:highlight2,link:highlight2Link,index:1}].filter(h=>h.text&&h.text.trim()!==\"\");},[highlight,highlightLink,highlight2,highlight2Link]);// Memoize the processed content\nconst content=useMemo(()=>{if(highlights.length===0)return text;// Sort by length (longest first) to handle overlapping matches\nconst sortedHighlights=[...highlights].sort((a,b)=>b.text.length-a.text.length);// Build regex pattern\nconst pattern=sortedHighlights.map(h=>escapeRegExp(h.text)).join(\"|\");if(!pattern)return text;try{const regex=new RegExp(`(${pattern})`,\"gi\");const parts=text.split(regex);return parts.map((part,i)=>{if(!part)return null;const matchedHighlight=sortedHighlights.find(h=>part.toLowerCase()===h.text.toLowerCase());if(matchedHighlight){const isHovered=hoveredIndex===matchedHighlight.index;const spanStyle={color:isHovered&&highlightHoverColor!==\"inherit\"?highlightHoverColor:textColor,backgroundColor:isHovered&&highlightHoverFillColor!==\"transparent\"?highlightHoverFillColor:\"transparent\",padding:highlightPadding,display:\"inline\",boxDecorationBreak:\"clone\",WebkitBoxDecorationBreak:\"clone\",position:\"relative\",borderWidth:`${highlightBorderWidth}px`,borderColor:highlightBorderColor,borderStyle:highlightBorderStyle,borderRadius:highlightBorderRadius,cursor:matchedHighlight.link?\"pointer\":\"default\",transition:\"color 0.2s ease, background-color 0.2s ease\"};const spanContent=/*#__PURE__*/_jsx(\"span\",{style:spanStyle,onMouseEnter:()=>setHoveredIndex(matchedHighlight.index),onMouseLeave:()=>setHoveredIndex(null),children:part},i);if(matchedHighlight.link){return /*#__PURE__*/_jsx(\"a\",{href:matchedHighlight.link,style:{textDecoration:\"none\"},children:spanContent},i);}return spanContent;}else{return /*#__PURE__*/_jsx(\"span\",{children:part},i);}});}catch(e){return text;}},[text,highlights,hoveredIndex,textColor,highlightPadding,highlightBorderWidth,highlightBorderColor,highlightBorderStyle,highlightBorderRadius,highlightHoverColor,highlightHoverFillColor]);const Tag=tag;return /*#__PURE__*/_jsx(\"div\",{style:{width:\"100%\",...style},children:/*#__PURE__*/_jsx(Tag,{style:{display:\"block\",color:textColor,width:\"100%\",minWidth:0,maxWidth:\"100%\",whiteSpace:\"pre-wrap\",wordBreak:\"break-word\",overflowWrap:\"break-word\",margin:0,padding:0,...font,boxSizing:\"border-box\"},children:content})});}addPropertyControls(HighlightedText,{text:{type:ControlType.String,title:\"Text\",defaultValue:\"The quick brown fox jumps over the lazy dog.\",displayTextArea:true},highlight:{type:ControlType.String,title:\"Highlight\",defaultValue:\"brown fox\",placeholder:\"Enter text to highlight\"},highlight2:{type:ControlType.String,title:\"Highlight 2\",defaultValue:\"\",placeholder:\"Enter second text to highlight\"},font:{type:ControlType.Font,title:\"Font\",controls:\"extended\",defaultFontType:\"sans-serif\",defaultValue:{fontSize:22,lineHeight:\"1.3em\",variant:\"Medium\"}},textColor:{type:ControlType.Color,title:\"Text Color\",defaultValue:\"#222\"},highlightBorderWidth:{type:ControlType.Number,title:\"Border Width\",defaultValue:0,min:0,max:10,step:1,unit:\"px\"},highlightBorderColor:{type:ControlType.Color,title:\"Border Color\",defaultValue:\"#000000\"},highlightBorderStyle:{type:ControlType.Enum,title:\"Border Style\",options:[\"solid\",\"dashed\",\"dotted\",\"double\"],optionTitles:[\"Solid\",\"Dashed\",\"Dotted\",\"Double\"],defaultValue:\"solid\"},highlightBorderRadius:{type:ControlType.BorderRadius,title:\"Border Radius\",defaultValue:\"0px\"},highlightPadding:{type:ControlType.Padding,title:\"Highlight Pad\",defaultValue:\"2px 5px\"},highlightHoverColor:{type:ControlType.Color,title:\"Hover Color\",defaultValue:\"inherit\"},highlightHoverFillColor:{type:ControlType.Color,title:\"Hover Fill Color\",defaultValue:\"transparent\"},highlightLink:{type:ControlType.Link,title:\"Highlight Link\",defaultValue:\"\"},highlight2Link:{type:ControlType.Link,title:\"Highlight 2 Link\",defaultValue:\"\"},tag:{type:ControlType.Enum,title:\"Tag\",defaultValue:\"div\",options:[\"div\",\"span\",\"h1\",\"h2\",\"h3\",\"h4\",\"h5\",\"h6\",\"p\"],optionTitles:[\"div\",\"span\",\"h1\",\"h2\",\"h3\",\"h4\",\"h5\",\"h6\",\"p\"]}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"HighlightedText\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\",\"framerSupportedLayoutHeight\":\"auto\",\"framerIntrinsicWidth\":\"400\",\"framerSupportedLayoutWidth\":\"any\",\"framerIntrinsicHeight\":\"60\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./HighlightedText.map"],"mappings":"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"}