Skip to content

Commit

Permalink
add capitalization formats to floating toolbar
Browse files Browse the repository at this point in the history
  • Loading branch information
Shopiley committed Dec 12, 2024
1 parent 44f2078 commit 16937b4
Showing 1 changed file with 42 additions and 0 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,9 @@ function TextFormatFloatingToolbar({
isBold,
isItalic,
isUnderline,
isUppercase,
isLowercase,
isCapitalize,
isCode,
isStrikethrough,
isSubscript,
Expand All @@ -51,6 +54,9 @@ function TextFormatFloatingToolbar({
isCode: boolean;
isItalic: boolean;
isLink: boolean;
isUppercase: boolean;
isLowercase: boolean;
isCapitalize: boolean;
isStrikethrough: boolean;
isSubscript: boolean;
isSuperscript: boolean;
Expand Down Expand Up @@ -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={() => {
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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'));
Expand Down Expand Up @@ -378,6 +417,9 @@ function useFloatingTextFormatToolbar(
isLink={isLink}
isBold={isBold}
isItalic={isItalic}
isUppercase={isUppercase}
isLowercase={isLowercase}
isCapitalize={isCapitalize}
isStrikethrough={isStrikethrough}
isSubscript={isSubscript}
isSuperscript={isSuperscript}
Expand Down

0 comments on commit 16937b4

Please sign in to comment.