From 04aec3c60431bff57a22817c9acf892f72d9bbd4 Mon Sep 17 00:00:00 2001
From: Guflly <145608489+Guflly@users.noreply.github.com>
Date: Fri, 31 Jul 2026 05:52:05 -0700
Subject: [PATCH] feat: Add spellcheck to more inputs

---
 docs/Setup/Configuration.md                                   | 3 +++
 .../Features/AboutMe/Components/Skill/AddSkillDialog.razor    | 4 ++--
 .../Admin/BlogPostEditor/Components/CreateNewBlogPost.razor   | 2 +-
 .../Features/Admin/BlogPostEditor/Components/TagInput.razor   | 2 +-
 .../Features/Admin/ShortCodes/ShortCodesPage.razor            | 2 +-
 .../Features/Home/Components/SearchInput.razor                | 2 +-
 6 files changed, 9 insertions(+), 6 deletions(-)
diff --git a/docs/Setup/Configuration.md b/docs/Setup/Configuration.md
index c3743447..605a6fb8 100644
--- a/docs/Setup/Configuration.md
+++ b/docs/Setup/Configuration.md
@@ -4,6 +4,9 @@
 
 The appsettings.json file has a lot of options to customize the content of the blog. The following table shows which values are used when.
 
+Browser spellchecking uses the `<html lang="en">` value in
+`src/LinkDotNet.Blog.Web/App.razor`. Change `en` to your blog's language so the browser selects the correct dictionary.
+
 ```json
 {
 	"BlogName": "linkdotnet",
diff --git a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/AddSkillDialog.razor b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/AddSkillDialog.razor
index 8db05cc0..6325c1dc 100644
--- a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/AddSkillDialog.razor
+++ b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/AddSkillDialog.razor
@@ -6,7 +6,7 @@
         <ValidationSummary />
         <div class="mb-3">
 	        <label for="title" class="form-label">Skill name</label>
-	        <InputText class="form-control" id="title" @bind-Value="model.Skill" />
+	        <InputText class="form-control" id="title" spellcheck="true" @bind-Value="model.Skill" />
         </div>
         <div class="mb-3">
 	        <label for="image" class="form-label">Image Url</label>
@@ -17,7 +17,7 @@
         </div>
         <div class="mb-3">
 	        <label for="capability" class="form-label">Capability</label>
-	        <InputText class="form-control" id="capability" @bind-Value="model.Capability" />
+	        <InputText class="form-control" id="capability" spellcheck="true" @bind-Value="model.Capability" />
         </div>
         <div class="mb-3">
 	        <label for="proficiency" class="form-label">Proficiency</label>
diff --git a/src/LinkDotNet.Blog.Web/Features/Admin/BlogPostEditor/Components/CreateNewBlogPost.razor b/src/LinkDotNet.Blog.Web/Features/Admin/BlogPostEditor/Components/CreateNewBlogPost.razor
index d0ac546b..06bcb3df 100644
--- a/src/LinkDotNet.Blog.Web/Features/Admin/BlogPostEditor/Components/CreateNewBlogPost.razor
+++ b/src/LinkDotNet.Blog.Web/Features/Admin/BlogPostEditor/Components/CreateNewBlogPost.razor
@@ -49,7 +49,7 @@
                     <div class="card-body p-0">
                                 <div class="p-4 border-bottom">
                                     <div class="form-floating">
-                                        <input type="text" class="form-control form-control-lg shadow-none fs-3 fw-semibold" id="title" @oninput="args => model.Title = args.Value!.ToString()!"
+                                        <input type="text" class="form-control form-control-lg shadow-none fs-3 fw-semibold" id="title" spellcheck="true" @oninput="args => model.Title = args.Value!.ToString()!"
                                                value="@model.Title"/>
                                         <label for="title" class="fw-bold">Post Title</label>
                                     </div>
diff --git a/src/LinkDotNet.Blog.Web/Features/Admin/BlogPostEditor/Components/TagInput.razor b/src/LinkDotNet.Blog.Web/Features/Admin/BlogPostEditor/Components/TagInput.razor
index ee9e16ba..c69efb29 100644
--- a/src/LinkDotNet.Blog.Web/Features/Admin/BlogPostEditor/Components/TagInput.razor
+++ b/src/LinkDotNet.Blog.Web/Features/Admin/BlogPostEditor/Components/TagInput.razor
@@ -22,7 +22,7 @@
                    @onfocus="HandleFocus"
                    @onkeydown="HandleKeyDownAsync"
                    @onblur="HandleBlurAsync"
-                   placeholder="@Placeholder"
+                   placeholder="@Placeholder" spellcheck="true"
                    autocomplete="off" />
         </div>
     </div>
diff --git a/src/LinkDotNet.Blog.Web/Features/Admin/ShortCodes/ShortCodesPage.razor b/src/LinkDotNet.Blog.Web/Features/Admin/ShortCodes/ShortCodesPage.razor
index 55d91552..ef43e3a5 100644
--- a/src/LinkDotNet.Blog.Web/Features/Admin/ShortCodes/ShortCodesPage.razor
+++ b/src/LinkDotNet.Blog.Web/Features/Admin/ShortCodes/ShortCodesPage.razor
@@ -53,7 +53,7 @@
     <EditForm Model="@model" OnValidSubmit="SaveShortCode">
         <div class="mb-3">
             <label for="short-code-name" class="form-label">Name</label>
-            <InputText Id="short-code-name" class="form-control" @bind-Value="@model.Name" />
+            <InputText Id="short-code-name" class="form-control" spellcheck="true" @bind-Value="@model.Name" />
         </div>
         <div class="mb-3">
             <label for="short-code-content" class="form-label">Shortcode Content</label>
diff --git a/src/LinkDotNet.Blog.Web/Features/Home/Components/SearchInput.razor b/src/LinkDotNet.Blog.Web/Features/Home/Components/SearchInput.razor
index 06157e6d..d092e844 100644
--- a/src/LinkDotNet.Blog.Web/Features/Home/Components/SearchInput.razor
+++ b/src/LinkDotNet.Blog.Web/Features/Home/Components/SearchInput.razor
@@ -1,5 +1,5 @@
 ﻿<div class="search-bar">
-	<input type="text" class="search-bar-input" placeholder="search" aria-label="search" @bind-value="searchTerm"
+	<input type="text" class="search-bar-input" placeholder="search" aria-label="search" spellcheck="true" @bind-value="searchTerm"
 	       @onkeyup="@CheckForEnter" title="Search for blog post via title or tags"/>
 	<button class="search-bar-button" aria-label="search submit" @onclick="CallSearchEntered"><i class="search"></i></button>
 </div>
