Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Jul 25, 2025
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
81b3475
doc: 更新 CodeEditor 示例文档
ArgoZhang Jul 25, 2025
2581b16
chore: 增加 CodeEditor 依赖
ArgoZhang Jul 25, 2025
692d6e2
doc: 增加行号
ArgoZhang Jul 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand Down
11 changes: 8 additions & 3 deletions src/BootstrapBlazor.Server/Components/Samples/CodeEditors.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Copy link
Contributor

@sourcery-ai sourcery-ai bot Jul 25, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nitpick: The Pre block now uses the new backing fields, but the double @ may be unnecessary.

Ensure that using @@_code, @@_language, and @@_theme achieves the intended output. Use a single @ for interpolation, or verify proper escaping if displaying as a string.

</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>
Expand Down
49 changes: 14 additions & 35 deletions src/BootstrapBlazor.Server/Components/Samples/CodeEditors.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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!')
}
Expand All @@ -33,8 +36,7 @@ function main() {

if (item.Text == "CSharp")
{
Language = "csharp";
Code = """
_code = """
using System;

void Main()
Expand All @@ -46,8 +48,7 @@ void Main()

if (item.Text == "Json")
{
Language = "json";
Code = """
_code = """
{
"name": "Hello World",
"age": 25
Expand All @@ -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>
Expand All @@ -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;
}

Expand Down
Loading