Highlighted code blocks inside the app (#1153)

2026-11-04 18:47:21 +00:00 · 2026-11-04 07:58:57 +01:00
1 parent 0b42c0288e
commit f4a86c2fb8
@@ -0,0 +1,97 @@
+using AIStudio.Tools.PluginSystem;
+
+using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Rendering;
+using Microsoft.AspNetCore.Components.Web;
+
+namespace AIStudio.Components;
+
+/// <summary>
+/// The copy button of a code block which AI Studio highlights itself, made like the one of
+/// MudBlazor.Markdown, which is internal: the same classes, so that it appears at the same place while
+/// the pointer is on the block, and the same confirmation for a moment after a click.
+/// </summary>
+/// <remarks>
+/// It copies through the clipboard service of the app, the native clipboard of the runtime, which the
+/// button of the library falls back to as well.
+/// </remarks>
+public sealed class CodeBlockCopyButton : ComponentBase
+{
+    private const string CSS_CLASS = "ma-2 mud-markdown-code-highlight-copybtn";
+
+    private static readonly TimeSpan CONFIRMATION_DURATION = TimeSpan.FromSeconds(1.25);
+
+    private static string TB(string fallbackEN) => I18N.I.T(fallbackEN, typeof(CodeBlockCopyButton).Namespace, nameof(CodeBlockCopyButton));
+
+    /// <summary>
+    /// The code to copy.
+    /// </summary>
+    [Parameter]
+    public string Text { get; set; } = string.Empty;
+
+    [Inject]
+    private IMudMarkdownClipboardService ClipboardService { get; init; } = null!;
+
+    private bool isCopied;
+
+    /// <summary>
+    /// What a copy button of a code block confirms with, those of MudBlazor.Markdown included.
+    /// </summary>
+    internal static string ConfirmationText => TB("Copied!");
+
+    #region Overrides of ComponentBase
+
+    protected override void BuildRenderTree(RenderTreeBuilder builder)
+    {
+        if (!this.isCopied)
+        {
+            builder.OpenComponent<MudIconButton>(0);
+            builder.AddComponentParameter(1, nameof(MudIconButton.OnClick), EventCallback.Factory.Create<MouseEventArgs>(this, this.CopyAsync));
+            builder.AddComponentParameter(2, nameof(MudIconButton.Class), CSS_CLASS);
+            builder.AddComponentParameter(3, nameof(MudIconButton.Icon), Icons.Material.Rounded.ContentCopy);
+            builder.AddComponentParameter(4, nameof(MudIconButton.Color), Color.Primary);
+            builder.AddComponentParameter(5, nameof(MudIconButton.Variant), Variant.Filled);
+            builder.AddComponentParameter(6, nameof(MudIconButton.Size), Size.Medium);
+            builder.CloseComponent();
+            return;
+        }
+
+        builder.OpenComponent<MudTooltip>(10);
+        builder.AddComponentParameter(11, nameof(MudTooltip.Text), ConfirmationText);
+        builder.AddComponentParameter(12, nameof(MudTooltip.Arrow), true);
+        builder.AddComponentParameter(13, nameof(MudTooltip.Placement), Placement.Left);
+        builder.AddComponentParameter(14, nameof(MudTooltip.Visible), true);
+        builder.AddComponentParameter(15, nameof(MudTooltip.ShowOnClick), false);
+        builder.AddComponentParameter(16, nameof(MudTooltip.ShowOnFocus), false);
+        builder.AddComponentParameter(17, nameof(MudTooltip.ShowOnHover), false);
+        builder.AddComponentParameter(18, nameof(MudTooltip.RootClass), CSS_CLASS);
+        builder.AddComponentParameter(19, nameof(MudTooltip.ChildContent), (RenderFragment)(content =>
+        {
+            content.OpenComponent<MudIconButton>(0);
+            content.AddComponentParameter(1, nameof(MudIconButton.Icon), Icons.Material.Rounded.DoneAll);
+            content.AddComponentParameter(2, nameof(MudIconButton.Color), Color.Success);
+            content.AddComponentParameter(3, nameof(MudIconButton.Variant), Variant.Filled);
+            content.AddComponentParameter(4, nameof(MudIconButton.Size), Size.Medium);
+            content.CloseComponent();
+        }));
+
+        builder.CloseComponent();
+    }
+
+    #endregion
+
+    private async Task CopyAsync()
+    {
+        if (string.IsNullOrEmpty(this.Text))
+            return;
+
+        await this.ClipboardService.CopyToClipboardAsync(this.Text);
+
+        this.isCopied = true;
+        this.StateHasChanged();
+        await Task.Delay(CONFIRMATION_DURATION);
+
+        this.isCopied = false;
+        this.StateHasChanged();
+    }
+}