diff --git a/packages/app/src/features/NoteEditor/RichEditor/__tests__/spec/list/listNesting.browser.test.ts b/packages/app/src/features/NoteEditor/RichEditor/__tests__/spec/list/listNesting.browser.test.ts index 8458b0ab3..6ca907184 100644 --- a/packages/app/src/features/NoteEditor/RichEditor/__tests__/spec/list/listNesting.browser.test.ts +++ b/packages/app/src/features/NoteEditor/RichEditor/__tests__/spec/list/listNesting.browser.test.ts @@ -149,3 +149,37 @@ test('Tab on the first item leaves the list unchanged and keeps editor focus', a expect(editor.getByRole('listitem').nth(0)).toHaveTextContent('First'); expect(editor.getByRole('listitem').nth(1)).toHaveTextContent('Second'); }); + +describe('Visual regression', () => { + test.each([ + { marker: '-', name: 'Unordered list' }, + { marker: '1.', name: 'Ordered list' }, + { marker: '- [ ]', name: 'Todo list' }, + ])('Nested items of $name must have indentation', async ({ marker }) => { + await renderRichEditorInDOM({ + value: [ + `${marker} Level 1 Item 1`, + `\t${marker} Level 2 Item 1`, + `\t\t${marker} Level 3 Item 1`, + `\t${marker} Level 2 Item 2`, + `${marker} Level 1 Item 2`, + ].join('\n'), + }); + + const editor = page.getByRole('textbox'); + const getItemIndent = (text: string) => + editor.getByText(text, { exact: true }).element().getBoundingClientRect().x; + + expect( + getItemIndent('Level 1 Item 1'), + 'Indents are equal on the same level', + ).toBe(getItemIndent('Level 1 Item 2')); + + expect(getItemIndent('Level 2 Item 1')).toBeGreaterThan( + getItemIndent('Level 1 Item 1'), + ); + expect(getItemIndent('Level 3 Item 1')).toBeGreaterThan( + getItemIndent('Level 2 Item 1'), + ); + }); +}); diff --git a/packages/app/src/features/NoteEditor/RichEditor/theme/RichEditor.css b/packages/app/src/features/NoteEditor/RichEditor/theme/RichEditor.css index 0749bc4be..bef2cdd9e 100644 --- a/packages/app/src/features/NoteEditor/RichEditor/theme/RichEditor.css +++ b/packages/app/src/features/NoteEditor/RichEditor/theme/RichEditor.css @@ -521,8 +521,8 @@ } } -/* No start padding for nested list, because li already have the one */ -.RichEditor__nestedListItem > .RichEditor__ul { +/* Checklist have no padding since checkbox is placed inside list item */ +.RichEditor__checklist { padding-inline-start: 0; }