experimental: Pressing Enter within an empty list item deletes the em…

…pty item (#4641)

ref #4595

1. click button
2. expect xyz

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file

apps/builder/app/canvas/features/text-editor/text-editor.tsx

@@ -1127,7 +1127,11 @@ const RichTextContentPluginInternal = ({
               .get()
               .get(rootInstanceSelector[0]);
 
-            if (currentInstance?.component === "ListItem") {
+            const rootNodeContent = $getRoot().getTextContent().trim();
+            if (
+              currentInstance?.component === "ListItem" &&
+              rootNodeContent.length > 0
+            ) {
               // Instead of creating block component we need to add a new ListItem
               insertListItemAt(rootInstanceSelector);
               event.preventDefault();
@@ -1183,6 +1187,16 @@ const RichTextContentPluginInternal = ({
 
               insertTemplateAt(templateSelector, rootInstanceSelector, false);
 
+              if (
+                currentInstance?.component === "ListItem" &&
+                rootNodeContent.length === 0
+              ) {
+                // Pressing Enter within an empty list item deletes the empty item
+                updateWebstudioData((data) => {
+                  deleteInstanceMutable(data, rootInstanceSelector);
+                });
+              }
+
               event.preventDefault();
               return true;
             }