diff --git a/packages/lexical-playground/src/Editor.tsx b/packages/lexical-playground/src/Editor.tsx
index 5def8e18c01..0b237c380ac 100644
--- a/packages/lexical-playground/src/Editor.tsx
+++ b/packages/lexical-playground/src/Editor.tsx
@@ -28,7 +28,6 @@ import {useSharedHistoryContext} from './context/SharedHistoryContext';
 import ActionsPlugin from './plugins/ActionsPlugin';
 import AutocompletePlugin from './plugins/AutocompletePlugin';
 import AutoLinkPlugin from './plugins/AutoLinkPlugin';
-import CharacterStylesPopupPlugin from './plugins/CharacterStylesPopupPlugin';
 import ClickableLinkPlugin from './plugins/ClickableLinkPlugin';
 import CodeHighlightPlugin from './plugins/CodeHighlightPlugin';
 import CommentPlugin from './plugins/CommentPlugin';
@@ -47,6 +46,7 @@ import SpeechToTextPlugin from './plugins/SpeechToTextPlugin';
 import TabFocusPlugin from './plugins/TabFocusPlugin';
 import TableCellActionMenuPlugin from './plugins/TableActionMenuPlugin';
 import TableCellResizer from './plugins/TableCellResizer';
+import TextFormatFloatingToolbarPlugin from './plugins/TextFormatFloatingToolbarPlugin';
 import ToolbarPlugin from './plugins/ToolbarPlugin';
 import TreeViewPlugin from './plugins/TreeViewPlugin';
 import TwitterPlugin from './plugins/TwitterPlugin';
@@ -132,7 +132,7 @@ export default function Editor(): JSX.Element {
             <YouTubePlugin />
             <ClickableLinkPlugin />
             <HorizontalRulePlugin />
-            <CharacterStylesPopupPlugin />
+            <TextFormatFloatingToolbarPlugin />
             <EquationsPlugin />
             <ExcalidrawPlugin />
             <TabFocusPlugin />
diff --git a/packages/lexical-playground/src/index.css b/packages/lexical-playground/src/index.css
index 4b055b7238f..6774b44afe3 100644
--- a/packages/lexical-playground/src/index.css
+++ b/packages/lexical-playground/src/index.css
@@ -1396,7 +1396,7 @@ button.action-button:disabled {
   background-image: url(images/icons/x-lg.svg);
 }
 
-.character-style-popup {
+.floating-text-format-popup {
   display: flex;
   margin-bottom: 1px;
   background: #fff;
@@ -1415,7 +1415,7 @@ button.action-button:disabled {
   height: 35px;
 }
 
-.character-style-popup button.popup-item {
+.floating-text-format-popup button.popup-item {
   border: 0;
   display: flex;
   background: none;
@@ -1425,15 +1425,15 @@ button.action-button:disabled {
   vertical-align: middle;
 }
 
-.character-style-popup button.popup-item:disabled {
+.floating-text-format-popup button.popup-item:disabled {
   cursor: not-allowed;
 }
 
-.character-style-popup button.popup-item.spaced {
+.floating-text-format-popup button.popup-item.spaced {
   margin-right: 2px;
 }
 
-.character-style-popup button.popup-item i.format {
+.floating-text-format-popup button.popup-item i.format {
   background-size: contain;
   display: inline-block;
   height: 18px;
@@ -1444,23 +1444,23 @@ button.action-button:disabled {
   opacity: 0.6;
 }
 
-.character-style-popup button.popup-item:disabled i.format {
+.floating-text-format-popup button.popup-item:disabled i.format {
   opacity: 0.2;
 }
 
-.character-style-popup button.popup-item.active {
+.floating-text-format-popup button.popup-item.active {
   background-color: rgba(223, 232, 250, 0.3);
 }
 
-.character-style-popup button.popup-item.active i {
+.floating-text-format-popup button.popup-item.active i {
   opacity: 1;
 }
 
-.character-style-popup .popup-item:hover:not([disabled]) {
+.floating-text-format-popup .popup-item:hover:not([disabled]) {
   background-color: #eee;
 }
 
-.character-style-popup select.popup-item {
+.floating-text-format-popup select.popup-item {
   border: 0;
   display: flex;
   background: none;
@@ -1475,12 +1475,12 @@ button.action-button:disabled {
   text-overflow: ellipsis;
 }
 
-.character-style-popup select.code-language {
+.floating-text-format-popup select.code-language {
   text-transform: capitalize;
   width: 130px;
 }
 
-.character-style-popup .popup-item .text {
+.floating-text-format-popup .popup-item .text {
   display: flex;
   line-height: 20px;
   width: 200px;
@@ -1494,7 +1494,7 @@ button.action-button:disabled {
   text-align: left;
 }
 
-.character-style-popup .popup-item .icon {
+.floating-text-format-popup .popup-item .icon {
   display: flex;
   width: 20px;
   height: 20px;
@@ -1504,7 +1504,7 @@ button.action-button:disabled {
   background-size: contain;
 }
 
-.character-style-popup i.chevron-down {
+.floating-text-format-popup i.chevron-down {
   margin-top: 3px;
   width: 16px;
   height: 16px;
@@ -1512,7 +1512,7 @@ button.action-button:disabled {
   user-select: none;
 }
 
-.character-style-popup i.chevron-down.inside {
+.floating-text-format-popup i.chevron-down.inside {
   width: 16px;
   height: 16px;
   display: flex;
@@ -1522,7 +1522,7 @@ button.action-button:disabled {
   pointer-events: none;
 }
 
-.character-style-popup .divider {
+.floating-text-format-popup .divider {
   width: 1px;
   background-color: #eee;
   margin: 0 4px;
diff --git a/packages/lexical-playground/src/plugins/CharacterStylesPopupPlugin.tsx b/packages/lexical-playground/src/plugins/TextFormatFloatingToolbarPlugin.tsx
similarity index 93%
rename from packages/lexical-playground/src/plugins/CharacterStylesPopupPlugin.tsx
rename to packages/lexical-playground/src/plugins/TextFormatFloatingToolbarPlugin.tsx
index c66a87832ef..8f29ae28021 100644
--- a/packages/lexical-playground/src/plugins/CharacterStylesPopupPlugin.tsx
+++ b/packages/lexical-playground/src/plugins/TextFormatFloatingToolbarPlugin.tsx
@@ -57,7 +57,7 @@ function setPopupPosition(
   editor.style.left = `${left}px`;
 }
 
-function FloatingCharacterStylesEditor({
+function TextFormatFloatingToolbar({
   editor,
   isLink,
   isBold,
@@ -92,7 +92,7 @@ function FloatingCharacterStylesEditor({
     editor.dispatchCommand(INSERT_INLINE_COMMAND, null);
   };
 
-  const updateCharacterStylesEditor = useCallback(() => {
+  const updateTextFormatFloatingToolbar = useCallback(() => {
     const selection = $getSelection();
 
     const popupCharStylesEditorElem = popupCharStylesEditorRef.current;
@@ -131,7 +131,7 @@ function FloatingCharacterStylesEditor({
   useEffect(() => {
     const onResize = () => {
       editor.getEditorState().read(() => {
-        updateCharacterStylesEditor();
+        updateTextFormatFloatingToolbar();
       });
     };
     window.addEventListener('resize', onResize);
@@ -139,32 +139,32 @@ function FloatingCharacterStylesEditor({
     return () => {
       window.removeEventListener('resize', onResize);
     };
-  }, [editor, updateCharacterStylesEditor]);
+  }, [editor, updateTextFormatFloatingToolbar]);
 
   useEffect(() => {
     editor.getEditorState().read(() => {
-      updateCharacterStylesEditor();
+      updateTextFormatFloatingToolbar();
     });
     return mergeRegister(
       editor.registerUpdateListener(({editorState}) => {
         editorState.read(() => {
-          updateCharacterStylesEditor();
+          updateTextFormatFloatingToolbar();
         });
       }),
 
       editor.registerCommand(
         SELECTION_CHANGE_COMMAND,
         () => {
-          updateCharacterStylesEditor();
+          updateTextFormatFloatingToolbar();
           return false;
         },
         COMMAND_PRIORITY_LOW,
       ),
     );
-  }, [editor, updateCharacterStylesEditor]);
+  }, [editor, updateTextFormatFloatingToolbar]);
 
   return (
-    <div ref={popupCharStylesEditorRef} className="character-style-popup">
+    <div ref={popupCharStylesEditorRef} className="floating-text-format-popup">
       <button
         onClick={() => {
           editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold');
@@ -255,7 +255,9 @@ function getSelectedNode(selection: RangeSelection): TextNode | ElementNode {
   }
 }
 
-function useCharacterStylesPopup(editor: LexicalEditor): JSX.Element | null {
+function useTextFormatFloatingToolbar(
+  editor: LexicalEditor,
+): JSX.Element | null {
   const [isText, setIsText] = useState(false);
   const [isLink, setIsLink] = useState(false);
   const [isBold, setIsBold] = useState(false);
@@ -334,7 +336,7 @@ function useCharacterStylesPopup(editor: LexicalEditor): JSX.Element | null {
   }
 
   return createPortal(
-    <FloatingCharacterStylesEditor
+    <TextFormatFloatingToolbar
       editor={editor}
       isLink={isLink}
       isBold={isBold}
@@ -349,7 +351,7 @@ function useCharacterStylesPopup(editor: LexicalEditor): JSX.Element | null {
   );
 }
 
-export default function CharacterStylesPopupPlugin(): JSX.Element | null {
+export default function TextFormatFloatingToolbarPlugin(): JSX.Element | null {
   const [editor] = useLexicalComposerContext();
-  return useCharacterStylesPopup(editor);
+  return useTextFormatFloatingToolbar(editor);
 }