feat: RichText edit / command menu

[istarkov]

Description

ref #4595

Search is working

Arrow keys, enter, mouse click is working.

https://p-15889dd9-ed47-46db-9411-fa18c1efb2fe-dot-edit.development.webstudio.is/

• - Enter and click
• - Repeat > N then close menu (later)
• - In case of select item clear cmd /blabla
• - Put cursor inside 1st editable block of the new instance
• - Should work only inside editable content

Steps for reproduction

1. click button
2. expect xyz

Code Review

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

Before requesting a review

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

Before merging

• tested locally and on preview environment (preview dev login: 0000)
• updated test cases document
• added tests
• if any new env variables are added, added them to .env file

[johnsicili]

Content Feedback @istarkov

1. I can see a use case for insert within like if you are in a list, add a link or something, it will get inserted after. Low priority.
2. Select the default text when adding. E.g., add paragraph, select text so I can start typing without CMD A backspace. Might be difficult though if we can’t detect default text. Just thinking about writing a page of content having to cmd a delete each time after add
3. I think enter should drop the cursor to the next “row”. Seems enter is pretty useless inside paragraphs, headings, etc. If anything, only shift enter should be used. Plus not allowing enter will prevent misuse of line breaks in paragraphs. So maybe we should do something in between auto adding a new paragraph and adding line breaks upon enter?
4. Seems odd to have to click into an existing instance to add a new one. Not sure what to do here.. maybe what Notion does.
5. Come to think of it, Slash command is useful when it auto adds a paragraph. It’s like a way to convert the existing paragraph to something else. What if we just make “enter” pull up the add dialog? I think it might be more intuitive than adding a / after text like “end of my sentence./“
6. Content mode feedback: Maybe we shouldn’t allot text edit in boxes I don’t think. I just realized when using slash, it put my cursor in an empty box.

8. Content mode feedback: CMD K still works in content mode
9. When using slash in content mode and not in a content block, it’s just a slash. Maybe we need some indication what’s going on here.

[istarkov]

2 Select the default text when adding. E.g., add parag...

If you have an empty paragraph there is no need to select all.

3 Enter ....

not implemented here is / only

4 Seems odd to have to click into an existing ...

What this mean?

6 Content mode feedback: Maybe we shouldn’t allot text edit in boxes I don’t think.

Until boxes are editable and they are, there is no way to distinguish it vs any other editable content. Some flag probably.

8 CMD K still works in content mode

cmd k implementation bug.

9 When using slash in content mode and not in a co

Same in webstudio

[johnsicili]

4 is the biggest feedback so let me explain.

I think we should use "enter" instead of "slash".

Slash is a really great command, but in every implementation of it that I've seen, you use it on a blank line, which is essentially a paragraph.

For our implementation, we are using it to add a new block.

The difference is in the common implementation of it, slash is used to convert blank lines, which are paragraphs, to another element.

In our implementation, slash is used to create a new line and component at the same time.

So I think unless we have a paragraph by default on enter, then "Enter" should be used to add something new. Type, enter, add component.

Also, typing slash within existing content feels odd.

Just a little video show how slash is used on new lines:
https://github.com/user-attachments/assets/9c7d146c-8092-46c5-8798-44f597b3ca22