Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Rich Text component #4595

Open
9 of 11 tasks
kof opened this issue Dec 16, 2024 · 0 comments
Open
9 of 11 tasks

Rich Text component #4595

kof opened this issue Dec 16, 2024 · 0 comments
Assignees
@istarkov
Labels
complexity:medium Up to 1 week of work prio:1 The most important thing to work on type:feat Features and enhancements

Comments

@kof
Copy link
Member

kof commented Dec 16, 2024 •
edited by istarkov
Loading

Content block is a better version of Rich Text, here is what's missing

Add:
@kof kof added type:feat Features and enhancements complexity:medium Up to 1 week of work prio:1 The most important thing to work on labels Dec 16, 2024
@kof kof added this to 🚀 Roadmap Dec 16, 2024
@kof kof moved this to 🏗️ In Progress in 🚀 Roadmap Dec 16, 2024
@istarkov istarkov mentioned this issue Dec 19, 2024
Merged
12 tasks
istarkov added a commit that referenced this issue Dec 20, 2024
@istarkov
feat: RichText edit / command menu (#4621)
ea88935 
## Description

ref #4595

Search is working

<img width="246" alt="image"
src="https://github.com/user-attachments/assets/5dc850e4-6a36-4996-9aaa-f051ac7e977f"
/>

Arrow keys, enter, mouse click is working.



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

- [x] - Enter and click
- [ ] - Repeat > N then close menu (later)
- [x] - In case of select item clear cmd `/blabla`
- [x] - Put cursor inside 1st editable block of the new instance
- [x] - 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](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
@istarkov istarkov mentioned this issue Dec 20, 2024
Merged
8 tasks
istarkov added a commit that referenced this issue Dec 20, 2024
@istarkov
experimental: Enter support (#4627)
a27c8b9 
## Description

ref #4595 

- Enter on block creates new paragraph, text or h1 block if any exists
in templates
- New text added through `/` command is fully selected
- If after command block is empty it's replaced with another block
- esc now closes the `/` menu
- backspace on empty now deletes block


Play here


https://p-0b40acbe-34df-4475-8f52-120d5b97da4e-dot-enter.development.webstudio.is/?mode=content

- [x] - Bug (Next PR)
<img width="325" alt="image"
src="https://github.com/user-attachments/assets/0dfa447b-dbfd-4c60-b553-ca041da23a4f"
/>
to reproduce
`Enter`, `/` select Heading, type `blabla`, then `/`, then `Enter`



## 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](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
@istarkov istarkov mentioned this issue Dec 21, 2024
Merged
8 tasks
istarkov added a commit that referenced this issue Dec 21, 2024
@istarkov
experimental: Rich Text list item support (#4633)
1670ea5 
## Description

ref #4595

## Bugs 
- [x] - Empty list items are not considered as editable

## 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](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
@istarkov istarkov mentioned this issue Dec 22, 2024
Merged
7 tasks
istarkov added a commit that referenced this issue Dec 22, 2024
@istarkov
experimental: Pressing Enter within an empty list item deletes the em…
640f9a4 
…pty item (#4641)

## Description

ref #4595

## 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](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
istarkov added a commit that referenced this issue Dec 23, 2024
@istarkov
experimental: Pressing Enter within an empty list item deletes the em…
714ee4a 
…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
@istarkov istarkov mentioned this issue Dec 23, 2024
Merged
9 tasks
istarkov added a commit that referenced this issue Dec 23, 2024
@istarkov
experimental: Use placeholders for editable elements (#4644)
fb67334 
## Description

ref #4595

### TODO:
- [x] - Found bug that deleting last LI does not delete UL
- [x] - Consider removing default texts for paragraph link blockquote
and headings i.e. `Heading text you can edit`


https://p-cfc5b051-3b7a-4a59-a994-44d8d2f8b836-dot-styles.development.webstudio.is/

The following components are considered non-collapsible in **Edit** and
**Content** modes:
*Paragraph*, *Heading*, *ListItem*, *Blockquote*, *Link*.

We are adding placeholders for these components when they are empty,
using the following logic (partially inspired by Notion):

1. **If a component is empty and not being edited**, we display the same
label as shown in the components tree.

![image](https://github.com/user-attachments/assets/a9c41829-ee62-427e-910e-0acd6df1c513)

2. **If a component is empty and being edited**, the behavior depends on
its location:
   - **Inside a content block:**  
- For *Paragraph*, we display: `Write something or press '/' for
commands...`.
     - For all other components, we display the label.  
   - **Outside a content block:**  
     - Always display the label.  

<img width="435" alt="image"
src="https://github.com/user-attachments/assets/96e0c79c-92dc-40c3-a768-db8322a38c3b"
/>


### Update: Default Content Block Component Changed

The default content block component has been updated. Add the new
component

### PS
On Publish and Preview previous behaviour.




## Steps for reproduction

1. click button
4. 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](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
@kof kof moved this from 🏗️ In Progress to 🌐 Released in 🚀 Roadmap Dec 25, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@istarkov istarkov

Labels
complexity:medium Up to 1 week of work prio:1 The most important thing to work on type:feat Features and enhancements
Projects
🚀 Roadmap
Status: 🌐 Released
Milestone
No milestone
Development

No branches or pull requests
2 participants
@kof @istarkov