### Install Blazor CodeMirror 6 package

Source: https://context7.com/gaelj/blazorcodemirror6/llms.txt

Use the .NET CLI to add the library to your project.

```bash
dotnet add package GaelJ.BlazorCodeMirror6
```

--------------------------------

### Log message in JavaScript

Source: https://context7.com/gaelj/blazorcodemirror6/llms.txt

A basic example of executing JavaScript console output.

```javascript
console.log('Hello!');
```

--------------------------------

### Available Simple Commands

Source: https://context7.com/gaelj/blazorcodemirror6/llms.txt

All parameterless commands available via `CodeMirrorSimpleCommand`.

```APIDOC
## Available Simple Commands

All parameterless commands available via `CodeMirrorSimpleCommand`.

### Method
POST (simulated via component method calls)

### Endpoint
N/A (Component-based interaction)

### Parameters
No explicit parameters for simple commands.

### Request Example
```csharp
await editorRef.CommandDispatcher.Dispatch(CodeMirrorSimpleCommand.Undo);
await editorRef.CommandDispatcher.Dispatch(CodeMirrorSimpleCommand.Focus);
```

### Response
No direct HTTP response, but editor state changes.

### Command List
- **Markdown formatting**
  - `ToggleMarkdownBold`
  - `ToggleMarkdownItalic`
  - `ToggleMarkdownStrikethrough`
  - `ToggleMarkdownCode`
  - `ToggleMarkdownCodeBlock`
  - `ToggleMarkdownQuote`
  - `IncreaseMarkdownHeadingLevel`
  - `DecreaseMarkdownHeadingLevel`
  - `ToggleMarkdownUnorderedList`
  - `ToggleMarkdownOrderedList`
  - `ToggleMarkdownTaskList`
  - `InsertMarkdownHorizontalRule`
- **History**
  - `Undo`
  - `Redo`
  - `UndoSelection`
  - `RedoSelection`
- **Indentation**
  - `IndentLess`
  - `IndentMore`
  - `IndentSelection`
- **Line operations**
  - `CopyLineUp`
  - `CopyLineDown`
  - `SelectLine`
  - `InsertBlankLine`
- **Comments**
  - `ToggleComment`
  - `ToggleBlockComment`
  - `LineComment`
  - `LineUncomment`
  - `BlockComment`
  - `BlockUncomment`
- **Clipboard**
  - `Cut`
  - `Copy`
  - `Paste`
- **Misc**
  - `Focus`
  - `CursorMatchingBracket`
  - `SimplifySelection`
  - `DeleteTrailingWhitespace`
  - `ScrollIntoView`
  - `ClearLocalStorage`
  - `RequestLinterRefresh`
```

--------------------------------

### Use Open Iconic standalone

Source: https://github.com/gaelj/blazorcodemirror6/blob/main/Examples.BlazorServer/wwwroot/css/open-iconic/README.md

Include the default stylesheet and use the data-glyph attribute.

```html
<link href="/open-iconic/font/css/open-iconic.css" rel="stylesheet">
```

```html
<span class="oi" data-glyph="icon-name" title="icon name" aria-hidden="true"></span>
```

--------------------------------

### Configure CodeMirrorSetup Options

Source: https://context7.com/gaelj/blazorcodemirror6/llms.txt

Define editor behavior and features using the CodeMirrorSetup object. These settings are immutable after the editor is initialized.

```csharp
private readonly CodeMirrorSetup Setup = new()
{
    Id = "my-editor-1",                    // Unique identifier
    HighlightSpecialChars = true,          // Show whitespace, tabs, newlines
    History = true,                         // Enable undo/redo
    FoldGutter = true,                      // Code folding
    AllowMultipleSelections = true,         // Multiple cursors
    IndentOnInput = true,                   // Auto-indent
    SyntaxHighlighting = true,              // Syntax colors
    BracketMatching = true,                 // Highlight matching brackets
    CloseBrackets = true,                   // Auto-close brackets
    Autocompletion = true,                  // Enable autocomplete
    RectangularSelection = true,            // Alt+drag selection
    CrossHairSelection = true,              // Crosshair cursor
    HighlightSelectionMatches = true,       // Highlight same text
    AllowMentions = true,                   // @mentions support
    ScrollToStart = false,                  // Scroll to start on load
    ScrollToEnd = true,                     // Scroll to end on load
    FileIcon = "fa fa-file",                // Icon CSS class
    KrokiUrl = "https://kroki.io",          // Diagram rendering server
    BindMode = DocumentBindMode.OnDelayedInput,  // When to sync value
    DebugLogs = false,                      // Console logging
    FocusOnCreation = true,                 // Auto-focus
    IndentWithTab = true                    // Tab key behavior
};
```

--------------------------------

### Available Simple Commands

Source: https://context7.com/gaelj/blazorcodemirror6/llms.txt

A list of parameterless commands accessible through the CodeMirrorSimpleCommand enum for formatting, history, and line operations.

```csharp
// Markdown formatting
CodeMirrorSimpleCommand.ToggleMarkdownBold
CodeMirrorSimpleCommand.ToggleMarkdownItalic
CodeMirrorSimpleCommand.ToggleMarkdownStrikethrough
CodeMirrorSimpleCommand.ToggleMarkdownCode
CodeMirrorSimpleCommand.ToggleMarkdownCodeBlock
CodeMirrorSimpleCommand.ToggleMarkdownQuote
CodeMirrorSimpleCommand.IncreaseMarkdownHeadingLevel
CodeMirrorSimpleCommand.DecreaseMarkdownHeadingLevel
CodeMirrorSimpleCommand.ToggleMarkdownUnorderedList
CodeMirrorSimpleCommand.ToggleMarkdownOrderedList
CodeMirrorSimpleCommand.ToggleMarkdownTaskList
CodeMirrorSimpleCommand.InsertMarkdownHorizontalRule

// History
CodeMirrorSimpleCommand.Undo
CodeMirrorSimpleCommand.Redo
CodeMirrorSimpleCommand.UndoSelection
CodeMirrorSimpleCommand.RedoSelection

// Indentation
CodeMirrorSimpleCommand.IndentLess
CodeMirrorSimpleCommand.IndentMore
CodeMirrorSimpleCommand.IndentSelection

// Line operations
CodeMirrorSimpleCommand.CopyLineUp
CodeMirrorSimpleCommand.CopyLineDown
CodeMirrorSimpleCommand.SelectLine
CodeMirrorSimpleCommand.InsertBlankLine

// Comments
CodeMirrorSimpleCommand.ToggleComment
CodeMirrorSimpleCommand.ToggleBlockComment
CodeMirrorSimpleCommand.LineComment
CodeMirrorSimpleCommand.LineUncomment
CodeMirrorSimpleCommand.BlockComment
CodeMirrorSimpleCommand.BlockUncomment

// Clipboard
CodeMirrorSimpleCommand.Cut
CodeMirrorSimpleCommand.Copy
CodeMirrorSimpleCommand.Paste

// Misc
CodeMirrorSimpleCommand.Focus
CodeMirrorSimpleCommand.CursorMatchingBracket
CodeMirrorSimpleCommand.SimplifySelection
CodeMirrorSimpleCommand.DeleteTrailingWhitespace
CodeMirrorSimpleCommand.ScrollIntoView
CodeMirrorSimpleCommand.ClearLocalStorage
CodeMirrorSimpleCommand.RequestLinterRefresh
```

--------------------------------

### Integrate Open Iconic with Foundation

Source: https://github.com/gaelj/blazorcodemirror6/blob/main/Examples.BlazorServer/wwwroot/css/open-iconic/README.md

Include the Foundation stylesheet and use the icon class.

```html
<link href="/open-iconic/font/css/open-iconic-foundation.css" rel="stylesheet">
```

```html
<span class="fi-icon-name" title="icon name" aria-hidden="true"></span>
```

--------------------------------

### Available Themes

Source: https://context7.com/gaelj/blazorcodemirror6/llms.txt

Lists all available themes from `ThemeMirrorTheme`.

```APIDOC
## Available Themes

All available themes from `ThemeMirrorTheme`.

### Method
N/A (Theme selection is typically done during editor initialization or configuration)

### Endpoint
N/A

### Parameters
N/A

### Request Example
```csharp
// Example of setting a theme during initialization (conceptual)
var editorOptions = new EditorOptions
{
    Theme = ThemeMirrorTheme.Dracula
};
await editorRef.InitializeAsync(options: editorOptions);
```

### Response
N/A

### Theme List
- **Basic themes**
  - `Default`
  - `OneDark`
  - `Dracula`
  - `Nord`
  - `Monokai`
- **GitHub themes**
  - `GithubDark`
  - `GithubLight`
- **VS Code themes**
  - `VSCode`
- **Material themes**
  - `MaterialDark`
  - `MaterialLight`
- **Tokyo Night variants**
  - `TokyoNight`
  - `TokyoNightDay`
  - `TokyoNightStorm`
- **Solarized themes**
  - `SolarizedDark`
  - `SolarizedLight`
- **XCode themes**
  - `XCodeDark`
  - `XCodeLight`
- **Other themes**
  - `Amy`
  - `AyuLight`
  - `Barf`
  - `Bespin`
  - `BirdsOfParadise`
  - `Cobalt`
  - `CoolGlow`
  - `Eclipse`
  - `Sublime`
  - `Aura`
```

--------------------------------

### Implement basic code editor

Source: https://context7.com/gaelj/blazorcodemirror6/llms.txt

A simple editor instance with two-way binding and theme configuration.

```razor
@page "/editor"

<CodeMirror6Wrapper
    @bind-Doc=@Text
    Placeholder="Enter your code here..."
    Language=@CodeMirrorLanguage.Javascript
    Theme=@ThemeMirrorTheme.OneDark
    TabSize="4"
    LineNumbers="true"
    LineWrapping="true"
/>

<p>Line count: @Text?.Split('\n').Length</p>

@code {
    private string? Text = @"function greet(name) {
    console.log(`Hello, ${name}!`);
}

greet('World');";
}
```

--------------------------------

### Configure Blazor CodeMirror 6 imports

Source: https://context7.com/gaelj/blazorcodemirror6/llms.txt

Add the necessary namespaces to your _Imports.razor file.

```csharp
@using GaelJ.BlazorCodeMirror6
@using GaelJ.BlazorCodeMirror6.Commands
@using GaelJ.BlazorCodeMirror6.Models
```

--------------------------------

### Configure Multi-Language Support

Source: https://context7.com/gaelj/blazorcodemirror6/llms.txt

Switch languages dynamically or auto-detect them based on file extensions.

```razor
@page "/multi-language"

<select @bind="SelectedLanguage">
    @foreach (var lang in Enum.GetValues<CodeMirrorLanguage>().OrderBy(l => l.ToString()))
    {
        <option value="@lang">@lang.DisplayName()</option>
    }
</select>

<CodeMirror6Wrapper
    @bind-Doc="@Code"
    Language="@SelectedLanguage"
    Theme="@ThemeMirrorTheme.Dracula"
    LineNumbers="true"
/>

<!-- Alternative: Auto-detect from file extension -->
<CodeMirror6Wrapper
    @bind-Doc="@Code2"
    FileNameOrExtension="script.py"
    Theme="@ThemeMirrorTheme.Dracula"
/>

@code {
    private CodeMirrorLanguage SelectedLanguage = CodeMirrorLanguage.Javascript;

    private string Code = @"function example() {
    return 'Hello, World!';
}";

    private string Code2 = @"def example():
    return 'Hello, World!'";
}
```

--------------------------------

### Implement Full-Screen Mode

Source: https://context7.com/gaelj/blazorcodemirror6/llms.txt

Toggle the FullScreen parameter to expand the editor to fill the viewport, using FullScreenZIndex and FullScreenBackgroundColor for styling.

```razor
@page "/fullscreen"

<button @onclick="@(() => IsFullScreen = !IsFullScreen)">
    @(IsFullScreen ? "Exit Full Screen" : "Enter Full Screen")
</button>

<CodeMirror6Wrapper
    @bind-Doc="@Code"
    Language="@CodeMirrorLanguage.Markdown"
    Theme="@ThemeMirrorTheme.OneDark"
    FullScreen="@IsFullScreen"
    FullScreenZIndex="100"
    FullScreenBackgroundColor="var(--bs-body-bg)"
/>

@code {
    private bool IsFullScreen = false;
    private string? Code = "# Full Screen Editor\n\nPress the button to toggle full screen mode.";
}
```

--------------------------------

### Integrate Open Iconic with Bootstrap

Source: https://github.com/gaelj/blazorcodemirror6/blob/main/Examples.BlazorServer/wwwroot/css/open-iconic/README.md

Include the Bootstrap stylesheet and use the icon class.

```html
<link href="/open-iconic/font/css/open-iconic-bootstrap.css" rel="stylesheet">
```

```html
<span class="oi oi-icon-name" title="icon name" aria-hidden="true"></span>
```

--------------------------------

### Handle File Uploads

Source: https://context7.com/gaelj/blazorcodemirror6/llms.txt

Configure file upload support via drag & drop or paste by implementing the UploadBrowserFile callback.

```razor
@page "/file-upload"

<CodeMirror6Wrapper
    @bind-Doc="@MarkdownWithImages"
    Language="@CodeMirrorLanguage.Markdown"
    Theme="@ThemeMirrorTheme.GithubLight"
    UploadBrowserFile="@HandleFileUpload"
    PreviewImages="true"
    InsertDroppedFileContents="false"
/>

@code {
    private string? MarkdownWithImages = "# Document with Images\n\nDrag and drop images here.";

    private async Task<string> HandleFileUpload(IBrowserFile file)
    {
        // Option 1: Convert to base64 data URL (for small files)
        var buffer = new byte[file.Size];
        await file.OpenReadStream(maxAllowedSize: 10 * 1024 * 1024).ReadAsync(buffer);
        var base64 = Convert.ToBase64String(buffer);
        return $"data:{file.ContentType};base64,{base64}";

        // Option 2: Upload to server and return URL
        // using var content = new MultipartFormDataContent();
        // content.Add(new StreamContent(file.OpenReadStream()), "file", file.Name);
        // var response = await Http.PostAsync("/api/upload", content);
        // return await response.Content.ReadAsStringAsync();
    }
}
```

--------------------------------

### Implement Markdown editor with custom toolbar

Source: https://context7.com/gaelj/blazorcodemirror6/llms.txt

A full-featured Markdown editor including custom formatting buttons and live style detection.

```razor
@page "/markdown-editor"

<CodeMirror6Wrapper
    @ref="editorRef"
    @bind-Doc="@MarkdownText"
    @bind-Selection="@selectionRanges"
    Language="@CodeMirrorLanguage.Markdown"
    Theme="@ThemeMirrorTheme.GithubLight"
    AutoFormatMarkdown="true"
    ReplaceEmojiCodes="true"
    PreviewImages="true"
    ShowMarkdownControlCharactersAroundCursor="true"
    MarkdownStylesAtSelectionsChanged="@(styles => ActiveStyles = styles.ToList())"
    Setup="@editorSetup"
    MaxHeight="40em"
>
    <ContentBefore Context="ctx">
        <div class="toolbar">
            <button class="@GetButtonClass(ctx.State, "StrongEmphasis")"
                    @onclick="@(() => ctx.Commands.Dispatch(CodeMirrorSimpleCommand.ToggleMarkdownBold))"
                    title="Bold (Ctrl+B)">
                <strong>B</strong>
            </button>
            <button class="@GetButtonClass(ctx.State, "Emphasis")"
                    @onclick="@(() => ctx.Commands.Dispatch(CodeMirrorSimpleCommand.ToggleMarkdownItalic))"
                    title="Italic (Ctrl+I)">
                <em>I</em>
            </button>
            <button @onclick="@(() => ctx.Commands.Dispatch(CodeMirrorSimpleCommand.ToggleMarkdownCode))">
                Code
            </button>
            <button @onclick="@(() => ctx.Commands.Dispatch(CodeMirrorSimpleCommand.ToggleMarkdownQuote))">
                Quote
            </button>
            <button @onclick="@(() => ctx.Commands.Dispatch(CodeMirrorSimpleCommand.ToggleMarkdownUnorderedList))">
                • List
            </button>
            <button @onclick="@(() => ctx.Commands.Dispatch(CodeMirrorSimpleCommand.ToggleMarkdownOrderedList))">
                1. List
            </button>
            <button @onclick="@(() => ctx.Commands.Dispatch(CodeMirrorSimpleCommand.ToggleMarkdownTaskList))">
                ☐ Task
            </button>
            @for (int i = 1; i <= 6; i++)
            {
                var level = i;
                <button @onclick="@(() => ctx.Commands.Dispatch(CodeMirrorCommandOneParameter.ToggleMarkdownHeading, level))">
                    H@level
                </button>
            }
            <button @onclick="@(() => ctx.Commands.Dispatch(CodeMirrorSimpleCommand.Undo))">Undo</button>
            <button @onclick="@(() => ctx.Commands.Dispatch(CodeMirrorSimpleCommand.Redo))">Redo</button>
        </div>
    </ContentBefore>
</CodeMirror6Wrapper>

<p>Active styles: @string.Join(", ", ActiveStyles)</p>

@code {
    private CodeMirror6Wrapper editorRef = null!;
    private string? MarkdownText = @"# Welcome to Markdown Editor

This is **bold** and this is *italic*.

```

--------------------------------

### Command Dispatcher Reference

Source: https://context7.com/gaelj/blazorcodemirror6/llms.txt

Execute editor commands programmatically via component reference.

```APIDOC
## Command Dispatcher Reference

Execute editor commands programmatically via component reference.

### Method
POST (simulated via component method calls)

### Endpoint
N/A (Component-based interaction)

### Parameters
#### Request Body
- **command** (CodeMirrorCommand) - Required - The command to execute.
- **parameter** (any) - Optional - The parameter for the command, if applicable.

### Request Example
```csharp
// Example for inserting text
await editorRef.CommandDispatcher.Dispatch(
    CodeMirrorCommandOneParameter.InsertOrReplaceText,
    "Inserted content"
);

// Example for a simple command
await editorRef.CommandDispatcher.Dispatch(CodeMirrorSimpleCommand.Focus);
```

### Response
No direct HTTP response, but editor state changes.
```

--------------------------------

### Available Editor Themes

Source: https://context7.com/gaelj/blazorcodemirror6/llms.txt

Reference for built-in themes available via the ThemeMirrorTheme enum.

```csharp
// Basic themes
ThemeMirrorTheme.Default
ThemeMirrorTheme.OneDark
ThemeMirrorTheme.Dracula
ThemeMirrorTheme.Nord
ThemeMirrorTheme.Monokai

// GitHub themes
ThemeMirrorTheme.GithubDark
ThemeMirrorTheme.GithubLight

// VS Code themes
ThemeMirrorTheme.VSCode

// Material themes
ThemeMirrorTheme.MaterialDark
ThemeMirrorTheme.MaterialLight

// Tokyo Night variants
ThemeMirrorTheme.TokyoNight
ThemeMirrorTheme.TokyoNightDay
ThemeMirrorTheme.TokyoNightStorm

// Solarized themes
ThemeMirrorTheme.SolarizedDark
ThemeMirrorTheme.SolarizedLight

// XCode themes
ThemeMirrorTheme.XCodeDark
ThemeMirrorTheme.XCodeLight

// And many more: Amy, AyuLight, Barf, Bespin, BirdsOfParadise,
// Cobalt, CoolGlow, Eclipse, Sublime, Aura, etc.
```

--------------------------------

### Style SVG icons with CSS

Source: https://github.com/gaelj/blazorcodemirror6/blob/main/Examples.BlazorServer/wwwroot/css/open-iconic/README.md

Set dimensions and fill colors for SVG icons using CSS.

```css
.icon {
  width: 16px;
  height: 16px;
}
```

```css
.icon-account-login {
  fill: #f00;
}
```

--------------------------------

### Configure diff and merge view

Source: https://context7.com/gaelj/blazorcodemirror6/llms.txt

Enables a merge view interface to compare original and modified text with syntax highlighting.

```razor
@page "/diff-view"

<div>
    <label>
        <input type="checkbox" @bind="ShowMergeView" /> Enable Merge View
    </label>
</div>

<CodeMirror6Wrapper
    @bind-Doc="@ModifiedText"
    Language="@CodeMirrorLanguage.Csharp"
    Theme="@ThemeMirrorTheme.OneDark"
    MergeViewConfiguration="@mergeConfig"
    LineNumbers="true"
/>

@code {
    private bool ShowMergeView = true;

    private string OriginalText = @"public class Calculator
{
    public int Add(int a, int b)
    {
        return a + b;
    }
}";

    private string ModifiedText = @"public class Calculator
{
    public int Add(int a, int b)
    {
        return a + b;
    }

    public int Subtract(int a, int b)
    {
        return a - b;
    }
}";

    private UnifiedMergeConfig? mergeConfig => ShowMergeView ? new UnifiedMergeConfig
    {
        Original = OriginalText,
        HighlightChanges = true,
        Gutter = true,
        MergeControls = true,
        SyntaxHighlightDeletions = true
    } : null;
}
```

--------------------------------

### Implement @Mentions Auto-Complete

Source: https://context7.com/gaelj/blazorcodemirror6/llms.txt

Enable user mentions by setting AllowMentions to true and providing a custom completion provider method.

```razor
@page "/mentions"

<CodeMirror6Wrapper
    @bind-Doc="@Text"
    Language="@CodeMirrorLanguage.Markdown"
    Theme="@ThemeMirrorTheme.GithubLight"
    GetMentionCompletions="@GetMentionCompletions"
    Setup="@setup"
/>

<p>Type @ to trigger mention autocomplete</p>

@code {
    private string? Text = "Hello @";

    private readonly CodeMirrorSetup setup = new()
    {
        AllowMentions = true,
        Autocompletion = true
    };

    private Task<List<CodeMirrorCompletion>> GetMentionCompletions()
    {
        var users = new List<CodeMirrorCompletion>
        {
            new CodeMirrorCompletion
            {
                Label = "alice",
                DisplayLabel = "Alice Smith",
                Detail = "Engineering Lead",
                Info = "alice@example.com",
                Type = "variable",
                Boost = 10,  // Higher priority in list
                Section = new CodeMirrorCompletionSection { Name = "Team", Rank = 1 }
            },
            new CodeMirrorCompletion
            {
                Label = "bob",
                DisplayLabel = "Bob Johnson",
                Detail = "Senior Developer",
                Info = "bob@example.com",
                Type = "variable",
                Section = new CodeMirrorCompletionSection { Name = "Team", Rank = 1 }
            },
            new CodeMirrorCompletion
            {
                Label = "carol",
                DisplayLabel = "Carol Williams",
                Detail = "Product Manager",
                Info = "carol@example.com",
                Type = "variable",
                Section = new CodeMirrorCompletionSection { Name = "Management", Rank = 2 }
            }
        };

        return Task.FromResult(users);
    }
}
```

--------------------------------

### Execute Editor Commands Programmatically

Source: https://context7.com/gaelj/blazorcodemirror6/llms.txt

Use the CommandDispatcher via a component reference to trigger editor actions like inserting text, focusing, or refreshing the linter.

```razor
@page "/commands"

<CodeMirror6Wrapper
    @ref="editorRef"
    @bind-Doc="@Text"
    Language="@CodeMirrorLanguage.Markdown"
/>

<div class="button-group">
    <button @onclick="InsertText">Insert Text</button>
    <button @onclick="InsertAbove">Insert Line Above</button>
    <button @onclick="Focus">Focus Editor</button>
    <button @onclick="ScrollIntoView">Scroll to Selection</button>
    <button @onclick="RefreshLinter">Refresh Linter</button>
    <button @onclick="Reinitialize">Re-initialize Editor</button>
</div>

@code {
    private CodeMirror6Wrapper editorRef = null!;
    private string? Text = "Original text";

    private async Task InsertText()
    {
        if (editorRef.CommandDispatcher != null)
            await editorRef.CommandDispatcher.Dispatch(
                CodeMirrorCommandOneParameter.InsertOrReplaceText,
                "Inserted content"
            );
    }

    private async Task InsertAbove()
    {
        if (editorRef.CommandDispatcher != null)
            await editorRef.CommandDispatcher.Dispatch(
                CodeMirrorCommandOneParameter.InsertTextAbove,
                "New line above\n"
            );
    }

    private async Task Focus()
    {
        if (editorRef.CommandDispatcher != null)
            await editorRef.CommandDispatcher.Dispatch(CodeMirrorSimpleCommand.Focus);
    }

    private async Task ScrollIntoView()
    {
        if (editorRef.CommandDispatcher != null)
            await editorRef.CommandDispatcher.Dispatch(CodeMirrorSimpleCommand.ScrollIntoView);
    }

    private async Task RefreshLinter()
    {
        if (editorRef.CommandDispatcher != null)
            await editorRef.CommandDispatcher.Dispatch(CodeMirrorSimpleCommand.RequestLinterRefresh);
    }

    private async Task Reinitialize()
    {
        await editorRef.InitializeAsync();
    }
}
```

--------------------------------

### Configure CodeMirror state in Blazor

Source: https://context7.com/gaelj/blazorcodemirror6/llms.txt

Defines the editor configuration and style button logic within a Blazor component.

```csharp
    private List<SelectionRange>? selectionRanges;
    private List<string> ActiveStyles = new();

    private readonly CodeMirrorSetup editorSetup = new()
    {
        HighlightSelectionMatches = true,
        ScrollToEnd = false,
        BindMode = DocumentBindMode.OnDelayedInput,
        FocusOnCreation = true
    };

    private string GetButtonClass(CodeMirrorState state, string styleTag) =>
        state.MarkdownStylesAtSelections?.Contains(styleTag) == true
            ? "btn btn-primary"
            : "btn btn-outline-secondary";
}
```

--------------------------------

### Display individual SVG icons

Source: https://github.com/gaelj/blazorcodemirror6/blob/main/Examples.BlazorServer/wwwroot/css/open-iconic/README.md

Use standard image tags to display individual SVG files.

```html
<img src="/open-iconic/svg/icon-name.svg" alt="icon name">
```

--------------------------------

### Display icons using SVG sprite

Source: https://github.com/gaelj/blazorcodemirror6/blob/main/Examples.BlazorServer/wwwroot/css/open-iconic/README.md

Use the SVG sprite method to display icons with a single request.

```html
<svg class="icon">
  <use xlink:href="open-iconic.svg#account-login" class="icon-account-login"></use>
</svg>
```

--------------------------------

### Persist Editor Content with Local Storage

Source: https://context7.com/gaelj/blazorcodemirror6/llms.txt

Use the LocalStorageKey property to automatically save editor state and the CommandDispatcher to clear it programmatically.

```razor
@page "/persistence"

<CodeMirror6Wrapper
    @ref="editorRef"
    @bind-Doc="@Text"
    Language="@CodeMirrorLanguage.Markdown"
    LocalStorageKey="my-document-draft"
    Theme="@ThemeMirrorTheme.OneDark"
/>

<button @onclick="ClearDraft">Clear Saved Draft</button>
<button @onclick="SaveAndSubmit">Submit Document</button>

@code {
    private CodeMirror6Wrapper editorRef = null!;
    private string? Text = "";

    private async Task ClearDraft()
    {
        if (editorRef.CommandDispatcher != null)
        {
            await editorRef.CommandDispatcher.Dispatch(CodeMirrorSimpleCommand.ClearLocalStorage);
        }
    }

    private async Task SaveAndSubmit()
    {
        // Submit to server...
        await ClearDraft();  // Clear draft after successful submission
    }
}
```

--------------------------------

### Implement custom document linting

Source: https://context7.com/gaelj/blazorcodemirror6/llms.txt

Uses the LintDocument callback to identify and highlight specific words as errors within the editor.

```razor
@page "/linting"

<CodeMirror6Wrapper
    @bind-Doc="@Code"
    Language="@CodeMirrorLanguage.PlainText"
    Theme="@ThemeMirrorTheme.OneDark"
    LintDocument="@LintDocument"
/>

@code {
    private string? Code = @"This line is fine.
This line contains an error word.
Another error here and error there.
Clean line without issues.";

    private Task<List<CodeMirrorDiagnostic>> LintDocument(string code, CancellationToken cancellationToken)
    {
        var diagnostics = new List<CodeMirrorDiagnostic>();
        var position = 0;

        foreach (var line in code.Split('\n'))
        {
            cancellationToken.ThrowIfCancellationRequested();

            var searchLine = line;
            var offset = 0;

            while (searchLine.Contains("error", StringComparison.OrdinalIgnoreCase))
            {
                var index = searchLine.IndexOf("error", StringComparison.OrdinalIgnoreCase);
                var errorLength = "error".Length;

                diagnostics.Add(new CodeMirrorDiagnostic
                {
                    From = position + index + offset,
                    To = position + index + errorLength + offset,
                    Severity = "error",  // Options: "hint", "info", "warning", "error"
                    Message = "The word 'error' is not allowed in this document.",
                    Source = "Custom Linter"
                });

                offset += index + errorLength;
                searchLine = searchLine.Substring(index + errorLength);
            }

            position += line.Length + 1;
        }

        return Task.FromResult(diagnostics);
    }
}
```

--------------------------------

### Disable Sentry in Program.cs

Source: https://github.com/gaelj/blazorcodemirror6/blob/main/README.md

Remove or comment out this configuration block in Program.cs to disable Sentry error reporting in the application.

```csharp
builder.WebHost.UseSentry(o => {
    o.Dsn = "https://d0ab79eee7b999c61d2c01fdf3958eeb@o4505402784546816.ingest.sentry.io/4506525909909504";
    // When configuring for the first time, to see what the SDK is doing:
    o.Debug = true;
    // Set TracesSampleRate to 1.0 to capture 100% of transactions for performance monitoring.
    // We recommend adjusting this value in production.
    o.TracesSampleRate = 1.0;
});
```

--------------------------------

### Remove Sentry Script from HTML

Source: https://github.com/gaelj/blazorcodemirror6/blob/main/README.md

Delete this script tag from index.html or _Host.cshtml to stop Sentry from tracking errors in the browser.

```html
<script
    src="https://js.sentry-cdn.com/d0ab79eee7b999c61d2c01fdf3958eeb.min.js"
    crossorigin="anonymous"
></script>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.