[lexical-playground] fix: hard coded theme classes for table hover ac…

…tions (#7182)
facebook · Feb 22, 2025 · 90bc029 · 90bc029
1 parent a5c26cf
commit 90bc029
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 9 deletions.
diff --git a/packages/lexical-playground/src/plugins/TableHoverActionsPlugin/index.tsx b/packages/lexical-playground/src/plugins/TableHoverActionsPlugin/index.tsx
@@ -24,11 +24,17 @@ import {
   TableRowNode,
 } from '@lexical/table';
 import {$findMatchingParent, mergeRegister} from '@lexical/utils';
-import {$getNearestNodeFromDOMNode, isHTMLElement, NodeKey} from 'lexical';
+import {
+  $getNearestNodeFromDOMNode,
+  EditorThemeClasses,
+  isHTMLElement,
+  NodeKey,
+} from 'lexical';
 import {useEffect, useMemo, useRef, useState} from 'react';
 import * as React from 'react';
 import {createPortal} from 'react-dom';
 
+import {getThemeSelector} from '../../utils/getThemeSelector';
 import {useDebounce} from '../CodeActionMenuPlugin/utils';
 
 const BUTTON_WIDTH_PX = 20;
@@ -38,7 +44,7 @@ function TableHoverActionsContainer({
 }: {
   anchorElem: HTMLElement;
 }): JSX.Element | null {
-  const [editor] = useLexicalComposerContext();
+  const [editor, {getTheme}] = useLexicalComposerContext();
   const isEditable = useLexicalEditable();
   const [isShownRow, setShownRow] = useState<boolean>(false);
   const [isShownColumn, setShownColumn] = useState<boolean>(false);
@@ -50,7 +56,7 @@ function TableHoverActionsContainer({
 
   const debouncedOnMouseMove = useDebounce(
     (event: MouseEvent) => {
-      const {isOutside, tableDOMNode} = getMouseInfo(event);
+      const {isOutside, tableDOMNode} = getMouseInfo(event, getTheme);
 
       if (isOutside) {
         setShownRow(false);
@@ -256,14 +262,14 @@ function TableHoverActionsContainer({
     <>
       {isShownRow && (
         <button
-          className={'PlaygroundEditorTheme__tableAddRows'}
+          className={`${getTheme()?.tableAddRows}`}
           style={{...position}}
           onClick={() => insertAction(true)}
         />
       )}
       {isShownColumn && (
         <button
-          className={'PlaygroundEditorTheme__tableAddColumns'}
+          className={`${getTheme()?.tableAddColumns}`}
           style={{...position}}
           onClick={() => insertAction(false)}
         />
@@ -272,24 +278,28 @@ function TableHoverActionsContainer({
   );
 }
 
-function getMouseInfo(event: MouseEvent): {
+function getMouseInfo(
+  event: MouseEvent,
+  getTheme: () => EditorThemeClasses | null | undefined,
+): {
   tableDOMNode: HTMLElement | null;
   isOutside: boolean;
 } {
   const target = event.target;
+  const tableCellClass = getThemeSelector(getTheme, 'tableCell');
 
   if (isHTMLElement(target)) {
     const tableDOMNode = target.closest<HTMLElement>(
-      'td.PlaygroundEditorTheme__tableCell, th.PlaygroundEditorTheme__tableCell',
+      `td${tableCellClass}, th${tableCellClass}`,
     );
 
     const isOutside = !(
       tableDOMNode ||
       target.closest<HTMLElement>(
-        'button.PlaygroundEditorTheme__tableAddRows',
+        `button${getThemeSelector(getTheme, 'tableAddRows')}`,
       ) ||
       target.closest<HTMLElement>(
-        'button.PlaygroundEditorTheme__tableAddColumns',
+        `button${getThemeSelector(getTheme, 'tableAddColumns')}`,
       ) ||
       target.closest<HTMLElement>('div.TableCellResizer__resizer')
     );

diff --git a/packages/lexical-playground/src/themes/PlaygroundEditorTheme.ts b/packages/lexical-playground/src/themes/PlaygroundEditorTheme.ts
@@ -93,6 +93,8 @@ const theme: EditorThemeClasses = {
   specialText: 'PlaygroundEditorTheme__specialText',
   tab: 'PlaygroundEditorTheme__tabNode',
   table: 'PlaygroundEditorTheme__table',
+  tableAddColumns: 'PlaygroundEditorTheme__tableAddColumns',
+  tableAddRows: 'PlaygroundEditorTheme__tableAddRows',
   tableAlignment: {
     center: 'PlaygroundEditorTheme__tableAlignmentCenter',
     right: 'PlaygroundEditorTheme__tableAlignmentRight',

diff --git a/packages/lexical-playground/src/utils/getThemeSelector.ts b/packages/lexical-playground/src/utils/getThemeSelector.ts
@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import {EditorThemeClasses} from 'lexical';
+import invariant from 'shared/invariant';
+
+export function getThemeSelector(
+  getTheme: () => EditorThemeClasses | null | undefined,
+  name: keyof EditorThemeClasses,
+): string {
+  const className = getTheme()?.[name];
+  invariant(
+    typeof className === 'string',
+    'getThemeClass: required theme property %s not defined',
+    String(name),
+  );
+  return className
+    .split(/\s+/g)
+    .map((cls) => `.${cls}`)
+    .join();
+}