[@lexical/playground] fix: block cursor show horizontal

[keiseiTi]

Description

Describe the changes in this pull request

fix lexical PlaygroundEditor Theme blockCursor show

RE #6459

Test plan

Before

Insert relevant screenshots/recordings/automated-tests

not need test

After

Insert relevant screenshots/recordings/automated-tests

not need test

[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	Aug 1, 2024 3:16pm
lexical-playground	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 1, 2024 3:16pm

[facebook-github-bot]

Hi @keiseiTi!

Thank you for your pull request and welcome to our community.

Action Required

In order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you.

Process

In order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA.

Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with CLA signed. The tagging process may take up to 1 hour after signing. Please give it that time before contacting us about it.

If you have received this in error or have any questions, please contact us at cla@meta.com. Thanks!

[github-actions]

size-limit report 📦

Path	Size
lexical - cjs	29.05 KB (0%)
lexical - esm	28.86 KB (0%)
@lexical/rich-text - cjs	37.39 KB (0%)
@lexical/rich-text - esm	28.33 KB (0%)
@lexical/plain-text - cjs	36.02 KB (0%)
@lexical/plain-text - esm	25.6 KB (0%)
@lexical/react - cjs	39.29 KB (0%)
@lexical/react - esm	29.77 KB (0%)

[facebook-github-bot]

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Meta Open Source project. Thanks!

[potatowagon]

could we have some screenshots to highlight the differences in the before & after please?

[keiseiTi]

could we have some screenshots to highlight the differences in the before & after please?

Before

After

[etrepum]

I changed the PR description because this does not close #6459 (the table cell is still deleted) but it does fix the cursor display

[ivailop7]

@etrepum, let's revert this one. The block cursor is intended to be an underline. This now brakes when you have a table as first cell and move the cursor before the table. The reason it only works for the horizontal line is because of the CSS margins.

[etrepum]

@ivailop7 It looks like it works to me? This is playground css so if a user has their own css that would make this hard to see (e.g. table border of the same color) they could change it accordingly

vertical-cursor.mov

[etrepum]

Another RTE that I could find that supported this state had similar tall vertical cursor behavior next to a table: https://richtexteditor.com/Demos/table-support.aspx

Although this one has an underline cursor above the table
https://prosemirror-tables.netlify.app/

The other editors I could find wouldn't let you get into that selection state

[ivailop7]

@ivailop7 It looks like it works to me? This is playground css so if a user has their own css that would make this hard to see (e.g. table border of the same color) they could change it accordingly

vertical-cursor.mov

Press up from that position.

[keiseiTi]

This is the editor of Yuque (a Chinese document website), and the cursor of the horizontal line in its table looks like this.

I also tried other editor interactions and they all seemed to behave differently. So it depends on how you define the interaction.

[turnerguo]

https://prosemirror-tables.netlify.app/
I think ProseMirror's cursor intension is much more clear.
For Horizontal Line it should be a horizontal cursor their.