From 44f20785fff81b1f2525897b9debaa8c50b33e93 Mon Sep 17 00:00:00 2001
From: Fadekemi Adebayo <fadekemi.adebayo@pau.edu.ng>
Date: Thu, 12 Dec 2024 21:42:07 +0000
Subject: [PATCH 1/2] keyboard shortcut handler for capitalize

---
 .../lexical-playground/src/plugins/ShortcutsPlugin/index.tsx  | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/lexical-playground/src/plugins/ShortcutsPlugin/index.tsx b/packages/lexical-playground/src/plugins/ShortcutsPlugin/index.tsx
index 9b7540a3338..eff896fcafa 100644
--- a/packages/lexical-playground/src/plugins/ShortcutsPlugin/index.tsx
+++ b/packages/lexical-playground/src/plugins/ShortcutsPlugin/index.tsx
@@ -34,6 +34,7 @@ import {
   UpdateFontSizeType,
 } from '../ToolbarPlugin/utils';
 import {
+  isCapitalize,
   isCenterAlign,
   isClearFormatting,
   isDecreaseFontSize,
@@ -104,6 +105,9 @@ export default function ShortcutsPlugin({
       } else if (isUppercase(event)) {
         event.preventDefault();
         editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'uppercase');
+      } else if (isCapitalize(event)) {
+        event.preventDefault();
+        editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'capitalize');
       } else if (isIndent(event)) {
         event.preventDefault();
         editor.dispatchCommand(INDENT_CONTENT_COMMAND, undefined);

From 16937b40fb0cadde394346d419f9c4b21cbeb6a8 Mon Sep 17 00:00:00 2001
From: Fadekemi Adebayo <fadekemi.adebayo@pau.edu.ng>
Date: Thu, 12 Dec 2024 22:04:38 +0000
Subject: [PATCH 2/2] add capitalization formats to floating toolbar

---
 .../FloatingTextFormatToolbarPlugin/index.tsx | 42 +++++++++++++++++++
 1 file changed, 42 insertions(+)

diff --git a/packages/lexical-playground/src/plugins/FloatingTextFormatToolbarPlugin/index.tsx b/packages/lexical-playground/src/plugins/FloatingTextFormatToolbarPlugin/index.tsx
index 2404f88dca9..8b3ec28a4d1 100644
--- a/packages/lexical-playground/src/plugins/FloatingTextFormatToolbarPlugin/index.tsx
+++ b/packages/lexical-playground/src/plugins/FloatingTextFormatToolbarPlugin/index.tsx
@@ -39,6 +39,9 @@ function TextFormatFloatingToolbar({
   isBold,
   isItalic,
   isUnderline,
+  isUppercase,
+  isLowercase,
+  isCapitalize,
   isCode,
   isStrikethrough,
   isSubscript,
@@ -51,6 +54,9 @@ function TextFormatFloatingToolbar({
   isCode: boolean;
   isItalic: boolean;
   isLink: boolean;
+  isUppercase: boolean;
+  isLowercase: boolean;
+  isCapitalize: boolean;
   isStrikethrough: boolean;
   isSubscript: boolean;
   isSuperscript: boolean;
@@ -214,6 +220,33 @@ function TextFormatFloatingToolbar({
             aria-label="Format text to underlined">
             <i className="format underline" />
           </button>
+          <button
+            type="button"
+            onClick={() => {
+              editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'uppercase');
+            }}
+            className={'popup-item spaced ' + (isUppercase ? 'active' : '')}
+            aria-label="Format text to uppercase">
+            <i className="format uppercase" />
+          </button>
+          <button
+            type="button"
+            onClick={() => {
+              editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'lowercase');
+            }}
+            className={'popup-item spaced ' + (isLowercase ? 'active' : '')}
+            aria-label="Format text to lowercase">
+            <i className="format lowercase" />
+          </button>
+          <button
+            type="button"
+            onClick={() => {
+              editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'capitalize');
+            }}
+            className={'popup-item spaced ' + (isCapitalize ? 'active' : '')}
+            aria-label="Format text to capitalize">
+            <i className="format capitalize" />
+          </button>
           <button
             type="button"
             onClick={() => {
@@ -282,6 +315,9 @@ function useFloatingTextFormatToolbar(
   const [isBold, setIsBold] = useState(false);
   const [isItalic, setIsItalic] = useState(false);
   const [isUnderline, setIsUnderline] = useState(false);
+  const [isUppercase, setIsUppercase] = useState(false);
+  const [isLowercase, setIsLowercase] = useState(false);
+  const [isCapitalize, setIsCapitalize] = useState(false);
   const [isStrikethrough, setIsStrikethrough] = useState(false);
   const [isSubscript, setIsSubscript] = useState(false);
   const [isSuperscript, setIsSuperscript] = useState(false);
@@ -317,6 +353,9 @@ function useFloatingTextFormatToolbar(
       setIsBold(selection.hasFormat('bold'));
       setIsItalic(selection.hasFormat('italic'));
       setIsUnderline(selection.hasFormat('underline'));
+      setIsUppercase(selection.hasFormat('uppercase'));
+      setIsLowercase(selection.hasFormat('lowercase'));
+      setIsCapitalize(selection.hasFormat('capitalize'));
       setIsStrikethrough(selection.hasFormat('strikethrough'));
       setIsSubscript(selection.hasFormat('subscript'));
       setIsSuperscript(selection.hasFormat('superscript'));
@@ -378,6 +417,9 @@ function useFloatingTextFormatToolbar(
       isLink={isLink}
       isBold={isBold}
       isItalic={isItalic}
+      isUppercase={isUppercase}
+      isLowercase={isLowercase}
+      isCapitalize={isCapitalize}
       isStrikethrough={isStrikethrough}
       isSubscript={isSubscript}
       isSuperscript={isSuperscript}