From 81b34753bd46af20ac21d36b1802cbd6bfcabbb8 Mon Sep 17 00:00:00 2001
From: Argo Zhang <argo@live.ca>
Date: Fri, 25 Jul 2025 11:55:50 +0800
Subject: [PATCH 1/3] =?UTF-8?q?doc:=20=E6=9B=B4=E6=96=B0=20CodeEditor=20?=
 =?UTF-8?q?=E7=A4=BA=E4=BE=8B=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Components/Samples/CodeEditors.razor      | 11 +++--
 .../Components/Samples/CodeEditors.razor.cs   | 49 ++++++-------------
 2 files changed, 22 insertions(+), 38 deletions(-)

diff --git a/src/BootstrapBlazor.Server/Components/Samples/CodeEditors.razor b/src/BootstrapBlazor.Server/Components/Samples/CodeEditors.razor
index a425770f0b3..bc2f5200b2f 100644
--- a/src/BootstrapBlazor.Server/Components/Samples/CodeEditors.razor
+++ b/src/BootstrapBlazor.Server/Components/Samples/CodeEditors.razor
@@ -8,7 +8,7 @@
 <DemoBlock Title="@Localizer["BasicTitle"]" Introduction="@Localizer["BasicIntro"]">
     <div class="row form-inline g-3">
         <div class="col-12 col-sm-6">
-            <Select TValue="string" OnSelectedItemChanged="@OnSelectedItemChanged" ShowLabel="true" DisplayText="Language">
+            <Select @bind-Value="_language" OnSelectedItemChanged="OnSelectedItemChanged" ShowLabel="true" DisplayText="Language">
                 <Options>
                     <SelectOption Text="JavaScript" Value="javascript"></SelectOption>
                     <SelectOption Text="CSharp" Value="csharp"></SelectOption>
@@ -18,7 +18,7 @@
             </Select>
         </div>
         <div class="col-12 col-sm-6">
-            <Select TValue="string" OnSelectedItemChanged="@OnThemeSelectedItemChanged" ShowLabel="true" DisplayText="Theme">
+            <Select @bind-Value="@_theme" ShowLabel="true" DisplayText="Theme">
                 <Options>
                     <SelectOption Text="Visual Studio" Value="vs"></SelectOption>
                     <SelectOption Text="Visual Studio Dark" Value="vs-dark"></SelectOption>
@@ -27,7 +27,12 @@
             </Select>
         </div>
         <div class="col-12">
-            <Pre>&lt;CodeEditor Value="@@Code" Language="@@Language" Theme="@@Theme" OnValueChanged="OnValueChanged" /&gt;</Pre>
+            <Pre>&lt;CodeEditor Value="@@_code" Language="@@_language" Theme="@@_theme" /&gt;</Pre>
+        </div>
+        <div class="col-12">
+            <div style="border: 1px solid var(--bs-border-color); height: 200px; width: 100%; overflow: hidden;">
+                <CodeEditor Value="@_code" Language="@_language" Theme="@_theme"></CodeEditor>
+            </div>
         </div>
     </div>
 </DemoBlock>
diff --git a/src/BootstrapBlazor.Server/Components/Samples/CodeEditors.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/CodeEditors.razor.cs
index 21ec91d26e6..04b0fe18a14 100644
--- a/src/BootstrapBlazor.Server/Components/Samples/CodeEditors.razor.cs
+++ b/src/BootstrapBlazor.Server/Components/Samples/CodeEditors.razor.cs
@@ -10,21 +10,24 @@ namespace BootstrapBlazor.Server.Components.Samples;
 /// </summary>
 public partial class CodeEditors
 {
-    [NotNull]
-    private string? Code { get; set; }
+    private string _code { get; set; } = """
+using System;
+
+void Main()
+{
+    Console.WriteLine(""Hello World"");
+}
+""";
 
-    [NotNull]
-    private string? Language { get; set; }
+    private string _language { get; set; } = "CSharp";
 
-    [NotNull]
-    private string? Theme { get; set; }
+    private string _theme { get; set; } = "vs";
 
     private Task OnSelectedItemChanged(SelectedItem item)
     {
         if (item.Text == "JavaScript")
         {
-            Language = "javascript";
-            Code = """
+            _code = """
 function main() {
     console.log('Hello World!')
 }
@@ -33,8 +36,7 @@ function main() {
 
         if (item.Text == "CSharp")
         {
-            Language = "csharp";
-            Code = """
+            _code = """
 using System;
 
 void Main()
@@ -46,8 +48,7 @@ void Main()
 
         if (item.Text == "Json")
         {
-            Language = "json";
-            Code = """
+            _code = """
 {
     "name": "Hello World",
     "age": 25
@@ -57,8 +58,7 @@ void Main()
 
         if (item.Text == "Razor")
         {
-            Language = "razor";
-            Code = """
+            _code = """
 <Select TValue=""string"" OnSelectedItemChanged=""@OnSelectedItemChanged"">
     <Options>
         <SelectOption Text=""JavaScript"" Value=""JavaScript""></ SelectOption>
@@ -69,27 +69,6 @@ void Main()
 </Select>
 """;
         }
-        StateHasChanged();
-        return Task.CompletedTask;
-    }
-
-    private Task OnThemeSelectedItemChanged(SelectedItem item)
-    {
-        if (item.Value == "vs-dark")
-        {
-            Theme = item.Value;
-        }
-
-        if (item.Value == "vs")
-        {
-            Theme = item.Value;
-        }
-
-        if (item.Value == "hc-black")
-        {
-            Theme = item.Value;
-        }
-        StateHasChanged();
         return Task.CompletedTask;
     }
 

From 2581b165c537081a4a75c32fd963ce841d93ffb9 Mon Sep 17 00:00:00 2001
From: Argo Zhang <argo@live.ca>
Date: Fri, 25 Jul 2025 11:55:59 +0800
Subject: [PATCH 2/3] =?UTF-8?q?chore:=20=E5=A2=9E=E5=8A=A0=20CodeEditor=20?=
 =?UTF-8?q?=E4=BE=9D=E8=B5=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj b/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj
index 185d6537beb..4e5b9b60ce3 100644
--- a/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj
+++ b/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj
@@ -32,6 +32,7 @@
     <PackageReference Include="BootstrapBlazor.Chart" Version="9.0.0" />
     <PackageReference Include="BootstrapBlazor.ChatBot" Version="9.0.0" />
     <PackageReference Include="BootstrapBlazor.CherryMarkdown" Version="9.0.3" />
+    <PackageReference Include="BootstrapBlazor.CodeEditor" Version="9.0.1" />
     <PackageReference Include="BootstrapBlazor.Dock" Version="9.0.0" />
     <PackageReference Include="BootstrapBlazor.DockView" Version="9.1.18" />
     <PackageReference Include="BootstrapBlazor.DriverJs" Version="9.0.3" />

From 692d6e24440da9898ad57017513f054757ce61f7 Mon Sep 17 00:00:00 2001
From: Argo Zhang <argo@live.ca>
Date: Fri, 25 Jul 2025 12:33:41 +0800
Subject: [PATCH 3/3] =?UTF-8?q?doc:=20=E5=A2=9E=E5=8A=A0=E8=A1=8C=E5=8F=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/BootstrapBlazor.Server/Components/Samples/CodeEditors.razor | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/BootstrapBlazor.Server/Components/Samples/CodeEditors.razor b/src/BootstrapBlazor.Server/Components/Samples/CodeEditors.razor
index bc2f5200b2f..9a8e2a3cc20 100644
--- a/src/BootstrapBlazor.Server/Components/Samples/CodeEditors.razor
+++ b/src/BootstrapBlazor.Server/Components/Samples/CodeEditors.razor
@@ -31,7 +31,7 @@
         </div>
         <div class="col-12">
             <div style="border: 1px solid var(--bs-border-color); height: 200px; width: 100%; overflow: hidden;">
-                <CodeEditor Value="@_code" Language="@_language" Theme="@_theme"></CodeEditor>
+                <CodeEditor ShowLineNo="true" Value="@_code" Language="@_language" Theme="@_theme"></CodeEditor>
             </div>
         </div>
     </div>