doc(CodeEditor): add sample cdoe for CodeEditor (#6488)

* doc: 更新 CodeEditor 示例文档

* chore: 增加 CodeEditor 依赖

* doc: 增加行号

Author: ArgoZhang

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" />

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 ShowLineNo="true" Value="@_code" Language="@_language" Theme="@_theme"></CodeEditor>
+            </div>
         </div>
     </div>
 </DemoBlock>

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;
     }