[lexical-playground] Fix: tabs do not show strikethrough/underline

packages/lexical-playground/src/themes/PlaygroundEditorTheme.css

@@ -57,12 +57,30 @@
 .PlaygroundEditorTheme__textUnderline {
   text-decoration: underline;
 }
+
 .PlaygroundEditorTheme__textStrikethrough {
   text-decoration: line-through;
 }
+
 .PlaygroundEditorTheme__textUnderlineStrikethrough {
   text-decoration: underline line-through;
 }
+
+.PlaygroundEditorTheme__tabNode {
+  position: relative;
+}
+
+/* affected tabs
+.PlaygroundEditorTheme__tabNode.PlaygroundEditorTheme__textUnderline {
+}
+
+.PlaygroundEditorTheme__tabNode.PlaygroundEditorTheme__textStrikethrough {
+}
+
+.PlaygroundEditorTheme__tabNode.PlaygroundEditorTheme__textUnderlineStrikethrough {
+}
+
+*/
 .PlaygroundEditorTheme__textSubscript {
   font-size: 0.8em;
   vertical-align: sub !important;

packages/lexical/src/nodes/LexicalTabNode.ts

@@ -11,6 +11,7 @@ import type {DOMConversionMap, NodeKey} from '../LexicalNode';
 import invariant from 'shared/invariant';
 
 import {IS_UNMERGEABLE} from '../LexicalConstants';
+import {EditorConfig} from '../LexicalEditor';
 import {LexicalNode} from '../LexicalNode';
 import {$applyNodeReplacement} from '../LexicalUtils';
 import {
@@ -47,6 +48,12 @@ export class TabNode extends TextNode {
     return null;
   }
 
+  createDOM(config: EditorConfig): HTMLElement {
+    const dom = super.createDOM(config);
+    dom.classList.add('PlaygroundEditorTheme__tabNode');
+    return dom;
+  }
+
   static importJSON(serializedTabNode: SerializedTabNode): TabNode {
     const node = $createTabNode();
     node.setFormat(serializedTabNode.format);