Skip to content

feat: solve the problem of numbers changing after li tag indentation #469

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
wuyiping0628 wants to merge 1 commit into
base: dev
Choose a base branch
from
Open

feat: solve the problem of numbers changing after li tag indentation #469

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
36 changes: 36 additions & 0 deletions packages/fluent-editor/src/assets/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,6 +125,10 @@
content: counter(list-1, lower-alpha) '. ';
}

li.ql-indent-1 .ql-ui:before {
content: counter(list-1, decimal) '. ' !important;
}
Comment on lines +128 to +130
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot May 13, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟠 Major | ⚖️ Poor tradeoff

Consider the impact of forcing all indent levels to decimal numbering.

The new rules override the original varied counter styles with uniform decimal numbering:

  • Original indent-1: lower-alpha (a, b, c) → Now: decimal (1, 2, 3)
  • Original indent-2: lower-roman (i, ii, iii) → Now: decimal (1, 2, 3)
  • Original indent-4: lower-alpha → Now: decimal
  • Original indent-5: lower-roman → Now: decimal
  • Original indent-7: lower-alpha → Now: decimal
  • Original indent-8: lower-roman → Now: decimal

While this change solves the stated problem of "numbers changing after indentation," it eliminates the visual hierarchy that different numbering styles provide in deeply nested lists. Users may find it harder to distinguish nesting levels when all levels use the same decimal format.

If the varied styles are intentionally being removed, consider documenting this behavior change and its UX implications. If the original varied styles should be preserved while fixing the indentation bug, the root cause may require a different solution.

Also applies to: 144-146, 160-162, 176-178, 192-194, 208-210, 224-226, 240-242, 256-258

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/fluent-editor/src/assets/editor.scss` around lines 128 - 130, The
change forces all nested list counters to decimal (e.g., li.ql-indent-1
.ql-ui:before) which removes the original varied styles (lower-alpha,
lower-roman) and harms visual hierarchy; restore the original counter styles per
indent level instead of using decimal for all indents (reapply the previous
counter(...) values for li.ql-indent-1, li.ql-indent-2, li.ql-indent-4,
li.ql-indent-5, li.ql-indent-7, li.ql-indent-8) or implement a mapping from
indent level to counter style and use that in the .ql-ui:before rules, and apply
the same fix to the other modified blocks mentioned (lines around 144-146,
160-162, 176-178, 192-194, 208-210, 224-226, 240-242, 256-258) so numbering
styles preserve nesting distinctions.

⚠️ Potential issue | 🟠 Major | ⚡ Quick win

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Verify when .ql-ui elements are used and whether they coexist with li::before markers

# Search for .ql-ui usage in JavaScript/TypeScript files
echo "=== Searching for .ql-ui element creation and usage ==="
rg -n -C3 --type=ts --type=js 'ql-ui' -g '!*.scss' -g '!*.css'

# Check if there's logic that conditionally uses .ql-ui vs li::before
echo -e "\n=== Checking for list rendering logic ==="
rg -n -C5 --type=ts --type=js 'ordered.*indent|indent.*ordered' -g '!*.scss'

# Look for bullet list handling with indent classes
echo -e "\n=== Checking bullet list + indent interaction ==="
rg -n -C3 --type=ts --type=js 'bullet.*ql-indent|ql-indent.*bullet'

Repository: opentiny/tiny-editor

Length of output: 3138

🏁 Script executed:

cat -n packages/fluent-editor/src/assets/editor.scss | head -280

Repository: opentiny/tiny-editor

Length of output: 7290

🏁 Script executed:

rg -n "li\.ordered\.ql-indent|li\.ql-indent" packages/fluent-editor/src/assets/editor.scss

Repository: opentiny/tiny-editor

Length of output: 1345

Remove or refactor the new li.ql-indent-{1-9} .ql-ui:before rules to avoid dual marker rendering and selector scope conflicts.

The new rules at lines 128–258 introduce two critical problems:

  1. Dual marker rendering: Both li.ordered.ql-indent-1::before (line 124) and li.ql-indent-1 .ql-ui:before (line 128) target the same list item. Since they render on different DOM elements (the <li> itself vs. its .ql-ui child span), both markers will display simultaneously if the .ql-ui element is present.

  2. Selector scope too broad: The new selector li.ql-indent-1 matches any <li> with that class, including unordered lists. From the DOM evidence, both <li class="ordered"> and <li class="bullet"> contain .ql-ui children, meaning bullet lists will incorrectly display decimal counters via the new rules with !important, overriding any intended styling.

Additionally, all nine new rules use uniform decimal formatting, discarding the original visual hierarchy of alternating formats (lower-alpha, lower-roman, decimal). Consider either removing these new rules if the original li.ordered.ql-indent-n::before approach is now working, or replace them with a single SCSS mixin to reduce duplication and improve maintainability.

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/fluent-editor/src/assets/editor.scss` around lines 128 - 130, The
new rules like "li.ql-indent-1 .ql-ui:before" are causing dual markers and
overbroad matching (affecting bullets) and overwrite the original ordered styles
("li.ordered.ql-indent-1::before"); remove or refactor those ".ql-ui:before"
rules so they don't conflict: either delete the nine "li.ql-indent-{1-9}
.ql-ui:before" selectors if the existing "li.ordered.ql-indent-{n}::before"
rules already render correctly, or replace them with a single SCSS mixin that
only applies to ordered lists (guarded by the ".ordered" class) and preserves
the alternating formats (lower-alpha, lower-roman, decimal) instead of forcing
decimal and using !important.


li.ordered.ql-indent-1 {
counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}
Expand All @@ -137,6 +141,10 @@
content: counter(list-2, lower-roman) '. ';
}

li.ql-indent-2 .ql-ui:before {
content: counter(list-2, decimal) '. ' !important;
}

li.ordered.ql-indent-2 {
counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}
Expand All @@ -149,6 +157,10 @@
content: counter(list-3, decimal) '. ';
}

li.ql-indent-3 .ql-ui:before {
content: counter(list-3, decimal) '. ' !important;
}

li.ordered.ql-indent-3 {
counter-reset: list-4 list-5 list-6 list-7 list-8 list-9;
}
Expand All @@ -161,6 +173,10 @@
content: counter(list-4, lower-alpha) '. ';
}

li.ql-indent-4 .ql-ui:before {
content: counter(list-4, decimal) '. ' !important;
}

li.ordered.ql-indent-4 {
counter-reset: list-5 list-6 list-7 list-8 list-9;
}
Expand All @@ -173,6 +189,10 @@
content: counter(list-5, lower-roman) '. ';
}

li.ql-indent-5 .ql-ui:before {
content: counter(list-5, decimal) '. ' !important;
}

li.ordered.ql-indent-5 {
counter-reset: list-6 list-7 list-8 list-9;
}
Expand All @@ -185,6 +205,10 @@
content: counter(list-6, decimal) '. ';
}

li.ql-indent-6 .ql-ui:before {
content: counter(list-6, decimal) '. ' !important;
}

li.ordered.ql-indent-6 {
counter-reset: list-7 list-8 list-9;
}
Expand All @@ -197,6 +221,10 @@
content: counter(list-7, lower-alpha) '. ';
}

li.ql-indent-7 .ql-ui:before {
content: counter(list-7, decimal) '. ' !important;
}

li.ordered.ql-indent-7 {
counter-reset: list-8 list-9;
}
Expand All @@ -209,6 +237,10 @@
content: counter(list-8, lower-roman) '. ';
}

li.ql-indent-8 .ql-ui:before {
content: counter(list-8, decimal) '. ' !important;
}

li.ordered.ql-indent-8 {
counter-reset: list-9;
}
Expand All @@ -221,6 +253,10 @@
content: counter(list-9, decimal) '. ';
}

li.ql-indent-9 .ql-ui:before {
content: counter(list-9, decimal) '. ' !important;
}

li.ql-direction-rtl {
&::before,
&.checked > .ql-ui,
Expand Down
Loading