Docs: Fix copy-to-clipboard function for certain snippets (#7161)

src/MudBlazor.Docs/Components/SectionContent.razor

@@ -45,7 +45,7 @@
 @if (_hasCode)
 {
     <div class="@SourceClassname">
-        <div class="docs-section-source-container">
+        <div class="docs-section-source-container" id="@_snippetId">
             @CodeComponent(_activeCode)
         </div>
         <MudIconButton Icon="@Icons.Material.Outlined.FileCopy" Size="Size.Small" Class="copy-code-button" @onclick="CopyTextToClipboard" />

src/MudBlazor.Docs/Components/SectionContent.razor.cs

@@ -12,12 +12,14 @@
 using Microsoft.AspNetCore.Components;
 using MudBlazor.Docs.Extensions;
 using MudBlazor.Docs.Models;
+using MudBlazor.Docs.Services;
 
 namespace MudBlazor.Docs.Components;
 
 public partial class SectionContent
 {
     [Inject] protected IJsApiService JsApiService { get; set; }
+    [Inject] protected IDocsJsApiService DocsJsApiService { get; set; }
 
     protected string Classname =>
         new CssBuilder("docs-section-content")
@@ -47,6 +49,8 @@ public partial class SectionContent
             .AddClass("show-code", _hasCode && ShowCode)
             .Build();
 
+    private string _snippetId = "_" + Guid.NewGuid().ToString()[..8];
+
     [Parameter] public string Class { get; set; }
     [Parameter] public bool DarkenBackground { get; set; }
     [Parameter] public bool Outlined { get; set; } = true;
@@ -66,9 +70,9 @@ protected override void OnParametersSet()
         if(Codes != null)
         {
             _hasCode = true;
-            _activeCode = Codes.FirstOrDefault().code;
+            _activeCode = Codes.FirstOrDefault()?.code;
         }
-        else if(!String.IsNullOrWhiteSpace(Code))
+        else if(!string.IsNullOrWhiteSpace(Code))
         {
             _hasCode = true;
             _activeCode = Code;
@@ -99,7 +103,10 @@ private string GetActiveCode(string value)
 
     private async Task CopyTextToClipboard()
     {
-        await JsApiService.CopyToClipboardAsync(Snippets.GetCode(Code));
+        var code = Snippets.GetCode(Code);
+        if (code == null)
+            code=await DocsJsApiService.GetInnerTextByIdAsync(_snippetId);
+        await JsApiService.CopyToClipboardAsync(code ?? $"Snippet '{Code}' not found!");
     }
 
     RenderFragment CodeComponent(string code) => builder =>

src/MudBlazor.Docs/Extensions/DocsViewExtension.cs

@@ -32,6 +32,7 @@ public static void TryAddDocsViewServices(this IServiceCollection services)
 #pragma warning restore 0618
             });
 
+            services.AddScoped<IDocsJsApiService, DocsJsApiService>();
             services.AddSingleton<DiscordApiClient>();
             services.AddSingleton<NugetApiClient>();
             services.AddSingleton<GitHubApiClient>();

src/MudBlazor.Docs/Models/Snippets.cs

@@ -11,7 +11,7 @@ public static string GetCode(string component)
             var field = typeof(Snippets).GetFields(BindingFlags.Public | BindingFlags.Static | BindingFlags.GetField)
                 .FirstOrDefault(f => f.Name == component);
             if (field == null)
-                return $"Snippet for component '{component}' not found!";
+                return null;
             return (string)field.GetValue(null);
         }
 

src/MudBlazor.Docs/Services/DocsJsApi.cs

@@ -0,0 +1,38 @@
+// Copyright (c) MudBlazor 2021
+// MudBlazor licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using Microsoft.JSInterop;
+
+namespace MudBlazor.Docs.Services
+{
+
+    public interface IDocsJsApiService
+    {
+        /// <summary>
+        /// Return the inner text of the HTML element referenced by given id
+        /// </summary>
+        ValueTask<string> GetInnerTextByIdAsync(string id);
+    }
+
+    public class DocsJsApiService : IDocsJsApiService
+    {
+        private readonly IJSRuntime _jsRuntime;
+
+        public DocsJsApiService(IJSRuntime jsRuntime)
+        {
+            _jsRuntime = jsRuntime;
+        }
+
+        /// <inheritdoc cref="IDocsJsApiService"/>
+        public ValueTask<string> GetInnerTextByIdAsync(string id)
+        {
+            return _jsRuntime.InvokeAsync<string>($"mudBlazorDocs.getInnerTextById", id);
+        }
+    }
+}

src/MudBlazor.Docs/wwwroot/JS/docs.js

@@ -1,13 +1,26 @@
-//General functions for Docs page 
-var mudBlazorDocs = {
+// Copyright (c) MudBlazor 2021
+// MudBlazor licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+//General functions for Docs page 
+class MudBlazorDocs {
+
+    // return the inner text of the element referenced by given element id
+    getInnerTextById(id) {
+        let element = document.getElementById(id)
+        if (!element)
+            return null;
+        return element.innerText;
+    }
 
     //scrolls to the active nav link in the NavMenu
-    scrollToActiveNavLink: function () {
+    scrollToActiveNavLink() {
         let element = document.querySelector('.mud-nav-link.active');
         if (!element) return;
         element.scrollIntoView({ block: 'center', behavior: 'smooth' })
     }
-}
+};
+window.mudBlazorDocs = new MudBlazorDocs();
 
 // Workaround for #5482
 if(typeof window.GoogleAnalyticsInterop === 'undefined') {

src/MudBlazor.UnitTests/Generated/ApiDocsTests.cs

@@ -33,7 +33,8 @@ public void Setup()
             ctx.Services.AddSingleton<IBrowserViewportService>(new MockBrowserViewportService());
             ctx.Services.AddTransient<IScrollManager, MockScrollManager>();
             ctx.Services.AddTransient<IScrollListenerFactory, MockScrollListenerFactory>();
-            ctx.Services.AddTransient<IJsApiService, MockJsApiServices>();
+            ctx.Services.AddTransient<IJsApiService, MockJsApiService>();
+            ctx.Services.AddTransient<IDocsJsApiService, MockDocsJsApiService>();
             ctx.Services.AddTransient<IResizeObserverFactory, MockResizeObserverFactory>();
             ctx.Services.AddTransient<IScrollSpyFactory, MockScrollSpyFactory>();
             ctx.Services.AddTransient<IEventListenerFactory, MockEventListenerFactory>();

src/MudBlazor.UnitTests/Generated/ExampleDocsTests.cs

@@ -33,7 +33,8 @@ public void Setup()
             ctx.Services.AddSingleton<IBrowserViewportService>(new MockBrowserViewportService());
             ctx.Services.AddTransient<IScrollManager, MockScrollManager>();
             ctx.Services.AddTransient<IScrollListenerFactory, MockScrollListenerFactory>();
-            ctx.Services.AddTransient<IJsApiService, MockJsApiServices>();
+            ctx.Services.AddTransient<IJsApiService, MockJsApiService>();
+            ctx.Services.AddTransient<IDocsJsApiService, MockDocsJsApiService>();
             ctx.Services.AddTransient<IResizeObserverFactory, MockResizeObserverFactory>();
             ctx.Services.AddTransient<IEventListenerFactory, MockEventListenerFactory>();
             ctx.Services.AddTransient<IEventListener, MockEventListener>();

src/MudBlazor.UnitTests/Mocks/MockDocsJsApiService.cs

@@ -0,0 +1,12 @@
+using System.Threading.Tasks;
+using MudBlazor.Docs.Services;
+
+namespace MudBlazor.UnitTests.Mocks
+{
+    public class MockDocsJsApiService : IDocsJsApiService
+    {
+
+        public ValueTask<string> GetInnerTextByIdAsync(string id) => ValueTask.FromResult("inner text");
+
+    }
+}

src/MudBlazor.UnitTests/Mocks/MockJsApiServices.cs → src/MudBlazor.UnitTests/Mocks/MockJsApiService.cs

@@ -2,10 +2,8 @@
 
 namespace MudBlazor.UnitTests.Mocks
 {
-    /// <summary>
-    /// Mock for scroll listener
-    /// </summary>
-    public class MockJsApiServices : IJsApiService
+
+    public class MockJsApiService : IJsApiService
     {
         public ValueTask CopyToClipboardAsync(string text) => ValueTask.CompletedTask;
 

src/MudBlazor/TScripts/mudWindow.js

@@ -3,6 +3,7 @@
 // See the LICENSE file in the project root for more information.
 
 class MudWindow {
+
     copyToClipboard (text) {
         navigator.clipboard.writeText(text);
     }