From bd18d5091c9d16e04f530c0f2b2e5d385baff43d Mon Sep 17 00:00:00 2001
From: vantage-ola <vantageola4@gmail.com>
Date: Mon, 9 Dec 2024 15:40:52 +0100
Subject: [PATCH] use-getCachedClassNameArray+ css tweak.

---
 package-lock.json                                  | 10 ++--------
 .../src/themes/PlaygroundEditorTheme.css           |  7 +++----
 packages/lexical/src/nodes/LexicalTabNode.ts       | 14 +++++++++-----
 3 files changed, 14 insertions(+), 17 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index efbff844da3..e5387c0ffdc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -38927,10 +38927,7 @@
     },
     "packages/lexical": {
       "version": "0.21.0",
-      "license": "MIT",
-      "dependencies": {
-        "@lexical/utils": "^0.21.0"
-      }
+      "license": "MIT"
     },
     "packages/lexical-clipboard": {
       "name": "@lexical/clipboard",
@@ -56239,10 +56236,7 @@
       }
     },
     "lexical": {
-      "version": "file:packages/lexical",
-      "requires": {
-        "@lexical/utils": "0.21.0"
-      }
+      "version": "file:packages/lexical"
     },
     "lexical-playground": {
       "version": "file:packages/lexical-playground",
diff --git a/packages/lexical-playground/src/themes/PlaygroundEditorTheme.css b/packages/lexical-playground/src/themes/PlaygroundEditorTheme.css
index 1bb1458e4a8..031173135f9 100644
--- 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
index f8bf95e1bb7..8c5999b33c2 100644
--- 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 {