[lexical-table][lexical-playground] Bug Fix: Make style buttons in to…

…olbar respect table selection (#6678)

Co-authored-by: Ivaylo Pavlov <ivailo90@gmail.com>

packages/lexical-playground/src/plugins/ToolbarPlugin/index.tsx

@@ -578,14 +578,6 @@ export default function ToolbarPlugin({
       const elementKey = element.getKey();
       const elementDOM = activeEditor.getElementByKey(elementKey);
 
-      // Update text format
-      setIsBold(selection.hasFormat('bold'));
-      setIsItalic(selection.hasFormat('italic'));
-      setIsUnderline(selection.hasFormat('underline'));
-      setIsStrikethrough(selection.hasFormat('strikethrough'));
-      setIsSubscript(selection.hasFormat('subscript'));
-      setIsSuperscript(selection.hasFormat('superscript'));
-      setIsCode(selection.hasFormat('code'));
       setIsRTL($isParentElementRTL(selection));
 
       // Update links
@@ -665,6 +657,15 @@ export default function ToolbarPlugin({
       );
     }
     if ($isRangeSelection(selection) || $isTableSelection(selection)) {
+      // Update text format
+      setIsBold(selection.hasFormat('bold'));
+      setIsItalic(selection.hasFormat('italic'));
+      setIsUnderline(selection.hasFormat('underline'));
+      setIsStrikethrough(selection.hasFormat('strikethrough'));
+      setIsSubscript(selection.hasFormat('subscript'));
+      setIsSuperscript(selection.hasFormat('superscript'));
+      setIsCode(selection.hasFormat('code'));
+
       setFontSize(
         $getSelectionStyleValueForProperty(selection, 'font-size', '15px'),
       );

packages/lexical-table/src/LexicalTableSelection.ts

@@ -11,12 +11,15 @@ import {
   $createPoint,
   $getNodeByKey,
   $isElementNode,
+  $isParagraphNode,
   $normalizeSelection__EXPERIMENTAL,
   BaseSelection,
   isCurrentlyReadOnlyMode,
   LexicalNode,
   NodeKey,
   PointType,
+  TEXT_TYPE_TO_FORMAT,
+  TextFormatType,
 } from 'lexical';
 import invariant from 'shared/invariant';
 
@@ -116,6 +119,28 @@ export class TableSelection implements BaseSelection {
     // Do nothing?
   }
 
+  /**
+   * Returns whether the provided TextFormatType is present on the Selection.
+   * This will be true if any paragraph in table cells has the specified format.
+   *
+   * @param type the TextFormatType to check for.
+   * @returns true if the provided format is currently toggled on on the Selection, false otherwise.
+   */
+  hasFormat(type: TextFormatType): boolean {
+    let format = 0;
+
+    const cellNodes = this.getNodes().filter($isTableCellNode);
+    cellNodes.forEach((cellNode: TableCellNode) => {
+      const paragraph = cellNode.getFirstChild();
+      if ($isParagraphNode(paragraph)) {
+        format |= paragraph.getTextFormat();
+      }
+    });
+
+    const formatFlag = TEXT_TYPE_TO_FORMAT[type];
+    return (format & formatFlag) !== 0;
+  }
+
   insertNodes(nodes: Array<LexicalNode>) {
     const focusNode = this.focus.getNode();
     invariant(