use-getCachedClassNameArray+ css tweak.

facebook · Dec 9, 2024 · bd18d50 · bd18d50
1 parent c3b1608
commit bd18d50
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 17 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/lexical-playground/src/themes/PlaygroundEditorTheme.css b/packages/lexical-playground/src/themes/PlaygroundEditorTheme.css
@@ -69,7 +69,6 @@
 .PlaygroundEditorTheme__tabNode {
   position: relative;
   text-decoration: none;
-  padding: 0.1em;
 }
 
 .PlaygroundEditorTheme__tabNode.PlaygroundEditorTheme__textUnderline::after {
@@ -86,7 +85,7 @@
   position: absolute;
   left: 0;
   right: 0;
-  top: 0.79em;
+  top: 0.69em;
   border-top: 0.1em solid currentColor;
 }
 
@@ -99,12 +98,12 @@
 }
 
 .PlaygroundEditorTheme__tabNode.PlaygroundEditorTheme__textUnderlineStrikethrough::before {
-  top: 0.79em;
+  top: 0.69em;
   border-top: 0.1em solid currentColor;
 }
 
 .PlaygroundEditorTheme__tabNode.PlaygroundEditorTheme__textUnderlineStrikethrough::after {
-  bottom: 0.15em;
+  bottom: 0.05em;
   border-bottom: 0.1em solid currentColor;
 }
 

diff --git a/packages/lexical/src/nodes/LexicalTabNode.ts b/packages/lexical/src/nodes/LexicalTabNode.ts
@@ -8,13 +8,12 @@
 
 import type {DOMConversionMap, NodeKey} from '../LexicalNode';
 
-import {addClassNamesToElement} from '@lexical/utils';
 import invariant from 'shared/invariant';
 
 import {IS_UNMERGEABLE} from '../LexicalConstants';
 import {EditorConfig} from '../LexicalEditor';
 import {LexicalNode} from '../LexicalNode';
-import {$applyNodeReplacement} from '../LexicalUtils';
+import {$applyNodeReplacement, getCachedClassNameArray} from '../LexicalUtils';
 import {
   SerializedTextNode,
   TextDetailType,
@@ -50,9 +49,14 @@ export class TabNode extends TextNode {
   }
 
   createDOM(config: EditorConfig): HTMLElement {
-    const element = super.createDOM(config);
-    addClassNamesToElement(element, config.theme.tab);
-    return element;
+    const dom = super.createDOM(config);
+    const classNames = getCachedClassNameArray(config.theme, 'tab');
+
+    if (classNames !== undefined) {
+      const domClassList = dom.classList;
+      domClassList.add(...classNames);
+    }
+    return dom;
   }
 
   static importJSON(serializedTabNode: SerializedTabNode): TabNode {