Editor Titleize button.

assets/js/editor-artifact.js

@@ -10,7 +10,7 @@ import {
   youtube as validateYouTube,
   number as validateNumber,
 } from "./artifact-validate.mjs";
-import { clipValue, getElmById } from "./helper.mjs";
+import { clipValue, getElmById, titleize } from "./helper.mjs";
 
 (() => {
   "use strict";
@@ -283,6 +283,15 @@ import { clipValue, getElmById } from "./helper.mjs";
     title.value = titleU[0].value;
     title.classList.add("is-valid");
   });
+  const titleizeBtn = document.getElementById("artifact-editor-titleize");
+  if (titleizeBtn.length === 0) {
+    throw new Error("The titleize button is missing.");
+  }
+  titleizeBtn.addEventListener("click", () => {
+    title.value = titleize(title.value);
+    let event = new Event("keyup");
+    title.dispatchEvent(event);
+  });
 
   const ct = document.getElementById("artifact-editor-credit-text");
   if (ct === null) {

assets/js/helper.mjs

@@ -3,6 +3,40 @@
  * This module provides functions for handling common tasks.
  */
 
+/**
+ * Titleizes a string of text but keeps common adverbs in lowercase.
+ *
+ * @param {string} text - The input text to be titleized.
+ * @returns {string} - The titleized text.
+ */
+export function titleize(text) {
+  const commonAdverbs = [
+    "a",
+    "an",
+    "and",
+    "as",
+    "but",
+    "for",
+    "if",
+    "of",
+    "or",
+    "so",
+    "the",
+    "to",
+  ];
+  return text
+    .split(" ")
+    .map((word, index) => {
+      // Capitalize the first word and any word not in the common adverbs list
+      if (index === 0 || !commonAdverbs.includes(word.toLowerCase())) {
+        return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
+      }
+      // Keep common adverbs in lowercase
+      return word.toLowerCase();
+    })
+    .join(" ");
+}
+
 /**
  * Copies the text content of an HTML element to the clipboard.
  * @async

view/app/artifactedit.tmpl

@@ -240,6 +240,7 @@ aria-labelledby="artifact-delete-forever-modal-label" aria-hidden="true">
                 hx-include="[name='artifact-editor-key'],
                             [name='artifact-editor-titleundo']">
                   Reset<small class="link-dark"> title to <q id="artifact-editor-title-quote">{{$title}}</q></small></button>
+              <button class="btn btn-link" type="button" id="artifact-editor-titleize">Titleize</button>
             </div>
           </div>
           {{/*  Comments  */}}