From 3b2a5f011bc4832d97652cfa132194b0926e241e Mon Sep 17 00:00:00 2001
From: Damien Braillard <contact@damien-braillard.ch>
Date: Fri, 14 Aug 2026 14:59:39 +0200
Subject: [PATCH] Fix code viewer editor when line numbers are enabled

When `ShowLineNumbers` and `Editable` are both set to `true` on the `MudCodViewer`, there is a shift between the caret and the shown highlighted content.

This is due to the fact that the `<pre>` overlay is shifted right by `3.8em` and the underlying `<textarea>` is not. So there is effectively a shift of 3.8em between the caret and the shown highlighted content.

I encountered the issue in my project and it has also been reported in issue #628.

The fix adds a new style for the `<textarea>` and applies it dynamically when `ShowLineNumbers` is `true` (as it was already done for the `<pre>`)

The 4th doc sample example has also been updated to allow enabling line numbers when in edit mode.
---
 .../CodeViewer/Examples/CodeViewerExample4.razor          | 8 ++++++--
 .../Components/MudCodeViewer.razor                        | 2 +-
 .../Components/MudCodeViewer.razor.cs                     | 8 ++++++++
 .../wwwroot/prism/prism.min.css                           | 4 ++++
 4 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/docs/CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/CodeViewer/Examples/CodeViewerExample4.razor b/docs/CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/CodeViewer/Examples/CodeViewerExample4.razor
index 064a3e5f..c7797aa5 100644
--- a/docs/CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/CodeViewer/Examples/CodeViewerExample4.razor
+++ b/docs/CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/CodeViewer/Examples/CodeViewerExample4.razor
@@ -2,17 +2,21 @@
 
 <MudGrid>
     <MudItem xs="12" sm="8" Class="d-flex flex-column gap-8 align-center justify-center">
-        <MudCodeViewer Class="mud-width-full" Code="@_code" Editable="@_editable" />
+        <MudCodeViewer Class="mud-width-full" Code="@_code" Editable="@_editable" ShowLineNumbers="@_showLineNumbers" />
     </MudItem>
 
     <MudItem xs="12" sm="4">
-        <MudSwitchM3 @bind-Value="@_editable" Label="Editable" Color="Color.Secondary" />
+        <MudStack Spacing="2">
+            <MudSwitchM3 @bind-Value="@_editable" Label="Editable" Color="Color.Secondary"/>
+            <MudSwitchM3 @bind-Value="@_showLineNumbers" Label="Line Numbers" Color="Color.Secondary"/>
+        </MudStack>
     </MudItem>
 </MudGrid>
 
 
 @code {
     private bool _editable = true;
+    private bool _showLineNumbers = false;
     private string _code = """
 // This is a sample code as string parameter.
 public class MudCodeViewer
diff --git a/src/CodeBeam.MudBlazor.Extensions.Code/Components/MudCodeViewer.razor b/src/CodeBeam.MudBlazor.Extensions.Code/Components/MudCodeViewer.razor
index 59430c09..72cf36a2 100644
--- a/src/CodeBeam.MudBlazor.Extensions.Code/Components/MudCodeViewer.razor
+++ b/src/CodeBeam.MudBlazor.Extensions.Code/Components/MudCodeViewer.razor
@@ -45,7 +45,7 @@
                     </code>
                 </pre>
 
-                <textarea @ref="_textAreaRef" class="mud-codeviewer-textarea" @bind="Code" @oninput="OnInput"
+                <textarea @ref="_textAreaRef" class="@TextAreaClass" @bind="Code" @oninput="OnInput"
                           spellcheck="false" autocomplete="off" autocorrect="off" autocapitalize="off"></textarea>
             </div>
         }
diff --git a/src/CodeBeam.MudBlazor.Extensions.Code/Components/MudCodeViewer.razor.cs b/src/CodeBeam.MudBlazor.Extensions.Code/Components/MudCodeViewer.razor.cs
index 53c7bf0d..e7d26d7f 100644
--- a/src/CodeBeam.MudBlazor.Extensions.Code/Components/MudCodeViewer.razor.cs
+++ b/src/CodeBeam.MudBlazor.Extensions.Code/Components/MudCodeViewer.razor.cs
@@ -79,6 +79,14 @@ public MudCodeViewer()
         .AddClass($"language-{_language.Value.ToDescriptionString()}", !_showLineNumbers.Value)
         .Build();
 
+    /// <summary>
+    /// Gets the CSS class string used for the textarea element based on the line number display settings.
+    /// </summary>
+    private string TextAreaClass => new CssBuilder()
+        .AddClass("mud-codeviewer-textarea")
+        .AddClass("line-numbers", _showLineNumbers.Value)
+        .Build();
+
     /// <summary>
     /// Gets or sets the code snippet to be displayed or processed by the component.
     /// </summary>
diff --git a/src/CodeBeam.MudBlazor.Extensions.Code/wwwroot/prism/prism.min.css b/src/CodeBeam.MudBlazor.Extensions.Code/wwwroot/prism/prism.min.css
index fb929a09..705fbc23 100644
--- a/src/CodeBeam.MudBlazor.Extensions.Code/wwwroot/prism/prism.min.css
+++ b/src/CodeBeam.MudBlazor.Extensions.Code/wwwroot/prism/prism.min.css
@@ -87,3 +87,7 @@ pre[class*=language-].line-numbers{position:relative;padding-left:3.8em;counter-
     font: inherit;
     padding: 16px;
 }
+
+.mud-codeviewer-textarea.line-numbers {
+    padding-left: 3.8em
+}
\ No newline at end of file