Skip to content

HTMLEditor: Fix nested numbered list counter resetting (T1320286) #32582

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

Open
r-farkhutdinov wants to merge 3 commits into
base: 26_1
Choose a base branch
from
+51 −2
Open

HTMLEditor: Fix nested numbered list counter resetting (T1320286) #32582

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2ef5409
HTMLEditor: Fix nested numbered list counter resetting (T1320286)
Feb 16, 2026
781fb25
HTMLEditor: Add screenshot test (T1320286)
Feb 16, 2026
07d3c8c
HTMLEditor: Update etalon
Feb 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added ...lEditor/etalons/htmleditor-ordered-list-text-appearance (fluent.blue.light).png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
34 changes: 34 additions & 0 deletions e2e/testcafe-devextreme/tests/editors/htmlEditor/list.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,24 @@ const orderedListMarkup = `
</ol>
`;

const orderedListWithTextMarkup = `
<p>Text</p>
<ol>
<li>Text
<ol>
<li>1</li>
<li>2</li>
</ol>
</li>
<li>Text
<ol>
<li>1</li>
<li>2</li>
</ol>
</li>
</ol>
`;

fixture`HtmlEditor - lists`
.page(url(__dirname, '../../container-extended.html'));

Expand All @@ -42,3 +60,19 @@ test('ordered list numbering sequence should reset for each list item (T1220554)
value: orderedListMarkup,
});
});

test('should reset nested ordered list counters when preceded by text (T1320286)', async (t) => {
const { takeScreenshot, compareResults } = createScreenshotsComparer(t);

await testScreenshot(t, takeScreenshot, 'htmleditor-ordered-list-text-appearance.png', { element: '#container' });

await t
.expect(compareResults.isValid())
.ok(compareResults.errorMessages());
}).before(async () => {
await createWidget('dxHtmlEditor', {
height: 200,
width: 200,
value: orderedListWithTextMarkup,
});
});
19 changes: 17 additions & 2 deletions packages/devextreme-scss/scss/widgets/base/_htmlEditor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,14 @@ $transparent-border: 1px solid transparent;
@return list-#{$counter};
}

@function add-counter-set($counter, $start: 1) {
@if $counter > $start {
@return add-counter-set($counter - 1, $start) + " " + list-#{$counter} + " 0";
}

@return list-#{$counter} + " 0";
}

@mixin if-less-then-max-indent($value) {
@if $value < $max-indent {
li.ql-indent-#{$value} {
Expand Down Expand Up @@ -196,7 +204,11 @@ $transparent-border: 1px solid transparent;
padding: 2px 5px;
}

ol,
ol {
padding-inline-start: 1.5em;
counter-reset: add-counter-reset($max-indent);
}

ul {
padding-inline-start: 1.5em;
}
Expand Down Expand Up @@ -240,14 +252,17 @@ $transparent-border: 1px solid transparent;
}

li[data-list="ordered"] {
counter-reset: add-counter-reset($max-indent);
counter-increment: list-0;

&::before {
content: counter(list-0, list.nth($list-style, 1)) ". ";
}
}

li[data-list="ordered"]:not([class*="ql-indent"]) {
counter-set: add-counter-set($max-indent);
Copy link

Copilot AI Feb 16, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The CSS counter-set property has limited browser support, particularly in older Safari versions (requires Safari 17.2+, December 2023). While the browserslist configuration targets the last 2 versions of major browsers, you should verify that this CSS property is compatible with your target browsers. Consider testing this change across different browsers, especially Safari, to ensure the nested list counters display correctly. If compatibility issues arise, you may need to implement a fallback or polyfill approach.

Suggested change
counter-set: add-counter-set($max-indent);
counter-reset: add-counter-set($max-indent);

Copilot uses AI. Check for mistakes.
}

@include add-counter($max-indent);
@include add-indent-styles($max-indent);

Expand Down
Loading