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

[vantage-ola]

Description

Made some changes to .PlaygroundEditorTheme__textStrikethrough to show strikethroughs on tabs

Closes #6808

Before

After selecting the whole text, it shows the strikethrough is present

After

The slight change in css makes the strikethrough visible

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
lexical	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 10, 2024 6:04am
lexical-playground	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 10, 2024 6:04am

[github-actions]

size-limit report 📦

Path	Size
lexical - cjs	31.11 KB (0%)
lexical - esm	30.98 KB (0%)
@lexical/rich-text - cjs	40.11 KB (0%)
@lexical/rich-text - esm	32.8 KB (0%)
@lexical/plain-text - cjs	38.74 KB (+0.14% 🔺)
@lexical/plain-text - esm	30.11 KB (0%)
@lexical/react - cjs	42 KB (0%)
@lexical/react - esm	34.15 KB (0%)

[vantage-ola]

i took another approach to fixing this.., i just jumped into it without thinking and was in an hurry to fix it... I had even forgotten both underline and strikethrough existed...

the reason I used white-space: pre; is because normally HTML collapses multiple spaces into one, but white-space: pre treats them like <pre> tags

[vantage-ola]

i took another approach to fixing this.., i just jumped into it without thinking and was in an hurry to fix it... I had even forgotten both underline and strikethrough existed...

the reason I used white-space: pre; is because normally HTML collapses multiple spaces into one, but white-space: pre treats them like \<pre\> tags

no need for them actually. 😅 silly me.. i was using display: inline-block; while trying out things...

[etrepum]

The e2e test suite is failing, both in CI here and I can reproduce the failures locally.

  5 failed
    [chromium] › packages/lexical-playground/__tests__/e2e/CodeBlock.spec.mjs:319:3 › CodeBlock › Can maintain indent when creating new lines 
    [chromium] › packages/lexical-playground/__tests__/e2e/CodeBlock.spec.mjs:407:3 › CodeBlock › Can (un)indent multiple lines at once 
    [chromium] › packages/lexical-playground/__tests__/e2e/CodeBlock.spec.mjs:891:3 › CodeBlock › When pressing CMD/Ctrl + Left, CMD/Ctrl + Right, the cursor should go to the start of the code 
    [chromium] › packages/lexical-playground/__tests__/e2e/Tab.spec.mjs:22:3 › Tab › can tab + IME ─
    [chromium] › packages/lexical-playground/__tests__/e2e/Tab.spec.mjs:92:3 › Tab › can tab inside code block #4399 
  21 skipped
  478 passed (6.4m)

You can run these suites locally by having npm run start in one terminal and then in another:

npm run test-e2e-chromium

To run a particular test or suite you can specify another argument, e.g.

npm run test-e2e-chromium packages/lexical-playground/__tests__/e2e/CodeBlock.spec.mjs:319:3

[etrepum]

I think most of these tests failures probably just mean that you have to change the tests to expect the tabNode class, but they need to be fixed nonetheless.

[vantage-ola]

ok, thank you... will take a look at them

[vantage-ola]

i think its good to go now

[etrepum]

Other than the circular dependency I think this is good enough, there are still some slight difference in how the text is rendered which are clear especially when a background color is added but that's just a matter of tweaking the CSS accordingly. Since this CSS is in the playground and not part of the package itself I think that it's acceptable.

Playground

This PR

[etrepum]

There are still some issues with the integrity check, maybe because package-lock.json is still changed unnecessarily, or maybe because there is still a dependency on @lexical/utils in LexicalTabNode.ts. Once you fix it, npm run ci-check should pass locally as well.

[vantage-ola]

the strikethrough, underline or both doesnt align when the font is different, i dont think there is a way the css can accomodate all of the fonts and they will be consistent across the playground editor(i may be wrong).