fix(editor): render list markers in block editor web component

[rjvelazco]

Block Editor: list markers not rendering in the web component

Bullet and ordered lists rendered without markers (no bullets/numbers) in the new Block Editor when it runs as the dotcms-block-editor web component. Follow-up to #36235, found during the #35980 bug hunt.

Root cause

The editor was relying on the host page's Tailwind prose to render list markers — a fragile dependency for a web component meant to drop into arbitrary host pages. Two host-cascade effects defeated it:

1. Tailwind preflight resets ol, ul, menu { list-style: none } in @layer base. In the web-component build's layer order this beats prose, so <ul>/<ol> lost their markers.
2. The admin JSP additionally ships an unlayered li { list-style: none } set directly on the <li>, overriding the list-style-type the <li> would otherwise inherit from its list parent. On top of that, prose colors li::marker a light gray.

Proposed Changes

Add self-contained, unlayered list CSS to editor.component.css so markers render regardless of the host's Tailwind/prose setup (same pattern the file already uses for tables/code/figures):

• ul → disc, ol → decimal, with padding-left so the markers are visible (list-style-position: outside paints them in the indent).
• Nested-marker cycling: disc → circle → square.
• li { list-style: inherit } — re-derives the marker from the list parent, defeating the JSP's li { list-style: none }. .tiptap li (0,2,1) out-specifies JSP's li (0,0,1).
• li::marker { color: currentColor } — markers match the editor text instead of prose's gray.
• Tight li / li > p spacing so markers align with the first line of text.

Checklist

• Tests — N/A (no specs in new-block-editor; verified via build + manual)
• Translations — N/A (CSS only)
• Security Implications Contemplated — none (presentation-only)

Additional Info

• Scope: editor content lists (.tiptap ul/ol/li); unlayered so it wins over layered Tailwind resets in both the web-component (dotcms-block-editor) and Angular (dot-block-editor) hosts.
• Production build passes (nx run dotcms-block-editor:build --configuration=production); the bundle-budget line is a pre-existing warning unrelated to this change.

Video

video.mov

Related to #35980

This PR fixes: #35980

[claude]

Claude finished @rjvelazco's task in 46s —— View job

---

Rollback Safety Analysis

• Read rollback-unsafe categories reference
• Get full PR diff
• Analyze diff against all unsafe categories
• Apply appropriate label

Result: ✅ Safe To Rollback

This PR modifies a single file: core-web/libs/new-block-editor/src/lib/editor/editor.component.css (+57 lines, CSS only).

Analysis against all unsafe categories:

Category	Match?
C-1 Structural Data Model Change	❌ No DB changes
C-2 Elasticsearch Mapping Change	❌ No ES changes
C-3 Content JSON Model Version Bump	❌ No Java model changes
C-4 DROP TABLE/Column	❌ No SQL
H-1 One-Way Data Migration	❌ No data transformation
H-2 RENAME TABLE/COLUMN	❌ No schema changes
H-3 PK Restructuring	❌ No schema changes
H-4 New Field Type	❌ No new field types
H-5 Storage Provider Change	❌ No storage changes
H-6 DROP PROCEDURE/FUNCTION	❌ No SQL
H-7 NOT NULL Column Without Default	❌ No schema changes
H-8 VTL Viewtool Contract Change	❌ No Java/VTL changes
M-1 Non-Broadening Column Type Change	❌ No schema changes
M-2 Push Publishing Bundle Format	❌ No bundle changes
M-3 REST/GraphQL API Contract Change	❌ No API changes
M-4 OSGi Plugin API Breakage	❌ No interface changes

The change is pure presentation-layer CSS scoped to .tiptap list elements within the block editor web component. No database, Elasticsearch, API contracts, or data models are touched. Rolling back to the previous release simply removes these CSS rules, reverting list rendering to the prior (marker-less) state — no data loss or service degradation.

Label applied: AI: Safe To Rollback

[github-actions]

🤖 Bedrock Review — deepseek.v3.2

[🟡 Medium] core-web/libs/new-block-editor/src/lib/editor/editor.component.css:133-63 — The CSS changes rely on ::ng-deep which is deprecated and can cause view encapsulation issues in Angular. While this may be a necessary workaround for third-party library styling, its use should be minimized and documented.

---

_{Run: #27850268086 · tokens: in: 1159 · out: 74 · total: 1233}

[mergify]

Tick the box to add this pull request to the merge queue (same as @mergifyio queue).

• Queue this pull request