@page "/compohighlighter"

@rendermode RenderMode.InteractiveServer

<h3>Highlighter</h3>
<FluentDivider class="mt-1 mb-3" Role="DividerRole.Separator" />
<div>
    The <code>FluentHighlighter</code> highlights text in a string based on a search term and using <code>&lt;mark&gt;</code> tags.
</div>


<h4 class="mt-4">Example</h4>
<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
    <FluentTextField @bind-Value="highlight" Immediate="true" Label="Search (Delimeters: [whitespace] ,[comma] ;[semicolon])"/>
    <div class="mt-3 p-2 fluent-border-s1">
        <FluentHighlighter HighlightedText="@highlight" Delimiters=" ,;"
                           Text="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur." />
    </div>
</FluentCard>

@code {
    string highlight = "";
}