diff --git a/packages/lexical-playground/src/plugins/ToolbarPlugin/index.tsx b/packages/lexical-playground/src/plugins/ToolbarPlugin/index.tsx index b32d841c7ec..7ce9abbdbcc 100644 --- a/packages/lexical-playground/src/plugins/ToolbarPlugin/index.tsx +++ b/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'), ); diff --git a/packages/lexical-table/src/LexicalTableSelection.ts b/packages/lexical-table/src/LexicalTableSelection.ts index acb80d2a20d..03c8543cb73 100644 --- a/packages/lexical-table/src/LexicalTableSelection.ts +++ b/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) { const focusNode = this.focus.getNode(); invariant(